@shapediver/viewer.rendering-engine.camera-engine 2.12.8 → 3.0.1

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

@@ -1,234 +0,0 @@
-import { CameraControlsLogic } from './CameraControlsLogic';
-import { ICameraControlsEventDistribution } from '../../../interfaces/controls/ICameraControlsEventDistribution';
-import { OrthographicCameraControls } from '../OrthographicCameraControls';
-
-export class CameraControlsEventDistribution implements ICameraControlsEventDistribution {
-    // #region Properties (2)
-
-    private _active = {
-        zoom: false,
-        pan: false
-    };
-    private _activeEvents = true;
-
-    // #endregion Properties (2)
-
-    // #region Constructors (1)
-
-    constructor(private readonly _controls: OrthographicCameraControls, private readonly _cameraLogic: CameraControlsLogic) { }
-
-    // #endregion Constructors (1)
-
-    // #region Public Methods (20)
-
-    public activateCameraEvents(): void {
-        this._activeEvents = true;
-    }
-
-    public deactivateCameraEvents(): void {
-        this._activeEvents = false;
-    }
-
-    public onDown(event: MouseEvent | TouchEvent): void {
-        if (this._controls.camera.active === false) return;
-        const { x, y } = this.convertInput(event);
-
-        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.pan && this._controls.enablePan) {
-            this._cameraLogic.pan(x, y, this._active.pan, window.TouchEvent && event instanceof TouchEvent);
-            this._active.pan = true;
-        } 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;
-            }
-            this._cameraLogic.zoom(x1, y1, this._active.zoom, window.TouchEvent && event instanceof TouchEvent);
-            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) {
-            switch (event.keyCode) {
-                case this._controls.input.keys.up:
-                    this._cameraLogic.pan(0, 0, false, false);
-                    this._cameraLogic.pan(0, this._controls.keyPanSpeed * 0.05, true, false);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-
-                case this._controls.input.keys.down:
-                    this._cameraLogic.pan(0, 0, false, false);
-                    this._cameraLogic.pan(0, -this._controls.keyPanSpeed * 0.05, true, false);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-
-                case this._controls.input.keys.left:
-                    this._cameraLogic.pan(0, 0, false, false);
-                    this._cameraLogic.pan(this._controls.keyPanSpeed * 0.05, 0, true, false);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-
-                case this._controls.input.keys.right:
-                    this._cameraLogic.pan(0, 0, false, false);
-                    this._cameraLogic.pan(-this._controls.keyPanSpeed * 0.05, 0, true, false);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-            }
-        }
-    }
-
-    public onKeyDown(event: KeyboardEvent): void {
-        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;
-        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;
-        this.onMove(event);
-    }
-
-    public onMouseOut(event: WheelEvent): void {
-        if (this._controls.camera.active === false) return;
-    }
-
-    public onMouseUp(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;
-        const { x, y } = this.convertInput(event);
-
-        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) {
-            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;
-            }
-            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;
-        this.onUp(event);
-    }
-
-    public onTouchMove(event: TouchEvent): void {
-        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;
-        this.onDown(event);
-    }
-
-    public onTouchUp(event: TouchEvent): void {
-        if (this._controls.camera.active === false) return;
-    }
-
-    public onUp(event: MouseEvent | TouchEvent): void {
-        if (this._controls.camera.active === false) return;
-        this._active.zoom = false;
-        this._active.pan = false;
-    }
-
-    public onWheel(event: WheelEvent): void {
-        if (this._controls.camera.active === false) return;
-        if (!this._controls.enableZoom) return;
-        let delta = 0;
-        if (event.deltaY !== undefined) {
-            // WebKit / Opera / Explorer 9
-            delta = -event.deltaY;
-        } else if (event.detail !== undefined) {
-            // Firefox
-            delta = -event.detail;
-        }
-
-        if (Math.sign(delta) > 0) {
-            this._cameraLogic.zoom(0, 0, false, false);
-            this._cameraLogic.zoom(1.0, 0, true, false);
-        } else {
-            this._cameraLogic.zoom(1.0, 0, false, false);
-            this._cameraLogic.zoom(0, 0, true, false);
-        }
-    }
-
-    public reset() {
-        this._active = {
-            zoom: false,
-            pan: false
-        };
-    }
-
-    // #endregion Public Methods (20)
-
-    // #region Private Methods (1)
-
-    private convertInput(event: MouseEvent | TouchEvent): { x: number, y: number } {
-        if (event instanceof MouseEvent) {
-            return {
-                x: event.clientX,
-                y: event.clientY
-            };
-        } else {
-            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 + event.touches[1].pageX) / 2,
-                y: (event.touches[0].pageY + event.touches[1].pageY) / 2
-            };
-        }
-    }
-
-    // #endregion Private Methods (1)
-}

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

