Add Client-Side Gizmo (#2354)

* draft #2279

Add client side gizmo #2279, work in progress

* draft #2279

unreliableSubscriptions

* draft #2279

nice Gizmo

* blue ring

give the canvas a round shape and a border, wrapping rounded div element around the canvas

* Refactor Gizmo Component

Extracted reusable constants
Modularized the code
Simplified the useEffect logic
Added TypeScript type annotations
Improved overall code structure and readability

* remove old gizmo

* fmt

* styling and relocation

 Add className "pointer-events-none" to gizmo wrapper div (for now to prevent context menu)
 Make LowerRightControls container element have these classNames: flex flex-col items-end gap-3
 Move gizmo into LowerRightControls.tsx as the first child of the section element
 Remove the fixed styling from the gizmo div so it flows in flexbox

* fmt

* fix camera up problem

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

* up tweak

* Revert "up tweak"

This reverts commit a53a0ef240.

* test tweak

* tweak test

---------

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

src/clientSideScene/CameraControls.ts

@@ -20,6 +20,7 @@ import {
   EngineCommand,
   Subscription,
   EngineCommandManager,
+  UnreliableSubscription,
 } from 'lang/std/engineConnection'
 import { uuidv4 } from 'lib/utils'
 import { deg2Rad } from 'lib/utils2d'
@@ -232,9 +233,18 @@ export class CameraControls {
     this.update()
     this._usePerspectiveCamera()
 
-    const cb: Subscription<
-      'default_camera_zoom' | 'camera_drag_end' | 'default_camera_get_settings'
-    >['callback'] = ({ data, type }) => {
+    type CallBackParam = Parameters<
+      (
+        | Subscription<
+            | 'default_camera_zoom'
+            | 'camera_drag_end'
+            | 'default_camera_get_settings'
+          >
+        | UnreliableSubscription<'camera_drag_move'>
+      )['callback']
+    >[0]
+
+    const cb = ({ data, type }: CallBackParam) => {
       const camSettings = data.settings
       this.camera.position.set(
         camSettings.pos.x,
@@ -246,7 +256,13 @@ export class CameraControls {
         camSettings.center.y,
         camSettings.center.z
       )
-      this.camera.up.set(camSettings.up.x, camSettings.up.y, camSettings.up.z)
+      const quat = new Quaternion(
+        camSettings.orientation.x,
+        camSettings.orientation.y,
+        camSettings.orientation.z,
+        camSettings.orientation.w
+      ).invert()
+      this.camera.up.copy(new Vector3(0, 1, 0).applyQuaternion(quat))
       if (this.camera instanceof PerspectiveCamera && camSettings.ortho) {
         this.useOrthographicCamera()
       }
@@ -287,6 +303,10 @@ export class CameraControls {
         event: 'default_camera_get_settings',
         callback: cb,
       })
+      this.engineCommandManager.subscribeToUnreliable({
+        event: 'camera_drag_move',
+        callback: cb,
+      })
     })
   }