Only show grid lines when selecting grid or during child interaction

editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts

@@ -43,6 +43,14 @@ export async function runGridMoveTest(
           props.draggedCell.column,
         ),
   )
+
+  const sourceRect = sourceGridCell.getBoundingClientRect()
+  const dragFrom = {
+    x: sourceRect.x + 10,
+    y: sourceRect.y + 10,
+  }
+  await mouseDownAtPoint(sourceGridCell, dragFrom)
+
   const targetGridCell = editor.renderedDOM.getByTestId(
     gridCellTargetId(
       EP.fromString('sb/scene/grid'),
@@ -51,13 +59,8 @@ export async function runGridMoveTest(
     ),
   )
 
-  const sourceRect = sourceGridCell.getBoundingClientRect()
   const targetRect = targetGridCell.getBoundingClientRect()
 
-  const dragFrom = {
-    x: sourceRect.x + 10,
-    y: sourceRect.y + 10,
-  }
   const endPoint = getRectCenter(
     localRectangle({
       x: targetRect.x,
@@ -67,7 +70,6 @@ export async function runGridMoveTest(
     }),
   )
 
-  await mouseDownAtPoint(sourceGridCell, dragFrom)
   await mouseMoveToPoint(sourceGridCell, endPoint)
   if (props.tab) {
     await keyDown('Tab')

editor/src/components/canvas/controls/grid-controls.tsx

@@ -535,6 +535,8 @@ export const GridRowColumnResizingControlsComponent = ({
     'GridRowColumnResizingControls scale',
   )
 
+  const isSelectedGridItemWithoutInteraction = useIsSelectedGridItemWithoutInteraction()
+
   const gridsWithVisibleResizeControls = React.useMemo(() => {
     return grids.filter((grid) => {
       if (
@@ -570,6 +572,9 @@ export const GridRowColumnResizingControlsComponent = ({
   return (
     <CanvasOffsetWrapper>
       {gridsWithVisibleResizeControls.flatMap((grid) => {
+        if (isSelectedGridItemWithoutInteraction(grid)) {
+          return null
+        }
         return (
           <GridResizing
             key={`grid-resizing-column-${EP.toString(grid.identifier.path)}`}
@@ -590,6 +595,9 @@ export const GridRowColumnResizingControlsComponent = ({
         )
       })}
       {gridsWithVisibleResizeControls.flatMap((grid) => {
+        if (isSelectedGridItemWithoutInteraction(grid)) {
+          return null
+        }
         return (
           <GridResizing
             key={`grid-resizing-row-${EP.toString(grid.identifier.path)}`}
@@ -1125,6 +1133,8 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
 
   const gridsWithVisibleControls: Array<GridIdentifier> = [...targets, ...hoveredGrids]
 
+  const isSelectedGridItemWithoutInteraction = useIsSelectedGridItemWithoutInteraction()
+
   // Uniqify the grid paths, and then sort them by depth.
   // With the lowest depth grid at the end so that it renders on top and catches the events
   // before those above it in the hierarchy.
@@ -1144,14 +1154,18 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     <div id={'grid-controls'}>
       <CanvasOffsetWrapper>
         {grids.map((grid) => {
-          const gridPath =
-            grid.identifier.type === 'GRID_CONTAINER'
-              ? grid.identifier.path
-              : EP.parentPath(grid.identifier.path)
-          const shouldHaveVisibleControls = gridsWithVisibleControls.some((g) => {
-            const visibleControlPath = g.type === 'GRID_CONTAINER' ? g.path : EP.parentPath(g.path)
-            return EP.pathsEqual(gridPath, visibleControlPath)
-          })
+          const shouldHaveVisibleControls =
+            !isSelectedGridItemWithoutInteraction(grid) &&
+            gridsWithVisibleControls.some((g) => {
+              const gridPath =
+                grid.identifier.type === 'GRID_CONTAINER'
+                  ? grid.identifier.path
+                  : EP.parentPath(grid.identifier.path)
+
+              const visibleControlPath =
+                g.type === 'GRID_CONTAINER' ? g.path : EP.parentPath(g.path)
+              return EP.pathsEqual(gridPath, visibleControlPath)
+            })
 
           return (
             <GridControl
@@ -2078,3 +2092,36 @@ function useAllGrids(metadata: ElementInstanceMetadataMap) {
     return MetadataUtils.getAllGrids(metadata)
   }, [metadata])
 }
+
+function useIsSelectedGridItemWithoutInteraction() {
+  const selectedViewsRef = useRefEditorState((store) => store.editor.selectedViews)
+
+  const isItemInteractionActive = useEditorState(
+    Substores.canvas,
+    (store) => {
+      if (store.editor.canvas.interactionSession == null) {
+        return false
+      }
+      return (
+        // movement
+        store.editor.canvas.interactionSession.activeControl.type === 'GRID_CELL_HANDLE' ||
+        // resize (cell)
+        store.editor.canvas.interactionSession.activeControl.type === 'GRID_RESIZE_HANDLE' ||
+        // resize (abs)
+        store.editor.canvas.interactionSession.activeControl.type === 'RESIZE_HANDLE'
+      )
+    },
+    'useShouldHaveVisibleControls isItemInteractionActive',
+  )
+
+  return React.useCallback(
+    (grid: GridData) => {
+      const gridItemSelected = selectedViewsRef.current.some((path) =>
+        EP.isDescendantOf(path, grid.identifier.path),
+      )
+
+      return gridItemSelected && !isItemInteractionActive
+    },
+    [isItemInteractionActive, selectedViewsRef],
+  )
+}