@@ -1,271 +0,0 @@
-import { mat4, vec2, vec3 } from 'gl-matrix';
-
-import { OrthographicCameraControls } from '../../..';
-import { ICameraControlsLogic } from '../../../interfaces/controls/ICameraControlsLogic';
-import { OrthographicCamera } from '../../camera/OrthographicCamera';
-
-export class CameraControlsLogic implements ICameraControlsLogic {
-  // #region Properties (10)
-
-  private _adjustedSettings = {
-    damping: () => this._controls.damping * this._settingsAdjustments.damping,
-    movementSmoothness: () => this._controls.movementSmoothness * this._settingsAdjustments.movementSmoothness,
-    panSpeed: () => this._controls.panSpeed * this._settingsAdjustments.panSpeed,
-    zoomSpeed: () => this._controls.zoomSpeed * this._settingsAdjustments.zoomSpeed,
-  };
-  private _damping = {
-    rotation: {
-      time: 0,
-      duration: 0,
-      theta: 0,
-      phi: 0
-    },
-    zoom: {
-      time: 0,
-      duration: 0,
-      delta: 0
-    },
-    pan: {
-      time: 0,
-      duration: 0,
-      offset: vec3.create()
-    },
-  };
-  private _dollyDelta = 0;
-  private _dollyEnd = 0;
-  private _dollyStart = 0;
-  private _panDelta = vec2.create();
-  private _panEnd = vec2.create();
-  private _panStart = vec2.create();
-  private _settingsAdjustments = {
-    damping: 1.0,
-    movementSmoothness: 1.0,
-    panSpeed: 1.75,
-    zoomSpeed: 0.025,
-  };
-  private _touchAdjustments = {
-    damping: 1.0,
-    movementSmoothness: 1.0,
-    panSpeed: 4.0 / 1.75,
-    zoomSpeed: 100.0,
-  };
-
-  // #endregion Properties (10)
-
-  // #region Constructors (1)
-
-  constructor(private readonly _controls: OrthographicCameraControls) { }
-
-  // #endregion Constructors (1)
-
-  // #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 (!active) {
-      this._panStart = vec2.fromValues(x, y);
-    } else {
-      this._panEnd = vec2.fromValues(x, y);
-      vec2.sub(this._panDelta, this._panEnd, this._panStart);
-      if (this._panDelta[0] === 0 && this._panDelta[1] === 0) return;
-      vec2.copy(this._panStart, this._panEnd);
-
-      const adjustedPanSpeed = this._adjustedSettings.panSpeed() * (touch ? this._touchAdjustments.panSpeed : 1.0);
-      const offset = this.panDeltaToOffset(vec2.mul(vec2.create(), this._panDelta, vec2.fromValues(adjustedPanSpeed, adjustedPanSpeed)));
-
-      if (this._damping.pan.duration > 0) {
-        if (offset[0] < 0) {
-          offset[0] = Math.min(offset[0], this._adjustedSettings.movementSmoothness() * this._damping.pan.offset[0]);
-        } else {
-          offset[0] = Math.max(offset[0], this._adjustedSettings.movementSmoothness() * this._damping.pan.offset[0]);
-        }
-        if (offset[1] < 0) {
-          offset[1] = Math.min(offset[1], this._adjustedSettings.movementSmoothness() * this._damping.pan.offset[1]);
-        } else {
-          offset[1] = Math.max(offset[1], this._adjustedSettings.movementSmoothness() * this._damping.pan.offset[1]);
-        }
-        if (offset[2] < 0) {
-          offset[2] = Math.min(offset[2], this._adjustedSettings.movementSmoothness() * this._damping.pan.offset[2]);
-        } else {
-          offset[2] = Math.max(offset[2], this._adjustedSettings.movementSmoothness() * this._damping.pan.offset[2]);
-        }
-      }
-
-      const damping = 1 - Math.max(0.01, Math.min(0.99, this._adjustedSettings.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);
-
-      this._damping.rotation.duration = 0;
-      this._damping.zoom.duration = 0;
-
-      this._controls.applyTargetVector(offset, true);
-      this._controls.applyPositionVector(offset, true);
-    }
-  }
-
-  public reset() {
-    this._damping = {
-      rotation: {
-        time: 0,
-        duration: 0,
-        theta: 0,
-        phi: 0
-      },
-      zoom: {
-        time: 0,
-        duration: 0,
-        delta: 0
-      },
-      pan: {
-        time: 0,
-        duration: 0,
-        offset: vec3.create()
-      },
-    };
-    this._dollyDelta = 0;
-    this._dollyEnd = 0;
-    this._dollyStart = 0;
-    this._panDelta = vec2.create();
-    this._panEnd = vec2.create();
-    this._panStart = vec2.create();
-  }
-
-  public restrict(p: vec3, t: vec3): { position: vec3, target: vec3 } {
-    return {
-      position: p,
-      target: t
-    };
-  }
-
-  public update(time: number, manualInteraction: boolean): void {
-    if (manualInteraction === true) {
-      this._damping.zoom.duration = 0;
-      this._damping.pan.duration = 0;
-    }
-
-    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) {
-        this._damping.pan.time = this._damping.pan.duration;
-        this._damping.pan.duration = 0;
-      } else {
-        this._damping.pan.time += time;
-
-        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);
-      }
-    } else {
-      this._damping.pan.time = 0;
-    }
-
-    if (this._damping.zoom.duration > 0) {
-      if (this._damping.zoom.time + time > this._damping.zoom.duration) {
-        this._damping.zoom.time = this._damping.zoom.duration;
-        this._damping.zoom.duration = 0;
-      } else {
-        this._damping.zoom.time += time;
-
-        const frameSinceStart = this._damping.zoom.time / 16.6666;
-        const delta = this._damping.zoom.delta * Math.pow(damping, frameSinceStart);
-
-        const newDistance = vec3.distance(this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates())
-          * (1 - delta);
-
-        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());
-        this._controls.applyTargetVector(offset, true);
-      }
-    } else {
-      this._damping.zoom.time = 0;
-    }
-  }
-
-  public zoom(x: number, y: number, active: boolean, touch: boolean): void {
-    const distance = Math.sqrt(x * x + y * y);
-
-    if (!active) {
-      this._dollyStart = distance;
-    } else {
-      this._dollyEnd = distance;
-      this._dollyDelta = this._dollyEnd - this._dollyStart;
-      this._dollyStart = this._dollyEnd;
-
-      if (this._damping.zoom.duration > 0) {
-        if (this._dollyDelta < 0) {
-          this._dollyDelta = Math.min(this._dollyDelta, this._adjustedSettings.movementSmoothness() * this._damping.zoom.delta);
-        } else {
-          this._dollyDelta = Math.max(this._dollyDelta, this._adjustedSettings.movementSmoothness() * this._damping.zoom.delta);
-        }
-      }
-      const delta = this._dollyDelta * this._adjustedSettings.zoomSpeed() * (touch ? this._touchAdjustments.zoomSpeed : 1.0);
-
-      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;
-
-      const newDistance = vec3.distance(this._controls.getTargetWithManualUpdates(), this._controls.getPositionWithManualUpdates())
-        * (1 - delta);
-
-      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());
-      this._controls.applyTargetVector(offset, true);
-    }
-  }
-
-  // #endregion Public Methods (6)
-
-  // #region Private Methods (1)
-
-  private panDeltaToOffset(panDelta: vec2): vec3 {
-    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());
-
-    const orthographicCamera: OrthographicCamera = <OrthographicCamera>this._controls.camera;
-    const mat = mat4.targetTo(mat4.create(), orthographicCamera.position, orthographicCamera.target, orthographicCamera.up);
-
-    // // 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 / 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 / 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 (1)
-}

