[fix] Allows boundsDragEvents to fire even when hidden (#115)

* Allows boundsDragEvents to fire even when hidden

* Fix failing test

packages/core/src/components/bounds/bounds.test.tsx

@@ -11,6 +11,7 @@ describe('bounds', () => {
         rotation={0}
         viewportWidth={1000}
         isLocked={false}
+        isHidden={false}
       />
     )
   })

packages/core/src/components/bounds/bounds.tsx

@@ -13,6 +13,7 @@ interface BoundsProps {
   bounds: TLBounds
   rotation: number
   isLocked: boolean
+  isHidden: boolean
   viewportWidth: number
 }
 
@@ -21,6 +22,7 @@ export function Bounds({
   bounds,
   viewportWidth,
   rotation,
+  isHidden,
   isLocked,
 }: BoundsProps): JSX.Element {
   // Touch target size
@@ -36,33 +38,35 @@ export function Bounds({
 
   return (
     <Container bounds={bounds} rotation={rotation}>
-      <SVGContainer>
+      <SVGContainer opacity={isHidden ? 0 : 1}>
         <CenterHandle bounds={bounds} isLocked={isLocked} />
-        {showHandles && (
-          <>
         <EdgeHandle
           targetSize={targetSize}
           size={size}
           bounds={bounds}
           edge={TLBoundsEdge.Top}
+          isHidden={!showHandles}
         />
         <EdgeHandle
           targetSize={targetSize}
           size={size}
           bounds={bounds}
           edge={TLBoundsEdge.Right}
+          isHidden={!showHandles}
         />
         <EdgeHandle
           targetSize={targetSize}
           size={size}
           bounds={bounds}
           edge={TLBoundsEdge.Bottom}
+          isHidden={!showHandles}
         />
         <EdgeHandle
           targetSize={targetSize}
           size={size}
           bounds={bounds}
           edge={TLBoundsEdge.Left}
+          isHidden={!showHandles}
         />
         <CornerHandle
           targetSize={targetSize}
@@ -88,11 +92,12 @@ export function Bounds({
           bounds={bounds}
           corner={TLBoundsCorner.BottomLeft}
         />
-            {showRotateHandle && (
-              <RotateHandle targetSize={targetSize} size={size} bounds={bounds} />
-            )}
-          </>
-        )}
+        <RotateHandle
+          targetSize={targetSize}
+          size={size}
+          bounds={bounds}
+          isHidden={!showHandles || !showRotateHandle}
+        />
       </SVGContainer>
     </Container>
   )

packages/core/src/components/bounds/corner-handle.tsx

@@ -14,25 +14,25 @@ interface CornerHandleProps {
   targetSize: number
   bounds: TLBounds
   corner: TLBoundsCorner
+  isHidden?: boolean
 }
 
 export const CornerHandle = React.memo(
-  ({ size, targetSize, corner, bounds }: CornerHandleProps): JSX.Element => {
+  ({ 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
 
     return (
-      <g>
+      <g opacity={isHidden ? 0 : 1}>
         <rect
           className={cornerBgClassnames[corner]}
           x={(isLeft ? -1 : bounds.width + 1) - targetSize}
           y={(isTop ? -1 : bounds.height + 1) - targetSize}
           width={targetSize * 2}
           height={targetSize * 2}
-          pointerEvents="all"
-          fill="red"
+          pointerEvents={isHidden ? 'none' : 'all'}
           {...events}
         />
         <rect

packages/core/src/components/bounds/edge-handle.tsx

@@ -14,9 +14,11 @@ interface EdgeHandleProps {
   size: number
   bounds: TLBounds
   edge: TLBoundsEdge
+  isHidden: boolean
 }
 
-export const EdgeHandle = React.memo(({ size, bounds, edge }: EdgeHandleProps): JSX.Element => {
+export const EdgeHandle = React.memo(
+  ({ size, isHidden, bounds, edge }: EdgeHandleProps): JSX.Element => {
     const events = useBoundsHandleEvents(edge)
 
     const isHorizontal = edge === TLBoundsEdge.Top || edge === TLBoundsEdge.Bottom
@@ -26,8 +28,9 @@ export const EdgeHandle = React.memo(({ size, bounds, edge }: EdgeHandleProps):
 
     return (
       <rect
-      pointerEvents="all"
+        pointerEvents={isHidden ? 'none' : 'all'}
         className={edgeClassnames[edge]}
+        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}
@@ -35,4 +38,5 @@ export const EdgeHandle = React.memo(({ size, bounds, edge }: EdgeHandleProps):
         {...events}
       />
     )
-})
+  }
+)

packages/core/src/components/bounds/rotate-handle.tsx

@@ -6,20 +6,21 @@ interface RotateHandleProps {
   bounds: TLBounds
   size: number
   targetSize: number
+  isHidden: boolean
 }
 
 export const RotateHandle = React.memo(
-  ({ bounds, targetSize, size }: RotateHandleProps): JSX.Element => {
+  ({ bounds, targetSize, size, isHidden }: RotateHandleProps): JSX.Element => {
     const events = useBoundsHandleEvents('rotate')
 
     return (
-      <g cursor="grab">
+      <g cursor="grab" opacity={isHidden ? 0 : 1}>
         <circle
           className="tl-transparent"
           cx={bounds.width / 2}
           cy={size * -2}
           r={targetSize}
-          pointerEvents="all"
+          pointerEvents={isHidden ? 'none' : 'all'}
           {...events}
         />
         <circle

packages/core/src/components/page/page.tsx

@@ -55,13 +55,14 @@ export function Page<T extends TLShape, M extends Record<string, unknown>>({
       {shapeTree.map((node) => (
         <ShapeNode key={node.shape.id} utils={shapeUtils} {...node} />
       ))}
-      {bounds && !hideBounds && (
+      {bounds && (
         <Bounds
           zoom={zoom}
           bounds={bounds}
           viewportWidth={inputs.bounds.width}
           isLocked={isLocked}
           rotation={rotation}
+          isHidden={hideBounds}
         />
       )}
       {!hideIndicators &&