@shapediver/viewer.rendering-engine.camera-engine 1.15.7 → 2.0.2

package/src/implementation/CameraEngine.ts

@@ -0,0 +1,324 @@
+import {
+  DomEventEngine,
+  EventEngine,
+  EVENTTYPE,
+  IEvent,
+  Logger,
+  LOGGING_TOPIC,
+  SettingsEngine,
+  ShapeDiverViewerCameraError,
+  StateEngine,
+  UuidGenerator,
+} from '@shapediver/viewer.shared.services'
+import { container, singleton } from 'tsyringe'
+import { Box } from '@shapediver/viewer.shared.math'
+import { vec3 } from 'gl-matrix'
+import { IOrthographicCameraSettingsV3, IPerspectiveCameraSettingsV3 } from '@shapediver/viewer.settings'
+import { ISceneEvent } from '@shapediver/viewer.shared.types'
+import { ITree, ITreeNode, Tree, TreeNode } from '@shapediver/viewer.shared.node-tree'
+
+import { CAMERA_TYPE, ICameraEngine } from '../interfaces/ICameraEngine'
+import { AbstractCamera } from './camera/AbstractCamera'
+import { OrthographicCameraControls } from './controls/OrthographicCameraControls'
+import { PerspectiveCamera } from './camera/PerspectiveCamera'
+import { OrthographicCamera } from './camera/OrthographicCamera'
+import { PerspectiveCameraControls } from './controls/PerspectiveCameraControls'
+import { ORTHOGRAPHIC_CAMERA_DIRECTION } from '../interfaces/camera/IOrthographicCamera'
+import { IRenderingEngine } from '@shapediver/viewer.rendering-engine.rendering-engine'
+import { ICamera } from '../interfaces/camera/ICamera'
+
+export class CameraEngine implements ICameraEngine {
+    // #region Properties (10)
+
+    private readonly _cameras: {
+        [key: string]: ICamera
+    } = {};
+    private readonly _camerasDomEventListenerToken: {
+        [key: string]: string
+    } = {};
+    private readonly _eventEngine: EventEngine = <EventEngine>container.resolve(EventEngine);
+    private readonly _logger: Logger = <Logger>container.resolve(Logger);
+    private readonly _settingsEngine: SettingsEngine = <SettingsEngine>container.resolve(SettingsEngine);
+    private readonly _stateEngine: StateEngine = <StateEngine>container.resolve(StateEngine);
+    private readonly _tree: ITree = <ITree>container.resolve(Tree);
+    private readonly _uuidGenerator: UuidGenerator = <UuidGenerator>container.resolve(UuidGenerator);
+
+    private _camera: ICamera | null = null;
+    private _settingsApplied: boolean = false;
+
+    protected _boundingBox: Box = new Box();
+    private _update?: () => void;
+
+    // #endregion Properties (10)
+
+    // #region Constructors (1)
+
+    constructor(private readonly _renderingEngine: IRenderingEngine, private readonly _canvas: HTMLCanvasElement) {
+        this._eventEngine.addListener(EVENTTYPE.SCENE.SCENE_BOUNDING_BOX_CHANGE, (e: IEvent) => {
+            const viewerEvent = <ISceneEvent>e;
+            if (viewerEvent.viewportId === this._renderingEngine.id) {
+                this._boundingBox = new Box(viewerEvent.boundingBox!.min, viewerEvent.boundingBox!.max);
+
+                const cameras = this.cameras;
+                for (let c in cameras)
+                    cameras[c].boundingBox = this._boundingBox.clone();
+            }
+        });
+
+        this._eventEngine.addListener(EVENTTYPE.VIEWPORT.VIEWPORT_UPDATED, (e: IEvent) => {
+            const viewerEvent = <ISceneEvent>e;
+            if (viewerEvent.viewportId === this._renderingEngine.id) {
+                this.searchForNewCameras();
+            }
+        });
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Accessors (2)
+
+    public get camera(): ICamera | null {
+        return this._camera;
+    }
+
+    public get cameras(): {
+        [key: string]: ICamera
+    } {
+        return this._cameras;
+    }
+    
+    public get update(): (() => void) | undefined {
+        return this._update;
+    }
+
+    public set update(value: (() => void) | undefined) {
+        this._update = value;
+    }
+
+    // #endregion Public Accessors (2)
+
+    // #region Public Methods (7)
+
+    public activateCameraEvents(): void {
+        const cameras = this.cameras;
+        for(let c in cameras)
+            (<PerspectiveCameraControls | OrthographicCameraControls>cameras[c].controls).cameraControlsEventDistribution.activateCameraEvents();
+    }
+
+    public applySettings(settingsEngine: SettingsEngine) {
+        const cameras = this.cameras;
+        for (let c in cameras)
+            this.removeCamera(c);
+
+        for(let id in settingsEngine.settings.camera.cameras) {
+            const cameraSetting = settingsEngine.settings.camera.cameras[id];
+            if(cameraSetting.type === 'perspective') {
+                this.createCamera(CAMERA_TYPE.PERSPECTIVE, id);
+            } else {
+                const camera = this.createCamera(CAMERA_TYPE.ORTHOGRAPHIC, id);
+                (<OrthographicCamera>camera).direction = <ORTHOGRAPHIC_CAMERA_DIRECTION>cameraSetting.type;
+            }
+        }
+
+        if(!this._settingsApplied)
+            for (let c in cameras)
+                cameras[c].applySettings(settingsEngine);
+
+        const cameraKeys = Object.keys(settingsEngine.settings.camera.cameras);
+
+        if(cameraKeys.length > 0) {
+            if(!settingsEngine.settings.camera.cameraId) {
+                this.assignCamera(cameraKeys[0]);
+            } else {
+                this.assignCamera(settingsEngine.settings.camera.cameraId);
+            }
+        } else {
+            const camera = this.createCamera(CAMERA_TYPE.PERSPECTIVE, 'standard');
+            this.assignCamera(camera.id);
+            camera.applySettings(settingsEngine);
+        }
+
+        this._settingsApplied = true;
+        if(this._update) this._update();
+    }
+
+    public assignCamera(id: string): boolean {
+        const camera = this.cameras[id];
+        if (!camera) return false;
+        this._camera = camera;
+        return true;
+    }
+
+    public createCamera(type: CAMERA_TYPE, id?: string): ICamera {
+        const cameras = this.cameras;
+        const cameraId = id || this._uuidGenerator.create();
+        if (cameras[cameraId]) {
+            const error = new ShapeDiverViewerCameraError(`CameraEngine.createCamera: Camera (${type}) with this id (${cameraId}) already exists.`);
+            throw this._logger.handleError(LOGGING_TOPIC.CAMERA, `CameraEngine.createCamera`, error, false);
+        }
+        
+        const camera = CAMERA_TYPE.PERSPECTIVE === type ? new PerspectiveCamera(cameraId) : new OrthographicCamera(cameraId);
+        camera.assignViewer(this._renderingEngine.id);
+
+        cameras[cameraId] = camera;
+        if (this._settingsApplied && this._renderingEngine.settingsEngine) {
+            camera.applySettings(this._renderingEngine.settingsEngine);
+        } else {
+            camera.zoomTo(undefined, { duration: 0 });
+        }
+
+        if(this._update) this._update();
+        return camera;
+    }
+
+    public deactivateCameraEvents(): void {
+        const cameras = this.cameras;
+        for (let c in cameras)
+            (<PerspectiveCameraControls | OrthographicCameraControls>cameras[c].controls).cameraControlsEventDistribution.deactivateCameraEvents();
+    }
+
+    public removeCamera(id: string): boolean {
+        const cameras = this.cameras;
+        const camera = cameras[id];
+        if (!camera) return false;
+        this._renderingEngine.domEventEngine.removeDomEventListener(this._camerasDomEventListenerToken[id])
+        if (this._camera && this._camera.id === id)
+            this._camera = null;
+
+        delete cameras[id];
+        delete this._camerasDomEventListenerToken[id];
+        if(this._update) this._update();
+        return true;
+    }
+
+    public saveSettings(settingsEngine: SettingsEngine) {
+        settingsEngine.settings.camera.cameraId = this._camera ? this._camera.id : 'standard';
+        settingsEngine.settings.camera.cameras = {};
+
+        // TODO: once the platform is ready for it, save all cameras
+        // for (let c in this.cameras) {
+        if(!this._camera) 
+            return;
+
+        const camera = this._camera;
+
+        if (camera.type === CAMERA_TYPE.PERSPECTIVE) {
+            const controls = <PerspectiveCameraControls>(<PerspectiveCamera>camera).controls;
+            settingsEngine.camera.cameras[camera.id] = {
+                autoAdjust: camera.autoAdjust,
+                cameraMovementDuration: camera.cameraMovementDuration,
+                enableCameraControls: camera.enableCameraControls,
+                revertAtMouseUp: camera.revertAtMouseUp,
+                revertAtMouseUpDuration: camera.revertAtMouseUpDuration,
+                zoomExtentsFactor: camera.zoomExtentsFactor,
+                position: { x: camera.defaultPosition[0], y: camera.defaultPosition[1], z: camera.defaultPosition[2] },
+                target: { x: camera.defaultTarget[0], y: camera.defaultTarget[1], z: camera.defaultTarget[2] },
+                type: camera.type,
+                fov: (<PerspectiveCamera>camera).fov,
+                controls: {
+                    autoRotationSpeed: controls.autoRotationSpeed,
+                    damping: controls.damping,
+                    enableAutoRotation: controls.enableAutoRotation,
+                    enableKeyPan: controls.enableKeyPan,
+                    enablePan: controls.enablePan,
+                    enableRotation: controls.enableRotation,
+                    enableZoom: controls.enableZoom,
+                    input: controls.input,
+                    keyPanSpeed: controls.keyPanSpeed,
+                    movementSmoothness: controls.movementSmoothness,
+                    rotationSpeed: controls.rotationSpeed,
+                    panSpeed: controls.panSpeed,
+                    zoomSpeed: controls.zoomSpeed,
+                    restrictions: {
+                        position: {
+                            cube: {
+                                min: { x: controls.cubePositionRestriction.min[0], y: controls.cubePositionRestriction.min[1], z: controls.cubePositionRestriction.min[2] },
+                                max: { x: controls.cubePositionRestriction.max[0], y: controls.cubePositionRestriction.max[1], z: controls.cubePositionRestriction.max[2] },
+                            },
+                            sphere: {
+                                center: { x: controls.spherePositionRestriction.center[0], y: controls.spherePositionRestriction.center[1], z: controls.spherePositionRestriction.center[2] },
+                                radius: controls.spherePositionRestriction.radius,
+                            },
+                        },
+                        target: {
+                            cube: {
+                                min: { x: controls.cubeTargetRestriction.min[0], y: controls.cubeTargetRestriction.min[1], z: controls.cubeTargetRestriction.min[2] },
+                                max: { x: controls.cubeTargetRestriction.max[0], y: controls.cubeTargetRestriction.max[1], z: controls.cubeTargetRestriction.max[2] },
+                            },
+                            sphere: {
+                                center: { x: controls.sphereTargetRestriction.center[0], y: controls.sphereTargetRestriction.center[1], z: controls.sphereTargetRestriction.center[2] },
+                                radius: controls.sphereTargetRestriction.radius,
+                            },
+                        },
+                        rotation: controls.rotationRestriction,
+                        zoom: controls.zoomRestriction,
+                    }
+                }
+            }
+
+        } else {
+            if (settingsEngine.camera.cameras[camera.id]) {
+                const previousDirection = settingsEngine.camera.cameras[camera.id].type;
+
+                // if the direction changed, but the default position & target did not, there is an issue
+                if (previousDirection !== camera.type && (
+                    settingsEngine.camera.cameras[camera.id].position.x === camera.defaultPosition[0] &&
+                    settingsEngine.camera.cameras[camera.id].position.y === camera.defaultPosition[1] &&
+                    settingsEngine.camera.cameras[camera.id].position.z === camera.defaultPosition[2] &&
+                    settingsEngine.camera.cameras[camera.id].target.x === camera.defaultTarget[0] &&
+                    settingsEngine.camera.cameras[camera.id].target.y === camera.defaultTarget[1] &&
+                    settingsEngine.camera.cameras[camera.id].target.z === camera.defaultTarget[2]
+                )) {
+                    camera.defaultPosition = vec3.clone(camera.position);
+                    camera.defaultTarget = vec3.clone(camera.target);
+                }
+            }
+            const controls = <OrthographicCameraControls>(<OrthographicCamera>camera).controls;
+
+            settingsEngine.camera.cameras[camera.id] = {
+                autoAdjust: camera.autoAdjust,
+                cameraMovementDuration: camera.cameraMovementDuration,
+                enableCameraControls: camera.enableCameraControls,
+                revertAtMouseUp: camera.revertAtMouseUp,
+                revertAtMouseUpDuration: camera.revertAtMouseUpDuration,
+                zoomExtentsFactor: camera.zoomExtentsFactor,
+                position: { x: camera.defaultPosition[0], y: camera.defaultPosition[1], z: camera.defaultPosition[2] },
+                target: { x: camera.defaultTarget[0], y: camera.defaultTarget[1], z: camera.defaultTarget[2] },
+                type: (<OrthographicCamera>camera).direction,
+                controls: {
+                    damping: controls.damping,
+                    enableKeyPan: controls.enableKeyPan,
+                    enablePan: controls.enablePan,
+                    enableZoom: controls.enableZoom,
+                    input: controls.input,
+                    keyPanSpeed: controls.keyPanSpeed,
+                    movementSmoothness: controls.movementSmoothness,
+                    panSpeed: controls.panSpeed,
+                    zoomSpeed: controls.zoomSpeed,
+                }
+            }
+        }
+    }
+
+    // #endregion Public Methods (7)
+    
+    // #region Private Methods (1)
+
+    private searchForNewCameras() {
+        const getCameraData = (node: ITreeNode) => {
+            for(let i = 0; i < node.data.length; i++)
+                if((node.data[i] instanceof AbstractCamera) && !this._cameras[node.data[i].id]) {
+                    const camera = <AbstractCamera>node.data[i];
+                    if(camera.viewportId === this._renderingEngine.id)
+                        this._cameras[camera.id] = camera;
+                }
+
+            for(let i = 0; i < node.children.length; i++)
+                getCameraData(node.children[i]);
+        };
+        getCameraData(this._tree.root);
+        if(this._update) this._update();
+    }
+
+    // #endregion Private Methods (1)
+}

package/src/implementation/camera/AbstractCamera.ts

@@ -0,0 +1,314 @@
+import * as detectIt from 'detect-it'
+import { mat4, quat, vec2, vec3 } from 'gl-matrix'
+import {
+    DomEventEngine,
+    EventEngine,
+    EVENTTYPE,
+    IEvent,
+    SettingsEngine,
+    StateEngine,
+} from '@shapediver/viewer.shared.services'
+import { container } from 'tsyringe'
+import { Box, IBox } from '@shapediver/viewer.shared.math'
+import { AbstractTreeNodeData, ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree'
+
+import { ICameraControls } from '../../interfaces/controls/ICameraControls'
+import { ICamera, ICameraOptions } from '../../interfaces/camera/ICamera'
+import { CAMERA_TYPE } from '../../interfaces/ICameraEngine'
+import { AbstractCameraControls } from '../controls/AbstractCameraControls'
+
+export abstract class AbstractCamera extends AbstractTreeNodeData implements ICamera {
+    // #region Properties (23)
+
+    private _autoAdjust: boolean = false;
+    private _cameraMovementDuration: number = 800;
+    private _defaultPosition: vec3 = vec3.create();
+    private _defaultTarget: vec3 = vec3.create();
+    private _enableCameraControls: boolean = true;
+    private _far: number = 1000;
+    private _name?: string;
+    private _near: number = 1;
+    private _node?: ITreeNode;
+    private _useNodeData: boolean = false;
+    private _order?: number;
+    private _revertAtMouseUp: boolean = false;
+    private _revertAtMouseUpDuration: number = 800;
+    private _zoomExtentsFactor: number = 1;
+
+    protected readonly _eventEngine: EventEngine = <EventEngine>container.resolve(EventEngine);
+    protected readonly _stateEngine: StateEngine = <StateEngine>container.resolve(StateEngine);
+
+    protected _boundingBox: IBox = new Box();
+    protected _position: vec3 = vec3.create();
+    protected _target: vec3 = vec3.create();
+    protected _viewportId?: string;
+
+    protected abstract _controls: ICameraControls;
+
+    // #endregion Properties (23)
+
+    // #region Constructors (1)
+
+    constructor(private readonly _id: string, private readonly _type: CAMERA_TYPE) {
+        super(_id);
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Accessors (39)
+
+    public get autoAdjust(): boolean {
+        return this._autoAdjust;
+    }
+
+    public set autoAdjust(value: boolean) {
+        this._autoAdjust = value;
+    }
+
+    public set boundingBox(value: IBox) {
+        this._boundingBox = value;
+    }
+
+    public get cameraMovementDuration(): number {
+        return this._cameraMovementDuration;
+    }
+
+    public set cameraMovementDuration(value: number) {
+        this._cameraMovementDuration = value;
+    }
+
+    public get controls(): ICameraControls {
+        return this._controls;
+    }
+
+    public get defaultPosition(): vec3 {
+        return this._defaultPosition;
+    }
+
+    public set defaultPosition(value: vec3) {
+        this._defaultPosition = value;
+    }
+
+    public get defaultTarget(): vec3 {
+        return this._defaultTarget;
+    }
+
+    public set defaultTarget(value: vec3) {
+        this._defaultTarget = value;
+    }
+
+    public get enableCameraControls(): boolean {
+        return this._enableCameraControls;
+    }
+
+    public set enableCameraControls(value: boolean) {
+        this._enableCameraControls = value;
+    }
+
+    public get far(): number {
+        return this._far;
+    }
+
+    public set far(value: number) {
+        this._far = value;
+    }
+
+    public get id(): string {
+        return this._id;
+    }
+
+    public get name(): string | undefined {
+        return this._name;
+    }
+
+    public set name(value: string | undefined) {
+        this._name = value;
+    }
+
+    public get near(): number {
+        return this._near;
+    }
+
+    public set near(value: number) {
+        this._near = value;
+    }
+
+    public get node(): ITreeNode | undefined {
+        return this._node;
+    }
+
+    public set node(value: ITreeNode | undefined) {
+        this._node = value;
+    }
+
+    public get useNodeData(): boolean {
+        return this._useNodeData;
+    }
+
+    public set useNodeData(value: boolean) {
+        this._useNodeData = value;
+    }
+
+    public get order(): number | undefined {
+        return this._order;
+    }
+
+    public set order(value: number | undefined) {
+        this._order = value;
+    }
+
+    public get position(): vec3 {
+        return this._position;
+    }
+
+    public set position(value: vec3) {
+        this._position = value;
+        this._controls.position = value;
+    }
+
+    public get revertAtMouseUp(): boolean {
+        return this._revertAtMouseUp;
+    }
+
+    public set revertAtMouseUp(value: boolean) {
+        this._revertAtMouseUp = value;
+    }
+
+    public get revertAtMouseUpDuration(): number {
+        return this._revertAtMouseUpDuration;
+    }
+
+    public set revertAtMouseUpDuration(value: number) {
+        this._revertAtMouseUpDuration = value;
+    }
+
+    public get target(): vec3 {
+        return this._target;
+    }
+
+    public set target(value: vec3) {
+        this._target = value;
+        this._controls.target = value;
+    }
+
+    public get type(): CAMERA_TYPE {
+        return this._type;
+    }
+
+    public get viewportId(): string | undefined {
+        return this._viewportId;
+    }
+
+    public get zoomExtentsFactor(): number {
+        return this._zoomExtentsFactor;
+    }
+
+    public set zoomExtentsFactor(value: number) {
+        this._zoomExtentsFactor = value;
+    }
+
+    // #endregion Public Accessors (39)
+
+    // #region Public Methods (5)
+
+    public async animate(path: { position: vec3; target: vec3; }[], options?: ICameraOptions): Promise<boolean> {
+        if (path.length === 0) return Promise.resolve(false);
+
+        if (!this._controls.isWithinRestrictions(path[path.length - 1].position, path[path.length - 1].target))
+            return Promise.resolve(false);
+
+        if (!options) options = {};
+        options.duration = options.duration! >= 0 ? options.duration : this.cameraMovementDuration;
+
+        const res = await this._controls.animate(path, options);
+        if (res) {
+            this._position = this._controls.position;
+            this._target = this._controls.target;
+        }
+        return res;
+    }
+
+    public reset(options?: ICameraOptions): Promise<boolean> {
+        if ((this.defaultPosition[0] === 0 && this.defaultPosition[1] === 0 && this.defaultPosition[2] === 0) && (this.defaultTarget[0] === 0 && this.defaultTarget[1] === 0 && this.defaultTarget[2] === 0)) {
+            return this.zoomTo(undefined, options);
+        } else {
+            return this.set(vec3.clone(this.defaultPosition), vec3.clone(this.defaultTarget), options);
+        }
+    }
+
+    public async set(position: vec3, target: vec3, options?: ICameraOptions): Promise<boolean> {
+        if (!this._controls.isWithinRestrictions(position, target))
+            return Promise.resolve(false);
+
+        if (!options) options = {};
+        options.duration = options.duration! >= 0 ? options.duration : this.cameraMovementDuration;
+
+        const res = await this._controls.animate([
+            { position: vec3.clone(this.position), target: vec3.clone(this.target) },
+            { position, target }], options);
+        if (res) {
+            this._position = this._controls.position;
+            this._target = this._controls.target;
+        }
+        return res;
+    }
+
+    public update(time: number): boolean {
+        if(this.useNodeData && this.node && this._viewportId) {
+            return true;
+        } else {
+            const { position, target } = this._controls.update(time);
+            let changed = true;
+            if (vec3.equals(position, this.position) && vec3.equals(target, this.target)) 
+                changed = false;
+            
+            this.position = vec3.clone(position);
+            this.target = vec3.clone(target);
+            return changed;
+        }
+    }
+
+    public zoomTo(zoomTarget?: Box, options?: ICameraOptions): Promise<boolean> {
+        const { position, target } = this.calculateZoomTo(zoomTarget)
+        return this.set(position, target, options);
+    }
+
+    // #endregion Public Methods (5)
+
+    // #region Public Abstract Methods (5)
+
+    abstract applySettings(settingsEngine?: SettingsEngine): void;
+    abstract assignViewer(viewportId: string): void;
+    abstract calculateZoomTo(zoomTarget?: Box, startingPosition?: vec3, startingTarget?: vec3): { position: vec3; target: vec3; };
+    abstract project(p: vec3): vec2;
+    abstract unproject(p: vec3): vec3;
+
+    // #endregion Public Abstract Methods (5)
+
+    // #region Protected Methods (1)
+
+    protected assignViewerInternal(viewportId: string, canvas: HTMLCanvasElement) {
+        this._viewportId = viewportId;
+        this._eventEngine.addListener(EVENTTYPE.SESSION.SESSION_CUSTOMIZED, (e: IEvent) => {
+            if (this._autoAdjust === true)
+                this.zoomTo();
+        });
+        const revert = () => {
+            if (this._revertAtMouseUp === true)
+                this.reset({ duration: this._revertAtMouseUpDuration });
+        };
+        canvas.addEventListener("mouseup", () => revert(), detectIt.supportsPassiveEvents ? { capture: false, passive: true } : false);
+        canvas.addEventListener("mouseout", () => revert(), detectIt.supportsPassiveEvents ? { capture: false, passive: true } : false);
+        canvas.addEventListener("touchend", () => revert(), detectIt.supportsPassiveEvents ? { capture: false, passive: true } : false);
+
+        let zoomResizeTimeout: NodeJS.Timeout;
+        let mouseWheelEvent = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
+        canvas.addEventListener(mouseWheelEvent,
+            () => {
+                clearTimeout(zoomResizeTimeout);
+                zoomResizeTimeout = setTimeout(revert, 300);
+            }, detectIt.supportsPassiveEvents ? { capture: false, passive: true } : false);
+    }
+
+    // #endregion Protected Methods (1)
+}