package/src/interfaces/controls/ICameraControlsUsage.ts

@@ -1,30 +0,0 @@
-import { IDomEventListener } from '@shapediver/viewer.shared.services'
-import { mat4, vec3 } from 'gl-matrix'
-import { ICameraOptions } from '../camera/ICamera'
-
-import { ICameraControls } from './ICameraControls'
-
-export interface ICameraControlsUsage extends ICameraControls {
-    // #region Properties (4)
-
-    readonly canvas?: HTMLCanvasElement;
-
-    // #endregion Properties (4)
-
-    // #region Public Methods (12)
-
-    animate(path: { position: vec3, target: vec3 }[], options: ICameraOptions) : Promise<boolean>
-    applyPositionMatrix(matrix: mat4, manualInteraction?: boolean): void;
-    applyTargetMatrix(matrix: mat4, manualInteraction?: boolean): void;
-    applyPositionVector(vector: vec3, manualInteraction?: boolean): void;
-    applyTargetVector(vector: vec3, manualInteraction?: boolean): void;
-    applyUpMatrix(matrix: mat4, manualInteraction?: boolean): void;
-    getPositionWithManualUpdates(): vec3;
-    getTargetWithManualUpdates(): vec3;
-    getPositionWithUpdates(): vec3;
-    getTargetWithUpdates(): vec3;
-    isMoving(): boolean;
-    isWithinRestrictions(position: vec3, target: vec3): boolean;
-
-    // #endregion Public Methods (12)
-}

