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 new file mode 100644 index 000000000000..305863f496e1 --- /dev/null +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx @@ -0,0 +1,180 @@ +import * as EP from '../../../../core/shared/element-path' +import type { WindowPoint } from '../../../../core/shared/math-utils' +import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils' +import type { Modifiers } from '../../../../utils/modifiers' +import { cmdModifier, emptyModifiers } from '../../../../utils/modifiers' +import { CanvasControlsContainerID } from '../../controls/new-canvas-controls' +import type { Point } from '../../event-helpers.test-utils' +import { + mouseClickAtPoint, + mouseDownAtPoint, + mouseMoveToPoint, + mouseUpAtPoint, +} from '../../event-helpers.test-utils' +import type { EditorRenderResult } from '../../ui-jsx.test-utils' +import { getPrintedUiJsCode, renderTestEditorWithCode } from '../../ui-jsx.test-utils' + +async function dragElement( + renderResult: EditorRenderResult, + targetTestId: string, + targetControlTestId: string, + dragDelta: WindowPoint, + modifiers: Modifiers, +): Promise { + const targetElement = renderResult.renderedDOM.getByTestId(targetTestId) + const targetElementBounds = targetElement.getBoundingClientRect() + const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) + + const startPoint = windowPoint({ x: targetElementBounds.x + 5, y: targetElementBounds.y + 5 }) + const endPoint = offsetPoint(startPoint, dragDelta) + + await mouseClickAtPoint(canvasControlsLayer, startPoint, { modifiers: cmdModifier }) + + const targetControl = renderResult.renderedDOM.getByTestId(targetControlTestId) + + await mouseDownAtPoint(targetControl, startPoint, { modifiers: modifiers }) + + const delta: Point = { + x: endPoint.x - startPoint.x, + y: endPoint.y - startPoint.y, + } + await mouseMoveToPoint( + targetControl, + { + x: endPoint.x, + y: endPoint.y, + }, + { + modifiers: modifiers, + eventOptions: { + movementX: delta.x, + movementY: delta.y, + buttons: 1, + }, + }, + ) + + await mouseUpAtPoint(canvasControlsLayer, endPoint, { + modifiers: modifiers, + }) +} + +describe('grid move absolute strategy', () => { + it('move an absolute element in a non-absolute grid', async () => { + const editor = await renderTestEditorWithCode( + `import * as React from 'react' +import { Storyboard } from 'utopia-api' + +export var storyboard = ( + +
+
+
+
+
+ +)`, + 'await-first-dom-report', + ) + + await dragElement( + editor, + 'dragme', + 'grid-cell-sb/container/grid/dragme', + windowPoint({ x: -200, y: -200 }), + emptyModifiers, + ) + + expect(getPrintedUiJsCode(editor.getEditorState())).toEqual( + `import * as React from 'react' +import { Storyboard } from 'utopia-api' + +export var storyboard = ( + +
+
+
+
+
+ +) +`, + ) + + expect(1).toEqual(1) + }) +}) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts index a25d7f521a37..53eb97fe8f6d 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts @@ -215,6 +215,17 @@ function runGridMoveAbsolute( ] } + function getContainingRect(): CanvasRectangle { + if (selectedElementMetadata.specialSizeMeasurements.immediateParentProvidesLayout) { + const gridCellGlobalFrame = getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell) + return zeroRectIfNullOrInfinity(gridCellGlobalFrame) + } else { + return zeroRectIfNullOrInfinity( + selectedElementMetadata.specialSizeMeasurements.coordinateSystemBounds, + ) + } + } + // otherwise, return a change location + absolute adjustment return [ ...runGridChangeElementLocation( @@ -225,12 +236,7 @@ function runGridMoveAbsolute( gridTemplate, null, ), - ...gridChildAbsoluteMoveCommands( - selectedElementMetadata, - getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell) ?? - canvasRectangle(zeroRectangle), - interactionData, - ), + ...gridChildAbsoluteMoveCommands(selectedElementMetadata, getContainingRect(), interactionData), ] } diff --git a/editor/src/core/shared/math-utils.ts b/editor/src/core/shared/math-utils.ts index 4978b144f4bf..a50258330f00 100644 --- a/editor/src/core/shared/math-utils.ts +++ b/editor/src/core/shared/math-utils.ts @@ -183,7 +183,7 @@ export function windowRectangle( } export function zeroRectIfNullOrInfinity( - r: MaybeInfinityRectangle | null, + r: MaybeInfinityRectangle | null | undefined, ): Rectangle { return r == null || isInfinityRectangle(r) ? (zeroRectangle as Rectangle) : r }