diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts index 8eb840663578..2557a35c9e47 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts @@ -34,8 +34,16 @@ import { isAutoGridPin, getCommandsForGridItemPlacement, sortElementsByGridPosition, + getGridRelativeContainingBlock, } from './grid-helpers' import type { GridCellCoordinates } from './grid-cell-bounds' +import { + canvasRectangle, + offsetPoint, + offsetRect, + rectContainsPoint, + zeroCanvasRect, +} from '../../../../core/shared/math-utils' export const gridChangeElementLocationStrategy: CanvasStrategyFactory = ( canvasState: InteractionCanvasState, @@ -172,7 +180,7 @@ function getCommandsAndPatchForGridChangeElementLocation( } } -interface NewGridElementProps { +export interface NewGridElementProps { gridElementProperties: GridElementProperties targetCellCoords: GridCellCoordinates targetRootCell: GridCellCoordinates diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx index efb317a19ba2..04c6a3939405 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx @@ -698,7 +698,7 @@ export var storyboard = ( } }) - it('can move absolute element among grid cells', async () => { + it('can move absolute element among grid cells (within containing block)', async () => { const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report') const child = editor.renderedDOM.getByTestId('child') @@ -730,13 +730,56 @@ export var storyboard = ( await mouseMoveToPoint(dragTarget, endPoint) await mouseUpAtPoint(dragTarget, endPoint) + { + const { top, left, gridColumn, gridRow } = child.style + expect({ top, left, gridColumn, gridRow }).toEqual({ + gridColumn: '1', + gridRow: '1', + left: '252px', + top: '256px', + }) + } + }) + + it('can move absolute element among grid cells', async () => { + const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report') + + const child = editor.renderedDOM.getByTestId('child') + + { + const { top, left, gridColumn, gridRow } = child.style + expect({ top, left, gridColumn, gridRow }).toEqual({ + gridColumn: '1', + gridRow: '1', + left: '12px', + top: '16px', + }) + } + + await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')]) + + const childBounds = child.getBoundingClientRect() + const childCenter = windowPoint({ + x: Math.floor(childBounds.left + childBounds.width / 2), + y: Math.floor(childBounds.top + childBounds.height / 2), + }) + + const endPoint = offsetPoint(childCenter, windowPoint({ x: 300, y: 300 })) + const dragTarget = editor.renderedDOM.getByTestId( + GridCellTestId(EP.fromString('sb/scene/grid/child')), + ) + + await mouseDownAtPoint(dragTarget, childCenter) + await mouseMoveToPoint(dragTarget, endPoint) + await mouseUpAtPoint(dragTarget, endPoint) + { const { top, left, gridColumn, gridRow } = child.style expect({ top, left, gridColumn, gridRow }).toEqual({ gridColumn: '2', gridRow: '2', - left: '21.5px', - top: '32px', + left: '81.5px', + top: '92px', }) } }) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx index 389e0034888f..f4de8c072645 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx @@ -156,14 +156,14 @@ export var storyboard = ( >