Grid component support preparation (#6636)

**Problem:**
This PR is a preparation step to support strategies for grid items in
the following scenario:

- the grid is in a component
- the grid renders the component's children
- the grid is not the root element of the component

The main issue is that we still identify the grid control using the
element path of the grid, even though that grid doesn't have a path in
this case. We need to be able to show and manage a grid control using
the element path of one of its items.

**Fix:**
Instead of storing the element path of the `GridControlData`, I
introduced a new type `GridIdentifier` which can identify a grid either
by its container element path, or an item's element path.

I updated the strategies and commands to use this grid identifier, and
also made sure the strategies for grid items identify using the item,
and do not refer to the parent path as the grid. (For reparent we can
not really do that, because the item is not in the grid yet. Solving
that is not in scope now).

What is missing:
I still use mostly the old control implementations, it only works now
because the `useGridData` hook converts GridItemIdentifier-s to a
GridContainerIdentifier-s (using parentPath). So this PR is just a
preparation, it does not solve the component problem yet. Next step is
to make sure the control can render on the parent element when it
receives a GridItemIdentifier.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Author: gbalint

editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx

@@ -7,6 +7,7 @@ import type {
   EditorState,
   EditorStatePatch,
   EditorStorePatched,
+  GridIdentifier,
 } from '../../editor/store/editor-state'
 import { Substores, useEditorState, useSelectorWithCallback } from '../../editor/store/store-hook'
 import type {
@@ -676,7 +677,7 @@ export function combineApplicableControls(
   }
 
   // Sift the instances of `GridControls`, storing their targets by when they should be shown.
-  let gridControlsTargets: Map<WhenToShowControl, Array<ElementPath>> = new Map()
+  let gridControlsTargets: Map<WhenToShowControl, Array<GridIdentifier>> = new Map()
   for (const control of gridControlsInstances) {
     if (isGridControlsProps(control.props)) {
       const possibleTargets = gridControlsTargets.get(control.show)

editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx

@@ -13,7 +13,7 @@ import {
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { styleStringInArray } from '../../../../utils/common-constants'
-import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { gridItemIdentifier, trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
 import type { EdgePosition } from '../../canvas-types'
@@ -122,7 +122,7 @@ export function basicResizeStrategy(
         key: 'parent-bounds-control',
         show: 'visible-only-while-active',
       }),
-      ...(isGridCell ? [controlsForGridPlaceholders(EP.parentPath(selectedElement))] : []),
+      ...(isGridCell ? [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))] : []),
     ],
     fitness:
       interactionSession != null &&

editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts

@@ -1,7 +1,6 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { generateUidWithExistingComponents } from '../../../../core/model/element-template-utils'
 import * as EP from '../../../../core/shared/element-path'
-import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { CSSCursor } from '../../../../uuiui-deps'
 import { duplicateElement } from '../../commands/duplicate-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -19,11 +18,11 @@ import {
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
 import {
-  findOriginalGrid,
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
 } from './grid-helpers'
 import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -72,22 +71,6 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
   return {
     id: 'grid-change-element-location-duplicate-strategy',
     name: 'Change Location (Duplicate)',
@@ -96,7 +79,7 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
+    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 3),
     apply: () => {
       if (
@@ -117,8 +100,7 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
         duplicatedElementNewUids[oldUid] = newUid
       }
 
-      const targetElement = EP.appendToPath(parentGridPath, newUid)
-
+      const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
       const { parentGridCellGlobalFrames, parentContainerGridProperties } =
         selectedElementMetadata.specialSizeMeasurements
       if (parentGridCellGlobalFrames == null) {
@@ -129,14 +111,13 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
         canvasState.startingMetadata,
         interactionSession.interactionData,
         selectedElementMetadata,
-        parentGridPath,
         parentGridCellGlobalFrames,
         parentContainerGridProperties,
         null,
       )
 
       const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
-        parentGridPath,
+        EP.parentPath(selectedElement), // TODO: don't use EP.parentPath
         initialTemplates,
       )
 

editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts

@@ -10,9 +10,10 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { findOriginalGrid, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export function gridChangeElementLocationResizeKeyboardStrategy(
   canvasState: InteractionCanvasState,
@@ -41,11 +42,6 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
     return null
   }
 
-  const parentGridPath = findOriginalGrid(canvasState.startingMetadata, EP.parentPath(target)) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
   const gridTemplate = cell.specialSizeMeasurements.parentContainerGridProperties
   const gridCellGlobalFrames = cell.specialSizeMeasurements.parentGridCellGlobalFrames
 
@@ -72,7 +68,7 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
       category: 'modalities',
       type: 'reorder-large',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
+    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(target))],
     fitness: fitness(interactionSession),
     apply: () => {
       if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') {
@@ -131,7 +127,7 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
           gridRowStart,
           gridRowEnd,
         }),
