Add setting to enable touch controls, defaulting to on (#7732)

* Add a setting to enable touch controls, defaulted to true

* Clean up impl, don't need to teardown just need to toggle `enable` option

* Re-run CI to enable Vercel deploy

* Update settings docs test output

Author: franknoirot

docs/kcl-lang/settings/user.md

@@ -129,6 +129,13 @@ The controls for how to navigate the 3D view.
 
 **Possible values:** `zoo`, `onshape`, `trackpad_friendly`, `solidworks`, `nx`, `creo`, `autocad`
 
+**Default:** None
+
+##### enable_touch_controls
+
+Toggle touch controls for 3D view navigation
+
+
 **Default:** None
 
 ##### highlight_edges

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

@@ -286,6 +286,9 @@ pub struct ModelingSettings {
     /// The controls for how to navigate the 3D view.
     #[serde(default, skip_serializing_if = "is_default")]
     pub mouse_controls: MouseControlType,
+    /// Toggle touch controls for 3D view navigation
+    #[serde(default, skip_serializing_if = "is_default")]
+    pub enable_touch_controls: DefaultTrue,
     /// Highlight edges of 3D objects?
     #[serde(default, skip_serializing_if = "is_default")]
     pub highlight_edges: DefaultTrue,

src/clientSideScene/CameraControls.ts

@@ -127,6 +127,8 @@ export class CameraControls {
   interactionGuards: MouseGuard = cameraMouseDragGuards.Zoo
   isFovAnimationInProgress = false
   perspectiveFovBeforeOrtho = 45
+  touchControlManager: HammerManager | null = null
+  enableTouchControls = true
   // TODO: proper dependency injection
   getSettings: (() => SettingsType) | null = null
 
@@ -268,7 +270,7 @@ export class CameraControls {
     this.domElement.addEventListener('pointermove', this.onMouseMove)
     this.domElement.addEventListener('pointerup', this.onMouseUp)
     this.domElement.addEventListener('wheel', this.onMouseWheel)
-    this.setUpMultiTouch(this.domElement)
+    this.initTouchControls(this.enableTouchControls)
 
     window.addEventListener('resize', this.onWindowResize)
     this.onWindowResize()
@@ -1369,7 +1371,7 @@ export class CameraControls {
    *
    * TODO: Add support for sketch mode touch camera movements
    */
-  setUpMultiTouch = (domElement: HTMLCanvasElement) => {
+  setUpTouchControls = (domElement: HTMLCanvasElement) => {
     /** Amount in px needed to pan before recognizer runs */
     const panDistanceThreshold = 3
     /** Amount in scale delta needed to pinch before recognizer runs */
@@ -1522,6 +1524,16 @@ export class CameraControls {
     hammertime.on('pinchend pinchcancel doublepanend', (event) => {
       this.onMouseUpInner(event.srcEvent as PointerEvent)
     })
+
+    return hammertime
+  }
+
+  initTouchControls = (shouldEnable?: boolean) => {
+    if (this.touchControlManager === null) {
+      this.touchControlManager = this.setUpTouchControls(this.domElement)
+    }
+
+    this.touchControlManager.set({ enable: shouldEnable })
   }
 }
 

src/clientSideScene/ClientSideSceneComp.tsx

@@ -69,10 +69,14 @@ function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
 
 export const ClientSideScene = ({
   cameraControls,
+  enableTouchControls,
 }: {
   cameraControls: ReturnType<
     typeof useSettings
   >['modeling']['mouseControls']['current']
+  enableTouchControls: ReturnType<
+    typeof useSettings
+  >['modeling']['enableTouchControls']['current']
 }) => {
   const canvasRef = useRef<HTMLDivElement>(null)
   const { state, send, context } = useModelingContext()
@@ -84,6 +88,9 @@ export const ClientSideScene = ({
     sceneInfra.camControls.interactionGuards =
       cameraMouseDragGuards[cameraControls]
   }, [cameraControls])
+  useEffect(() => {
+    sceneInfra.camControls.initTouchControls(enableTouchControls)
+  }, [enableTouchControls])
   useEffect(() => {
     sceneInfra.updateOtherSelectionColors(
       state?.context?.selectionRanges?.otherSelections || []

src/components/EngineStream.tsx

@@ -590,6 +590,7 @@ export const EngineStream = (props: {
       </canvas>
       <ClientSideScene
         cameraControls={settings.modeling.mouseControls.current}
+        enableTouchControls={settings.modeling.enableTouchControls.current}
       />
       <ViewControlContextMenu
         event="mouseup"

src/lib/settings/initialSettings.tsx

@@ -431,6 +431,19 @@ export function createSettings() {
           </>
         ),
       }),
+      /** Whether to enable the touch listeners for controlling the camera, which run separate from the mouse control listeners
+       *
+       */
+      enableTouchControls: new Setting<boolean>({
+        defaultValue: true,
+        hideOnLevel: 'project',
+        description:
+          'Enable touch events to navigate the 3D scene. When enabled, orbit with one-finger drag, pan with two-finger drag, and zoom with pinch.',
+        validate: (v) => typeof v === 'boolean',
+        commandConfig: {
+          inputType: 'boolean',
+        },
+      }),
       /**
        * Projection method applied to the 3D view, perspective or orthographic
        */

src/lib/settings/settingsUtils.ts

@@ -75,6 +75,8 @@ export function configurationToSettingsPayload(
       mouseControls: mouseControlsToCameraSystem(
         configuration?.settings?.modeling?.mouse_controls
       ),
+      enableTouchControls:
+        configuration?.settings?.modeling?.enable_touch_controls,
       highlightEdges: configuration?.settings?.modeling?.highlight_edges,
       enableSSAO: configuration?.settings?.modeling?.enable_ssao,
       showScaleGrid: configuration?.settings?.modeling?.show_scale_grid,
@@ -119,6 +121,7 @@ export function settingsPayloadToConfiguration(
         mouse_controls: configuration?.modeling?.mouseControls
           ? cameraSystemToMouseControl(configuration?.modeling?.mouseControls)
           : undefined,
+        enable_touch_controls: configuration?.modeling?.enableTouchControls,
         highlight_edges: configuration?.modeling?.highlightEdges,
         enable_ssao: configuration?.modeling?.enableSSAO,
         show_scale_grid: configuration?.modeling?.showScaleGrid,