@shapediver/viewer.rendering-engine.camera-engine 2.11.0 → 2.12.1

package/src/implementation/controls/orthographic/CameraControlsLogic.ts

@@ -1,11 +1,11 @@
-import { mat4, vec2, vec3 } from 'gl-matrix'
+import { mat4, vec2, vec3 } from 'gl-matrix';
 
-import { OrthographicCameraControls } from '../../..'
-import { ICameraControlsLogic } from '../../../interfaces/controls/ICameraControlsLogic'
-import { OrthographicCamera } from '../../camera/OrthographicCamera'
+import { OrthographicCameraControls } from '../../..';
+import { ICameraControlsLogic } from '../../../interfaces/controls/ICameraControlsLogic';
+import { OrthographicCamera } from '../../camera/OrthographicCamera';
 
 export class CameraControlsLogic implements ICameraControlsLogic {
-  // #region Properties (16)
+  // #region Properties (10)
 
   private _adjustedSettings = {
     damping: () => this._controls.damping * this._settingsAdjustments.damping,
@@ -40,17 +40,17 @@ export class CameraControlsLogic implements ICameraControlsLogic {
   private _settingsAdjustments = {
     damping: 1.0,
     movementSmoothness: 1.0,
-    panSpeed: 2.0,
+    panSpeed: 1.75,
     zoomSpeed: 0.025,
   };
   private _touchAdjustments = {
     damping: 1.0,
     movementSmoothness: 1.0,
-    panSpeed: 2.0,
-    zoomSpeed: 50.0,
+    panSpeed: 4.0 / 1.75,
+    zoomSpeed: 100.0,
   };
 
-  // #endregion Properties (16)
+  // #endregion Properties (10)
 
   // #region Constructors (1)
 
@@ -58,18 +58,13 @@ export class CameraControlsLogic implements ICameraControlsLogic {
 
   // #endregion Constructors (1)
 
-  // #region Public Methods (7)
+  // #region Public Methods (6)
 
   public isWithinRestrictions(position: vec3, target: vec3): boolean {
     return true;
   }
 
   public pan(x: number, y: number, active: boolean, touch: boolean): void {
-    if (touch) {
-      x = x / window.devicePixelRatio;
-      y = y / window.devicePixelRatio;
-    }
-
     if (!active) {
       this._panStart = vec2.fromValues(x, y);
     } else {
@@ -79,7 +74,7 @@ export class CameraControlsLogic implements ICameraControlsLogic {
       vec2.copy(this._panStart, this._panEnd);
 
       const adjustedPanSpeed = this._adjustedSettings.panSpeed() * (touch ? this._touchAdjustments.panSpeed : 1.0);
-      let offset = this.panDeltaToOffset(vec2.mul(vec2.create(), this._panDelta, vec2.fromValues(adjustedPanSpeed, adjustedPanSpeed)));
+      const offset = this.panDeltaToOffset(vec2.mul(vec2.create(), this._panDelta, vec2.fromValues(adjustedPanSpeed, adjustedPanSpeed)));
 
       if (this._damping.pan.duration > 0) {
         if (offset[0] < 0) {
@@ -99,11 +94,11 @@ export class CameraControlsLogic implements ICameraControlsLogic {
         }
       }
 
-      let damping = 1 - Math.max(0.01, Math.min(0.99, this._adjustedSettings.damping()));
+      const damping = 1 - Math.max(0.01, Math.min(0.99, this._adjustedSettings.damping()));
 
-      let framesOffsetX = (Math.log(1 / Math.abs(offset[0])) - 5 * Math.log(10)) / (Math.log(damping));
-      let framesOffsetY = (Math.log(1 / Math.abs(offset[1])) - 5 * Math.log(10)) / (Math.log(damping));
-      let framesOffsetZ = (Math.log(1 / Math.abs(offset[2])) - 5 * Math.log(10)) / (Math.log(damping));
+      const framesOffsetX = (Math.log(1 / Math.abs(offset[0])) - 5 * Math.log(10)) / (Math.log(damping));
+      const framesOffsetY = (Math.log(1 / Math.abs(offset[1])) - 5 * Math.log(10)) / (Math.log(damping));
+      const framesOffsetZ = (Math.log(1 / Math.abs(offset[2])) - 5 * Math.log(10)) / (Math.log(damping));
       this._damping.pan.time = 0;
       this._damping.pan.duration = Math.max(framesOffsetX, Math.max(framesOffsetY, framesOffsetZ)) * 16.6666;
       this._damping.pan.offset = vec3.clone(offset);
@@ -156,8 +151,7 @@ export class CameraControlsLogic implements ICameraControlsLogic {
       this._damping.pan.duration = 0;
     }
 
-
-    let damping = 1 - Math.max(0.01, Math.min(1, this._adjustedSettings.damping()));
+    const damping = 1 - Math.max(0.01, Math.min(1, this._adjustedSettings.damping()));
 
     if (this._damping.pan.duration > 0) {
       if (this._damping.pan.time + time > this._damping.pan.duration) {
@@ -166,9 +160,9 @@ export class CameraControlsLogic implements ICameraControlsLogic {
       } else {
         this._damping.pan.time += time;
 
-        let frameSinceStart = this._damping.pan.time / 16.6666;
-        let dampingFrames = Math.pow(damping, frameSinceStart);
-        let offset = vec3.multiply(vec3.create(), this._damping.pan.offset, vec3.fromValues(dampingFrames, dampingFrames, dampingFrames));
+        const frameSinceStart = this._damping.pan.time / 16.6666;
+        const dampingFrames = Math.pow(damping, frameSinceStart);
+        const offset = vec3.multiply(vec3.create(), this._damping.pan.offset, vec3.fromValues(dampingFrames, dampingFrames, dampingFrames));
         this._controls.applyTargetVector(offset);
         this._controls.applyPositionVector(offset);
       }
@@ -183,20 +177,18 @@ export class CameraControlsLogic implements ICameraControlsLogic {
       } else {
         this._damping.zoom.time += time;
 
-        let frameSinceStart = this._damping.zoom.time / 16.6666;
-        let delta = this._damping.zoom.delta * Math.pow(damping, frameSinceStart);
+        const frameSinceStart = this._damping.zoom.time / 16.6666;
+        const delta = this._damping.zoom.delta * Math.pow(damping, frameSinceStart);
 
-        let newDistance = vec3.distance(this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates())
+        const newDistance = vec3.distance(this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates())
           * (1 - delta);
 
-
-        let dir = vec3.create(),
+        const dir = vec3.create(),
           offset = vec3.create();
         vec3.normalize(dir, vec3.subtract(dir, this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates()));
-        vec3.add(offset, this._controls.getPositionWithManualUpdates(), vec3.multiply(offset, dir, vec3.fromValues(newDistance, newDistance, newDistance)))
-        vec3.subtract(offset, offset, this._controls.getTargetWithManualUpdates())
+        vec3.add(offset, this._controls.getPositionWithManualUpdates(), vec3.multiply(offset, dir, vec3.fromValues(newDistance, newDistance, newDistance)));
+        vec3.subtract(offset, offset, this._controls.getTargetWithManualUpdates());
         this._controls.applyTargetVector(offset, true);
-
       }
     } else {
       this._damping.zoom.time = 0;
@@ -204,9 +196,7 @@ export class CameraControlsLogic implements ICameraControlsLogic {
   }
 
   public zoom(x: number, y: number, active: boolean, touch: boolean): void {
-    var distance = Math.sqrt(x * x + y * y);
-    if (touch)
-      distance = distance / window.devicePixelRatio;
+    const distance = Math.sqrt(x * x + y * y);
 
     if (!active) {
       this._dollyStart = distance;
@@ -222,39 +212,41 @@ export class CameraControlsLogic implements ICameraControlsLogic {
           this._dollyDelta = Math.max(this._dollyDelta, this._adjustedSettings.movementSmoothness() * this._damping.zoom.delta);
         }
       }
-      let delta = this._dollyDelta * this._adjustedSettings.zoomSpeed() * (touch ? this._touchAdjustments.zoomSpeed : 1.0);
+      const delta = this._dollyDelta * this._adjustedSettings.zoomSpeed() * (touch ? this._touchAdjustments.zoomSpeed : 1.0);
 
-      let damping = 1 - Math.max(0.01, Math.min(1, this._adjustedSettings.damping()));
-      let framesDelta = (Math.log(1 / Math.abs(this._dollyDelta)) - 5 * Math.log(10)) / (Math.log(damping));
+      const damping = 1 - Math.max(0.01, Math.min(1, this._adjustedSettings.damping()));
+      const framesDelta = (Math.log(1 / Math.abs(this._dollyDelta)) - 5 * Math.log(10)) / (Math.log(damping));
       this._damping.zoom.time = 0;
       this._damping.zoom.duration = framesDelta * 16.6666;
       this._damping.zoom.delta = delta;
 
       this._damping.pan.duration = 0;
 
-
-      let newDistance = vec3.distance(this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates())
+      const newDistance = vec3.distance(this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates())
         * (1 - delta);
 
-      let dir = vec3.create(),
+      const dir = vec3.create(),
         offset = vec3.create();
       vec3.normalize(dir, vec3.subtract(dir, this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates()));
-      vec3.add(offset, this._controls.getPositionWithManualUpdates(), vec3.multiply(offset, dir, vec3.fromValues(newDistance, newDistance, newDistance)))
-      vec3.subtract(offset, offset, this._controls.getTargetWithManualUpdates())
+      vec3.add(offset, this._controls.getPositionWithManualUpdates(), vec3.multiply(offset, dir, vec3.fromValues(newDistance, newDistance, newDistance)));
+      vec3.subtract(offset, offset, this._controls.getTargetWithManualUpdates());
       this._controls.applyTargetVector(offset, true);
     }
   }
 
-  // #endregion Public Methods (7)
+  // #endregion Public Methods (6)
 
-  // #region Private Methods (7)
+  // #region Private Methods (1)
 
   private panDeltaToOffset(panDelta: vec2): vec3 {
-    let offset = vec3.create();
-    let panOffset = vec3.create();
+    const offset = vec3.create();
+    const panOffset = vec3.create();
+        
+    if (!this._controls.canvas) return offset;
+    if (this._controls.canvas.clientWidth == 0 || this._controls.canvas.clientHeight == 0) return offset;
 
     // perspective
-    vec3.subtract(offset, this._controls.getPositionWithManualUpdates(), this._controls.getTargetWithManualUpdates())
+    vec3.subtract(offset, this._controls.getPositionWithManualUpdates(), this._controls.getTargetWithManualUpdates());
 
     const orthographicCamera: OrthographicCamera = <OrthographicCamera>this._controls.camera;
     const mat = mat4.targetTo(mat4.create(), orthographicCamera.position, orthographicCamera.target, orthographicCamera.up);
@@ -262,18 +254,18 @@ export class CameraControlsLogic implements ICameraControlsLogic {
     // // we use only clientHeight here so aspect ratio does not distort speed
     // // left
     const v1 = vec3.fromValues(mat[0], mat[1], mat[2]);
-    const scalar1 = -(panDelta[0] * (orthographicCamera.right - orthographicCamera.left) * 0.5 / 1 /** orthographicCamera.zoom */);
+    const scalar1 = -(panDelta[0] * (orthographicCamera.right - orthographicCamera.left) * 0.5 / this._controls.canvas?.clientHeight /** orthographicCamera.zoom */);
     vec3.multiply(v1, v1, vec3.fromValues(scalar1, scalar1, scalar1));
     vec3.add(panOffset, panOffset, v1);
 
     // // up
     const v2 = vec3.fromValues(mat[4], mat[5], mat[6]);
-    const scalar2 = panDelta[1] * (orthographicCamera.right - orthographicCamera.left) * 0.5 / 1 /** orthographicCamera.zoom */;
+    const scalar2 = panDelta[1] * (orthographicCamera.right - orthographicCamera.left) * 0.5 / this._controls.canvas?.clientHeight /** orthographicCamera.zoom */;
     vec3.multiply(v2, v2, vec3.fromValues(scalar2, scalar2, scalar2));
     vec3.add(panOffset, panOffset, v2);
 
     return vec3.clone(panOffset);
   }
 
-  // #endregion Private Methods (7)
-};
+  // #endregion Private Methods (1)
+}

package/src/implementation/controls/perspective/CameraControlsEventDistribution.ts

@@ -1,19 +1,18 @@
-import { CameraControlsLogic } from './CameraControlsLogic'
-import { ICameraControlsEventDistribution } from '../../../interfaces/controls/ICameraControlsEventDistribution'
-import { PerspectiveCameraControls } from '../PerspectiveCameraControls'
+import { CameraControlsLogic } from './CameraControlsLogic';
+import { ICameraControlsEventDistribution } from '../../../interfaces/controls/ICameraControlsEventDistribution';
+import { PerspectiveCameraControls } from '../PerspectiveCameraControls';
 
 export class CameraControlsEventDistribution implements ICameraControlsEventDistribution {
-  // #region Properties (1)
+  // #region Properties (2)
 
   private _active = {
     rotation: false,
     zoom: false,
     pan: false
   };
-
   private _activeEvents = true;
 
-  // #endregion Properties (1)
+  // #endregion Properties (2)
 
   // #region Constructors (1)
 
@@ -21,7 +20,7 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
 
   // #endregion Constructors (1)
 
-  // #region Public Methods (16)
+  // #region Public Methods (20)
 
   public activateCameraEvents(): void {
     this._activeEvents = true;
@@ -29,46 +28,46 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
 
   public deactivateCameraEvents(): void {
     this._activeEvents = false;
-    this.reset()
+    this.reset();
   }
 
-  public onDown(event: MouseEvent|TouchEvent): void {
-    if(this._controls.camera.active === false) return;
-    let {x,y} = this.convertInput(event);
+  public onDown(event: MouseEvent | TouchEvent): void {
+    if (this._controls.camera.active === false) return;
+    const { x, y } = this.convertInput(event);
 
-    let input = window.TouchEvent && event instanceof TouchEvent ? (event as TouchEvent).touches.length : (event as MouseEvent).button;
-    let mapping = window.TouchEvent && event instanceof TouchEvent ? this._controls.input.touch : this._controls.input.mouse;
+    const input = window.TouchEvent && event instanceof TouchEvent ? (event as TouchEvent).touches.length : (event as MouseEvent).button;
+    const mapping = window.TouchEvent && event instanceof TouchEvent ? this._controls.input.touch : this._controls.input.mouse;
 
     if (input === mapping.rotate && this._controls.enableRotation) {
       this._cameraLogic.rotate(x, y, this._active.rotation, window.TouchEvent && event instanceof TouchEvent);
       this._active.rotation = true;
-      this._active.pan = false;
-      this._active.zoom = false;
+    } else {
+      this._active.rotation = false;
     }
 
     if (input === mapping.pan && this._controls.enablePan) {
       this._cameraLogic.pan(x, y, this._active.pan, window.TouchEvent && event instanceof TouchEvent);
-      this._active.rotation = false;
       this._active.pan = true;
-      this._active.zoom = false;    
+    } else {
+      this._active.pan = false;
     }
 
     if (input === mapping.zoom && this._controls.enableZoom) {
       let x1 = x, y1 = y;
-      if(window.TouchEvent && event instanceof TouchEvent && this._controls.input.touch.zoom === 2 && event.touches.length >= 2) {
-        x1 = (event.touches[0].pageX - event.touches[1].pageX)/ window.innerWidth * (window.innerWidth / window.innerHeight);
-        y1 = (event.touches[0].pageY - event.touches[1].pageY)/ window.innerHeight;
+      if (window.TouchEvent && event instanceof TouchEvent && this._controls.input.touch.zoom === 2 && event.touches.length >= 2) {
+        x1 = (event.touches[0].pageX - event.touches[1].pageX) / window.innerWidth * (window.innerWidth / window.innerHeight);
+        y1 = (event.touches[0].pageY - event.touches[1].pageY) / window.innerHeight;
       }
       this._cameraLogic.zoom(x1, y1, this._active.zoom, window.TouchEvent && event instanceof TouchEvent);
-      this._active.rotation = false;
-      this._active.pan = false;
       this._active.zoom = true;
+    } else {
+      this._active.zoom = false;
     }
   }
 
   public onKey(event: KeyboardEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._controls.enableKeyPan) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._controls.enableKeyPan) return;
     switch (event.keyCode) {
       case this._controls.input.keys.up:
         this._cameraLogic.pan(0, 0, false, false);
@@ -101,46 +100,46 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
   }
 
   public onKeyDown(event: KeyboardEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
-    this.onKey(event)
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
+    this.onKey(event);
   }
 
   public onMouseDown(event: MouseEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
     this.onDown(event);
   }
 
+  public onMouseEnd(event: MouseEvent): void {
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
+    this.onUp(event);
+  }
+
   public onMouseMove(event: MouseEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
     this.onMove(event);
   }
 
-  public onMouseEnd(event: MouseEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
-    this.onUp(event);
+  public onMouseOut(event: WheelEvent): void {
+    if (this._controls.camera.active === false) return;
   }
 
-  public onMouseWheel(event: WheelEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
-    this.onWheel(event);
-  }
-  
   public onMouseUp(event: WheelEvent): void {
-    if(this._controls.camera.active === false) return;
+    if (this._controls.camera.active === false) return;
   }
 
-  public onMouseOut(event: WheelEvent): void {
-    if(this._controls.camera.active === false) return;
+  public onMouseWheel(event: WheelEvent): void {
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
+    this.onWheel(event);
   }
 
-  public onMove(event: MouseEvent|TouchEvent): void {
-    if(this._controls.camera.active === false) return;
-    let {x,y} = this.convertInput(event);
+  public onMove(event: MouseEvent | TouchEvent): void {
+    if (this._controls.camera.active === false) return;
+    const { x, y } = this.convertInput(event);
 
     if (this._controls.enableRotation && this._active.rotation)
       this._cameraLogic.rotate(x, y, this._active.rotation, window.TouchEvent && event instanceof TouchEvent);
@@ -148,63 +147,63 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     if (this._controls.enablePan && this._active.pan)
       this._cameraLogic.pan(x, y, this._active.pan, window.TouchEvent && event instanceof TouchEvent);
 
-    if (this._controls.enableZoom && this._active.zoom){
+    if (this._controls.enableZoom && this._active.zoom) {
       let x1 = x, y1 = y;
-      if(window.TouchEvent && event instanceof TouchEvent && this._controls.input.touch.zoom === 2 && event.touches.length >= 2) {
-        x1 = (event.touches[0].pageX - event.touches[1].pageX)/ window.innerWidth * (window.innerWidth / window.innerHeight);
-        y1 = (event.touches[0].pageY - event.touches[1].pageY)/ window.innerHeight;
+      if (window.TouchEvent && event instanceof TouchEvent && this._controls.input.touch.zoom === 2 && event.touches.length >= 2) {
+        x1 = (event.touches[0].pageX - event.touches[1].pageX) / window.innerWidth * (window.innerWidth / window.innerHeight);
+        y1 = (event.touches[0].pageY - event.touches[1].pageY) / window.innerHeight;
       }
       this._cameraLogic.zoom(x1, y1, this._active.zoom, window.TouchEvent && event instanceof TouchEvent);
     }
   }
 
+  public onTouchCancel(event: TouchEvent): void {
+    if (this._controls.camera.active === false) return;
+  }
+
   public onTouchEnd(event: TouchEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
     this.onUp(event);
   }
 
   public onTouchMove(event: TouchEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
     this.onMove(event);
   }
 
   public onTouchStart(event: TouchEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
     this.onDown(event);
   }
 
-  public onTouchCancel(event: TouchEvent): void {
-    if(this._controls.camera.active === false) return;
-  }
-
   public onTouchUp(event: TouchEvent): void {
-    if(this._controls.camera.active === false) return;
+    if (this._controls.camera.active === false) return;
   }
 
-  public onUp(event: MouseEvent|TouchEvent): void {
-    if(this._controls.camera.active === false) return;
+  public onUp(event: MouseEvent | TouchEvent): void {
+    if (this._controls.camera.active === false) return;
     this._active.rotation = false;
     this._active.zoom = false;
     this._active.pan = false;
   }
 
   public onWheel(event: WheelEvent): void {
-    if(this._controls.camera.active === false) return;
-    if(!this._activeEvents) return;
-    if(!this._controls.enableZoom) return;
+    if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
+    if (!this._controls.enableZoom) return;
     let delta = 0;
-    if (event.deltaY  !== undefined) {
+    if (event.deltaY !== undefined) {
       // WebKit / Opera / Explorer 9
-      delta = -event.deltaY ;
+      delta = -event.deltaY;
     } else if (event.detail !== undefined) {
       // Firefox
       delta = -event.detail;
     }
     // convert to 2 screen coordinates that are far enough
-    if(Math.sign(delta) > 0) {
+    if (Math.sign(delta) > 0) {
       this._cameraLogic.zoom(0, 0, false, false);
       this._cameraLogic.zoom(1, 0, true, false);
     } else {
@@ -221,23 +220,27 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     };
   }
 
-  // #endregion Public Methods (16)
+  // #endregion Public Methods (20)
 
   // #region Private Methods (1)
 
-  private convertInput(event: MouseEvent|TouchEvent): {x: number, y: number} {
-    let aspect = window.innerWidth / window.innerHeight;
+  private convertInput(event: MouseEvent | TouchEvent): { x: number, y: number } {
     if (event instanceof MouseEvent) {
       return {
-        x: event.clientX / window.innerWidth * aspect,
-        y: event.clientY / window.innerHeight
-      }
+        x: event.clientX,
+        y: event.clientY
+      };
     } else {
-      if(event.touches.length < 1) return { x: 0, y: 0 };
+      if (event.touches.length < 1) return { x: 0, y: 0 };
+      if (event.touches.length === 1)
+        return {
+          x: event.touches[0].pageX,
+          y: event.touches[0].pageY
+        };
       return {
-        x: event.touches[0].pageX / window.innerWidth * aspect,
-        y: event.touches[0].pageY / window.innerHeight
-      }
+        x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
+        y: (event.touches[0].pageY + event.touches[1].pageY) / 2
+      };
     }
   }