Name memoized components

tldraw · Nov 6, 2021 · c7e11e5 · c7e11e5
1 parent 1ae5997
commit c7e11e5
Show file tree

Hide file tree

Showing 17 changed files with 327 additions and 303 deletions.
diff --git a/packages/core/src/components/bounds/bounds-bg.tsx b/packages/core/src/components/bounds/bounds-bg.tsx
@@ -11,7 +11,11 @@ interface BoundsBgProps {
   isHidden: boolean
 }
 
-export const BoundsBg = React.memo(({ bounds, rotation, isHidden }: BoundsBgProps): JSX.Element => {
+export const BoundsBg = React.memo(function BoundsBg({
+  bounds,
+  rotation,
+  isHidden,
+}: BoundsBgProps): JSX.Element {
   const events = useBoundsEvents()
 
   return (

diff --git a/packages/core/src/components/bounds/bounds.tsx b/packages/core/src/components/bounds/bounds.tsx
@@ -23,112 +23,110 @@ interface BoundsProps {
   children?: React.ReactNode
 }
 
-export const Bounds = React.memo(
-  ({
-    zoom,
-    bounds,
-    viewportWidth,
-    rotation,
-    isHidden,
-    isLocked,
-    hideCloneHandles,
-    hideRotateHandle,
-    hideBindingHandles,
-  }: BoundsProps): JSX.Element => {
-    // Touch target size
-    const targetSize = (viewportWidth < 768 ? 16 : 8) / zoom
-    // Handle size
-    const size = 8 / zoom
+export const Bounds = React.memo(function Bounds({
+  zoom,
+  bounds,
+  viewportWidth,
+  rotation,
+  isHidden,
+  isLocked,
+  hideCloneHandles,
+  hideRotateHandle,
+  hideBindingHandles,
+}: BoundsProps): JSX.Element {
+  // Touch target size
+  const targetSize = (viewportWidth < 768 ? 16 : 8) / zoom
+  // Handle size
+  const size = 8 / zoom
 
-    const smallDimension = Math.min(bounds.width, bounds.height) * zoom
-    // If the bounds are small, don't show the rotate handle
-    const showRotateHandle = !hideRotateHandle && !isHidden && !isLocked && smallDimension > 32
-    // If the bounds are very small, don't show the edge handles
-    const showEdgeHandles = !isHidden && !isLocked && smallDimension > 24
-    // If the bounds are very very small, don't show the corner handles
-    const showCornerHandles = !isHidden && !isLocked && smallDimension > 20
-    // If the bounds are very small, don't show the clone handles
-    const showCloneHandles = !hideCloneHandles && smallDimension > 24
+  const smallDimension = Math.min(bounds.width, bounds.height) * zoom
+  // If the bounds are small, don't show the rotate handle
+  const showRotateHandle = !hideRotateHandle && !isHidden && !isLocked && smallDimension > 32
+  // If the bounds are very small, don't show the edge handles
+  const showEdgeHandles = !isHidden && !isLocked && smallDimension > 24
+  // If the bounds are very very small, don't show the corner handles
+  const showCornerHandles = !isHidden && !isLocked && smallDimension > 20
+  // If the bounds are very small, don't show the clone handles
+  const showCloneHandles = !hideCloneHandles && smallDimension > 24
 
-    return (
-      <Container bounds={bounds} rotation={rotation}>
-        <SVGContainer>
-          <CenterHandle bounds={bounds} isLocked={isLocked} isHidden={isHidden} />
-          <EdgeHandle
+  return (
+    <Container bounds={bounds} rotation={rotation}>
+      <SVGContainer>
+        <CenterHandle bounds={bounds} isLocked={isLocked} isHidden={isHidden} />
+        <EdgeHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          edge={TLBoundsEdge.Top}
+          isHidden={!showEdgeHandles}
+        />
+        <EdgeHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          edge={TLBoundsEdge.Right}
+          isHidden={!showEdgeHandles}
+        />
+        <EdgeHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          edge={TLBoundsEdge.Bottom}
+          isHidden={!showEdgeHandles}
+        />
+        <EdgeHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          edge={TLBoundsEdge.Left}
+          isHidden={!showEdgeHandles}
+        />
+        <CornerHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          isHidden={isHidden || !showCornerHandles}
+          corner={TLBoundsCorner.TopLeft}
+        />
+        <CornerHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          isHidden={isHidden || !showCornerHandles}
+          corner={TLBoundsCorner.TopRight}
+        />
+        <CornerHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          isHidden={isHidden || !showCornerHandles}
+          corner={TLBoundsCorner.BottomRight}
+        />
+        <CornerHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          isHidden={isHidden || !showCornerHandles}
+          corner={TLBoundsCorner.BottomLeft}
+        />
+        {showRotateHandle && (
+          <RotateHandle
             targetSize={targetSize}
             size={size}
             bounds={bounds}
-            edge={TLBoundsEdge.Top}
             isHidden={!showEdgeHandles}
           />
-          <EdgeHandle
+        )}
+        {showCloneHandles && <CloneButtons bounds={bounds} targetSize={targetSize} size={size} />}
+        {!hideBindingHandles && (
+          <LinkHandle
             targetSize={targetSize}
             size={size}
             bounds={bounds}
-            edge={TLBoundsEdge.Right}
             isHidden={!showEdgeHandles}
           />
-          <EdgeHandle
-            targetSize={targetSize}
-            size={size}
-            bounds={bounds}
-            edge={TLBoundsEdge.Bottom}
-            isHidden={!showEdgeHandles}
-          />
-          <EdgeHandle
-            targetSize={targetSize}
-            size={size}
-            bounds={bounds}
-            edge={TLBoundsEdge.Left}
-            isHidden={!showEdgeHandles}
-          />
-          <CornerHandle
-            targetSize={targetSize}
-            size={size}
-            bounds={bounds}
-            isHidden={isHidden || !showCornerHandles}
-            corner={TLBoundsCorner.TopLeft}
-          />
-          <CornerHandle
-            targetSize={targetSize}
-            size={size}
-            bounds={bounds}
-            isHidden={isHidden || !showCornerHandles}
-            corner={TLBoundsCorner.TopRight}
-          />
-          <CornerHandle
-            targetSize={targetSize}
-            size={size}
-            bounds={bounds}
-            isHidden={isHidden || !showCornerHandles}
-            corner={TLBoundsCorner.BottomRight}
-          />
-          <CornerHandle
-            targetSize={targetSize}
-            size={size}
-            bounds={bounds}
-            isHidden={isHidden || !showCornerHandles}
-            corner={TLBoundsCorner.BottomLeft}
-          />
-          {showRotateHandle && (
-            <RotateHandle
-              targetSize={targetSize}
-              size={size}
-              bounds={bounds}
-              isHidden={!showEdgeHandles}
-            />
-          )}
-          {showCloneHandles && <CloneButtons bounds={bounds} targetSize={targetSize} size={size} />}
-          {!hideBindingHandles && (
-            <LinkHandle
-              targetSize={targetSize}
-              size={size}
-              bounds={bounds}
-              isHidden={!showEdgeHandles}
-            />
-          )}
-        </SVGContainer>
-      </Container>
-    )
-  }
-)
+        )}
+      </SVGContainer>
+    </Container>
+  )
+})
diff --git a/packages/core/src/components/bounds/center-handle.tsx b/packages/core/src/components/bounds/center-handle.tsx
@@ -7,19 +7,21 @@ export interface CenterHandleProps {
   isHidden: boolean
 }
 
-export const CenterHandle = React.memo(
-  ({ bounds, isLocked, isHidden }: CenterHandleProps): JSX.Element => {
-    return (
-      <rect
-        className={isLocked ? 'tl-bounds-center tl-dashed' : 'tl-bounds-center'}
-        x={-1}
-        y={-1}
-        width={bounds.width + 2}
-        height={bounds.height + 2}
-        opacity={isHidden ? 0 : 1}
-        pointerEvents="none"
-        aria-label="center handle"
-      />
-    )
-  }
-)
+export const CenterHandle = React.memo(function CenterHandle({
+  bounds,
+  isLocked,
+  isHidden,
+}: CenterHandleProps): JSX.Element {
+  return (
+    <rect
+      className={isLocked ? 'tl-bounds-center tl-dashed' : 'tl-bounds-center'}
+      x={-1}
+      y={-1}
+      width={bounds.width + 2}
+      height={bounds.height + 2}
+      opacity={isHidden ? 0 : 1}
+      pointerEvents="none"
+      aria-label="center handle"
+    />
+  )
+})
diff --git a/packages/core/src/components/bounds/corner-handle.tsx b/packages/core/src/components/bounds/corner-handle.tsx
@@ -17,35 +17,39 @@ interface CornerHandleProps {
   isHidden?: boolean
 }
 
-export const CornerHandle = React.memo(
-  ({ size, targetSize, isHidden, corner, bounds }: CornerHandleProps): JSX.Element => {
-    const events = useBoundsHandleEvents(corner)
+export const CornerHandle = React.memo(function CornerHandle({
+  size,
+  targetSize,
+  isHidden,
+  corner,
+  bounds,
+}: CornerHandleProps): JSX.Element {
+  const events = useBoundsHandleEvents(corner)
 
-    const isTop = corner === TLBoundsCorner.TopLeft || corner === TLBoundsCorner.TopRight
-    const isLeft = corner === TLBoundsCorner.TopLeft || corner === TLBoundsCorner.BottomLeft
+  const isTop = corner === TLBoundsCorner.TopLeft || corner === TLBoundsCorner.TopRight
+  const isLeft = corner === TLBoundsCorner.TopLeft || corner === TLBoundsCorner.BottomLeft
 
-    return (
-      <g opacity={isHidden ? 0 : 1}>
-        <rect
-          className={'tl-transparent ' + (isHidden ? '' : cornerBgClassnames[corner])}
-          aria-label="corner transparent"
-          x={(isLeft ? -1 : bounds.width + 1) - targetSize}
-          y={(isTop ? -1 : bounds.height + 1) - targetSize}
-          width={targetSize * 2}
-          height={targetSize * 2}
-          pointerEvents={isHidden ? 'none' : 'all'}
-          {...events}
-        />
-        <rect
-          className="tl-corner-handle"
-          aria-label="corner handle"
-          x={(isLeft ? -1 : bounds.width + 1) - size / 2}
-          y={(isTop ? -1 : bounds.height + 1) - size / 2}
-          width={size}
-          height={size}
-          pointerEvents="none"
-        />
-      </g>
-    )
-  }
-)
+  return (
+    <g opacity={isHidden ? 0 : 1}>
+      <rect
+        className={'tl-transparent ' + (isHidden ? '' : cornerBgClassnames[corner])}
+        aria-label="corner transparent"
+        x={(isLeft ? -1 : bounds.width + 1) - targetSize}
+        y={(isTop ? -1 : bounds.height + 1) - targetSize}
+        width={targetSize * 2}
+        height={targetSize * 2}
+        pointerEvents={isHidden ? 'none' : 'all'}
+        {...events}
+      />
+      <rect
+        className="tl-corner-handle"
+        aria-label="corner handle"
+        x={(isLeft ? -1 : bounds.width + 1) - size / 2}
+        y={(isTop ? -1 : bounds.height + 1) - size / 2}
+        width={size}
+        height={size}
+        pointerEvents="none"
+      />
+    </g>
+  )
+})
diff --git a/packages/core/src/components/bounds/edge-handle.tsx b/packages/core/src/components/bounds/edge-handle.tsx
@@ -17,27 +17,30 @@ interface EdgeHandleProps {
   isHidden: boolean
 }
 
-export const EdgeHandle = React.memo(
-  ({ size, isHidden, bounds, edge }: EdgeHandleProps): JSX.Element => {
-    const events = useBoundsHandleEvents(edge)
+export const EdgeHandle = React.memo(function EdgeHandle({
+  size,
+  isHidden,
+  bounds,
+  edge,
+}: EdgeHandleProps): JSX.Element {
+  const events = useBoundsHandleEvents(edge)
 
-    const isHorizontal = edge === TLBoundsEdge.Top || edge === TLBoundsEdge.Bottom
-    const isFarEdge = edge === TLBoundsEdge.Right || edge === TLBoundsEdge.Bottom
+  const isHorizontal = edge === TLBoundsEdge.Top || edge === TLBoundsEdge.Bottom
+  const isFarEdge = edge === TLBoundsEdge.Right || edge === TLBoundsEdge.Bottom
 
-    const { height, width } = bounds
+  const { height, width } = bounds
 
-    return (
-      <rect
-        pointerEvents={isHidden ? 'none' : 'all'}
-        className={'tl-transparent tl-edge-handle ' + (isHidden ? '' : edgeClassnames[edge])}
-        aria-label={`${edge} handle`}
-        opacity={isHidden ? 0 : 1}
-        x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
-        y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}
-        width={isHorizontal ? Math.max(0, width + 1 - size) : size}
-        height={isHorizontal ? size : Math.max(0, height + 1 - size)}
-        {...events}
-      />
-    )
-  }
-)
+  return (
+    <rect
+      pointerEvents={isHidden ? 'none' : 'all'}
+      className={'tl-transparent tl-edge-handle ' + (isHidden ? '' : edgeClassnames[edge])}
+      aria-label={`${edge} handle`}
+      opacity={isHidden ? 0 : 1}
+      x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
+      y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}
+      width={isHorizontal ? Math.max(0, width + 1 - size) : size}
+      height={isHorizontal ? size : Math.max(0, height + 1 - size)}
+      {...events}
+    />
+  )
+})