GridMeasurementHelper component to continuously measure grid cells

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

@@ -43,7 +43,7 @@ import {
   getStyleAttributesForFrameInAbsolutePosition,
   updateInsertionSubjectWithAttributes,
 } from './draw-to-insert-metastrategy'
-import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
@@ -132,13 +132,10 @@ const gridDrawToInsertStrategyInner =
       canvasState.propertyControlsInfo,
     )?.newParent.intendedParentPath
 
-    const { metadata: parent, customStrategyState: updatedCustomState } =
-      getMetadataWithGridCellBounds(
-        targetParent,
-        canvasState.startingMetadata,
-        interactionSession.latestMetadata,
-        customStrategyState,
-      )
+    const parent = MetadataUtils.findElementByElementPath(
+      canvasState.startingMetadata,
+      targetParent,
+    )
 
     if (targetParent == null || parent == null || !MetadataUtils.isGridLayoutedContainer(parent)) {
       return null
@@ -175,7 +172,6 @@ const gridDrawToInsertStrategyInner =
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
             [targetParent],
-            updatedCustomState ?? undefined,
           )
         }
 

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

@@ -710,62 +710,6 @@ export function getGridRelatedIndexes(params: {
   return expandedRelatedIndexes[params.index] ?? []
 }
 
-export function getMetadataWithGridCellBounds(
-  path: ElementPath | null | undefined,
-  startingMetadata: ElementInstanceMetadataMap,
-  latestMetadata: ElementInstanceMetadataMap,
-  customStrategyState: CustomStrategyState,
-): {
-  metadata: ElementInstanceMetadata | null
-  customStrategyState: CustomStrategyState | null
-} {
-  if (path == null) {
-    return {
-      metadata: null,
-      customStrategyState: null,
-    }
-  }
-
-  const fromStartingMetadata = MetadataUtils.findElementByElementPath(startingMetadata, path)
-
-  if (fromStartingMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
-    return {
-      metadata: fromStartingMetadata,
-      customStrategyState: null,
-    }
-  }
-
-  const fromStrategyState = customStrategyState.grid.metadataCacheForGrids[EP.toString(path)]
-  if (fromStrategyState != null) {
-    return {
-      metadata: fromStrategyState,
-      customStrategyState: null,
-    }
-  }
-
-  const fromLatestMetadata = MetadataUtils.findElementByElementPath(latestMetadata, path)
-  if (fromLatestMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
-    return {
-      metadata: fromLatestMetadata,
-      customStrategyState: {
-        ...customStrategyState,
-        grid: {
-          ...customStrategyState.grid,
-          metadataCacheForGrids: {
-            ...customStrategyState.grid.metadataCacheForGrids,
-            [EP.toString(path)]: fromLatestMetadata,
-          },
-        },
-      },
-    }
-  }
-
-  return {
-    metadata: fromStartingMetadata,
-    customStrategyState: null,
-  }
-}
-
 function getOriginalElementGridConfiguration(
   gridCellGlobalFrames: GridCellGlobalFrames,
   interactionData: DragInteractionData,

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

@@ -17,7 +17,6 @@ import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { propertyToSet, updateBulkProperties } from '../../commands/set-property-command'
-import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { ParentBounds } from '../../controls/parent-bounds'
@@ -39,7 +38,7 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import { getMetadataWithGridCellBounds, runGridRearrangeMove } from './grid-helpers'
+import { runGridRearrangeMove } from './grid-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
@@ -164,13 +163,10 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
-        const { metadata: grid, customStrategyState: updatedCustomState } =
-          getMetadataWithGridCellBounds(
-            newParent.intendedParentPath,
-            canvasState.startingMetadata,
-            interactionSession.latestMetadata,
-            customStrategyState,
-          )
+        const grid = MetadataUtils.findElementByElementPath(
+          canvasState.startingMetadata,
+          newParent.intendedParentPath,
+        )
 
         if (grid == null) {
           return strategyApplicationResult([], [newParent.intendedParentPath])
@@ -231,12 +227,6 @@ export function applyGridReparent(
           newParent.intendedParentPath,
         ])
 
-        const baseCustomState = updatedCustomState ?? customStrategyState
-        const customStrategyStatePatch = {
-          ...baseCustomState,
-          elementsToRerender: elementsToRerender,
-        }
-
         return strategyApplicationResult(
           [
             ...outcomes.flatMap((c) => c.commands),
@@ -245,7 +235,9 @@ export function applyGridReparent(
             setCursorCommand(CSSCursor.Reparent),
           ],
           elementsToRerender,
-          customStrategyStatePatch,
+          {
+            elementsToRerender: elementsToRerender,
+          },
         )
       },
     )

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

@@ -1,12 +1,10 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type { GridElementProperties, GridPosition } from '../../../../core/shared/element-template'
 import {
   type CanvasRectangle,
   isInfinityRectangle,
   rectangleIntersection,
 } from '../../../../core/shared/math-utils'
-import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
@@ -22,13 +20,12 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
-  customState,
 ) => {
   const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
   if (selectedElements.length !== 1) {
@@ -86,13 +83,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const { metadata: container, customStrategyState: updatedCustomState } =
-        getMetadataWithGridCellBounds(
-          EP.parentPath(selectedElement),
-          canvasState.startingMetadata,
-          interactionSession.latestMetadata,
-          customState,
-        )
+      const container = MetadataUtils.findElementByElementPath(
+        canvasState.startingMetadata,
+        EP.parentPath(selectedElement),
+      )
 
       if (container == null) {
         return emptyStrategyApplicationResult
@@ -123,7 +117,6 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
       return strategyApplicationResult(
         setGridPropsCommands(selectedElement, gridTemplate, gridProps),
         [parentGridPath],
-        updatedCustomState ?? undefined,
       )
     },
   }

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

@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import fastDeepEqual from 'fast-deep-equal'
 import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
 import { isStaticGridRepeat, printGridAutoOrTemplateBase } from '../../inspector/common/css-utils'
@@ -61,22 +62,72 @@ export function getNullableAutoOrTemplateBaseString(
   }
 }
 
