Nadro/2833/zoom level increase when swapping sketch modes (#3854)

* fix: fixing logic around setting the perspective and position of perspective camera when leaving sketch mode

* fix: typo

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)"

This reverts commit 60b12ffc54.

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)"

This reverts commit 9ab973c6c4.

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* remove unused vars

* fix: fixed the positions of the mouse clicks since the zoom level has changed?

* fix: updating test to make it work with my new zoom level

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

e2e/playwright/sketch-tests.spec.ts

@@ -618,19 +618,19 @@ test.describe('Sketch tests', () => {
     await u.closeDebugPanel()
 
     await click00r(30, 0)
-    codeStr += `  |> startProfileAt([1.53, 0], %)`
+    codeStr += `  |> startProfileAt([2.03, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(30, 0)
-    codeStr += `  |> line([1.53, 0], %)`
+    codeStr += `  |> line([2.04, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(0, 30)
-    codeStr += `  |> line([0, -1.53], %)`
+    codeStr += `  |> line([0, -2.03], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(-30, 0)
-    codeStr += `  |> line([-1.53, 0], %)`
+    codeStr += `  |> line([-2.04, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(undefined, undefined)

e2e/playwright/testing-selections.spec.ts

@@ -31,6 +31,8 @@ test.describe('Testing selections', () => {
 
     const xAxisClick = () =>
       page.mouse.click(700, 253).then(() => page.waitForTimeout(100))
+    const xAxisClickAfterExitingSketch = () =>
+      page.mouse.click(639, 278).then(() => page.waitForTimeout(100))
     const emptySpaceHover = () =>
       test.step('Hover over empty space', async () => {
         await page.mouse.move(700, 143, { steps: 5 })
@@ -44,9 +46,13 @@ test.describe('Testing selections', () => {
         )
       })
     const topHorzSegmentClick = () =>
-      page.mouse.click(709, 290).then(() => page.waitForTimeout(100))
+      page.mouse
+        .click(startXPx, 500 - PUR * 20)
+        .then(() => page.waitForTimeout(100))
     const bottomHorzSegmentClick = () =>
-      page.mouse.click(767, 396).then(() => page.waitForTimeout(100))
+      page.mouse
+        .click(startXPx + PUR * 10, 500 - PUR * 10)
+        .then(() => page.waitForTimeout(100))
 
     await u.clearCommandLogs()
     await expect(
@@ -196,6 +202,8 @@ test.describe('Testing selections', () => {
 
     // select a line, this verifies that sketches in the scene can be selected outside of sketch mode
     await topHorzSegmentClick()
+    await xAxisClickAfterExitingSketch()
+    await page.waitForTimeout(100)
     await emptySpaceHover()
 
     // enter sketch again

src/clientSideScene/CameraControls.ts

@@ -31,6 +31,7 @@ import { reportRejection } from 'lib/trap'
 
 const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
+const ORTHOGRAPHIC_MAGIC_FOV = 4
 
 const tempQuaternion = new Quaternion() // just used for maths
 
@@ -84,7 +85,7 @@ export class CameraControls {
   pendingPan: Vector2 | null = null
   interactionGuards: MouseGuard = cameraMouseDragGuards.KittyCAD
   isFovAnimationInProgress = false
-  fovBeforeOrtho = 45
+  perspectiveFovBeforeOrtho = 45
   get isPerspective() {
     return this.camera instanceof PerspectiveCamera
   }
@@ -398,7 +399,7 @@ export class CameraControls {
           const zoomFudgeFactor = 2280
           distance = zoomFudgeFactor / (this.camera.zoom * 45)
         }
-        const panSpeed = (distance / 1000 / 45) * this.fovBeforeOrtho
+        const panSpeed = (distance / 1000 / 45) * this.perspectiveFovBeforeOrtho
         this.pendingPan.x += -deltaMove.x * panSpeed
         this.pendingPan.y += deltaMove.y * panSpeed
       }
@@ -516,19 +517,15 @@ export class CameraControls {
   _usePerspectiveCamera = () => {
     const { x: px, y: py, z: pz } = this.camera.position
     const { x: qx, y: qy, z: qz, w: qw } = this.camera.quaternion
-    const zoom = this.camera.zoom
     this.camera = this.createPerspectiveCamera()
 
     this.camera.position.set(px, py, pz)
     this.camera.quaternion.set(qx, qy, qz, qw)
-    const zoomFudgeFactor = 2280
-    const distance = zoomFudgeFactor / (zoom * this.lastPerspectiveFov)
     const direction = new Vector3().subVectors(
       this.camera.position,
       this.target
     )
     direction.normalize()
-    this.camera.position.copy(this.target).addScaledVector(direction, distance)
   }
   usePerspectiveCamera = async (forceSend = false) => {
     this._usePerspectiveCamera()
@@ -980,9 +977,9 @@ export class CameraControls {
         )
       this.isFovAnimationInProgress = true
       let currentFov = this.lastPerspectiveFov
-      this.fovBeforeOrtho = currentFov
+      this.perspectiveFovBeforeOrtho = currentFov
 
-      const targetFov = 4
+      const targetFov = ORTHOGRAPHIC_MAGIC_FOV
       const fovAnimationStep = (currentFov - targetFov) / FRAMES_TO_ANIMATE_IN
       let frameWaitOnFinish = 10
 
@@ -1018,9 +1015,9 @@ export class CameraControls {
         )
       }
       this.isFovAnimationInProgress = true
-      const targetFov = this.fovBeforeOrtho // Target FOV for perspective
+      const targetFov = this.perspectiveFovBeforeOrtho // Target FOV for perspective
-      this.lastPerspectiveFov = 4
+      this.lastPerspectiveFov = ORTHOGRAPHIC_MAGIC_FOV
-      let currentFov = 4
+      let currentFov = ORTHOGRAPHIC_MAGIC_FOV
       const initialCameraUp = this.camera.up.clone()
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.usePerspectiveCamera()
@@ -1056,9 +1053,8 @@ export class CameraControls {
       )
     }
     this.isFovAnimationInProgress = true
-    const targetFov = this.fovBeforeOrtho // Target FOV for perspective
+    const targetFov = this.perspectiveFovBeforeOrtho // Target FOV for perspective
-    this.lastPerspectiveFov = 4
+    let currentFov = ORTHOGRAPHIC_MAGIC_FOV
-    let currentFov = 4
     const initialCameraUp = this.camera.up.clone()
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.usePerspectiveCamera()