First commit

concrete-utopia · Oct 25, 2024 · 124da3f · 124da3f
1 parent b6297d9
commit 124da3f
Show file tree

Hide file tree

Showing 11 changed files with 303 additions and 141 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -95,14 +95,14 @@ export function getClosestGridCellToPoint(
 
 export function getGridChildCellCoordBoundsFromCanvas(
   child: ElementInstanceMetadata,
-  grid: ElementInstanceMetadata,
+  gridCellGlobalFrames: GridCellGlobalFrames,
 ) {
   const cellFrame = child.globalFrame
-  if (cellFrame == null || isInfinityRectangle(cellFrame)) {
+  if (cellFrame == null || isInfinityRectangle(cellFrame) || gridCellGlobalFrames == null) {
     return null
   }
 
-  const cellOrigin = getClosestGridCellToPointFromMetadata(grid, cellFrame)
+  const cellOrigin = getClosestGridCellToPoint(gridCellGlobalFrames, cellFrame)
   if (cellOrigin == null) {
     return null
   }
@@ -114,7 +114,7 @@ export function getGridChildCellCoordBoundsFromCanvas(
       y: cellFrame.height,
     }),
   )
-  const cellEnd = getClosestGridCellToPointFromMetadata(grid, cellEndPoint)
+  const cellEnd = getClosestGridCellToPoint(gridCellGlobalFrames, cellEndPoint)
   if (cellEnd == null) {
     return null
   }

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -34,7 +34,6 @@ import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { setProperty } from '../../commands/set-property-command'
-import type { CustomStrategyState } from '../canvas-strategy-types'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import {
@@ -51,21 +50,21 @@ export function runGridRearrangeMove(
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
-  grid: ElementInstanceMetadata,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  gridTemplate: GridContainerProperties,
   newPathAfterReparent?: ElementPath,
 ): CanvasCommand[] {
   if (interactionData.drag == null) {
     return []
   }
 
-  const isReparent = newPathAfterReparent != null
-
-  const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
-    grid.specialSizeMeasurements
-  if (gridCellGlobalFrames == null) {
+  const originalElement = MetadataUtils.findElementByElementPath(jsxMetadata, selectedElement)
+  if (originalElement == null) {
     return []
   }
 
+  const isReparent = newPathAfterReparent != null
+
   const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
   const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
   const targetCellCoords = targetCellData?.gridCellCoordinates
@@ -75,30 +74,23 @@ export function runGridRearrangeMove(
 
   const originalElementGridConfiguration = isReparent
     ? {
-        originalElementMetadata: null,
         originalCellBounds: { width: 1, height: 1 }, //when reparenting, we just put it in a single cell
         mouseCellPosInOriginalElement: { row: 0, column: 0 },
       }
-    : getOriginalElementGridConfiguration(
-        gridCellGlobalFrames,
-        interactionData,
-        jsxMetadata,
-        selectedElement,
-        grid,
-      )
+    : getOriginalElementGridConfiguration(gridCellGlobalFrames, interactionData, originalElement)
   if (originalElementGridConfiguration == null) {
     return []
   }
 
-  const { originalElementMetadata, originalCellBounds, mouseCellPosInOriginalElement } =
-    originalElementGridConfiguration
+  const { originalCellBounds, mouseCellPosInOriginalElement } = originalElementGridConfiguration
 
   // get the new adjusted row
   const row = Math.max(targetCellCoords.row - mouseCellPosInOriginalElement.row, 1)
   // get the new adjusted column
   const column = Math.max(targetCellCoords.column - mouseCellPosInOriginalElement.column, 1)
 
   const pathForCommands = newPathAfterReparent ?? targetElement // when reparenting, we want to use the new path for commands
+  const gridPath = EP.parentPath(pathForCommands)
 
   const gridCellMoveCommands = setGridPropsCommands(pathForCommands, gridTemplate, {
     gridColumnStart: gridPositionValue(column),
@@ -120,7 +112,7 @@ export function runGridRearrangeMove(
   })
 
   // The siblings of the grid element being moved
-  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, grid.elementPath)
+  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
     .filter((s) => !EP.pathsEqual(s.elementPath, selectedElement))
     .map(
       (s, index): SortableGridElementProperties => ({
@@ -152,14 +144,15 @@ export function runGridRearrangeMove(
 
   const moveType = getGridMoveType({
     elementPath: targetElement,
-    originalElementMetadata: originalElementMetadata,
+    originalElementMetadata: originalElement,
     possiblyReorderIndex: possiblyReorderIndex,
     cellsSortedByPosition: cellsSortedByPosition,
+    isReparent: isReparent,
   })
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
-    grid.elementPath,
+    gridPath,
     targetCellData?.gridCellCoordinates ?? null,
     gridCellCoordinates(row, column),
   )
@@ -171,14 +164,14 @@ export function runGridRearrangeMove(
       }
       const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
         MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-        MetadataUtils.getFrameOrZeroRectInCanvasCoords(grid.elementPath, jsxMetadata),
+        MetadataUtils.getFrameOrZeroRectInCanvasCoords(gridPath, jsxMetadata),
         interactionData,
       )
       return [...absoluteMoveCommands, updateGridControlsCommand]
     }
     case 'rearrange': {
       const targetRootCell = gridCellCoordinates(row, column)
-      const canvasRect = getGlobalFrameOfGridCell(grid, targetRootCell)
+      const canvasRect = getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell)
       const absoluteMoveCommands =
         canvasRect == null || isReparent
           ? []
@@ -459,9 +452,11 @@ function getGridMoveType(params: {
   originalElementMetadata: ElementInstanceMetadata | null
   possiblyReorderIndex: number
   cellsSortedByPosition: SortableGridElementProperties[]
+  isReparent: boolean
 }): GridMoveType {
   const specialSizeMeasurements = params.originalElementMetadata?.specialSizeMeasurements
   if (
+    !params.isReparent &&
     specialSizeMeasurements != null &&
     MetadataUtils.isPositionAbsolute(params.originalElementMetadata)
   ) {
@@ -530,7 +525,7 @@ function getGridPositionIndex(props: {
 
 export type GridCellGlobalFrames = Array<Array<CanvasRectangle>>
 
-export function getGlobalFrameOfGridCell(
+export function getGlobalFrameOfGridCellFromMetadata(
   grid: ElementInstanceMetadata,
   coords: GridCellCoordinates,
 ): CanvasRectangle | null {
@@ -539,6 +534,13 @@ export function getGlobalFrameOfGridCell(
     return null
   }
 
+  return getGlobalFrameOfGridCell(gridCellGlobalFrames, coords)
+}
+
+export function getGlobalFrameOfGridCell(
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  coords: GridCellCoordinates,
+): CanvasRectangle | null {
   return gridCellGlobalFrames[coords.row - 1]?.[coords.column - 1] ?? null
 }
 
@@ -719,9 +721,7 @@ export function getGridRelatedIndexes(params: {
 function getOriginalElementGridConfiguration(
   gridCellGlobalFrames: GridCellGlobalFrames,
   interactionData: DragInteractionData,
-  jsxMetadata: ElementInstanceMetadataMap,
-  selectedElement: ElementPath,
-  grid: ElementInstanceMetadata,
+  originalElement: ElementInstanceMetadata,
 ) {
   const draggingFromCellCoords = getClosestGridCellToPoint(
     gridCellGlobalFrames,
@@ -731,23 +731,15 @@ function getOriginalElementGridConfiguration(
     return null
   }
 
-  const originalElementMetadata = MetadataUtils.findElementByElementPath(
-    jsxMetadata,
-    selectedElement,
-  )
-  if (originalElementMetadata == null) {
-    return null
-  }
-
   // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
   const originalElementCellCoordsOnCanvas = getGridChildCellCoordBoundsFromCanvas(
-    originalElementMetadata,
-    grid,
+    originalElement,
+    gridCellGlobalFrames,
   )
 
   // get the bounds from the props, or the canvas, or just default to the cell of the starting mouse position
   const originalCellBounds = getGridChildCellCoordBoundsFromProps(
-    originalElementMetadata,
+    originalElement,
     originalElementCellCoordsOnCanvas ?? draggingFromCellCoords,
   )
 
@@ -758,7 +750,6 @@ function getOriginalElementGridConfiguration(
   )
 
   return {
-    originalElementMetadata,
     originalCellBounds,
     mouseCellPosInOriginalElement,
   }

diff --git a/...or/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/...or/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -3,11 +3,7 @@ import * as EP from '../../../../core/shared/element-path'
 import type { GridPositionValue } from '../../../../core/shared/element-template'
 import { gridPositionValue } from '../../../../core/shared/element-template'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
-import type {
-  CanvasStrategy,
-  CustomStrategyState,
-  InteractionCanvasState,
-} from '../canvas-strategy-types'
+import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types'
 import {
   emptyStrategyApplicationResult,
   getTargetPathsFromInteractionTarget,
@@ -21,7 +17,6 @@ import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 export function gridRearrangeResizeKeyboardStrategy(
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
-  customState: CustomStrategyState,
 ): CanvasStrategy | null {
   if (
     interactionSession?.activeControl.type !== 'KEYBOARD_CATCHER_CONTROL' ||
@@ -48,13 +43,13 @@ export function gridRearrangeResizeKeyboardStrategy(
 
   const parentGridPath = EP.parentPath(target)
 
-  const grid = MetadataUtils.findElementByElementPath(canvasState.startingMetadata, parentGridPath)
-  if (grid == null) {
-    return null
-  }
-  const gridTemplate = grid.specialSizeMeasurements.containerGridProperties
+  const gridTemplate = cell.specialSizeMeasurements.parentContainerGridProperties
+  const gridCellGlobalFrames = cell.specialSizeMeasurements.parentGridCellGlobalFrames
 
-  const initialCellBounds = getGridChildCellCoordBoundsFromCanvas(cell, grid)
+  const initialCellBounds =
+    gridCellGlobalFrames != null
+      ? getGridChildCellCoordBoundsFromCanvas(cell, gridCellGlobalFrames)
+      : null
   if (initialCellBounds == null) {
     return null
   }

diff --git a/.../components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/.../components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -72,21 +72,28 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
 
       const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
 
-      const grid = MetadataUtils.findElementByElementPath(
+      const selectedElementMetadata = MetadataUtils.findElementByElementPath(
         canvasState.startingMetadata,
-        EP.parentPath(selectedElement),
+        selectedElement,
       )
-      if (grid == null) {
+      if (selectedElementMetadata == null) {
         return emptyStrategyApplicationResult
       }
 
-      const moveCommands = runGridRearrangeMove(
-        targetElement,
-        selectedElement,
-        canvasState.startingMetadata,
-        interactionSession.interactionData,
-        grid,
-      )
+      const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+        selectedElementMetadata.specialSizeMeasurements
+
+      const moveCommands =
+        parentGridCellGlobalFrames != null
+          ? runGridRearrangeMove(
+              targetElement,
+              selectedElement,
+              canvasState.startingMetadata,
+              interactionSession.interactionData,
+              parentGridCellGlobalFrames,
+              parentContainerGridProperties,
+            )
+          : []
       if (moveCommands.length === 0) {
         return emptyStrategyApplicationResult
       }

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -145,21 +145,28 @@ function getCommandsAndPatchForGridRearrange(
     return { commands: [], elementsToRerender: [] }
   }
 
-  const grid = MetadataUtils.findElementByElementPath(
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
     canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
+    selectedElement,
   )
-  if (grid == null) {
+  if (selectedElementMetadata == null) {
     return { commands: [], elementsToRerender: [] }
   }
 
-  const commands = runGridRearrangeMove(
-    selectedElement,
-    selectedElement,
-    canvasState.startingMetadata,
-    interactionData,
-    grid,
-  )
+  const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+    selectedElementMetadata.specialSizeMeasurements
+
+  const commands =
+    parentGridCellGlobalFrames != null
+      ? runGridRearrangeMove(
+          selectedElement,
+          selectedElement,
+          canvasState.startingMetadata,
+          interactionData,
+          parentGridCellGlobalFrames,
+          parentContainerGridProperties,
+        )
+      : []
 
   return {
     commands: commands,