Grid component support preparation

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,
               ),