Only show grid lines when selecting grid or during child interaction (#6647)

**Problem:**

Grid lines are shown all the time whether a grid or a grid child is
selected. The grid sizing pills are also shown all the time.

**Fix:**

Only show the grid lines if:
- the grid itself is selected
- a grid child is selected **and** an interaction is in progress

Only show the grid sizing pills if:
- the grid itself is selected

**Note:** I enabled the grid lines also for absolute resize of grid
children because they can be affected by the grid so I thought it would
be good to have them, but lmk if you feel otherwise.


https://github.com/user-attachments/assets/eba83673-fe5d-43a2-8dcf-aba7bcc2cca1



Fixes #6645

Author: ruggi

editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx

@@ -1,16 +1,10 @@
 import * as EP from '../../../../core/shared/element-path'
-import {
-  getRectCenter,
-  localRectangle,
-  offsetPoint,
-  windowPoint,
-} from '../../../../core/shared/math-utils'
+import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import { gridCellTargetId } from './grid-cell-bounds'
 import { runGridMoveTest } from './grid.test-utils'
 
 describe('grid element change location strategy', () => {
@@ -22,7 +16,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -52,7 +46,7 @@ describe('grid element change location strategy', () => {
         editor,
         {
           scale: 1,
-          pathString: `sb/scene/grid/${testId}`,
+          gridPath: 'sb/scene/grid',
           testId: testId,
         },
       )
@@ -79,7 +73,7 @@ describe('grid element change location strategy', () => {
         editor,
         {
           scale: 1,
-          pathString: `sb/scene/grid/${testId}`,
+          gridPath: 'sb/scene/grid',
           testId: testId,
         },
         (ed) => {
@@ -109,7 +103,7 @@ describe('grid element change location strategy', () => {
         editor,
         {
           scale: 1,
-          pathString: `sb/scene/grid/${testId}`,
+          gridPath: 'sb/scene/grid/',
           testId: testId,
         },
       )
@@ -131,7 +125,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         targetCell: { row: 2, column: 1 },
         draggedCell: { row: 2, column: 2 },
@@ -153,7 +147,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         tab: true,
       },
@@ -178,7 +172,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         targetCell: { row: 3, column: 1 },
       },
@@ -200,7 +194,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 0.5,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -220,7 +214,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 2,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -243,7 +237,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -267,7 +261,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -291,7 +285,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         targetCell: { row: 3, column: 2 },
       },
@@ -316,7 +310,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -340,7 +334,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -366,8 +360,6 @@ export var storyboard = (
       data-testid='grid'
       style={{
         position: 'absolute',
-        left: -94,
-        top: 698,
         display: 'grid',
         gap: 10,
         width: 600,
@@ -428,33 +420,11 @@ export var storyboard = (
       )
 
       const testId = 'grid-inside-grid'
-      const elementPathToDrag = EP.fromString(`sb/grid/${testId}`)
-
-      await selectComponentsForTest(editor, [elementPathToDrag])
-
-      const sourceGridCell = editor.renderedDOM.getByTestId(GridCellTestId(elementPathToDrag))
-      const targetGridCell = editor.renderedDOM.getByTestId(
-        gridCellTargetId(EP.fromString('sb/grid'), 2, 3),
-      )
-
-      const sourceRect = sourceGridCell.getBoundingClientRect()
-      const targetRect = targetGridCell.getBoundingClientRect()
-
-      const dragFrom = {
-        x: sourceRect.x + 10,
-        y: sourceRect.y + 10,
-      }
-      const dragTo = getRectCenter(
-        localRectangle({
-          x: targetRect.x,
-          y: targetRect.y,
-          width: targetRect.width,
-          height: targetRect.height,
-        }),
-      )
-      await mouseDownAtPoint(sourceGridCell, dragFrom)
-      await mouseMoveToPoint(sourceGridCell, dragTo)
-      await mouseUpAtPoint(sourceGridCell, dragTo)
+      await runGridMoveTest(editor, {
+        scale: 1,
+        gridPath: 'sb/grid',
+        testId: testId,
+      })
 
       const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
         editor.renderedDOM.getByTestId(testId).style

editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx

@@ -6,6 +6,7 @@ import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import { runGridMoveTest } from './grid.test-utils'
 import * as EP from '../../../../core/shared/element-path'
+import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 
 describe('grid reorder', () => {
   it('reorders an element without setting positioning (inside contiguous area)', async () => {
@@ -111,6 +112,8 @@ describe('grid reorder', () => {
 
     expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
 
+    await selectComponentsForTest(editor, [])
+
     const second = await runReorderTest(
       editor,
       'sb/scene/grid',
@@ -242,7 +245,7 @@ describe('grid reorder', () => {
 
 async function runReorderTest(
   editor: EditorRenderResult,
-  gridTestId: string,
+  gridPath: string,
   testId: string,
   targetCell: GridCellCoordinates,
   options?: { tab?: boolean },
@@ -251,22 +254,22 @@ async function runReorderTest(
     editor,
     {
       scale: 1,
-      pathString: `${gridTestId}/${testId}`,
+      gridPath: gridPath,
       testId: testId,
       targetCell: targetCell,
       tab: options?.tab,
     },
   )
 
-  const element = editor.getEditorState().editor.jsxMetadata[gridTestId]
-  if (isLeft(element.element) || !isJSXElement(element.element.value)) {
+  const grid = editor.getEditorState().editor.jsxMetadata[gridPath]
+  if (isLeft(grid.element) || !isJSXElement(grid.element.value)) {
     throw new Error('expected jsx element')
   }
 
   const cells = MetadataUtils.getChildrenOrdered(
     editor.getEditorState().editor.jsxMetadata,
     editor.getEditorState().editor.elementPathTree,
-    element.elementPath,
+    EP.fromString(gridPath),
   )
 
   return {

editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx

@@ -15,7 +15,7 @@ import {
   offsetPoint,
 } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
-import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
+import { mouseDownAtPoint, mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridResizeEdge } from '../interaction-state'
@@ -34,6 +34,9 @@ async function runCellResizeTest(
   const resizeControl = editor.renderedDOM.getByTestId(
     ResizePointTestId(gridEdgeToEdgePosition(edge)),
   )
+
+  const resizeControlBox = resizeControl.getBoundingClientRect()
+  await mouseDownAtPoint(resizeControl, { x: resizeControlBox.x + 5, y: resizeControlBox.y + 5 })
   const targetGridCell = editor.renderedDOM.getByTestId(dragToCellTestId)
 
   await mouseDragFromPointToPoint(