Add zoom sensitivity and pan sensitivity attributes (#4412)

google · Aug 4, 2023 · 74d7ac4 · 74d7ac4
1 parent 7aed150
commit 74d7ac4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/packages/model-viewer/src/features/controls.ts b/packages/model-viewer/src/features/controls.ts
@@ -241,6 +241,8 @@ export declare interface ControlsInterface {
   interactionPromptStyle: InteractionPromptStyle;
   interactionPromptThreshold: number;
   orbitSensitivity: number;
+  zoomSensitivity: number;
+  panSensitivity: number;
   touchAction: TouchAction;
   interpolationDecay: number;
   disableZoom: boolean;
@@ -336,6 +338,12 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
     @property({type: Number, attribute: 'orbit-sensitivity'})
     orbitSensitivity: number = 1;
 
+    @property({type: Number, attribute: 'zoom-sensitivity'})
+    zoomSensitivity: number = 1;
+
+    @property({type: Number, attribute: 'pan-sensitivity'})
+    panSensitivity: number = 1;
+
     @property({type: String, attribute: 'touch-action'})
     touchAction: TouchAction = TouchAction.NONE;
 
@@ -523,6 +531,14 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
         controls.orbitSensitivity = this.orbitSensitivity;
       }
 
+      if (changedProperties.has('zoomSensitivity')) {
+        controls.zoomSensitivity = this.zoomSensitivity;
+      }
+
+      if (changedProperties.has('panSensitivity')) {
+        controls.panSensitivity = this.panSensitivity;
+      }
+
       if (changedProperties.has('interpolationDecay')) {
         controls.setDamperDecayTime(this.interpolationDecay);
         scene.setTargetDamperDecayTime(this.interpolationDecay);

diff --git a/packages/model-viewer/src/three-components/SmoothControls.ts b/packages/model-viewer/src/three-components/SmoothControls.ts
@@ -127,6 +127,8 @@ export interface PointerChangeEvent extends ThreeEvent {
  */
 export class SmoothControls extends EventDispatcher {
   public orbitSensitivity = 1;
+  public zoomSensitivity = 1;
+  public panSensitivity = 1;
   public inputSensitivity = 1;
   public changeSource = ChangeSource.NONE;
 
@@ -528,7 +530,7 @@ export class SmoothControls extends EventDispatcher {
     if (!this._disableZoom) {
       const touchDistance =
           this.twoTouchDistance(this.pointers[0], this.pointers[1]);
-      const deltaZoom = ZOOM_SENSITIVITY *
+      const deltaZoom = ZOOM_SENSITIVITY * this.zoomSensitivity *
           (this.lastSeparation - touchDistance) * 50 / this.scene.height;
       this.lastSeparation = touchDistance;
 
@@ -584,7 +586,7 @@ export class SmoothControls extends EventDispatcher {
   private initializePan() {
     const {theta, phi} = this.spherical;
     const psi = theta - this.scene.yaw;
-    this.panPerPixel = PAN_SENSITIVITY / this.scene.height;
+    this.panPerPixel = PAN_SENSITIVITY * this.panSensitivity / this.scene.height;
     this.panProjection.set(
         -Math.cos(psi),
         -Math.cos(phi) * Math.sin(psi),
@@ -819,7 +821,7 @@ export class SmoothControls extends EventDispatcher {
     this.changeSource = ChangeSource.USER_INTERACTION;
 
     const deltaZoom = (event as WheelEvent).deltaY *
-        ((event as WheelEvent).deltaMode == 1 ? 18 : 1) * ZOOM_SENSITIVITY / 30;
+        ((event as WheelEvent).deltaMode == 1 ? 18 : 1) * ZOOM_SENSITIVITY * this.zoomSensitivity / 30;
     this.userAdjustOrbit(0, 0, deltaZoom);
 
     event.preventDefault();
@@ -855,10 +857,10 @@ export class SmoothControls extends EventDispatcher {
     let relevantKey = true;
     switch (event.key) {
       case 'PageUp':
-        this.userAdjustOrbit(0, 0, ZOOM_SENSITIVITY);
+        this.userAdjustOrbit(0, 0, ZOOM_SENSITIVITY * this.zoomSensitivity);
         break;
       case 'PageDown':
-        this.userAdjustOrbit(0, 0, -1 * ZOOM_SENSITIVITY);
+        this.userAdjustOrbit(0, 0, -1 * ZOOM_SENSITIVITY * this.zoomSensitivity);
         break;
       case 'ArrowUp':
         this.userAdjustOrbit(0, -KEYBOARD_ORBIT_INCREMENT, 0);

diff --git a/packages/modelviewer.dev/data/docs.json b/packages/modelviewer.dev/data/docs.json
@@ -494,6 +494,24 @@
           "options": "any number"
         }
       },
+      {
+        "name": "zoom-sensitivity",
+        "htmlName": "zoomSensitivity",
+        "description": "Adjusts the speed of zoom interactions.",
+        "default": {
+          "default": "1",
+          "options": "any number"
+        }
+      },
+      {
+        "name": "pan-sensitivity",
+        "htmlName": "panSensitivity",
+        "description": "Adjusts the speed of pan interactions.",
+        "default": {
+          "default": "1",
+          "options": "any number"
+        }
+      },
       {
         "name": "auto-rotate",
         "htmlName": "autoRotate",