zoom to fit on load (#2201)

* zoom to fit on load Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * lint Signed-off-by: Jess Frazelle <github@jessfraz.com> * add zoom to fit calls to the correct places * update comment * clean up comment * add snapshot test zoom to git Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * subscribe to camera updates from zoom to fit * fix types * partial test fix * updatges Signed-off-by: Jess Frazelle <github@jessfraz.com> * fix another test * remove my enhancements Signed-off-by: Jess Frazelle <github@jessfraz.com> --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-05-23 17:05:54 -07:00
parent 4be63e7331
commit 87979b17cf
11 changed files with 198 additions and 59 deletions
--- a/e2e/playwright/flow-tests.spec.ts
+++ b/e2e/playwright/flow-tests.spec.ts
@ -1693,6 +1693,28 @@ test('Hovering over 3d features highlights code', async ({ page }) => {
  await page.goto('/')
  await u.waitForAuthSkipAppStart()

+  await page.waitForTimeout(100)
+  await u.openAndClearDebugPanel()
+  await u.sendCustomCmd({
+    type: 'modeling_cmd_req',
+    cmd_id: uuidv4(),
+    cmd: {
+      type: 'default_camera_look_at',
+      vantage: { x: 0, y: -1250, z: 580 },
+      center: { x: 0, y: 0, z: 0 },
+      up: { x: 0, y: 0, z: 1 },
+    },
+  })
+  await page.waitForTimeout(100)
+  await u.sendCustomCmd({
+    type: 'modeling_cmd_req',
+    cmd_id: uuidv4(),
+    cmd: {
+      type: 'default_camera_get_settings',
+    },
+  })
+  await page.waitForTimeout(100)
+
  const extrusionTop: Coords2d = [800, 240]
  const flatExtrusionFace: Coords2d = [960, 160]
  const arc: Coords2d = [840, 160]
@ -1827,7 +1849,9 @@ fn yohey = (pos) => {
  // selecting an editable sketch but clicking "start sktech" should start a new sketch and not edit the existing one
  await page.getByText(selectionsSnippets.extrudeAndEditAllowed).click()
  await page.getByRole('button', { name: 'Start Sketch' }).click()
-  await page.mouse.click(700, 200)
+  await page.getByTestId('KCL Code').click()
+  await page.mouse.click(300, 500)
+  await page.getByTestId('KCL Code').click()
  // expect main content to contain `part005` i.e. started a new sketch
  await expect(page.locator('.cm-content')).toHaveText(
    /part005 = startSketchOn\('XZ'\)/
@ -2000,6 +2024,28 @@ test('Can edit segments by dragging their handles', async ({ page }) => {
    page.getByRole('button', { name: 'Start Sketch' })
  ).not.toBeDisabled()

+  await page.waitForTimeout(100)
+  await u.openAndClearDebugPanel()
+  await u.sendCustomCmd({
+    type: 'modeling_cmd_req',
+    cmd_id: uuidv4(),
+    cmd: {
+      type: 'default_camera_look_at',
+      vantage: { x: 0, y: -1250, z: 580 },
+      center: { x: 0, y: 0, z: 0 },
+      up: { x: 0, y: 0, z: 1 },
+    },
+  })
+  await page.waitForTimeout(100)
+  await u.sendCustomCmd({
+    type: 'modeling_cmd_req',
+    cmd_id: uuidv4(),
+    cmd: {
+      type: 'default_camera_get_settings',
+    },
+  })
+  await page.waitForTimeout(100)
+
  const startPX = [665, 458]
  const lineEndPX = [842, 458]
  const arcEndPX = [971, 342]
@ -2180,7 +2226,7 @@ test('Sketch on face', async ({ page }) => {

  await u.openAndClearDebugPanel()
  await u.doAndWaitForCmd(
-    () => page.mouse.click(793, 133),
+    () => page.mouse.click(625, 133),
    'default_camera_get_settings',
    true
  )
@ -2211,9 +2257,9 @@ test('Sketch on face', async ({ page }) => {

  await expect(page.locator('.cm-content'))
    .toContainText(`const part002 = startSketchOn(part001, 'seg01')
-  |> startProfileAt([-12.83, 6.7], %)
-  |> line([2.87, -0.23], %)
-  |> line([-3.05, -1.47], %)
+  |> startProfileAt([-13.02, 6.52], %)
+  |> line([2.1, -0.18], %)
+  |> line([-2.23, -1.07], %)
  |> lineTo([profileStartX(%), profileStartY(%)], %)
  |> close(%)`)

@ -2224,7 +2270,7 @@ test('Sketch on face', async ({ page }) => {
  await u.updateCamPosition([1049, 239, 686])
  await u.closeDebugPanel()

-  await page.getByText('startProfileAt([-12.83, 6.7], %)').click()
+  await page.getByText('startProfileAt([-13.02, 6.52], %)').click()
  await expect(page.getByRole('button', { name: 'Edit Sketch' })).toBeVisible()
  await u.doAndWaitForCmd(
    () => page.getByRole('button', { name: 'Edit Sketch' }).click(),
@ -2263,15 +2309,17 @@ test('Sketch on face', async ({ page }) => {
  await page.getByRole('button', { name: 'Exit Sketch' }).click()
  await u.expectCmdLog('[data-message-type="execution-done"]')

-  await page.getByText('startProfileAt([-12.83, 6.7], %)').click()
+  await page.getByText('startProfileAt([-13.02, 6.52], %)').click()

  await expect(page.getByRole('button', { name: 'Extrude' })).not.toBeDisabled()
+  await page.waitForTimeout(100)
  await page.getByRole('button', { name: 'Extrude' }).click()

  await expect(page.getByTestId('command-bar')).toBeVisible()
  await page.waitForTimeout(100)

  await page.keyboard.press('Enter')
+  await page.waitForTimeout(100)
  await expect(page.getByText('Confirm Extrude')).toBeVisible()
  await page.keyboard.press('Enter')

@ -2302,24 +2350,39 @@ test('Can code mod a line length', async ({ page }) => {
  await u.expectCmdLog('[data-message-type="execution-done"]')
  await u.closeDebugPanel()

-  // Click the line of code for xLine.
-  await page.getByText(`xLine(-20, %)`).click() // TODO remove this and reinstate // await topHorzSegmentClick()
+  // Click the line of code for line.
+  await page.getByText(`line([0, 20], %)`).click() // TODO remove this and reinstate // await topHorzSegmentClick()
  await page.waitForTimeout(100)

  // enter sketch again
  await page.getByRole('button', { name: 'Edit Sketch' }).click()
-  await page.waitForTimeout(350) // wait for animation
+  await page.waitForTimeout(500) // wait for animation

  const startXPx = 500
  await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
-  await page.mouse.click(615, 102)
+  await page.keyboard.down('Shift')
+  await page.mouse.click(834, 244)
+  await page.keyboard.up('Shift')
+
  await page.getByRole('button', { name: 'Constrain', exact: true }).click()
  await page.getByRole('button', { name: 'length', exact: true }).click()
  await page.getByText('Add constraining value').click()

  await expect(page.locator('.cm-content')).toHaveText(
-    `const length001 = 20const part001 = startSketchOn('XY')  |> startProfileAt([-10, -10], %)  |> line([20, 0], %)  |> line([0, 20], %)  |> xLine(-length001, %)`
+    `const length001 = 20const part001 = startSketchOn('XY')  |> startProfileAt([-10, -10], %)  |> line([20, 0], %)  |> angledLine([90, length001], %)  |> xLine(-20, %)`
  )
+
+  // Make sure we didn't pop out of sketch mode.
+  await expect(page.getByRole('button', { name: 'Exit Sketch' })).toBeVisible()
+
+  await page.waitForTimeout(500) // wait for animation
+
+  // Exit sketch
+  await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
+  await page.keyboard.press('Escape')
+  await expect(
+    page.getByRole('button', { name: 'Exit Sketch' })
+  ).not.toBeVisible()
 })

 test('Extrude from command bar selects extrude line after', async ({
--- a/e2e/playwright/snapshot-tests.spec.ts
+++ b/e2e/playwright/snapshot-tests.spec.ts
@ -773,3 +773,76 @@ const part002 = startSketchOn(part001, 'seg01')
    maxDiffPixels: 100,
  })
 })
+
+test('Zoom to fit on load - solid 2d', async ({ page, context }) => {
+  const u = await getUtils(page)
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)
+`
+    )
+  }, KCL_DEFAULT_LENGTH)
+
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  await u.openDebugPanel()
+  // wait for execution done
+  await expect(
+    page.locator('[data-message-type="execution-done"]')
+  ).toHaveCount(2)
+  await u.closeDebugPanel()
+
+  // Wait for the second extrusion to appear
+  // TODO: Find a way to truly know that the objects have finished
+  // rendering, because an execution-done message is not sufficient.
+  await page.waitForTimeout(1000)
+
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+})
+
+test('Zoom to fit on load - solid 3d', async ({ page, context }) => {
+  const u = await getUtils(page)
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)
+  |> extrude(10, %)
+`
+    )
+  }, KCL_DEFAULT_LENGTH)
+
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  await u.openDebugPanel()
+  // wait for execution done
+  await expect(
+    page.locator('[data-message-type="execution-done"]')
+  ).toHaveCount(2)
+  await u.closeDebugPanel()
+
+  // Wait for the second extrusion to appear
+  // TODO: Find a way to truly know that the objects have finished
+  // rendering, because an execution-done message is not sufficient.
+  await page.waitForTimeout(1000)
+
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+})
--- a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png
+++ b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png
--- a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-3d-1-Google-Chrome-linux.png
+++ b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-3d-1-Google-Chrome-linux.png
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^1.7.19",
    "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.61",
+    "@kittycad/lib": "^0.0.63",
    "@lezer/javascript": "^1.4.9",
    "@open-rpc/client-js": "^1.8.1",
    "@react-hook/resize-observer": "^2.0.1",
--- a/src/clientSideScene/CameraControls.ts
+++ b/src/clientSideScene/CameraControls.ts
@ -239,6 +239,7 @@ export class CameraControls {
            | 'default_camera_zoom'
            | 'camera_drag_end'
            | 'default_camera_get_settings'
+            | 'zoom_to_fit'
          >
        | UnreliableSubscription<'camera_drag_move'>
      )['callback']
@ -303,6 +304,10 @@ export class CameraControls {
        event: 'default_camera_get_settings',
        callback: cb,
      })
+      this.engineCommandManager.subscribeTo({
+        event: 'zoom_to_fit',
+        callback: cb,
+      })
      this.engineCommandManager.subscribeToUnreliable({
        event: 'camera_drag_move',
        callback: cb,
--- a/src/clientSideScene/sceneInfra.ts
+++ b/src/clientSideScene/sceneInfra.ts
@ -28,7 +28,6 @@ import { Axis } from 'lib/selections'
 import { type BaseUnit } from 'lib/settings/settingsTypes'
 import { CameraControls } from './CameraControls'
 import { EngineCommandManager } from 'lang/std/engineConnection'
-import { settings } from 'lib/settings/initialSettings'
 import { MouseState } from 'machines/modelingMachine'
 import { Themes } from 'lib/theme'

@ -182,15 +181,6 @@ export class SceneInfra {
    this.renderer.setClearColor(0x000000, 0) // Set clear color to black with 0 alpha (fully transparent)
    window.addEventListener('resize', this.onWindowResize)

-    // CAMERA
-    const camHeightDistanceRatio = 0.5
-    const baseUnit: BaseUnit = settings.modeling.defaultUnit.current
-    const baseRadius = 5.6
-    const length = baseUnitTomm(baseUnit) * baseRadius
-    const ang = Math.atan(camHeightDistanceRatio)
-    const x = Math.cos(ang) * length
-    const y = Math.sin(ang) * length
-
    this.camControls = new CameraControls(
      false,
      this.renderer.domElement,
@ -198,7 +188,6 @@ export class SceneInfra {
    )
    this.camControls.subscribeToCamChange(() => this.onCameraChange())
    this.camControls.camera.layers.enable(SKETCH_LAYER)
-    this.camControls.camera.position.set(0, -x, y)
    if (DEBUG_SHOW_INTERSECTION_PLANE)
      this.camControls.camera.layers.enable(INTERSECTION_PLANE_LAYER)

--- a/src/components/ModelingSidebar/ModelingSidebar.tsx
+++ b/src/components/ModelingSidebar/ModelingSidebar.tsx
@ -210,6 +210,7 @@ function ModelingPaneButton({
      key={paneConfig.id}
      className="pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent p-0 m-0 rounded-sm !outline-none"
      onClick={togglePane}
+      data-testid={paneConfig.title}
    >
      <ActionIcon
        icon={paneConfig.icon}
--- a/src/lang/std/engineConnection.ts
+++ b/src/lang/std/engineConnection.ts
@ -1132,10 +1132,26 @@ export class EngineCommandManager {
          },
        })

-        this.initPlanes().then(() => {
+        this.initPlanes().then(async () => {
          this.resolveReady()
          setIsStreamReady(true)
-          executeCode()
+          await executeCode()
+          await this.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'zoom_to_fit',
+              object_ids: [], // leave empty to zoom to all objects
+              padding: 0.1, // padding around the objects
+            },
+          })
+          // make sure client camera syncs after zoom to fit since zoom to fit doesn't return camera settings
+          // TODO: https://github.com/KittyCAD/engine/issues/2098
+          await this.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: { type: 'default_camera_get_settings' },
+          })
        })
      },
      onClose: () => {
--- a/src/lib/routeLoaders.ts
+++ b/src/lib/routeLoaders.ts
@ -12,7 +12,7 @@ import { loadAndValidateSettings } from './settings/settingsUtils'
 import makeUrlPathRelative from './makeUrlPathRelative'
 import { sep } from '@tauri-apps/api/path'
 import { readTextFile } from '@tauri-apps/plugin-fs'
-import { codeManager, kclManager } from 'lib/singletons'
+import { codeManager, engineCommandManager, kclManager } from 'lib/singletons'
 import { fileSystemManager } from 'lang/std/fileSystemManager'
 import {
  getProjectInfo,
@ -20,6 +20,7 @@ import {
  listProjects,
 } from './tauri'
 import { createSettings } from './settings/initialSettings'
+import { uuidv4 } from './utils'

 // The root loader simply resolves the settings and any errors that
 // occurred during the settings load
@ -105,6 +106,22 @@ export const fileLoader: LoaderFunction = async ({
    codeManager.updateCurrentFilePath(current_file_path)
    codeManager.updateCodeStateEditor(code)
    kclManager.executeCode(true)
+    await engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'zoom_to_fit',
+        object_ids: [], // leave empty to zoom to all objects
+        padding: 0.1, // padding around the objects
+      },
+    })
+    // make sure client camera syncs after zoom to fit since zoom to fit doesn't return camera settings
+    // TODO: https://github.com/KittyCAD/engine/issues/2098
+    await engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: { type: 'default_camera_get_settings' },
+    })

    // Set the file system manager to the project path
    // So that WASM gets an updated path for operations
--- a/yarn.lock
+++ b/yarn.lock
@ -1831,10 +1831,10 @@
  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==

-"@kittycad/lib@^0.0.61":
-  version "0.0.61"
-  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.61.tgz#4e21b211d4967ee348ae1716a3c027a30c91a8af"
-  integrity sha512-U8ehT6Zy07LrkC20W+7tslNddnUFH2BuN+Dd3uHK2hP3XT1WklHHPgu3O7pj3sAZnLU3FUS7M+QNS5HnOYeD0g==
+"@kittycad/lib@^0.0.63":
+  version "0.0.63"
+  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.63.tgz#cc70cf1c0780543bbca6f55aae40d0904cfd45d7"
+  integrity sha512-fDpGnycumT1xI/tSubRZzU9809/7s+m06w2EuJzxowgFrdIlvThnIHVf3EYvSujdFb0bHR/LZjodAw2ocXkXZw==
  dependencies:
    node-fetch "3.3.2"
    openapi-types "^12.0.0"
@ -8185,16 +8185,7 @@ string-natural-compare@^3.0.1:
  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==

-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -8267,14 +8258,7 @@ string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -9256,7 +9240,7 @@ workerpool@6.2.1:
  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
  integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -9274,15 +9258,6 @@ wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"