@shapediver/viewer.rendering-engine.camera-engine 1.15.5 → 2.0.0

package/src/implementation/controls/AbstractCameraControls.ts

@@ -0,0 +1,329 @@
+import { mat4, vec3 } from 'gl-matrix'
+import { EventEngine, EVENTTYPE } from '@shapediver/viewer.shared.services'
+import { container } from 'tsyringe'
+
+import { CAMERA_TYPE } from '../../interfaces/ICameraEngine'
+import { ICamera, ICameraOptions } from '../../interfaces/camera/ICamera'
+import { ICameraControlsUsage } from '../../interfaces/controls/ICameraControlsUsage'
+import { CameraInterpolationManager } from '../interpolation/CameraInterpolationManager'
+import { ICameraControlsEventDistribution } from '../../interfaces/controls/ICameraControlsEventDistribution'
+import { ICameraControlsLogic } from '../../interfaces/controls/ICameraControlsLogic'
+
+export class AbstractCameraControls implements ICameraControlsUsage {
+    // #region Properties (11)
+
+    private readonly _cameraInterpolationManager: CameraInterpolationManager;
+    private readonly _eventEngine: EventEngine = <EventEngine>container.resolve(EventEngine);
+
+    private _canvas?: HTMLCanvasElement;
+    private _manualInteraction: boolean = false;
+    private _manualInteractionTransformations: {
+        position: {
+            matrix?: mat4,
+            vector?: vec3
+        }[],
+        target: {
+            matrix?: mat4,
+            vector?: vec3
+        }[],
+    };
+    private _moving: boolean = false;
+    private _movingDuration: number = 0;
+    private _nonmanualInteraction: boolean = false;
+    private _nonmanualInteractionTransformations: {
+        position: {
+            matrix?: mat4,
+            vector?: vec3
+        }[],
+        target: {
+            matrix?: mat4,
+            vector?: vec3
+        }[],
+    };
+    private _position: vec3 = vec3.create();
+    private _target: vec3 = vec3.create();
+    private _viewportId?: string;
+
+    protected _cameraControlsEventDistribution!: ICameraControlsEventDistribution;
+    protected _cameraLogic!: ICameraControlsLogic;
+
+    // #endregion Properties (11)
+
+    // #region Constructors (1)
+
+    constructor(
+        private _camera: ICamera,
+        private _enabled: boolean,
+        type: CAMERA_TYPE
+    ) {
+        this._cameraInterpolationManager = new CameraInterpolationManager(this._camera, this);
+        this._manualInteractionTransformations = { position: [], target: [] };
+        this._nonmanualInteractionTransformations = { position: [], target: [] };
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Accessors (9)
+
+    public assignViewer(viewportId: string, canvas: HTMLCanvasElement) {
+        this._canvas = canvas;
+        this._viewportId = viewportId;
+    }
+
+    public get cameraControlsEventDistribution(): ICameraControlsEventDistribution {
+        return this._cameraControlsEventDistribution;
+    }
+
+    public get canvas(): HTMLCanvasElement | undefined {
+        return this._canvas;
+    }
+
+    public set canvas(value: HTMLCanvasElement | undefined) {
+        this._canvas = value;
+    }
+
+    public get enabled(): boolean {
+        return this._enabled;
+    }
+
+    public set enabled(value: boolean) {
+        if (!value) {
+            this._manualInteraction = false;
+            this._manualInteractionTransformations = { position: [], target: [] };
+            this._nonmanualInteraction = false;
+            this._nonmanualInteractionTransformations = { position: [], target: [] };
+
+            this._cameraControlsEventDistribution.reset();
+            this._cameraLogic.reset();
+        }
+        this._enabled = value;
+    }
+
+    public get camera(): ICamera {
+        return this._camera;
+    }
+
+    public set camera(value: ICamera) {
+        this._camera = value;
+    }
+
+    public get position(): vec3 {
+        return this._position;
+    }
+
+    public set position(value: vec3) {
+        this._position = value;
+    }
+
+    public get target(): vec3 {
+        return this._target;
+    }
+
+    public set target(value: vec3) {
+        this._target = value;
+    }
+
+    // #endregion Public Accessors (9)
+
+    // #region Public Methods (10)
+
+    public animate(path: { position: vec3, target: vec3 }[], options: ICameraOptions): Promise<boolean> {
+        if(options && options.duration === 0) {
+            this._position = path[path.length-1].position;
+            this._target = path[path.length-1].target;
+            return new Promise<boolean>(resolve => resolve(true));
+        }
+    
+        this._manualInteraction = false;
+        this._manualInteractionTransformations = { position: [], target: [] };
+        return this._cameraInterpolationManager.interpolate(path, options);
+    }
+
+    public applyPositionVector(vector: vec3, manualInteraction?: boolean | undefined): void {
+        if (this._manualInteraction || manualInteraction) {
+            this._manualInteraction = true;
+            this._manualInteractionTransformations.position.push({vector});
+        } else {
+            this._nonmanualInteraction = true;
+            this._nonmanualInteractionTransformations.position.push({vector});
+        }
+    }
+
+    public applyTargetVector(vector: vec3, manualInteraction?: boolean | undefined): void {
+        if (this._manualInteraction || manualInteraction) {
+            this._manualInteraction = true;
+            this._manualInteractionTransformations.target.push({vector});
+        } else {
+            this._nonmanualInteraction = true;
+            this._nonmanualInteractionTransformations.target.push({vector});
+        }
+    }
+
+    public applyPositionMatrix(matrix: mat4, manualInteraction?: boolean | undefined): void {
+        if (this._manualInteraction || manualInteraction) {
+            this._manualInteraction = true;
+            this._manualInteractionTransformations.position.push({matrix});
+        } else {
+            this._nonmanualInteraction = true;
+            this._nonmanualInteractionTransformations.position.push({matrix});
+        }
+    }
+
+    public applyTargetMatrix(matrix: mat4, manualInteraction?: boolean | undefined): void {
+        if (this._manualInteraction || manualInteraction) {
+            this._manualInteraction = true;
+            this._manualInteractionTransformations.target.push({matrix});
+        } else {
+            this._nonmanualInteraction = true;
+            this._nonmanualInteractionTransformations.target.push({matrix});
+        }
+    }
+
+    public applyUpMatrix(matrix: mat4, manualInteraction?: boolean | undefined): void {
+        // https://shapediver.atlassian.net/browse/SS-2949
+        throw new Error("Method not implemented.");
+    }
+
+    public getPositionWithManualUpdates(): vec3 {
+        let position = vec3.clone(this._position);
+        if (this._manualInteraction) {
+            for (let i = this._manualInteractionTransformations.position.length - 1; i >= 0; i--) {
+                if(this._manualInteractionTransformations.position[i].matrix) {
+                    position = vec3.transformMat4(position, position, this._manualInteractionTransformations.position[i].matrix!);
+                } else {
+                    position = vec3.add(position, position, this._manualInteractionTransformations.position[i].vector!);
+                }
+            }
+        }
+        return position;
+    }
+
+    public getTargetWithManualUpdates(): vec3 {
+        let target = vec3.clone(this._target);
+        if (this._manualInteraction) {
+            for (let i = this._manualInteractionTransformations.target.length - 1; i >= 0; i--) {
+                if(this._manualInteractionTransformations.target[i].matrix) {
+                    target = vec3.transformMat4(target, target, this._manualInteractionTransformations.target[i].matrix!);
+                } else {
+                    target = vec3.add(target, target, this._manualInteractionTransformations.target[i].vector!);
+                }
+            }
+        }
+        return target;
+    }
+
+    public getPositionWithUpdates(): vec3 {
+        return this.getPosition();
+    }
+
+    public getTargetWithUpdates(): vec3 {
+        return this.getTarget();
+    }
+
+    public isMoving(): boolean {
+        return this._manualInteraction || this._nonmanualInteraction;
+    }
+
+    public isWithinRestrictions(position: vec3, target: vec3): boolean {
+        return this._cameraLogic.isWithinRestrictions(position, target);
+    }
+
+    public reset(): void {
+        this._cameraControlsEventDistribution.reset();
+        this._cameraLogic.reset();
+    }
+
+    public update(time: number): { position: vec3, target: vec3 } {
+        if (!this._enabled) 
+            return { position: vec3.clone(this._position), target: vec3.clone(this._target) };
+
+        // reset all values
+        if(this._manualInteraction === true && this._cameraInterpolationManager.active())
+            this._cameraInterpolationManager.stop()
+
+        let { position, target } = this._cameraLogic.restrict(this.getPosition(), this.getTarget());
+        this._position = vec3.clone(position);
+        this._target = vec3.clone(target);
+
+        this._manualInteraction = false;
+        this._manualInteractionTransformations = { position: [], target: [] };
+        this._nonmanualInteraction = this._cameraInterpolationManager.active();
+        this._nonmanualInteractionTransformations = { position: [], target: [] };
+
+        this._cameraLogic.update(time, this._nonmanualInteraction);
+
+        const oldMovement = this._moving;
+        const cameraDefinition = {
+            position: vec3.clone(this._position),
+            target: vec3.clone(this._target)
+        };
+
+        this._movingDuration += time;
+        this._moving = (this._manualInteraction || this._nonmanualInteraction);
+
+        switch(true) {
+            case oldMovement !== this._moving && this._moving === true:
+                this._eventEngine.emitEvent(EVENTTYPE.CAMERA.CAMERA_START, { viewportId: this._viewportId, cameraId: this.camera.id });
+                break;
+            case oldMovement !== this._moving && this._moving === false:
+                this._eventEngine.emitEvent(EVENTTYPE.CAMERA.CAMERA_END, { viewportId: this._viewportId, cameraId: this.camera.id });
+                break;
+            default: 
+                this._eventEngine.emitEvent(EVENTTYPE.CAMERA.CAMERA_MOVE, { viewportId: this._viewportId, cameraId: this.camera.id });
+        }
+        
+        if (!this._moving) this._movingDuration = 0;
+
+        return cameraDefinition;
+    }
+
+    // #endregion Public Methods (10)
+
+    // #region Private Methods (2)
+
+    private getPosition(): vec3 {
+        let position = vec3.clone(this._position);
+        if (this._manualInteraction) {
+            for (let i = this._manualInteractionTransformations.position.length - 1; i >= 0; i--) {
+                if(this._manualInteractionTransformations.position[i].matrix) {
+                    position = vec3.transformMat4(position, position, this._manualInteractionTransformations.position[i].matrix!);
+                } else {
+                    position = vec3.add(position, position, this._manualInteractionTransformations.position[i].vector!);
+                }
+            }
+        } else if (this._nonmanualInteraction) {
+            for (let i = this._nonmanualInteractionTransformations.position.length - 1; i >= 0; i--) {
+                if(this._nonmanualInteractionTransformations.position[i].matrix) {
+                    position = vec3.transformMat4(position, position, this._nonmanualInteractionTransformations.position[i].matrix!);
+                } else {
+                    position = vec3.add(position, position, this._nonmanualInteractionTransformations.position[i].vector!);
+                }
+            }
+        }
+        return position;
+    }
+
+    private getTarget(): vec3 {
+        let target = vec3.clone(this._target);
+        if (this._manualInteraction) {
+            for (let i = this._manualInteractionTransformations.target.length - 1; i >= 0; i--) {
+                if(this._manualInteractionTransformations.target[i].matrix) {
+                    target = vec3.transformMat4(target, target, this._manualInteractionTransformations.target[i].matrix!);
+                } else {
+                    target = vec3.add(target, target, this._manualInteractionTransformations.target[i].vector!);
+                }
+            }
+        } else if (this._nonmanualInteraction) {
+            for (let i = this._nonmanualInteractionTransformations.target.length - 1; i >= 0; i--) {
+                if(this._nonmanualInteractionTransformations.target[i].matrix) {
+                    target = vec3.transformMat4(target, target, this._nonmanualInteractionTransformations.target[i].matrix!);
+                } else {
+                    target = vec3.add(target, target, this._nonmanualInteractionTransformations.target[i].vector!);
+                }
+            }
+        }
+        return target;
+    }
+
+    // #endregion Private Methods (2)
+}

package/src/implementation/controls/OrthographicCameraControls.ts

@@ -0,0 +1,131 @@
+import { IOrthographicControlsSettingsV3 } from '@shapediver/viewer.settings'
+import { SettingsEngine, StateEngine } from '@shapediver/viewer.shared.services'
+import { container } from 'tsyringe'
+
+import { CAMERA_TYPE, ICamera } from '../..'
+import { IOrthographicCameraControls } from '../../interfaces/controls/IOrthographicCameraControls'
+import { AbstractCameraControls } from './AbstractCameraControls'
+import {
+  CameraControlsEventDistribution as OrthographicCameraControlsEventDistribution,
+} from './orthographic/CameraControlsEventDistribution'
+import { CameraControlsLogic as OrthographicCameraControlsLogic } from './orthographic/CameraControlsLogic'
+
+export class OrthographicCameraControls extends AbstractCameraControls implements IOrthographicCameraControls {
+    // #region Properties (9)
+
+    private _damping: number = 0.1;
+    private _enableKeyPan: boolean = false;
+    private _enablePan: boolean = true;
+    private _enableZoom: boolean = true;
+    private _input: { keys: { up: number, down: number, left: number, right: number }, mouse: { rotate: number, zoom: number, pan: number }, touch: { rotate: number, zoom: number, pan: number } } = { keys: { up: 38, down: 40, left: 37, right: 39 }, mouse: { rotate: 0, zoom: 1, pan: 2 }, touch: { rotate: 1, zoom: 2, pan: 3 }, };
+    private _keyPanSpeed: number = 0.5;
+    private _movementSmoothness: number = 0.5;
+    private _panSpeed: number = 0.5;
+    private _zoomSpeed: number = 0.5;
+
+    private readonly _stateEngine: StateEngine = <StateEngine>container.resolve(StateEngine);
+
+    // #endregion Properties (9)
+
+    // #region Constructors (1)
+
+    constructor(camera: ICamera, enabled: boolean) {
+        super(camera, enabled, CAMERA_TYPE.ORTHOGRAPHIC);
+        this._cameraLogic = new OrthographicCameraControlsLogic(this);
+        this._cameraControlsEventDistribution = new OrthographicCameraControlsEventDistribution(this, <OrthographicCameraControlsLogic>this._cameraLogic);
+    }
+
+    public applySettings(settingsEngine: SettingsEngine) {
+        const cameraSetting = settingsEngine.camera.cameras[this.camera.id];
+        if(!cameraSetting) return;
+        this.reset();
+        const controlsSettings = <IOrthographicControlsSettingsV3>cameraSetting.controls;
+        this.damping = controlsSettings.damping;
+        this.enableKeyPan = controlsSettings.enableKeyPan;
+        this.enablePan = controlsSettings.enablePan;
+        this.enableZoom = controlsSettings.enableZoom;
+        this.input = controlsSettings.input;
+        this.keyPanSpeed = controlsSettings.keyPanSpeed;
+        this.movementSmoothness = controlsSettings.movementSmoothness;
+        this.panSpeed = controlsSettings.panSpeed;
+        this.zoomSpeed = controlsSettings.zoomSpeed;
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Accessors (18)
+
+    public get damping(): number {
+        return this._damping;
+    }
+
+    public set damping(value: number) {
+        this._damping = value;
+    }
+
+    public get enableKeyPan(): boolean {
+        return this._enableKeyPan;
+    }
+
+    public set enableKeyPan(value: boolean) {
+        this._enableKeyPan = value;
+    }
+
+    public get enablePan(): boolean {
+        return this._enablePan;
+    }
+
+    public set enablePan(value: boolean) {
+        this._enablePan = value;
+    }
+
+    public get enableZoom(): boolean {
+        return this._enableZoom;
+    }
+
+    public set enableZoom(value: boolean) {
+        this._enableZoom = value;
+    }
+
+    public get input(): { keys: { up: number, down: number, left: number, right: number }, mouse: { rotate: number, zoom: number, pan: number }, touch: { rotate: number, zoom: number, pan: number } } {
+        return this._input;
+    }
+
+    public set input(value: { keys: { up: number, down: number, left: number, right: number }, mouse: { rotate: number, zoom: number, pan: number }, touch: { rotate: number, zoom: number, pan: number } }) {
+        this._input = value;
+    }
+
+    public get keyPanSpeed(): number {
+        return this._keyPanSpeed;
+    }
+
+    public set keyPanSpeed(value: number) {
+        this._keyPanSpeed = value;
+    }
+
+    public get movementSmoothness(): number {
+        return this._movementSmoothness;
+    }
+
+    public set movementSmoothness(value: number) {
+        this._movementSmoothness = value;
+    }
+
+    public get panSpeed(): number {
+        return this._panSpeed;
+    }
+
+    public set panSpeed(value: number) {
+        this._panSpeed = value;
+    }
+
+    public get zoomSpeed(): number {
+        return this._zoomSpeed;
+    }
+
+    public set zoomSpeed(value: number) {
+        this._zoomSpeed = value;
+    }
+
+    // #endregion Public Accessors (18)
+}