package/src/interfaces/controls/IOrthographicCameraControls.ts

@@ -1,13 +0,0 @@
-import { ICameraControls } from './ICameraControls'
-
-export interface IOrthographicCameraControls extends ICameraControls {
-    damping: number;
-    enableKeyPan: boolean;
-    enablePan: boolean;
-    enableZoom: boolean;
-    input: { keys: { up: number, down: number, left: number, right: number }, mouse: { rotate: number, zoom: number, pan: number }, touch: { rotate: number, zoom: number, pan: number } };
-    keyPanSpeed: number;
-    movementSmoothness: number;
-    panSpeed: number;
-    zoomSpeed: number;
-}

package/src/interfaces/controls/IPerspectiveCameraControls.ts

@@ -1,33 +0,0 @@
-import { vec3 } from 'gl-matrix';
-
-import { ICameraControls } from './ICameraControls';
-
-export interface IPerspectiveCameraControls extends ICameraControls {
-    // #region Properties (23)
-
-    autoRotationSpeed: number;
-    cubePositionRestriction: { min: vec3, max: vec3 };
-    cubeTargetRestriction: { min: vec3, max: vec3 };
-    damping: number;
-    enableAutoRotation: boolean;
-    enableAzimuthRotation: boolean;
-    enableKeyPan: boolean;
-    enablePan: boolean;
-    enablePolarRotation: boolean;
-    enableRotation: boolean;
-    enableTurntableControls: boolean;
-    enableZoom: boolean;
-    input: { keys: { up: number, down: number, left: number, right: number }, mouse: { rotate: number, zoom: number, pan: number }, touch: { rotate: number, zoom: number, pan: number } };
-    keyPanSpeed: number;
-    movementSmoothness: number;
-    panSpeed: number;
-    rotationRestriction: { minPolarAngle: number, maxPolarAngle: number, minAzimuthAngle: number, maxAzimuthAngle: number };
-    rotationSpeed: number;
-    spherePositionRestriction: { center: vec3, radius: number };
-    sphereTargetRestriction: { center: vec3, radius: number };
-    turntableCenter: vec3;
-    zoomRestriction: { minDistance: number, maxDistance: number };
-    zoomSpeed: number;
-
-    // #endregion Properties (23)
-}