From 1656a45d77960ca0dad11790bf4c93217f55e431 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 3 Jul 2024 15:16:58 +0200 Subject: [PATCH 1/4] move with initial delta --- .../canvas-strategy-types.ts | 4 + .../strategies/grid-helpers.ts | 90 +++++++++++++------ .../grid-rearrange-move-duplicate-strategy.ts | 11 ++- .../grid-rearrange-move-strategy.ts | 11 ++- 4 files changed, 87 insertions(+), 29 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 d6c5a6bfebb5..ee0c34d092a1 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts +++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts @@ -22,6 +22,8 @@ export interface CustomStrategyState { elementsToRerender: Array action: ActiveFrameAction | null targetGridCell: GridCellCoordinates | null + initialDraggingFromCell: GridCellCoordinates | null + initialOriginalElementRootCell: GridCellCoordinates | null } export type CustomStrategyStatePatch = Partial @@ -35,6 +37,8 @@ export function defaultCustomStrategyState(): CustomStrategyState { elementsToRerender: [], action: null, targetGridCell: null, + initialDraggingFromCell: null, + initialOriginalElementRootCell: 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 index 1d9248f19f94..83ce38601b9e 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -78,12 +78,24 @@ export function runGridRearrangeMove( canvasScale: number, canvasOffset: CanvasVector, targetGridCell: GridCellCoordinates | null, + initialDraggingFromCell: GridCellCoordinates | null, + initialOriginalElementRootCell: GridCellCoordinates | null, duplicating: boolean, -): { commands: CanvasCommand[]; targetGridCell: GridCellCoordinates | null } { +): { + commands: CanvasCommand[] + targetGridCell: GridCellCoordinates | null + initialDraggingFromCell: GridCellCoordinates | null + initialOriginalElementRootCell: GridCellCoordinates | null +} { let commands: CanvasCommand[] = [] if (interactionData.drag == null) { - return { commands: [], targetGridCell: null } + return { + commands: [], + targetGridCell: null, + initialOriginalElementRootCell: null, + initialDraggingFromCell: null, + } } const mouseWindowPoint = canvasPointToWindowPoint( @@ -99,9 +111,13 @@ export function runGridRearrangeMove( if (cellUnderMouse != null) { newTargetGridCell = cellUnderMouse.coordinates } - if (newTargetGridCell == null || newTargetGridCell.row < 1 || newTargetGridCell.column < 1) { - return { commands: [], targetGridCell: null } + return { + commands: [], + targetGridCell: null, + initialOriginalElementRootCell: null, + initialDraggingFromCell: null, + } } const originalElementMetadata = MetadataUtils.findElementByElementPath( @@ -109,7 +125,12 @@ export function runGridRearrangeMove( selectedElement, ) if (originalElementMetadata == null) { - return { commands: [], targetGridCell: null } + return { + commands: [], + targetGridCell: null, + initialOriginalElementRootCell: null, + initialDraggingFromCell: null, + } } function getGridProperty(field: keyof GridElementProperties, fallback: number) { @@ -122,33 +143,48 @@ export function runGridRearrangeMove( const gridRowStart = getGridProperty('gridRowStart', 0) const gridRowEnd = getGridProperty('gridRowEnd', 1) + const draggingFromCell = initialDraggingFromCell ?? newTargetGridCell + const originalElementRootCell = + initialOriginalElementRootCell ?? gridCellCoordinates(gridRowStart, gridColumnStart) + + const columnDiff = draggingFromCell.column - originalElementRootCell.column + const rowDiff = draggingFromCell.row - originalElementRootCell.row + + const columnStart = newTargetGridCell.column + const columnEnd = Math.max( + newTargetGridCell.column, + newTargetGridCell.column + (gridColumnEnd - gridColumnStart), + ) + const rowStart = newTargetGridCell.row + const rowEnd = Math.max( + newTargetGridCell.row, + newTargetGridCell.row + (gridRowEnd - gridRowStart), + ) + + const height = columnEnd - columnStart + const width = rowEnd - rowStart + + const adjustedStart = { + column: Math.max(1, columnStart - columnDiff), + row: Math.max(1, rowStart - rowDiff), + } + + const adjustedEnd = { + column: Math.max(1, adjustedStart.column + height), + row: Math.max(1, adjustedStart.row + width), + } + commands.push( - setProperty( - 'always', - targetElement, - create('style', 'gridColumnStart'), - newTargetGridCell.column, - ), - setProperty( - 'always', - targetElement, - create('style', 'gridColumnEnd'), - Math.max( - newTargetGridCell.column, - newTargetGridCell.column + (gridColumnEnd - gridColumnStart), - ), - ), - setProperty('always', targetElement, create('style', 'gridRowStart'), newTargetGridCell.row), - setProperty( - 'always', - targetElement, - create('style', 'gridRowEnd'), - Math.max(newTargetGridCell.row, newTargetGridCell.row + (gridRowEnd - gridRowStart)), - ), + setProperty('always', targetElement, create('style', 'gridColumnStart'), adjustedStart.column), + setProperty('always', targetElement, create('style', 'gridColumnEnd'), adjustedEnd.column), + setProperty('always', targetElement, create('style', 'gridRowStart'), adjustedStart.row), + setProperty('always', targetElement, create('style', 'gridRowEnd'), adjustedEnd.row), ) return { commands: commands, targetGridCell: newTargetGridCell, + initialOriginalElementRootCell: originalElementRootCell, + initialDraggingFromCell: draggingFromCell, } } 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 ac9d686fd8e9..b1b252d4b757 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 @@ -85,7 +85,12 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid) - const { commands: moveCommands, targetGridCell: newTargetGridCell } = runGridRearrangeMove( + const { + commands: moveCommands, + targetGridCell: newTargetGridCell, + initialOriginalElementRootCell, + initialDraggingFromCell, + } = runGridRearrangeMove( targetElement, selectedElement, canvasState.startingMetadata, @@ -93,6 +98,8 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( canvasState.scale, canvasState.canvasOffset, customState.targetGridCell, + customState.initialDraggingFromCell, + customState.initialOriginalElementRootCell, true, ) if (moveCommands.length === 0) { @@ -110,6 +117,8 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( ], { targetGridCell: newTargetGridCell, + initialDraggingFromCell: initialDraggingFromCell, + initialOriginalElementRootCell: initialOriginalElementRootCell, 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 fcd6eb2be2b8..22ab1833eb28 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 @@ -69,7 +69,12 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( const targetElement = selectedElement - const { commands: moveCommands, targetGridCell: newTargetGridCell } = runGridRearrangeMove( + const { + commands: moveCommands, + targetGridCell: newTargetGridCell, + initialOriginalElementRootCell, + initialDraggingFromCell, + } = runGridRearrangeMove( targetElement, selectedElement, canvasState.startingMetadata, @@ -77,6 +82,8 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( canvasState.scale, canvasState.canvasOffset, customState.targetGridCell, + customState.initialDraggingFromCell, + customState.initialOriginalElementRootCell, false, ) if (moveCommands.length === 0) { @@ -85,6 +92,8 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( return strategyApplicationResult(moveCommands, { targetGridCell: newTargetGridCell, + initialDraggingFromCell: initialDraggingFromCell, + initialOriginalElementRootCell: initialOriginalElementRootCell, }) }, } From 7196ed8ef883cf7876350b81e0591009aa43d117 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 3 Jul 2024 15:54:37 +0200 Subject: [PATCH 2/4] make the code easy to read --- .../canvas-strategy-types.ts | 18 +- .../strategies/grid-helpers.ts | 170 ++++++++++-------- .../grid-rearrange-move-duplicate-strategy.ts | 18 +- .../grid-rearrange-move-strategy.ts | 18 +- 4 files changed, 129 insertions(+), 95 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 ee0c34d092a1..a3c28f5740f6 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts +++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts @@ -21,9 +21,13 @@ export interface CustomStrategyState { strategyGeneratedUidsCache: { [elementPath: string]: string | undefined } elementsToRerender: Array action: ActiveFrameAction | null - targetGridCell: GridCellCoordinates | null - initialDraggingFromCell: GridCellCoordinates | null - initialOriginalElementRootCell: GridCellCoordinates | null + grid: GridCustomStrategyState +} + +export type GridCustomStrategyState = { + targetCell: GridCellCoordinates | null + draggingFromCell: GridCellCoordinates | null + rootCell: GridCellCoordinates | null } export type CustomStrategyStatePatch = Partial @@ -36,9 +40,11 @@ export function defaultCustomStrategyState(): CustomStrategyState { strategyGeneratedUidsCache: {}, elementsToRerender: [], action: null, - targetGridCell: null, - initialDraggingFromCell: null, - initialOriginalElementRootCell: null, + grid: { + targetCell: null, + draggingFromCell: null, + rootCell: 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 index 83ce38601b9e..91f863118788 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -1,6 +1,7 @@ import type { ElementPath } from 'utopia-shared/src/types' import { MetadataUtils } from '../../../../core/model/element-metadata-utils' import type { + ElementInstanceMetadata, ElementInstanceMetadataMap, GridElementProperties, } from '../../../../core/shared/element-template' @@ -14,10 +15,11 @@ import { import { create } from '../../../../core/shared/property-path' import type { CanvasCommand } from '../../commands/commands' import { setProperty } from '../../commands/set-property-command' -import type { GridCellCoordinates } from '../../controls/grid-controls' -import { gridCellCoordinates } from '../../controls/grid-controls' import { canvasPointToWindowPoint } from '../../dom-lookup' import type { DragInteractionData } from '../interaction-state' +import type { GridCustomStrategyState } from '../canvas-strategy-types' +import type { GridCellCoordinates } from '../../controls/grid-controls' +import { gridCellCoordinates } from '../../controls/grid-controls' export function getGridCellUnderMouse(mousePoint: WindowPoint) { return getGridCellAtPoint(mousePoint, false) @@ -77,24 +79,20 @@ export function runGridRearrangeMove( interactionData: DragInteractionData, canvasScale: number, canvasOffset: CanvasVector, - targetGridCell: GridCellCoordinates | null, - initialDraggingFromCell: GridCellCoordinates | null, - initialOriginalElementRootCell: GridCellCoordinates | null, + customState: GridCustomStrategyState, duplicating: boolean, ): { commands: CanvasCommand[] - targetGridCell: GridCellCoordinates | null - initialDraggingFromCell: GridCellCoordinates | null - initialOriginalElementRootCell: GridCellCoordinates | null + targetCell: GridCellCoordinates | null + draggingFromCell: GridCellCoordinates | null + rootCell: GridCellCoordinates | null } { - let commands: CanvasCommand[] = [] - if (interactionData.drag == null) { return { commands: [], - targetGridCell: null, - initialOriginalElementRootCell: null, - initialDraggingFromCell: null, + targetCell: null, + rootCell: null, + draggingFromCell: null, } } @@ -104,19 +102,13 @@ export function runGridRearrangeMove( canvasOffset, ) - let newTargetGridCell = targetGridCell ?? null - const cellUnderMouse = duplicating - ? getGridCellUnderMouseRecursive(mouseWindowPoint) - : getGridCellUnderMouse(mouseWindowPoint) - if (cellUnderMouse != null) { - newTargetGridCell = cellUnderMouse.coordinates - } - if (newTargetGridCell == null || newTargetGridCell.row < 1 || newTargetGridCell.column < 1) { + const newTargetCell = getTargetCell(customState.targetCell, duplicating, mouseWindowPoint) + if (newTargetCell == null) { return { commands: [], - targetGridCell: null, - initialOriginalElementRootCell: null, - initialDraggingFromCell: null, + targetCell: null, + draggingFromCell: null, + rootCell: null, } } @@ -127,64 +119,100 @@ export function runGridRearrangeMove( if (originalElementMetadata == null) { return { commands: [], - targetGridCell: null, - initialOriginalElementRootCell: null, - initialDraggingFromCell: null, + targetCell: null, + rootCell: null, + draggingFromCell: null, } } - function getGridProperty(field: keyof GridElementProperties, fallback: number) { - const propValue = originalElementMetadata?.specialSizeMeasurements.elementGridProperties[field] - return propValue == null || propValue === 'auto' ? 0 : propValue.numericalPosition ?? fallback - } + const gridProperties = getElementGridProperties(originalElementMetadata) - const gridColumnStart = getGridProperty('gridColumnStart', 0) - const gridColumnEnd = getGridProperty('gridColumnEnd', 1) - const gridRowStart = getGridProperty('gridRowStart', 0) - const gridRowEnd = getGridProperty('gridRowEnd', 1) + // calculate the difference between the cell the mouse started the interaction from, and the "root" + // cell of the element, meaning the top-left-most cell the element occupies. + const draggingFromCell = customState.draggingFromCell ?? newTargetCell + const rootCell = + customState.rootCell ?? gridCellCoordinates(gridProperties.row, gridProperties.column) + const coordsDiff = getCellCoordsDelta(draggingFromCell, rootCell) - const draggingFromCell = initialDraggingFromCell ?? newTargetGridCell - const originalElementRootCell = - initialOriginalElementRootCell ?? gridCellCoordinates(gridRowStart, gridColumnStart) + // get the new adjusted row + const row = getCoordBounds(newTargetCell, 'row', gridProperties.width, coordsDiff.row) + // get the new adjusted column + const column = getCoordBounds(newTargetCell, 'column', gridProperties.height, coordsDiff.column) - const columnDiff = draggingFromCell.column - originalElementRootCell.column - const rowDiff = draggingFromCell.row - originalElementRootCell.row - - const columnStart = newTargetGridCell.column - const columnEnd = Math.max( - newTargetGridCell.column, - newTargetGridCell.column + (gridColumnEnd - gridColumnStart), - ) - const rowStart = newTargetGridCell.row - const rowEnd = Math.max( - newTargetGridCell.row, - newTargetGridCell.row + (gridRowEnd - gridRowStart), - ) - - const height = columnEnd - columnStart - const width = rowEnd - rowStart - - const adjustedStart = { - column: Math.max(1, columnStart - columnDiff), - row: Math.max(1, rowStart - rowDiff), + return { + commands: [ + setProperty('always', targetElement, create('style', 'gridColumnStart'), column.start), + setProperty('always', targetElement, create('style', 'gridColumnEnd'), column.end), + setProperty('always', targetElement, create('style', 'gridRowStart'), row.start), + setProperty('always', targetElement, create('style', 'gridRowEnd'), row.end), + ], + targetCell: newTargetCell, + rootCell: rootCell, + draggingFromCell: draggingFromCell, } +} - const adjustedEnd = { - column: Math.max(1, adjustedStart.column + height), - row: Math.max(1, adjustedStart.row + width), +function getTargetCell( + previousTargetCell: GridCellCoordinates | null, + duplicating: boolean, + mouseWindowPoint: WindowPoint, +): GridCellCoordinates | null { + let cell = previousTargetCell ?? null + const cellUnderMouse = duplicating + ? getGridCellUnderMouseRecursive(mouseWindowPoint) + : getGridCellUnderMouse(mouseWindowPoint) + if (cellUnderMouse != null) { + cell = cellUnderMouse.coordinates + } + if (cell == null || cell.row < 1 || cell.column < 1) { + return null } + return cell +} - commands.push( - setProperty('always', targetElement, create('style', 'gridColumnStart'), adjustedStart.column), - setProperty('always', targetElement, create('style', 'gridColumnEnd'), adjustedEnd.column), - setProperty('always', targetElement, create('style', 'gridRowStart'), adjustedStart.row), - setProperty('always', targetElement, create('style', 'gridRowEnd'), adjustedEnd.row), - ) +function getElementGridProperties(element: ElementInstanceMetadata): { + row: number + width: number + column: number + height: number +} { + // get the grid fixtures (start and end for column and row) from the element metadata + function getGridProperty(field: keyof GridElementProperties, fallback: number) { + const propValue = element.specialSizeMeasurements.elementGridProperties[field] + return propValue == null || propValue === 'auto' ? 0 : propValue.numericalPosition ?? fallback + } + const column = getGridProperty('gridColumnStart', 0) + const height = getGridProperty('gridColumnEnd', 1) - column + const row = getGridProperty('gridRowStart', 0) + const width = getGridProperty('gridRowEnd', 1) - row return { - commands: commands, - targetGridCell: newTargetGridCell, - initialOriginalElementRootCell: originalElementRootCell, - initialDraggingFromCell: draggingFromCell, + row, + width, + column, + height, } } + +function getCellCoordsDelta( + dragFrom: GridCellCoordinates, + rootCell: GridCellCoordinates, +): GridCellCoordinates { + const rowDiff = dragFrom.row - rootCell.row + const columnDiff = dragFrom.column - rootCell.column + + return gridCellCoordinates(rowDiff, columnDiff) +} + +function getCoordBounds( + cell: GridCellCoordinates, + coord: 'column' | 'row', + size: number, // width or height + adjustOffset: number, // adjustment based on the difference between the initial dragging cell and the root cell +): { start: number; end: number } { + // the start is the first cell's coord the element will occupy + const start = Math.max(1, cell[coord] - adjustOffset) + // the end is the last cell's coord the element will occupy + const end = Math.max(1, start + size) + return { start, end } +} 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 b1b252d4b757..03e3f481dccd 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 @@ -87,9 +87,9 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( const { commands: moveCommands, - targetGridCell: newTargetGridCell, - initialOriginalElementRootCell, - initialDraggingFromCell, + targetCell: targetGridCell, + draggingFromCell, + rootCell, } = runGridRearrangeMove( targetElement, selectedElement, @@ -97,9 +97,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( interactionSession.interactionData, canvasState.scale, canvasState.canvasOffset, - customState.targetGridCell, - customState.initialDraggingFromCell, - customState.initialOriginalElementRootCell, + customState.grid, true, ) if (moveCommands.length === 0) { @@ -116,9 +114,11 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( setCursorCommand(CSSCursor.Duplicate), ], { - targetGridCell: newTargetGridCell, - initialDraggingFromCell: initialDraggingFromCell, - initialOriginalElementRootCell: initialOriginalElementRootCell, + grid: { + targetCell: targetGridCell, + draggingFromCell: draggingFromCell, + rootCell: rootCell, + }, 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 22ab1833eb28..fe18b99906a5 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 @@ -71,9 +71,9 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( const { commands: moveCommands, - targetGridCell: newTargetGridCell, - initialOriginalElementRootCell, - initialDraggingFromCell, + targetCell: targetGridCell, + draggingFromCell, + rootCell, } = runGridRearrangeMove( targetElement, selectedElement, @@ -81,9 +81,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( interactionSession.interactionData, canvasState.scale, canvasState.canvasOffset, - customState.targetGridCell, - customState.initialDraggingFromCell, - customState.initialOriginalElementRootCell, + customState.grid, false, ) if (moveCommands.length === 0) { @@ -91,9 +89,11 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( } return strategyApplicationResult(moveCommands, { - targetGridCell: newTargetGridCell, - initialDraggingFromCell: initialDraggingFromCell, - initialOriginalElementRootCell: initialOriginalElementRootCell, + grid: { + targetCell: targetGridCell, + draggingFromCell: draggingFromCell, + rootCell: rootCell, + }, }) }, } From 06cd3a59963c66c1d396cbb4b5dbdbd91eff8d78 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 3 Jul 2024 16:12:06 +0200 Subject: [PATCH 3/4] snap --- .../editor/store/dispatch-strategies.spec.tsx | 48 +++++++++++++++---- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx index b8c70e4e8a7f..d37679f21550 100644 --- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx +++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx @@ -196,9 +196,13 @@ describe('interactionStart', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": null, "startingAllElementProps": Object {}, @@ -259,9 +263,13 @@ describe('interactionStart', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": null, "startingAllElementProps": Object {}, @@ -342,9 +350,13 @@ describe('interactionUpdate', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": Array [ Object { @@ -425,9 +437,13 @@ describe('interactionUpdate', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": null, "startingAllElementProps": Object {}, @@ -502,9 +518,13 @@ describe('interactionHardReset', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": Array [ Object { @@ -587,9 +607,13 @@ describe('interactionHardReset', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": null, "startingAllElementProps": Object {}, @@ -678,9 +702,13 @@ describe('interactionUpdate with user changed strategy', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": Array [ Object { @@ -764,9 +792,13 @@ describe('interactionUpdate with user changed strategy', () => { "duplicatedElementNewUids": Object {}, "elementsToRerender": Array [], "escapeHatchActivated": false, + "grid": Object { + "draggingFromCell": null, + "rootCell": null, + "targetCell": null, + }, "lastReorderIdx": null, "strategyGeneratedUidsCache": Object {}, - "targetGridCell": null, }, "sortedApplicableStrategies": null, "startingAllElementProps": Object {}, From aef5e7d83b48e312de6a640f0072f17d7452c21d Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 3 Jul 2024 16:18:55 +0200 Subject: [PATCH 4/4] fix test --- .../grid-rearrange-move-strategy.spec.browser2.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx index 6e47a9c9d13c..f17329a7796d 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx @@ -18,14 +18,10 @@ describe('grid rearrange move strategy', () => { await mouseDragFromPointToPoint( sourceGridCell, - getRectCenter( - localRectangle({ - x: sourceGridCell.getBoundingClientRect().x, - y: sourceGridCell.getBoundingClientRect().y, - width: sourceGridCell.getBoundingClientRect().width, - height: sourceGridCell.getBoundingClientRect().height, - }), - ), + { + x: sourceGridCell.getBoundingClientRect().x + 10, + y: sourceGridCell.getBoundingClientRect().y + 10, + }, getRectCenter( localRectangle({ x: targetGridCell.getBoundingClientRect().x,