Move loading of OS setting to Home

interface.d.ts

@@ -69,6 +69,7 @@ export interface IElectronAPI {
   kittycad: (access: string, args: any) => any
   listMachines: () => Promise<MachinesListing>
   getMachineApiIp: () => Promise<string | null>
+  readNaturalScrollDirection: () => Promise<boolean>
   onUpdateDownloaded: (
     callback: (value: string) => void
   ) => Electron.IpcRenderer

src/clientSideScene/CameraControls.ts

@@ -22,7 +22,7 @@ import {
   UnreliableSubscription,
 } from 'lang/std/engineConnection'
 import { EngineCommand } from 'lang/std/artifactGraph'
-import { toSync, uuidv4 } from 'lib/utils'
+import { cachedNaturalScrollDirection, toSync, uuidv4 } from 'lib/utils'
 import { deg2Rad } from 'lib/utils2d'
 import { isReducedMotion, roundOff, throttle } from 'lib/utils'
 import * as TWEEN from '@tweenjs/tween.js'
@@ -78,8 +78,13 @@ export class CameraControls {
   enablePan = true
   enableZoom = true
   zoomDataFromLastFrame?: number = undefined
-  // holds coordinates, and interaction
+  // Holds event type, coordinates (for wheel, it's delta), and interaction
-  moveDataFromLastFrame?: [number, number, string] = undefined
+  moveDataFromLastFrame?: [
+    'pointer' | 'wheel',
+    number,
+    number,
+    interactionType
+  ] = undefined
   lastPerspectiveFov: number = 45
   pendingZoom: number | null = null
   pendingRotation: Vector2 | null = null
@@ -283,19 +288,75 @@ export class CameraControls {
 
     const doMove = () => {
       if (this.moveDataFromLastFrame !== undefined) {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        const interaction = this.moveDataFromLastFrame[3]
-        this.engineCommandManager.sendSceneCommand({
+        if (this.moveDataFromLastFrame[0] === 'pointer') {
-          type: 'modeling_cmd_req',
+          this.engineCommandManager
-          cmd: {
+            .sendSceneCommand({
-            type: 'camera_drag_move',
+              type: 'modeling_cmd_req',
-            interaction: this.moveDataFromLastFrame[2] as any,
+              cmd: {
-            window: {
+                type: 'camera_drag_move',
-              x: this.moveDataFromLastFrame[0],
+                interaction,
-              y: this.moveDataFromLastFrame[1],
+                window: {
-            },
+                  x: this.moveDataFromLastFrame[1],
-          },
+                  y: this.moveDataFromLastFrame[2],
-          cmd_id: uuidv4(),
+                },
-        })
+              },
+              cmd_id: uuidv4(),
+            })
+            .catch(reportRejection)
+        } else if (this.moveDataFromLastFrame[0] === 'wheel') {
+          const deltaX = this.moveDataFromLastFrame[1]
+          const deltaY = this.moveDataFromLastFrame[2]
+          this.isDragging = true
+          this.handleStart()
+
+          this.engineCommandManager
+            .sendSceneCommand({
+              type: 'modeling_cmd_batch_req',
+              batch_id: uuidv4(),
+              requests: [
+                {
+                  cmd: {
+                    type: 'camera_drag_start',
+                    interaction,
+                    window: { x: 0, y: 0 },
+                  },
+                  cmd_id: uuidv4(),
+                },
+                {
+                  cmd: {
+                    type: 'camera_drag_move',
+                    interaction,
+                    window: {
+                      x: -deltaX,
+                      y: -deltaY,
+                    },
+                  },
+                  cmd_id: uuidv4(),
+                },
+                {
+                  cmd: {
+                    type: 'camera_drag_end',
+                    interaction,
+                    window: {
+                      x: -deltaX,
+                      y: -deltaY,
+                    },
+                  },
+                  cmd_id: uuidv4(),
+                },
+              ],
+              responses: false,
+            })
+            .catch(reportRejection)
+
+          this.isDragging = false
+          this.handleEnd()
+        } else {
+          console.error(
+            `Unknown moveDataFromLastFrame event type: ${this.moveDataFromLastFrame[0]}`
+          )
+        }
       }
       this.moveDataFromLastFrame = undefined
     }
@@ -386,32 +447,16 @@ export class CameraControls {
       if (interaction === 'none') return
 
       if (this.syncDirection === 'engineToClient') {
-        this.moveDataFromLastFrame = [event.clientX, event.clientY, interaction]
+        this.moveDataFromLastFrame = [
+          'pointer',
+          event.clientX,
+          event.clientY,
+          interaction,
+        ]
         return
       }
 
-      // Implement camera movement logic here based on deltaMove
+      this.moveCamera(interaction, deltaMove)
-      // For example, for rotating the camera around the target:
-      if (interaction === 'rotate') {
-        this.pendingRotation = this.pendingRotation
-          ? this.pendingRotation
-          : new Vector2()
-        this.pendingRotation.x += deltaMove.x
-        this.pendingRotation.y += deltaMove.y
-      } else if (interaction === 'zoom') {
-        this.pendingZoom = this.pendingZoom ? this.pendingZoom : 1
-        this.pendingZoom *= 1 + deltaMove.y * 0.01
-      } else if (interaction === 'pan') {
-        this.pendingPan = this.pendingPan ? this.pendingPan : new Vector2()
-        let distance = this.camera.position.distanceTo(this.target)
-        if (this.camera instanceof OrthographicCamera) {
-          const zoomFudgeFactor = 2280
-          distance = zoomFudgeFactor / (this.camera.zoom * 45)
-        }
-        const panSpeed = (distance / 1000 / 45) * this.perspectiveFovBeforeOrtho
-        this.pendingPan.x += -deltaMove.x * panSpeed
-        this.pendingPan.y += deltaMove.y * panSpeed
-      }
     } else {
       /**
        * If we're not in sketch mode and not dragging, we can highlight entities
@@ -433,6 +478,31 @@ export class CameraControls {
     }
   }
 
+  moveCamera(interaction: interactionType, deltaMove: Vector2) {
+    // Implement camera movement logic here based on deltaMove
+    // For example, for rotating the camera around the target:
+    if (interaction === 'rotate') {
+      this.pendingRotation = this.pendingRotation
+        ? this.pendingRotation
+        : new Vector2()
+      this.pendingRotation.x += deltaMove.x
+      this.pendingRotation.y += deltaMove.y
+    } else if (interaction === 'zoom') {
+      this.pendingZoom = this.pendingZoom ? this.pendingZoom : 1
+      this.pendingZoom *= 1 + deltaMove.y * 0.01
+    } else if (interaction === 'pan') {
+      this.pendingPan = this.pendingPan ? this.pendingPan : new Vector2()
+      let distance = this.camera.position.distanceTo(this.target)
+      if (this.camera instanceof OrthographicCamera) {
+        const zoomFudgeFactor = 2280
+        distance = zoomFudgeFactor / (this.camera.zoom * 45)
+      }
+      const panSpeed = (distance / 1000 / 45) * this.perspectiveFovBeforeOrtho
+      this.pendingPan.x += -deltaMove.x * panSpeed
+      this.pendingPan.y += deltaMove.y * panSpeed
+    }
+  }
+
   onMouseUp = (event: PointerEvent) => {
     this.domElement.releasePointerCapture(event.pointerId)
     this.isDragging = false
@@ -452,6 +522,20 @@ export class CameraControls {
     }
   }
 
+  zoomDirection = (event: WheelEvent): 1 | -1 => {
+    if (this.interactionGuards.zoom.pinchToZoom && isPinchToZoom(event)) {
+      return 1
+    }
+
+    if (!this.interactionGuards.zoom.scrollAllowInvertY) return 1
+    // Safari provides the updated user setting on every event, so it's more
+    // accurate than our cached value.
+    if ('webkitDirectionInvertedFromDevice' in event) {
+      return event.webkitDirectionInvertedFromDevice ? -1 : 1
+    }
+    return cachedNaturalScrollDirection ? -1 : 1
+  }
+
   onMouseWheel = (event: WheelEvent) => {
     const interaction = this.getInteractionType(event)
     if (interaction === 'none') return
@@ -459,12 +543,15 @@ export class CameraControls {
 
     if (this.syncDirection === 'engineToClient') {
       if (interaction === 'zoom') {
-        this.zoomDataFromLastFrame = event.deltaY
+        const zoomDir = this.zoomDirection(event)
+        this.zoomDataFromLastFrame = event.deltaY * zoomDir
       } else {
-        // This case will get handled when we add pan and rotate using Apple trackpad.
+        this.moveDataFromLastFrame = [
-        console.error(
+          'wheel',
-          `Unexpected interaction type for engineToClient wheel event: ${interaction}`
+          event.deltaX,
-        )
+          event.deltaY,
+          interaction,
+        ]
       }
       return
     }
@@ -478,12 +565,20 @@ export class CameraControls {
 
     this.handleStart()
     if (interaction === 'zoom') {
-      this.pendingZoom = 1 + (event.deltaY / window.devicePixelRatio) * 0.001
+      const zoomDir = this.zoomDirection(event)
+      this.pendingZoom =
+        1 + (event.deltaY / window.devicePixelRatio) * 0.001 * zoomDir
     } else {
-      // This case will get handled when we add pan and rotate using Apple trackpad.
+      this.isDragging = true
-      console.error(
+      this.mouseDownPosition.set(event.clientX, event.clientY)
-        `Unexpected interaction type for wheel event: ${interaction}`
+
+      this.moveCamera(interaction, new Vector2(-event.deltaX, -event.deltaY))
+
+      this.mouseDownPosition.set(
+        event.clientX + event.deltaX,
+        event.clientY + event.deltaY
       )
+      this.isDragging = false
     }
     this.handleEnd()
   }
@@ -1266,8 +1361,17 @@ function _getInteractionType(
   enableZoom: boolean
 ): interactionType | 'none' {
   if (event instanceof WheelEvent) {
-    if (enableZoom && interactionGuards.zoom.scrollCallback(event))
+    // If the control scheme accepts pinch-to-zoom, and the event is
-      return 'zoom'
+    // pinch-to-zoom, never consider other interaction types.
+    if (interactionGuards.zoom.pinchToZoom && isPinchToZoom(event)) {
+      if (enableZoom) return 'zoom'
+    } else {
+      if (enablePan && interactionGuards.pan.scrollCallback(event)) return 'pan'
+      if (enableRotate && interactionGuards.rotate.scrollCallback(event))
+        return 'rotate'
+      if (enableZoom && interactionGuards.zoom.scrollCallback(event))
+        return 'zoom'
+    }
   } else {
     if (enablePan && interactionGuards.pan.callback(event)) return 'pan'
     if (enableRotate && interactionGuards.rotate.callback(event))
@@ -1277,6 +1381,18 @@ function _getInteractionType(
   return 'none'
 }
 
+function isPinchToZoom(event: WheelEvent): boolean {
+  // Browsers do this hack.  A couple issues:
+  //
+  // - According to MDN, it doesn't work on iOS.
+  // - It doesn't differentiate with a user actually holding Control and
+  //   scrolling normally.  It's possible to detect this by using onKeyDown and
+  //   onKeyUp to track the state of the Control key.  But we currently don't
+  //   care about this since only the Apple Trackpad scheme looks for
+  //   pinch-to-zoom events using interactionGuards.zoom.pinchToZoom.
+  return event.ctrlKey
+}
+
 /**
  * Tells the engine to fire it's animation waits for it to finish and then requests camera settings
  * to ensure the client-side camera is synchronized with the engine's camera state.

src/lib/cameraControls.ts

@@ -13,6 +13,7 @@ export type CameraSystem =
   | 'KittyCAD'
   | 'OnShape'
   | 'Trackpad Friendly'
+  | 'Apple Trackpad'
   | 'Solidworks'
   | 'NX'
   | 'Creo'
@@ -22,6 +23,7 @@ export const cameraSystems: CameraSystem[] = [
   'KittyCAD',
   'OnShape',
   'Trackpad Friendly',
+  'Apple Trackpad',
   'Solidworks',
   'NX',
   'Creo',
@@ -38,6 +40,8 @@ export function mouseControlsToCameraSystem(
       return 'OnShape'
     case 'trackpad_friendly':
       return 'Trackpad Friendly'
+    case 'apple_trackpad':
+      return 'Apple Trackpad'
     case 'solidworks':
       return 'Solidworks'
     case 'nx':
@@ -54,6 +58,7 @@ export function mouseControlsToCameraSystem(
 interface MouseGuardHandler {
   description: string
   callback: (e: MouseEvent) => boolean
+  scrollCallback: (e: WheelEvent) => boolean
   lenientDragStartButton?: number
 }
 
@@ -61,6 +66,8 @@ interface MouseGuardZoomHandler {
   description: string
   dragCallback: (e: MouseEvent) => boolean
   scrollCallback: (e: WheelEvent) => boolean
+  scrollAllowInvertY?: boolean
+  pinchToZoom?: boolean
   lenientDragStartButton?: number
 }
 
@@ -83,6 +90,7 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
       callback: (e) =>
         (btnName(e).middle && noModifiersPressed(e)) ||
         (btnName(e).right && e.shiftKey),
+      scrollCallback: () => false,
     },
     zoom: {
       description: 'Scroll or Ctrl + Right click drag',
@@ -92,6 +100,7 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
     rotate: {
       description: 'Right click drag',
       callback: (e) => btnName(e).right && noModifiersPressed(e),
+      scrollCallback: () => false,
     },
   },
   OnShape: {
@@ -100,6 +109,7 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
       callback: (e) =>
         (btnName(e).right && e.ctrlKey) ||
         (btnName(e).middle && noModifiersPressed(e)),
+      scrollCallback: () => false,
     },
     zoom: {
       description: 'Scroll',
@@ -109,6 +119,7 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
     rotate: {
       description: 'Right click drag',
       callback: (e) => btnName(e).right && noModifiersPressed(e),
+      scrollCallback: () => false,
     },
   },
   'Trackpad Friendly': {
@@ -117,6 +128,7 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
       callback: (e) =>
         (btnName(e).left && e.altKey && e.shiftKey && !e.metaKey) ||
         (btnName(e).middle && noModifiersPressed(e)),
+      scrollCallback: () => false,
     },
     zoom: {
       description: `Scroll or ${ALT} + ${META} + Left click drag`,
@@ -126,13 +138,45 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
     rotate: {
       description: `${ALT} + Left click drag`,
       callback: (e) => btnName(e).left && e.altKey && !e.shiftKey && !e.metaKey,
+      scrollCallback: () => false,
       lenientDragStartButton: 0,
     },
   },
+  'Apple Trackpad': {
+    pan: {
+      description: `Scroll or one finger drag`,
+      callback: (e) => btnName(e).left && noModifiersPressed(e),
+      scrollCallback: (e) => e.deltaMode === 0 && noModifiersPressed(e),
+      lenientDragStartButton: 0,
+    },
+    zoom: {
+      description: `Shift + Scroll`,
+      dragCallback: (e) => false,
+      scrollCallback: (e) =>
+        e.deltaMode === 0 &&
+        e.shiftKey &&
+        !e.ctrlKey &&
+        !e.altKey &&
+        !e.metaKey,
+      scrollAllowInvertY: true,
+      pinchToZoom: true,
+    },
+    rotate: {
+      description: `${ALT} + Scroll`,
+      callback: (e) => false,
+      scrollCallback: (e) =>
+        e.deltaMode === 0 &&
+        e.altKey &&
+        !e.ctrlKey &&
+        !e.shiftKey &&
+        !e.metaKey,
+    },
+  },
   Solidworks: {
     pan: {
       description: 'Ctrl + Right click drag',
       callback: (e) => btnName(e).right && e.ctrlKey,
+      scrollCallback: () => false,
       lenientDragStartButton: 2,
     },
     zoom: {
@@ -143,12 +187,14 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
     rotate: {
       description: 'Middle click drag',
       callback: (e) => btnName(e).middle && noModifiersPressed(e),
+      scrollCallback: () => false,
     },
   },
   NX: {
     pan: {
       description: 'Shift + Middle click drag',
       callback: (e) => btnName(e).middle && e.shiftKey,
+      scrollCallback: () => false,
     },
     zoom: {
       description: 'Scroll or Ctrl + Middle click drag',
@@ -158,12 +204,14 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
     rotate: {
       description: 'Middle click drag',
       callback: (e) => btnName(e).middle && noModifiersPressed(e),
+      scrollCallback: () => false,
     },
   },
   Creo: {
     pan: {
       description: 'Ctrl + Left click drag',
       callback: (e) => btnName(e).left && !btnName(e).right && e.ctrlKey,
+      scrollCallback: () => false,
     },
     zoom: {
       description: 'Scroll or Ctrl + Right click drag',
@@ -176,12 +224,14 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
         const b = btnName(e)
         return (b.middle || (b.left && b.right)) && e.ctrlKey
       },
+      scrollCallback: () => false,
     },
   },
   AutoCAD: {
     pan: {
       description: 'Middle click drag',
       callback: (e) => btnName(e).middle && noModifiersPressed(e),
+      scrollCallback: () => false,
     },
     zoom: {
       description: 'Scroll',
@@ -191,6 +241,7 @@ export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
     rotate: {
       description: 'Shift + Middle click drag',
       callback: (e) => btnName(e).middle && e.shiftKey,
+      scrollCallback: () => false,
     },
   },
 }

src/lib/desktop.ts

@@ -565,3 +565,7 @@ export const getUser = async (
   }
   return Promise.reject(new Error('unreachable'))
 }
+
+export async function readNaturalScrollDirection() {
+  return window.electron.readNaturalScrollDirection()
+}

src/lib/utils.ts

@@ -4,6 +4,7 @@ import { v4 } from 'uuid'
 import { isDesktop } from './isDesktop'
 import { AnyMachineSnapshot } from 'xstate'
 import { AsyncFn } from './types'
+import { readNaturalScrollDirection } from './desktop'
 
 export const uuidv4 = v4
 
@@ -262,6 +263,19 @@ export function isReducedMotion(): boolean {
   )
 }
 
+/**
+ * True if Apple Trackpad scroll should move the content. I.e. if this is true,
+ * and the user scrolls down, the viewport moves up relative to the content.
+ */
+export let cachedNaturalScrollDirection = platform() === 'macos'
+
+export async function refreshNaturalScrollDirection() {
+  if (!isDesktop()) return cachedNaturalScrollDirection
+  const isNatural = await readNaturalScrollDirection()
+  cachedNaturalScrollDirection = isNatural
+  return isNatural
+}
+
 export function XOR(bool1: boolean, bool2: boolean): boolean {
   return (bool1 || bool2) && !(bool1 && bool2)
 }

src/preload.ts

@@ -5,6 +5,7 @@ import os from 'node:os'
 import fsSync from 'node:fs'
 import packageJson from '../package.json'
 import { MachinesListing } from 'lib/machineManager'
+import { exec } from 'child_process'
 import chokidar from 'chokidar'
 
 const open = (args: any) => ipcRenderer.invoke('dialog.showOpenDialog', args)
@@ -81,6 +82,25 @@ const listMachines = async (): Promise<MachinesListing> => {
 const getMachineApiIp = async (): Promise<String | null> =>
   ipcRenderer.invoke('find_machine_api')
 
+async function readNaturalScrollDirection(): Promise<boolean> {
+  if (os.platform() !== 'darwin') {
+    // TODO: Detect this on other OS's.
+    return false
+  }
+  return new Promise((resolve, reject) => {
+    exec(
+      'defaults read -globalDomain com.apple.swipescrolldirection',
+      (err, stdout) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(stdout.trim() === '1')
+        }
+      }
+    )
+  })
+}
+
 contextBridge.exposeInMainWorld('electron', {
   startDeviceFlow,
   loginWithDeviceFlow,
@@ -144,6 +164,7 @@ contextBridge.exposeInMainWorld('electron', {
   kittycad,
   listMachines,
   getMachineApiIp,
+  readNaturalScrollDirection,
   onUpdateDownloaded,
   appRestart,
 })

src/routes/Home.tsx

@@ -37,6 +37,8 @@ import {
 } from 'lib/desktop'
 import { ProjectSearchBar, useProjectSearch } from 'components/ProjectSearchBar'
 import { Project } from 'lib/project'
+import { refreshNaturalScrollDirection } from 'lib/utils'
+import { reportRejection } from 'lib/trap'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { useProjectsLoader } from 'hooks/useProjectsLoader'
 
@@ -61,6 +63,11 @@ const Home = () => {
     kclManager.cancelAllExecutions()
   }, [])
 
+  useEffect(() => {
+    // Load OS setting.
+    refreshNaturalScrollDirection().catch(reportRejection)
+  }, [])
+
   useHotkeys('backspace', (e) => {
     e.preventDefault()
   })

src/wasm-lib/kcl/src/settings/types/mod.rs

@@ -389,6 +389,8 @@ pub enum MouseControlType {
     OnShape,
     #[serde(alias = "Trackpad Friendly")]
     TrackpadFriendly,
+    #[serde(alias = "Apple Trackpad")]
+    AppleTrackpad,
     #[serde(alias = "Solidworks")]
     Solidworks,
     #[serde(alias = "NX")]