No more stateful grid strategies (#6490)

**Description:**
I removed custom state strategy usage from grid reparent strategy:
- the target cell was cached in custom strategy state to make sure we
can reparent over gaps between cells. I removed this and just reparent
into the closest cell.

Removed custom strategy state usage from grid controls, and moved the
necessary information to `EditorStateCanvasControls`. Instead of custom
strategy state patches i needed to return showGridControls commands.

Removed all fields from `GridCustomStrategyState` except
`metadataCacheForGrids`, which is still necessary

**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

editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts

@@ -14,8 +14,6 @@ import type { AllElementProps } from '../../editor/store/editor-state'
 import type { CanvasCommand } from '../commands/commands'
 import type { ActiveFrameAction } from '../commands/set-active-frames-command'
 import type { StrategyApplicationStatus } from './interaction-state'
-import type { TargetGridCellData } from './strategies/grid-helpers'
-import type { GridCellCoordinates } from './strategies/grid-cell-bounds'
 
 // TODO: fill this in, maybe make it an ADT for different strategies
 export interface CustomStrategyState {
@@ -29,8 +27,6 @@ export interface CustomStrategyState {
 }
 
 export type GridCustomStrategyState = {
-  targetCellData: TargetGridCellData | null
-  currentRootCell: GridCellCoordinates | null
   metadataCacheForGrids: { [gridPath: string]: ElementInstanceMetadata }
 }
 
@@ -45,8 +41,6 @@ export function defaultCustomStrategyState(): CustomStrategyState {
     elementsToRerender: [],
     action: null,
     grid: {
-      targetCellData: null,
-      currentRootCell: null,
       metadataCacheForGrids: {},
     },
   }

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

@@ -161,27 +161,21 @@ const gridDrawToInsertStrategyInner =
         const newTargetCell = getGridCellUnderMouseFromMetadata(parent, canvasPointToUse)
 
         if (strategyLifecycle === 'mid-interaction' && interactionData.type === 'HOVER') {
-          const baseCustomState = updatedCustomState ?? customStrategyState
-          const customStatePatch = {
-            ...baseCustomState,
-            grid: {
-              ...baseCustomState.grid,
-              // this is added here during the hover interaction so that
-              // `GridControls` can render the hover highlight based on the
-              // coordinates in `targetCellData`
-              targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
-            },
-          }
           return strategyApplicationResult(
             [
               wildcardPatch('mid-interaction', {
                 selectedViews: { $set: [] },
               }),
-              showGridControls('mid-interaction', targetParent),
+              showGridControls(
+                'mid-interaction',
+                targetParent,
+                newTargetCell?.gridCellCoordinates ?? null,
+                null,
+              ),
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
             [targetParent],
-            customStatePatch,
+            updatedCustomState ?? undefined,
           )
         }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -44,61 +44,52 @@ import {
 } from './grid-cell-bounds'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { assertNever } from '../../../../core/shared/utils'
-
-const emptyGridRearrangeMoveResult = {
-  commands: [],
-  targetCell: null,
-  targetRootCell: null,
-}
+import { showGridControls } from '../../commands/show-grid-controls-command'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
-): {
-  commands: CanvasCommand[]
-  targetCell: TargetGridCellData | null
-  targetRootCell: GridCellCoordinates | null
-} {
+): CanvasCommand[] {
   if (interactionData.drag == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const parentGridPath = EP.parentPath(selectedElement)
   const grid = MetadataUtils.findElementByElementPath(jsxMetadata, parentGridPath)
 
   if (grid == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
     grid.specialSizeMeasurements
   if (gridCellGlobalFrames == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
   const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
   const targetCellCoords = targetCellData?.gridCellCoordinates
   if (targetCellCoords == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const draggingFromCellCoords = getClosestGridCellToPoint(
     gridCellGlobalFrames,
     interactionData.dragStart,
   )?.gridCellCoordinates
   if (draggingFromCellCoords == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const originalElementMetadata = MetadataUtils.findElementByElementPath(
     jsxMetadata,
     selectedElement,
   )
   if (originalElementMetadata == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
@@ -180,18 +171,21 @@ export function runGridRearrangeMove(
     cellsSortedByPosition: cellsSortedByPosition,
   })
 
+  const updateGridControlsCommand = showGridControls(
+    'mid-interaction',
+    parentGridPath,
+    targetCellData?.gridCellCoordinates ?? null,
+    gridCellCoordinates(row, column),
+  )
+
   switch (moveType) {
     case 'absolute': {
       const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
         MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
         MetadataUtils.getFrameOrZeroRectInCanvasCoords(grid.elementPath, jsxMetadata),
         interactionData,
       )
-      return {
-        commands: absoluteMoveCommands,
-        targetCell: targetCellData,
-        targetRootCell: gridCellCoordinates(row, column),
-      }
+      return [...absoluteMoveCommands, updateGridControlsCommand]
     }
     case 'rearrange': {
       const targetRootCell = gridCellCoordinates(row, column)
@@ -204,36 +198,30 @@ export function runGridRearrangeMove(
               canvasRect,
               interactionData,
             )
-      return {
-        commands: [
-          ...gridCellMoveCommands,
-          ...absoluteMoveCommands,
-          reorderElement(
-            'always',
-            selectedElement,
-            absolute(Math.max(indexInSortedCellsForRearrange, 0)),
-          ),
-        ],
-        targetCell: targetCellData,
-        targetRootCell: gridCellCoordinates(row, column),
-      }
+      return [
+        ...gridCellMoveCommands,
+        ...absoluteMoveCommands,
+        reorderElement(
+          'always',
+          selectedElement,
+          absolute(Math.max(indexInSortedCellsForRearrange, 0)),
+        ),
+        updateGridControlsCommand,
+      ]
     }
     case 'reorder': {
-      return {
-        commands: [
-          reorderElement('always', selectedElement, absolute(possiblyReorderIndex)),
-          deleteProperties('always', selectedElement, [
-            PP.create('style', 'gridColumn'),
-            PP.create('style', 'gridRow'),
-            PP.create('style', 'gridColumnStart'),
-            PP.create('style', 'gridColumnEnd'),
-            PP.create('style', 'gridRowStart'),
-            PP.create('style', 'gridRowEnd'),
-          ]),
-        ],
-        targetCell: targetCellData,
-        targetRootCell: targetCellCoords,
-      }
+      return [
+        reorderElement('always', selectedElement, absolute(possiblyReorderIndex)),
+        deleteProperties('always', selectedElement, [
+          PP.create('style', 'gridColumn'),
+          PP.create('style', 'gridRow'),
+          PP.create('style', 'gridColumnStart'),
+          PP.create('style', 'gridColumnEnd'),
+          PP.create('style', 'gridRowStart'),
+          PP.create('style', 'gridRowEnd'),
+        ]),
+        updateGridControlsCommand,
+      ]
     }
     default:
       assertNever(moveType)

editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts

@@ -72,11 +72,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
 
       const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
 
-      const {
-        commands: moveCommands,
-        targetCell,
-        targetRootCell,
-      } = runGridRearrangeMove(
+      const moveCommands = runGridRearrangeMove(
         targetElement,
         selectedElement,
         canvasState.startingMetadata,
@@ -96,11 +92,6 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         ],
         [...selectedElements, targetElement],
         {
-          grid: {
-            ...customState.grid,
-            targetCellData: targetCell,
-            currentRootCell: targetRootCell,
-          },
           duplicatedElementNewUids: duplicatedElementNewUids,
         },
       )

editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts

@@ -135,7 +135,6 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
           ? getCommandsAndPatchForGridRearrange(
               canvasState,
               interactionSession.interactionData,
-              customState,
               selectedElement,
             )
           : getCommandsAndPatchForReparent(
@@ -165,7 +164,6 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
 function getCommandsAndPatchForGridRearrange(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
-  customState: CustomStrategyState,
   selectedElement: ElementPath,
 ): {
   commands: CanvasCommand[]
@@ -176,7 +174,7 @@ function getCommandsAndPatchForGridRearrange(
     return { commands: [], patch: {}, elementsToRerender: [] }
   }
 
-  const { commands, targetCell, targetRootCell } = runGridRearrangeMove(
+  const commands = runGridRearrangeMove(
     selectedElement,
     selectedElement,
     canvasState.startingMetadata,
@@ -185,13 +183,7 @@ function getCommandsAndPatchForGridRearrange(
 
   return {
     commands: commands,
-    patch: {
-      grid: {
-        ...customState.grid,
-        targetCellData: targetCell,
-        currentRootCell: targetRootCell,
-      },
-    },
+    patch: {},
     elementsToRerender: [EP.parentPath(selectedElement)],
   }
 }

editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx

@@ -45,7 +45,11 @@ import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-prop
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
-import { getGridCellUnderMouseFromMetadata, type GridCellCoordinates } from './grid-cell-bounds'
+import {
+  getClosestGridCellToPointFromMetadata,
+  getGridCellUnderMouseFromMetadata,
+  type GridCellCoordinates,
+} from './grid-cell-bounds'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
@@ -195,9 +199,7 @@ export function applyGridReparent(
           interactionData.drag ?? canvasVector({ x: 0, y: 0 }),
         )
 
-        const targetCellData =
-          getGridCellUnderMouseFromMetadata(grid, mousePos) ??
-          customStrategyState.grid.targetCellData
+        const targetCellData = getClosestGridCellToPointFromMetadata(grid, mousePos)
 
         if (targetCellData == null) {
           return strategyApplicationResult([], [newParent.intendedParentPath])
@@ -247,10 +249,6 @@ export function applyGridReparent(
         const customStrategyStatePatch = {
           ...baseCustomState,
           elementsToRerender: elementsToRerender,
-          grid: {
-            ...baseCustomState.grid,
-            targetCellData: targetCellData,
-          },
         }
 
         return strategyApplicationResult(
@@ -259,7 +257,12 @@ export function applyGridReparent(
             gridContainerCommands,
             updateSelectedViews('always', newPaths),
             setCursorCommand(CSSCursor.Reparent),
-            showGridControls('mid-interaction', reparentTarget.newParent.intendedParentPath),
+            showGridControls(
+              'mid-interaction',
+              reparentTarget.newParent.intendedParentPath,
+              targetCellData.gridCellCoordinates,
+              null,
+            ),
           ],
           elementsToRerender,
           customStrategyStatePatch,

editor/src/components/canvas/commands/show-grid-controls-command.ts

@@ -1,20 +1,27 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
 import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
+import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 
 export interface ShowGridControlsCommand extends BaseCommand {
   type: 'SHOW_GRID_CONTROLS'
   target: ElementPath
+  targetCell: GridCellCoordinates | null
+  rootCell: GridCellCoordinates | null
 }
 
 export function showGridControls(
   whenToRun: WhenToRun,
   target: ElementPath,
+  targetCell: GridCellCoordinates | null,
+  rootCell: GridCellCoordinates | null,
 ): ShowGridControlsCommand {
   return {
     type: 'SHOW_GRID_CONTROLS',
     whenToRun: whenToRun,
     target: target,
+    targetCell: targetCell,
+    rootCell: rootCell,
   }
 }
 
@@ -25,7 +32,13 @@ export const runShowGridControlsCommand: CommandFunction<ShowGridControlsCommand
   const editorStatePatch: EditorStatePatch = {
     canvas: {
       controls: {
-        gridControls: { $set: command.target },
+        gridControlData: {
+          $set: {
+            grid: command.target,
+            targetCell: command.targetCell,
+            rootCell: command.rootCell,
+          },
+        },
       },
     },
   }