From ddc54cb25d99235e6f19eef7a2caf24e6b4bb210 Mon Sep 17 00:00:00 2001 From: Balint Gabor <127662+gbalint@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:23:03 +0200 Subject: [PATCH] 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 --- .../canvas-strategy-types.ts | 6 -- .../grid-draw-to-insert-strategy.tsx | 20 ++--- .../strategies/grid-helpers.ts | 88 ++++++++----------- .../grid-rearrange-move-duplicate-strategy.ts | 11 +-- .../grid-rearrange-move-strategy.ts | 12 +-- .../strategies/grid-reparent-strategy.tsx | 21 +++-- .../commands/show-grid-controls-command.ts | 15 +++- .../canvas/controls/grid-controls.tsx | 15 ++-- .../editor/store/dispatch-strategies.spec.tsx | 16 ---- .../components/editor/store/editor-state.ts | 21 +++-- .../store/store-deep-equality-instances.ts | 30 ++++++- .../store/store-hook-substore-helpers.ts | 2 +- 12 files changed, 122 insertions(+), 135 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts index 7ce93c8adb09..709fc7d5c7dc 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts +++ b/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: {}, }, } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx index 58a4d5663525..894570a5266e 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx +++ b/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, ) } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index 38b71a3b4a9b..4af8c8ee8ee8 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -44,45 +44,36 @@ 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( @@ -90,7 +81,7 @@ export function runGridRearrangeMove( interactionData.dragStart, )?.gridCellCoordinates if (draggingFromCellCoords == null) { - return emptyGridRearrangeMoveResult + return [] } const originalElementMetadata = MetadataUtils.findElementByElementPath( @@ -98,7 +89,7 @@ export function runGridRearrangeMove( 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,6 +171,13 @@ export function runGridRearrangeMove( cellsSortedByPosition: cellsSortedByPosition, }) + const updateGridControlsCommand = showGridControls( + 'mid-interaction', + parentGridPath, + targetCellData?.gridCellCoordinates ?? null, + gridCellCoordinates(row, column), + ) + switch (moveType) { case 'absolute': { const absoluteMoveCommands = gridChildAbsoluteMoveCommands( @@ -187,11 +185,7 @@ export function runGridRearrangeMove( 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) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts index 5a62ff4d0f7a..039583c1077c 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts +++ b/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, }, ) 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 index 274ab4efbca9..b8696111b321 100644 --- 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 @@ -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)], } } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx index bfa996436f1b..7e41c20e2ed8 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx +++ b/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, diff --git a/editor/src/components/canvas/commands/show-grid-controls-command.ts b/editor/src/components/canvas/commands/show-grid-controls-command.ts index 8d92c0855510..0d1e4b07d1b8 100644 --- a/editor/src/components/canvas/commands/show-grid-controls-command.ts +++ b/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(({ grid }) => { ) const currentHoveredCell = useEditorState( - Substores.restOfStore, - (store) => - store.strategyState.customStrategyState.grid.targetCellData?.gridCellCoordinates ?? null, + Substores.canvas, + (store) => store.editor.canvas.controls.gridControlData?.targetCell ?? null, 'GridControl currentHoveredCell', ) @@ -878,8 +877,8 @@ export const GridControl = React.memo(({ grid }) => { const gridPath = optionalMap(EP.parentPath, shadow?.elementPath) const targetRootCell = useEditorState( - Substores.restOfStore, - (store) => store.strategyState.customStrategyState.grid.currentRootCell, + Substores.canvas, + (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null, 'GridControl targetRootCell', ) @@ -1126,14 +1125,14 @@ export interface GridControlsProps { export const GridControls = controlForStrategyMemoized(({ targets }) => { const targetRootCell = useEditorState( - Substores.restOfStore, - (store) => store.strategyState.customStrategyState.grid.currentRootCell, + Substores.canvas, + (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null, 'GridControls targetRootCell', ) const hoveredGrids = useEditorState( Substores.canvas, - (store) => stripNulls([store.editor.canvas.controls.gridControls]), + (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]), 'GridControls hoveredGrids', ) diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx index 23aa738142c4..69d3253550f9 100644 --- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx +++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx @@ -199,9 +199,7 @@ describe('interactionStart', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -266,9 +264,7 @@ describe('interactionStart', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -353,9 +349,7 @@ describe('interactionUpdate', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -440,9 +434,7 @@ describe('interactionUpdate', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -521,9 +513,7 @@ describe('interactionHardReset', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -610,9 +600,7 @@ describe('interactionHardReset', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -705,9 +693,7 @@ describe('interactionUpdate with user changed strategy', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, @@ -795,9 +781,7 @@ describe('interactionUpdate with user changed strategy', () => { "elementsToRerender": Array [], "escapeHatchActivated": false, "grid": Object { - "currentRootCell": null, "metadataCacheForGrids": Object {}, - "targetCellData": null, }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts index 6f4b09dd4bb9..800ae1ae55a3 100644 --- a/editor/src/components/editor/store/editor-state.ts +++ b/editor/src/components/editor/store/editor-state.ts @@ -31,7 +31,6 @@ import type { } from '../../../core/shared/element-template' import { emptyJsxMetadata, - getElementsByUIDFromTopLevelElements, isJSExpression, isJSXConditionalExpression, isJSXElement, @@ -61,14 +60,12 @@ import type { NodeModules, ParseSuccess, ProjectFile, - PropertyPath, StaticElementPath, TextFile, } from '../../../core/shared/project-file-types' import { RevisionsState, codeFile, - foldParsedTextFile, isParseFailure, isParseSuccess, isParsedTextFile, @@ -125,7 +122,6 @@ import type { Notice } from '../../common/notice' import type { ShortcutConfiguration } from '../shortcut-definitions' import { DerivedStateKeepDeepEquality, - ElementInstanceMetadataMapKeepDeepEquality, InvalidOverrideNavigatorEntryKeepDeepEquality, RenderPropNavigatorEntryKeepDeepEquality, RenderPropValueNavigatorEntryKeepDeepEquality, @@ -192,6 +188,7 @@ import type { Collaborator } from '../../../core/shared/multiplayer' import type { OnlineState } from '../online-status' import type { NavigatorRow } from '../../navigator/navigator-row' import type { FancyError } from '../../../core/shared/code-exec-utils' +import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds' const ObjectPathImmutable: any = OPI @@ -812,6 +809,12 @@ export interface DragToMoveIndicatorFlags { ancestor: boolean } +export interface GridControlData { + grid: ElementPath + targetCell: GridCellCoordinates | null // the cell under the mouse + rootCell: GridCellCoordinates | null // the top-left cell of the target child +} + export interface EditorStateCanvasControls { // this is where we can put props for the strategy controls snappingGuidelines: Array @@ -822,7 +825,7 @@ export interface EditorStateCanvasControls { reparentedToPaths: Array dragToMoveIndicatorFlags: DragToMoveIndicatorFlags parentOutlineHighlight: ElementPath | null - gridControls: ElementPath | null + gridControlData: GridControlData | null } export function editorStateCanvasControls( @@ -834,7 +837,7 @@ export function editorStateCanvasControls( reparentedToPaths: Array, dragToMoveIndicatorFlagsValue: DragToMoveIndicatorFlags, parentOutlineHighlight: ElementPath | null, - gridControls: ElementPath | null, + gridControlData: GridControlData | null, ): EditorStateCanvasControls { return { snappingGuidelines: snappingGuidelines, @@ -845,7 +848,7 @@ export function editorStateCanvasControls( reparentedToPaths: reparentedToPaths, dragToMoveIndicatorFlags: dragToMoveIndicatorFlagsValue, parentOutlineHighlight: parentOutlineHighlight, - gridControls: gridControls, + gridControlData: gridControlData, } } @@ -2624,7 +2627,7 @@ export function createEditorState(dispatch: EditorDispatch): EditorState { reparentedToPaths: [], dragToMoveIndicatorFlags: emptyDragToMoveIndicatorFlags, parentOutlineHighlight: null, - gridControls: null, + gridControlData: null, }, }, inspector: { @@ -2999,7 +3002,7 @@ export function editorModelFromPersistentModel( reparentedToPaths: [], dragToMoveIndicatorFlags: emptyDragToMoveIndicatorFlags, parentOutlineHighlight: null, - gridControls: null, + gridControlData: null, }, }, inspector: { diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts index c988b328bcfb..f22431510ddb 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -361,6 +361,7 @@ import type { RenderedAt, EditorRemixConfig, ErrorBoundaryHandling, + GridControlData, } from './editor-state' import { trueUpGroupElementChanged, @@ -641,6 +642,7 @@ import type { ComponentDescriptorPropertiesBounds, } from '../../../core/property-controls/component-descriptor-parser' import type { Axis } from '../../../components/canvas/gap-utils' +import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds' export function ElementPropertyPathKeepDeepEquality(): KeepDeepEqualityCall { return combine2EqualityCalls( @@ -2718,6 +2720,30 @@ export const DragToMoveIndicatorFlagsKeepDeepEquality: KeepDeepEqualityCall = + combine2EqualityCalls( + (data) => data.row, + createCallWithTripleEquals(), + (data) => data.column, + createCallWithTripleEquals(), + (row, column) => ({ row, column }), + ) + +export const GridControlDataKeepDeepEquality: KeepDeepEqualityCall = + combine3EqualityCalls( + (data) => data.grid, + ElementPathKeepDeepEquality, + (data) => data.targetCell, + nullableDeepEquality(GridCellCoordinatesKeepDeepEquality), + (data) => data.rootCell, + nullableDeepEquality(GridCellCoordinatesKeepDeepEquality), + (grid, targetCell, rootCell) => ({ + grid, + targetCell, + rootCell, + }), + ) + export const EditorStateCanvasControlsKeepDeepEquality: KeepDeepEqualityCall = combine9EqualityCalls( (controls) => controls.snappingGuidelines, @@ -2736,8 +2762,8 @@ export const EditorStateCanvasControlsKeepDeepEquality: KeepDeepEqualityCall controls.parentOutlineHighlight, nullableDeepEquality(ElementPathKeepDeepEquality), - (controls) => controls.gridControls, - nullableDeepEquality(ElementPathKeepDeepEquality), + (controls) => controls.gridControlData, + nullableDeepEquality(GridControlDataKeepDeepEquality), editorStateCanvasControls, ) diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts index bd45ce5dd768..61e8565823a4 100644 --- a/editor/src/components/editor/store/store-hook-substore-helpers.ts +++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts @@ -88,7 +88,7 @@ export const EmptyEditorStateForKeysOnly: EditorState = { reparentedToPaths: [], dragToMoveIndicatorFlags: null as any, parentOutlineHighlight: null, - gridControls: null, + gridControlData: null, }, }, inspector: {