-        [parentGridPath],
+        [EP.parentPath(target)],
       )
     },
   }

editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts

@@ -26,7 +26,6 @@ import {
 import type { DragInteractionData, InteractionSession } from '../interaction-state'
 import type { GridCellGlobalFrames, SortableGridElementProperties } from './grid-helpers'
 import {
-  findOriginalGrid,
   getOriginalElementGridConfiguration,
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
@@ -41,6 +40,7 @@ import {
   fromTypeGuard,
 } from '../../../../core/shared/optics/optic-creators'
 import { getJSXAttributesAtPath } from '../../../..//core/shared/jsx-attribute-utils'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -88,22 +88,6 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
   if (MetadataUtils.isPositionAbsolute(selectedElementMetadata)) {
     return null
   }
@@ -116,7 +100,9 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+    ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {
       if (
@@ -132,14 +118,13 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
         canvasState,
         interactionSession.interactionData,
         selectedElement,
-        parentGridPath,
       )
       if (commands.length === 0) {
         return emptyStrategyApplicationResult
       }
 
       const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
-        parentGridPath,
+        EP.parentPath(selectedElement), // TODO: don't use EP.parentPath
         initialTemplates,
       )
 
@@ -155,7 +140,6 @@ function getCommandsAndPatchForGridChangeElementLocation(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   selectedElement: ElementPath,
-  gridPath: ElementPath,
 ): {
   commands: CanvasCommand[]
   elementsToRerender: ElementPath[]
@@ -182,23 +166,21 @@ function getCommandsAndPatchForGridChangeElementLocation(
     canvasState.startingMetadata,
     interactionData,
     selectedElementMetadata,
-    gridPath,
     parentGridCellGlobalFrames,
     parentContainerGridProperties,
     null,
   )
 
   return {
     commands: commands,
-    elementsToRerender: [gridPath, selectedElement],
+    elementsToRerender: [EP.parentPath(selectedElement), selectedElement],
   }
 }
 
 export function runGridChangeElementLocation(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
-  gridPath: ElementPath,
   gridCellGlobalFrames: GridCellGlobalFrames,
   gridTemplate: GridContainerProperties,
   newPathAfterReparent: ElementPath | null,
@@ -298,7 +280,10 @@ export function runGridChangeElementLocation(
   })
 
   // The siblings of the grid element being moved
-  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
+  const siblings = MetadataUtils.getSiblingsUnordered(
+    jsxMetadata,
+    newPathAfterReparent ?? selectedElementMetadata.elementPath,
+  )
     .filter((s) => !EP.pathsEqual(s.elementPath, selectedElementMetadata.elementPath))
     .map(
       (s, index): SortableGridElementProperties => ({
@@ -333,7 +318,7 @@ export function runGridChangeElementLocation(
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
-    gridPath,
+    gridItemIdentifier(selectedElementMetadata.elementPath),
     targetCellCoords,
     targetRootCell,
   )

editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx

@@ -48,6 +48,7 @@ import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helper
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
 import { nukeAllAbsolutePositioningPropsCommands } from '../../../inspector/inspector-common'
+import { gridContainerIdentifier } from '../../../editor/store/editor-state'
 
 export const gridDrawToInsertText: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -149,7 +150,7 @@ const gridDrawToInsertStrategyInner =
         category: 'tools',
         type: 'pointer',
       },
-      controlsToRender: [controlsForGridPlaceholders(targetParent)],
+      controlsToRender: [controlsForGridPlaceholders(gridContainerIdentifier(targetParent))],
       fitness: 5,
       apply: (strategyLifecycle) => {
         const canvasPointToUse =
@@ -165,7 +166,7 @@ const gridDrawToInsertStrategyInner =
               }),
               showGridControls(
                 'mid-interaction',
-                targetParent,
+                gridContainerIdentifier(targetParent),
                 newTargetCell?.gridCellCoordinates ?? null,
                 null,
               ),