Nickmccleery/fix top bottom default views (#7860)

* First pass; this works but feels a little messy to me.

* Tidy up top and bottom, using current camera setup.

* Add some warnings on world coord system.

* Unify methods for top/bottom view.

* Use result type to satisfy the linter gods who do not like throws.

* Tweak test to accommodate alternate engine command.

* Reinstate tests... how on earth did I do that?

* Scrap the DIY result type and push some hardware-y variable naming.

* Wee comment.

* Remove dupe log.

Author: nickmccleery

e2e/playwright/testing-gizmo.spec.ts

@@ -98,7 +98,13 @@ test.describe('Testing Gizmo', () => {
       await page.waitForTimeout(100)
       await page.mouse.click(clickPosition.x, clickPosition.y)
       await page.mouse.move(0, 0)
-      await u.waitForCmdReceive('default_camera_look_at')
+
+      // We use different camera commands for top/bottom cf. all others.
+      if (['top view', 'bottom view'].includes(testDescription)) {
+        await u.waitForCmdReceive('default_camera_set_view')
+      } else {
+        await u.waitForCmdReceive('default_camera_look_at')
+      }
       await u.clearCommandLogs()
 
       await u.sendCustomCmd({

src/clientSideScene/CameraControls.ts

@@ -1,10 +1,12 @@
-import Hammer from 'hammerjs'
 import type {
   CameraDragInteractionType_type,
   CameraViewState_type,
 } from '@kittycad/lib/dist/types/src/models'
+import { isArray } from '@src/lib/utils'
+
 import type { EngineStreamActor } from '@src/machines/engineStreamMachine'
 import * as TWEEN from '@tweenjs/tween.js'
+import Hammer from 'hammerjs'
 import {
   Euler,
   MathUtils,
@@ -34,7 +36,9 @@ import type {
 } from '@src/lang/std/engineConnection'
 import type { MouseGuard } from '@src/lib/cameraControls'
 import { cameraMouseDragGuards } from '@src/lib/cameraControls'
+import type { SettingsType } from '@src/lib/settings/initialSettings'
 import { reportRejection } from '@src/lib/trap'
+import { err } from '@src/lib/trap'
 import {
   getNormalisedCoordinates,
   isReducedMotion,
@@ -44,12 +48,18 @@ import {
   uuidv4,
 } from '@src/lib/utils'
 import { deg2Rad } from '@src/lib/utils2d'
-import type { SettingsType } from '@src/lib/settings/initialSettings'
 import { degToRad } from 'three/src/math/MathUtils'
 
 const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
 const ORTHOGRAPHIC_MAGIC_FOV = 4
+const EXPECTED_WORLD_COORD_SYSTEM = 'right_handed_up_z'
+
+// Partial declaration; the front/back/left/right are handled differently.
+enum StandardView {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
 
 const tempQuaternion = new Quaternion() // just used for maths
 
@@ -919,28 +929,123 @@ export class CameraControls {
     })
   }
 
+  async getCameraView(): Promise<CameraViewState_type | Error> {
+    const response = await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: { type: 'default_camera_get_view' },
+    })
+
+    // Check valid response from the engine.
+    const singleResponse = isArray(response) ? response[0] : response
+    const noValidResponse =
+      !singleResponse?.success || !('resp' in singleResponse)
+
+    if (noValidResponse) {
+      return new Error('Failed to get camera view state: no valid response.')
+    }
+
+    // Check we actually have the 'modeling_response' field.
+    const data = singleResponse.resp.data
+    const noModelingResponse = !('modeling_response' in data)
+
+    if (noModelingResponse) {
+      return new Error(
+        'Failed to get camera view state: no `modeling_response`.'
+      )
+    }
+
+    // Check that we have the expected response type and the nested data.
+    const modelingResponse = data.modeling_response
+    const noData = !('data' in modelingResponse)
+    const wrongResponseType =
+      modelingResponse.type !== 'default_camera_get_view'
+
+    if (noData || wrongResponseType) {
+      return new Error('Failed to get camera view state: invalid response.')
+    }
+
+    return modelingResponse.data.view
+  }
+
+  async setCameraViewAlongZ(direction: StandardView) {
+    // Sets the camera view along the Z axis, giving us a top-down or bottom-up view.
+    // The approach first retrieves current camera setup, then alters pivot params,
+    // ultimately preserving other camera settings, e.g., ortho vs. perspective projection.
+
+    // Note: this assumes right handed, Z-up, X positive to the right.
+    const Z_AXIS_QUATERNIONS = {
+      [StandardView.TOP]: { x: 0, y: 0, z: 0, w: 1 },
+      [StandardView.BOTTOM]: { x: 1, y: 0, z: 0, w: 0 },
+    } as const
+
+    const cameraView = await this.getCameraView()
+
+    if (err(cameraView)) {
+      return
+    }
+
+    // Handle unexpected world coordinate system; should delete this eventually.
+    if (cameraView.world_coord_system !== EXPECTED_WORLD_COORD_SYSTEM) {
+      console.warn(
+        `Camera is not in the expected ${EXPECTED_WORLD_COORD_SYSTEM} world coordinate system.
+        Resulting view may not match expectations.`
+      )
+    }
+
+    const cameraViewTarget: CameraViewState_type = {
+      ...cameraView,
+      pivot_rotation: Z_AXIS_QUATERNIONS[direction],
+      pivot_position: {
+        x: this.target.x,
+        y: this.target.y,
+        z: this.target.z,
+      },
+    }
+
+    await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_set_view',
+        view: cameraViewTarget,
+      },
+    })
+
+    await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_get_settings',
+      },
+    })
+  }
+
   async updateCameraToAxis(
     axis: 'x' | 'y' | 'z' | '-x' | '-y' | '-z'
   ): Promise<void> {
+    // TODO: We currently use both `default_camera_look_at` and `default_camera_set_view`
+    // (via `setCameraViewAlongZ`). We should unify these during future camera work.
+
     const distance = this.camera.position.distanceTo(this.target)
 
     const vantage = this.target.clone()
-    let up = { x: 0, y: 0, z: 1 }
+    const up = { x: 0, y: 0, z: 1 }
 
     if (axis === 'x') {
       vantage.x += distance
     } else if (axis === 'y') {
       vantage.y += distance
     } else if (axis === 'z') {
-      vantage.z += distance
-      up = { x: -1, y: 0, z: 0 }
+      await this.setCameraViewAlongZ(StandardView.TOP)
+      return
     } else if (axis === '-x') {
       vantage.x -= distance
     } else if (axis === '-y') {
       vantage.y -= distance
     } else if (axis === '-z') {
-      vantage.z -= distance
-      up = { x: -1, y: 0, z: 0 }
+      await this.setCameraViewAlongZ(StandardView.BOTTOM)
+      return
     }
 
     await this.engineCommandManager.sendSceneCommand({