-export type GridData = {
-  elementPath: ElementPath
+export type GridMeasurementHelperData = {
   frame: CanvasRectangle
   gridTemplateColumns: GridAutoOrTemplateBase | null
   gridTemplateRows: GridAutoOrTemplateBase | null
-  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
-  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
   gap: number | null
-  justifyContent: string | null
-  alignContent: string | null
   rowGap: number | null
   columnGap: number | null
+  justifyContent: string | null
+  alignContent: string | null
   padding: Sides
-  rows: number
   columns: number
   cells: number
+}
+
+export function useGridMeasurentHelperData(
+  elementPath: ElementPath,
+): GridMeasurementHelperData | null {
+  return useEditorState(
+    Substores.metadata,
+    (store) => {
+      const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath)
+
+      const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
+
+      if (
+        targetGridContainer == null ||
+        targetGridContainer.globalFrame == null ||
+        !isFiniteRectangle(targetGridContainer.globalFrame)
+      ) {
+        return null
+      }
+
+      const columns = getCellsCount(
+        targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
+      )
+      const rows = getCellsCount(
+        targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
+      )
+
+      return {
+        frame: targetGridContainer.globalFrame,
+        gridTemplateColumns:
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
+        gridTemplateRows:
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
+        gap: targetGridContainer.specialSizeMeasurements.gap,
+        rowGap: targetGridContainer.specialSizeMeasurements.rowGap,
+        columnGap: targetGridContainer.specialSizeMeasurements.columnGap,
+        justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
+        alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
+        padding: targetGridContainer.specialSizeMeasurements.padding,
+        columns: columns,
+        cells: rows * columns,
+      }
+    },
+    'useGridMeasurentHelperData',
+    fastDeepEqual, //TODO: this should not be needed, but it seems EditorStateKeepDeepEquality is not running, and metadata reference is always updated
+  )
+}
+
+export type GridData = GridMeasurementHelperData & {
+  elementPath: ElementPath
+  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
+  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
+  rows: number
+  cells: number
   metadata: ElementInstanceMetadata
 }
 
@@ -156,6 +207,12 @@ export const GridRowColumnResizingControls =
   )
 
 export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}`
+export const GridControlKey = (gridPath: ElementPath) => `grid-control-${EP.toString(gridPath)}`
+
+export const GridMeasurementHelpersKey = (gridPath: ElementPath) =>
+  `grid-measurement-helpers-${EP.toString(gridPath)}`
+export const GridMeasurementHelperKey = (gridPath: ElementPath) =>
+  `grid-measurement-helper-${EP.toString(gridPath)}`
 
 export interface GridControlProps {
   grid: GridData