From 0eb1895744b02a188c451fb75bf01a274e7958c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= Date: Fri, 30 Aug 2024 15:41:41 +0200 Subject: [PATCH] Fix scaling when zoomed in (#6280) # [Example project](https://utopia.fish/p/7f224c81-juvenile-consonant/?branch_name=fix-zoom-scaling) ## Problem The Chrome 128 release changed how `zoom` works under the hood, which had an impact on canvas control positioning. ## Fix Update the canvas control positioning code to accomodate these changes and reinstate tests that were disabled because of the changes to `zoom`. **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Preview mode --- .../canvas-strategies.spec.browser2.tsx | 3 +-- ...ze-bounding-box-strategy.spec.browser2.tsx | 3 +-- .../grid-draw-to-insert-strategy.tsx | 7 +------ .../strategies/grid-helpers.ts | 21 +++++++------------ ...-rearrange-move-strategy.spec.browser2.tsx | 11 +++++----- .../grid-resize-element-strategy.ts | 2 +- ...nent-picker-context-menu.spec.browser2.tsx | 4 +++- editor/src/core/shared/dom-utils.ts | 2 +- 8 files changed, 20 insertions(+), 33 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx index 95e591965a72..3239dcd9cee1 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx @@ -452,8 +452,7 @@ describe('Snapping guidelines for absolutely moved element', () => { ]) }) - // Disabled because of the zoom problems introduced by the Chrome 128 release - xit('should line up appropriately with a scale of 4', async () => { + it('should line up appropriately with a scale of 4', async () => { const renderResult = await getGuidelineRenderResult(4) expect(await getGuidelineDimensions(renderResult, 'guideline-0')).toEqual({ diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx index 670bfe2c8ef1..a9832a5edb27 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx @@ -2456,8 +2456,7 @@ export var storyboard = ( expect(isBetween(span.clientHeight, 37, 39)).toBe(true) }) - // Disabled because of the zoom problems introduced by the Chrome 128 release - xit('does not resize text elements past their intrinsic size when zoomed in', async () => { + it('does not resize text elements past their intrinsic size when zoomed in', async () => { const renderResult = await renderTestEditorWithCode( formatTestProjectCode(` import * as React from 'react' 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 bfa6d825e899..d2dd23bddb8a 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 @@ -317,12 +317,7 @@ function getGridCellUnderCursor( canvasState.canvasOffset, ) - return getTargetCell( - customStrategyState.grid.targetCell, - canvasState.scale, - false, - mouseWindowPoint, - ) + return getTargetCell(customStrategyState.grid.targetCell, false, mouseWindowPoint) } function getOffsetFromGridCell( 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 267d4cfa0d64..a6360bbc3962 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -12,7 +12,6 @@ import type { CanvasVector, WindowRectangle } from '../../../../core/shared/math import { offsetPoint, rectContainsPoint, - scaleRect, windowRectangle, type WindowPoint, } from '../../../../core/shared/math-utils' @@ -28,12 +27,12 @@ import * as EP from '../../../../core/shared/element-path' import { deleteProperties } from '../../commands/delete-properties-command' import { isCSSKeyword } from '../../../inspector/common/css-utils' -export function getGridCellUnderMouse(mousePoint: WindowPoint, canvasScale: number) { - return getGridCellAtPoint(mousePoint, canvasScale, false) +export function getGridCellUnderMouse(mousePoint: WindowPoint) { + return getGridCellAtPoint(mousePoint, false) } -function getGridCellUnderMouseRecursive(mousePoint: WindowPoint, canvasScale: number) { - return getGridCellAtPoint(mousePoint, canvasScale, true) +function getGridCellUnderMouseRecursive(mousePoint: WindowPoint) { + return getGridCellAtPoint(mousePoint, true) } const gridCellTargetIdPrefix = 'grid-cell-target-' @@ -52,7 +51,6 @@ function isGridCellTargetId(id: string): boolean { function getGridCellAtPoint( windowPoint: WindowPoint, - canvasScale: number, duplicating: boolean, ): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null { function maybeRecursivelyFindCellAtPoint( @@ -62,10 +60,7 @@ function getGridCellAtPoint( for (const element of elements) { if (isGridCellTargetId(element.id)) { const domRect = element.getBoundingClientRect() - const windowRect = - canvasScale > 1 - ? scaleRect(windowRectangle(domRect), canvasScale) - : windowRectangle(domRect) + const windowRect = windowRectangle(domRect) if (rectContainsPoint(windowRect, windowPoint)) { return { element: element, cellWindowRectangle: windowRect } } @@ -136,7 +131,6 @@ export function runGridRearrangeMove( const targetCellUnderMouse = getTargetCell( customState.targetCell, - canvasScale, duplicating, mouseWindowPoint, )?.gridCellCoordinates @@ -314,14 +308,13 @@ export function setGridPropsCommands( export function getTargetCell( previousTargetCell: GridCellCoordinates | null, - canvasScale: number, duplicating: boolean, mouseWindowPoint: WindowPoint, ): { gridCellCoordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null { let cell = previousTargetCell ?? null const cellUnderMouse = duplicating - ? getGridCellUnderMouseRecursive(mouseWindowPoint, canvasScale) - : getGridCellUnderMouse(mouseWindowPoint, canvasScale) + ? getGridCellUnderMouseRecursive(mouseWindowPoint) + : getGridCellUnderMouse(mouseWindowPoint) if (cellUnderMouse == null) { return null } 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 0ab5aea9b829..faffadaf75ba 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 @@ -60,8 +60,7 @@ describe('grid rearrange move strategy', () => { }) }) - // Disabled because of the zoom problems introduced by the Chrome 128 release - xit('can rearrange elements on a grid (zoom in)', async () => { + it('can rearrange elements on a grid (zoom in)', async () => { const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report') const testId = 'aaa' @@ -213,13 +212,13 @@ async function runMoveTest( await mouseDragFromPointToPoint( sourceGridCell, { - x: sourceRect.x * (props.scale > 1 ? props.scale : 1) + 10, - y: sourceRect.y * (props.scale > 1 ? props.scale : 1) + 10, + x: sourceRect.x + 10, + y: sourceRect.y + 10, }, getRectCenter( localRectangle({ - x: targetRect.x * (props.scale > 1 ? props.scale : 1), - y: targetRect.y * (props.scale > 1 ? props.scale : 1), + x: targetRect.x, + y: targetRect.y, width: targetRect.width, height: targetRect.height, }), diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts index e43b0e61b40a..428868b41c05 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts @@ -82,7 +82,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = ( ) let targetCell = customState.grid.targetCell - const cellUnderMouse = getGridCellUnderMouse(mouseWindowPoint, canvasState.scale) + const cellUnderMouse = getGridCellUnderMouse(mouseWindowPoint) if (cellUnderMouse != null) { targetCell = cellUnderMouse.coordinates } diff --git a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx index 86d2c4ff0ce6..95bd7b3af9aa 100644 --- a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx +++ b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx @@ -1387,7 +1387,9 @@ export var storyboard = ( { x: 2, y: 2 }, ) - await mouseClickAtPoint(editor.renderedDOM.getByText('Column'), { x: 2, y: 2 }) + const column = await waitFor(() => editor.renderedDOM.getByText('Column')) + + await mouseClickAtPoint(column, { x: 2, y: 2 }) // the element inside the map has been changed to a `div` expect(getPrintedUiJsCodeWithoutUIDs(editor.getEditorState())) diff --git a/editor/src/core/shared/dom-utils.ts b/editor/src/core/shared/dom-utils.ts index 8a0dfc5defa3..0ac6d384f371 100644 --- a/editor/src/core/shared/dom-utils.ts +++ b/editor/src/core/shared/dom-utils.ts @@ -283,7 +283,7 @@ export function getCanvasRectangleFromElement( withContent: 'without-text-content' | 'with-text-content' | 'only-text-content', rounding: 'nearest-half' | 'no-rounding', ): CanvasRectangle { - const scale = canvasScale < 1 ? 1 / canvasScale : 1 + const scale = 1 / canvasScale const roundingFn = getRoundingFn(rounding)