Make camera mouse controls configurable (#411)

* Add camera handler config object
Using definitions of camera controls of various
CAD incumbents from Onshape's onboarding.

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Refactor: alphabetize settingsMachine

* Refactor: add descriptions to MouseGuards

* Refactor: don't destructure mousemove event

* Refactor: button down in stream as int, not bool

* Honor current camera control settings

* Add cameraControls to settings

* Refactor: alphabetize settings imports

* Refactor: break out cameraControls to own file

* Fix camera control setting in command bar

* Fix formatting on generated type file

* dont use "as" in App.tsx guards

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

* Don't use "as" in Stream.tsx

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

* Don't use "as" in settingsMachine.ts

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

* Add type to cadPrograms

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

* Kurt review

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

src/components/Stream.tsx

@@ -9,6 +9,9 @@ import { v4 as uuidv4 } from 'uuid'
 import { useStore } from '../useStore'
 import { getNormalisedCoordinates } from '../lib/utils'
 import Loading from './Loading'
+import { cameraMouseDragGuards } from 'lib/cameraControls'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/models'
 
 export const Stream = ({ className = '' }) => {
   const [isLoading, setIsLoading] = useState(true)
@@ -17,7 +20,7 @@ export const Stream = ({ className = '' }) => {
   const {
     mediaStream,
     engineCommandManager,
-    setIsMouseDownInStream,
+    setButtonDownInStream,
     didDragInStream,
     setDidDragInStream,
     streamDimensions,
@@ -25,14 +28,18 @@ export const Stream = ({ className = '' }) => {
   } = useStore((s) => ({
     mediaStream: s.mediaStream,
     engineCommandManager: s.engineCommandManager,
-    isMouseDownInStream: s.isMouseDownInStream,
-    setIsMouseDownInStream: s.setIsMouseDownInStream,
+    setButtonDownInStream: s.setButtonDownInStream,
     fileId: s.fileId,
     didDragInStream: s.didDragInStream,
     setDidDragInStream: s.setDidDragInStream,
     streamDimensions: s.streamDimensions,
     isExecuting: s.isExecuting,
   }))
+  const {
+    settings: {
+      context: { cameraControls },
+    },
+  } = useGlobalStateContext()
 
   useEffect(() => {
     if (
@@ -45,23 +52,29 @@ export const Stream = ({ className = '' }) => {
     videoRef.current.srcObject = mediaStream
   }, [mediaStream, engineCommandManager])
 
-  const handleMouseDown: MouseEventHandler<HTMLVideoElement> = ({
-    clientX,
-    clientY,
-    ctrlKey,
-  }) => {
+  const handleMouseDown: MouseEventHandler<HTMLVideoElement> = (e) => {
     if (!videoRef.current) return
     const { x, y } = getNormalisedCoordinates({
-      clientX,
-      clientY,
+      clientX: e.clientX,
+      clientY: e.clientY,
       el: videoRef.current,
       ...streamDimensions,
     })
-    console.log('click', x, y)
 
     const newId = uuidv4()
 
-    const interaction = ctrlKey ? 'pan' : 'rotate'
+    const interactionGuards = cameraMouseDragGuards[cameraControls]
+    let interaction: CameraDragInteractionType_type
+
+    if (interactionGuards.pan.callback(e)) {
+      interaction = 'pan'
+    } else if (interactionGuards.rotate.callback(e)) {
+      interaction = 'rotate'
+    } else if (interactionGuards.zoom.dragCallback(e)) {
+      interaction = 'zoom'
+    } else {
+      return
+    }
 
     engineCommandManager?.sendSceneCommand({
       type: 'modeling_cmd_req',
@@ -73,11 +86,13 @@ export const Stream = ({ className = '' }) => {
       cmd_id: newId,
     })
 
-    setIsMouseDownInStream(true)
+    setButtonDownInStream(e.button)
     setClickCoords({ x, y })
   }
 
   const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
+    if (!cameraMouseDragGuards[cameraControls].zoom.scrollCallback(e)) return
+
     e.preventDefault()
     engineCommandManager?.sendSceneCommand({
       type: 'modeling_cmd_req',
@@ -115,7 +130,7 @@ export const Stream = ({ className = '' }) => {
       cmd_id: newCmdId,
     })
 
-    setIsMouseDownInStream(false)
+    setButtonDownInStream(0)
     if (!didDragInStream) {
       engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',