From b36ad22f49d805dc31cdeda8b4d24afda5078097 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 4 Sep 2024 17:22:33 +0200
Subject: [PATCH] Fix draw to insert into grid when zoomed in (#6311)

## Problem
Drawing into a grid doesn't draw to right place when the editor is
zoomed in

## Fix
Update the drawing code to make it so and add tests
---
 .../draw-to-insert-strategy.spec.browser2.tsx | 91 +++++++++++++++++++
 .../grid-draw-to-insert-strategy.tsx          | 15 ++-
 2 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
index da4499c5e81c..09b3c6d1914b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
@@ -18,6 +18,7 @@ import { FOR_TESTS_setNextGeneratedUid } from '../../../../core/model/element-te
 import type { WindowPoint } from '../../../../core/shared/math-utils'
 import { windowPoint } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
+import CanvasActions from '../../canvas-actions'
 
 function slightlyOffsetWindowPointBecauseVeryWeirdIssue(point: { x: number; y: number }) {
   // FIXME when running in headless chrome, the result of getBoundingClientRect will be slightly
@@ -243,6 +244,49 @@ export var storyboard = (
       })
     })
 
+    it('can click to insert into a grid when zoomed in', async () => {
+      const editor = await renderTestEditorWithCode(project, 'await-first-dom-report')
+
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid')])
+      await editor.dispatch([CanvasActions.zoom(2)], true)
+      await editor.getDispatchFollowUpActionsFinished()
+
+      await pressKey('d')
+      ensureInInsertMode(editor)
+
+      const grid = editor.renderedDOM.getByTestId('grid')
+      const gridBB = grid.getBoundingClientRect()
+
+      const target: WindowPoint = windowPoint({
+        x: gridBB.x + 300,
+        y: gridBB.y + 150,
+      })
+
+      const canvasControlsLayer = editor.renderedDOM.getByTestId(CanvasControlsContainerID)
+
+      await mouseMoveToPoint(canvasControlsLayer, target)
+      await mouseClickAtPoint(canvasControlsLayer, target)
+      await editor.getDispatchFollowUpActionsFinished()
+
+      const child = grid.firstChild
+      if (child == null) {
+        throw new Error('Draw to insert should be able to insert an element')
+      }
+
+      const { gridRow, gridColumn, width, height, position, top, left } = (child as HTMLElement)
+        .style
+
+      expect({ gridRow, gridColumn, width, height, position, top, left }).toEqual({
+        gridColumn: '1',
+        gridRow: '1',
+        height: '100px',
+        left: '100px',
+        position: 'absolute',
+        top: '25px',
+        width: '100px',
+      })
+    })
+
     it('can draw to insert into a grid', async () => {
       const editor = await renderTestEditorWithCode(project, 'await-first-dom-report')
 
@@ -286,5 +330,52 @@ export var storyboard = (
         width: '40px',
       })
     })
+
+    it('can draw to insert into a grid when zoomed in', async () => {
+      const editor = await renderTestEditorWithCode(project, 'await-first-dom-report')
+
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid')])
+
+      await editor.dispatch([CanvasActions.zoom(2)], true)
+      await editor.getDispatchFollowUpActionsFinished()
+
+      await pressKey('d')
+      ensureInInsertMode(editor)
+
+      const grid = editor.renderedDOM.getByTestId('grid')
+      const gridBB = grid.getBoundingClientRect()
+
+      const target: WindowPoint = windowPoint({
+        x: gridBB.x + 250,
+        y: gridBB.y + 150,
+      })
+
+      const canvasControlsLayer = editor.renderedDOM.getByTestId(CanvasControlsContainerID)
+
+      await mouseMoveToPoint(canvasControlsLayer, target)
+      await mouseDragFromPointToPoint(canvasControlsLayer, target, {
+        x: target.x + 40,
+        y: target.y + 60,
+      })
+      await editor.getDispatchFollowUpActionsFinished()
+
+      const child = grid.firstChild
+      if (child == null) {
+        throw new Error('Draw to insert should be able to insert an element')
+      }
+
+      const { gridRow, gridColumn, width, height, position, top, left } = (child as HTMLElement)
+        .style
+
+      expect({ gridRow, gridColumn, width, height, position, top, left }).toEqual({
+        gridColumn: '1',
+        gridRow: '1',
+        height: '30px',
+        left: '125px',
+        position: 'absolute',
+        top: '75px',
+        width: '20px',
+      })
+    })
   })
 })
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 dbc69ce71f08..c1e8650fe0f0 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
@@ -13,7 +13,9 @@ import {
   canvasVector,
   offsetPoint,
   roundRectangleToNearestWhole,
+  scaleVector,
   size,
+  windowPoint,
 } from '../../../../core/shared/math-utils'
 import { assertNever } from '../../../../core/shared/utils'
 import { EditorModes, type InsertionSubject } from '../../../editor/editor-modes'
@@ -335,8 +337,13 @@ function getOffsetFromGridCell(
     canvasState.canvasOffset,
   )
 
-  return canvasPoint({
-    x: mouseWindowPoint.x - cellWindowRectangle.x,
-    y: mouseWindowPoint.y - cellWindowRectangle.y,
-  })
+  const { x, y } = scaleVector(
+    windowPoint({
+      x: mouseWindowPoint.x - cellWindowRectangle.x,
+      y: mouseWindowPoint.y - cellWindowRectangle.y,
+    }),
+    1 / canvasState.scale,
+  )
+
+  return canvasPoint({ x, y })
 }