@shopware-ag/dive 1.4.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "description": "Shopware Spatial Framework",
   "type": "module",
   "main": "./build/dive.cjs",

package/src/__test__/DIVE.test.ts

@@ -30,34 +30,58 @@ jest.mock('three', () => {
     }
 });
 
-jest.mock('../renderer/Renderer.ts', () => {
+jest.mock('three/src/math/MathUtils', () => {
+    return {
+        generateUUID: () => { return 'test_uuid'; },
+    }
+});
+
+jest.mock('../com/Communication.ts', () => {
     return jest.fn(function () {
-        this.domElement = {
-            clientWidth: 800,
-            clientHeight: 600,
-            style: {
-                position: 'absolute',
-            },
-        };
-        this.domElement.parentElement = this.domElement;
-        this.AddPreRenderCallback = (callback: () => void) => {
-            callback();
-        };
-        this.RemovePreRenderCallback = jest.fn();
-        this.AddPostRenderCallback = (callback: () => void) => {
-            callback();
-        };
-        this.getViewport = jest.fn();
-        this.setViewport = jest.fn();
-        this.autoClear = false;
-        this.render = jest.fn();
-        this.StartRenderer = jest.fn();
-        this.OnResize = jest.fn();
+        this.PerformAction = jest.fn().mockReturnValue({
+            position: { x: 0, y: 0, z: 0 },
+            target: { x: 0, y: 0, z: 0 },
+        });
+        this.Subscribe = jest.fn((action: string, callback: (data: { id: string }) => void) => {
+            callback({ id: 'incorrect id' });
+            callback({ id: 'test_uuid' });
+        });
+        this.DestroyInstance = jest.fn();
 
         return this;
     });
 });
 
+jest.mock('../renderer/Renderer.ts', () => {
+    return {
+        DIVERenderer: jest.fn(function () {
+            this.domElement = {
+                clientWidth: 800,
+                clientHeight: 600,
+                style: {
+                    position: 'absolute',
+                },
+            };
+            this.domElement.parentElement = this.domElement;
+            this.AddPreRenderCallback = (callback: () => void) => {
+                callback();
+            };
+            this.RemovePreRenderCallback = jest.fn();
+            this.AddPostRenderCallback = (callback: () => void) => {
+                callback();
+            };
+            this.getViewport = jest.fn();
+            this.setViewport = jest.fn();
+            this.autoClear = false;
+            this.render = jest.fn();
+            this.StartRenderer = jest.fn();
+            this.OnResize = jest.fn();
+            this.Dispose = jest.fn();
+            return this;
+        }),
+    }
+});
+
 jest.mock('../scene/Scene.ts', () => {
     return jest.fn(function () {
         this.add = jest.fn();
@@ -131,6 +155,7 @@ jest.mock('../toolbox/Toolbox.ts', () => {
         this.userData = {
             id: undefined,
         }
+        this.Dispose = jest.fn();
         this.removeFromParent = jest.fn();
         return this;
     });
@@ -152,11 +177,17 @@ jest.mock('../axiscamera/AxisCamera.ts', () => {
         }
         this.removeFromParent = jest.fn();
         this.SetFromCameraMatrix = jest.fn();
+        this.Dispose = jest.fn();
         return this;
     });
 });
 
 describe('dive/DIVE', () => {
+    it('should QuickView', () => {
+        const dive = DIVE.QuickView('test_uri');
+        expect(dive).toBeDefined();
+    });
+
     it('should instantiate', () => {
         const dive = new DIVE();
         expect(dive).toBeDefined();
@@ -165,9 +196,21 @@ describe('dive/DIVE', () => {
         expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 
+    it('should dispose', () => {
+        let dive = new DIVE();
+        expect(() => dive.Dispose()).not.toThrow();
+
+        const settings = {
+            displayAxes: true,
+        }
+        dive = new DIVE(settings);
+        expect(() => dive.Dispose()).not.toThrow();
+    });
+
     it('should instantiate with settings', () => {
         const settings = {
             autoResize: false,
+            displayAxes: true,
             renderer: {
                 antialias: false,
                 alpha: false,
@@ -209,6 +252,7 @@ describe('dive/DIVE', () => {
         const dive = new DIVE();
         dive.Settings = {
             autoResize: false,
+            displayAxes: true,
             renderer: {
                 antialias: false,
                 alpha: false,

package/src/animation/AnimationSystem.ts

@@ -1,4 +1,5 @@
 import { update as updateTween } from "@tweenjs/tween.js";
+import { DIVERenderer } from "../renderer/Renderer";
 
 /**
  * Updates all animations.
@@ -8,6 +9,21 @@ import { update as updateTween } from "@tweenjs/tween.js";
  */
 
 export default class DIVEAnimationSystem {
+    private _renderer: DIVERenderer;
+    private _rendererCallbackId: string;
+
+    constructor(renderer: DIVERenderer) {
+        this._renderer = renderer;
+
+        this._rendererCallbackId = this._renderer.AddPreRenderCallback(() => {
+            this.update();
+        })
+    }
+
+    public Dispose(): void {
+        this._renderer.RemovePreRenderCallback(this._rendererCallbackId);
+    }
+
     public update(): void {
         updateTween();
     }

package/src/animation/__test__/AnimationSystem.test.ts

@@ -1,3 +1,4 @@
+import { DIVERenderer } from '../../renderer/Renderer';
 import DIVEAnimationSystem from '../AnimationSystem';
 
 jest.mock('@tweenjs/tween.js', () => {
@@ -6,14 +7,34 @@ jest.mock('@tweenjs/tween.js', () => {
     }
 });
 
+const mockRenderer = {
+    render: jest.fn(),
+    OnResize: jest.fn(),
+    getViewport: jest.fn(),
+    setViewport: jest.fn(),
+    AddPreRenderCallback: jest.fn((callback) => {
+        callback();
+    }),
+    AddPostRenderCallback: jest.fn((callback) => {
+        callback();
+    }),
+    RemovePreRenderCallback: jest.fn(),
+    RemovePostRenderCallback: jest.fn(),
+} as unknown as DIVERenderer;
+
 describe('dive/animation/DIVEAnimationSystem', () => {
     it('should instantiate', () => {
-        const anim = new DIVEAnimationSystem();
+        const anim = new DIVEAnimationSystem(mockRenderer);
         expect(anim).toBeDefined();
     });
 
     it('should update', () => {
-        const anim = new DIVEAnimationSystem();
+        const anim = new DIVEAnimationSystem(mockRenderer);
         expect(() => anim.update()).not.toThrow();
     });
+
+    it('should dispose', () => {
+        const anim = new DIVEAnimationSystem(mockRenderer);
+        expect(() => anim.Dispose()).not.toThrow();
+    });
 });

package/src/axiscamera/AxisCamera.ts

@@ -1,7 +1,10 @@
-import { AxesHelper, Color, Material, Matrix4, OrthographicCamera } from "three";
+import { AxesHelper, Color, Material, Matrix4, OrthographicCamera, Vector4 } from "three";
 import SpriteText from "three-spritetext";
 import { COORDINATE_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
 import { AxesColorRed, AxesColorGreen, AxesColorBlue, AxesColorRedLetter, AxesColorGreenLetter, AxesColorBlueLetter } from "../constant/AxisHelperColors.ts";
+import { DIVERenderer } from "../renderer/Renderer.ts";
+import DIVEScene from "../scene/Scene.ts";
+import DIVEOrbitControls from "../controls/OrbitControls.ts";
 
 /**
  * Shows the scene axes in the bottom left corner of the screen.
@@ -12,7 +15,12 @@ import { AxesColorRed, AxesColorGreen, AxesColorBlue, AxesColorRedLetter, AxesCo
 export default class DIVEAxisCamera extends OrthographicCamera {
     private axesHelper: AxesHelper;
 
-    constructor() {
+    private _renderer: DIVERenderer;
+    private _scene: DIVEScene;
+
+    private _renderCallbackId: string;
+
+    constructor(renderer: DIVERenderer, scene: DIVEScene, controls: DIVEOrbitControls) {
         super(-1, 1, 1, -1, 0.1, 100);
 
         this.layers.mask = COORDINATE_LAYER_MASK;
@@ -42,6 +50,36 @@ export default class DIVEAxisCamera extends OrthographicCamera {
         this.axesHelper.add(z);
 
         this.add(this.axesHelper);
+
+        // attach everything to current scene and render cycle
+        this._renderer = renderer;
+        this._scene = scene;
+        this._scene.add(this);
+
+        const restoreViewport = new Vector4();
+
+        this._renderCallbackId = renderer.AddPostRenderCallback(() => {
+            const restoreBackground = scene.background;
+            scene.background = null;
+
+            renderer.getViewport(restoreViewport);
+            renderer.setViewport(0, 0, 150, 150);
+            renderer.autoClear = false;
+
+            this.SetFromCameraMatrix(controls.object.matrix);
+
+            renderer.render(scene, this);
+
+            renderer.setViewport(restoreViewport);
+            renderer.autoClear = true;
+
+            scene.background = restoreBackground;
+        });
+    }
+
+    public Dispose(): void {
+        this._renderer.RemovePostRenderCallback(this._renderCallbackId);
+        this._scene.remove(this);
     }
 
     public SetFromCameraMatrix(matrix: Matrix4): void {

package/src/axiscamera/__test__/AxisCamera.test.ts

@@ -1,5 +1,63 @@
-import { Matrix4 } from 'three';
+import { AxesHelper, Matrix4, OrthographicCamera, Vector4 } from 'three';
 import DIVEAxisCamera from '../AxisCamera';
+import { DIVERenderer } from '../../renderer/Renderer';
+import DIVEScene from '../../scene/Scene';
+import DIVEOrbitControls from '../../controls/OrbitControls';
+
+jest.mock('three', () => {
+    return {
+        Vector4: jest.fn(),
+        Color: jest.fn(function () {
+            this.getHexString = jest.fn().mockReturnValue('ffffff');
+            return this;
+        }),
+        Matrix4: jest.fn(function () {
+            this.extractRotation = jest.fn(() => { return this; });
+            this.invert = jest.fn(() => { return this; });
+            this.elements = [
+                1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1,
+            ];
+            return this;
+        }),
+        OrthographicCamera: jest.fn(function () {
+
+            this.isObject3D = true;
+            this.parent = null;
+            this.dispatchEvent = jest.fn();
+            this.layers = {
+                mask: 0,
+            };
+            this.position = {
+                set: jest.fn(),
+            };
+            this.add = jest.fn();
+            return this;
+        }),
+        AxesHelper: jest.fn(function () {
+            this.isObject3D = true;
+            this.parent = null;
+            this.dispatchEvent = jest.fn();
+            this.layers = {
+                mask: 0,
+            };
+            this.position = {
+                set: jest.fn(),
+            };
+            this.add = jest.fn();
+            this.material = {
+                depthTest: false,
+            };
+            this.setColors = jest.fn();
+            this.rotation = {
+                setFromRotationMatrix: jest.fn(),
+            }
+            return this;
+        }),
+    }
+});
 
 jest.mock('three-spritetext', () => {
     return jest.fn(() => {
@@ -19,10 +77,122 @@ jest.mock('three-spritetext', () => {
     )
 });
 
+const mockRenderer = {
+    render: jest.fn(),
+    OnResize: jest.fn(),
+    getViewport: jest.fn(),
+    setViewport: jest.fn(),
+    AddPostRenderCallback: jest.fn((callback) => {
+        callback();
+    }),
+    RemovePostRenderCallback: jest.fn(),
+} as unknown as DIVERenderer;
+
+const mockScene = {
+    add: jest.fn(),
+    remove: jest.fn(),
+    SetBackground: jest.fn(),
+    AddSceneObject: jest.fn(),
+    UpdateSceneObject: jest.fn(),
+    DeleteSceneObject: jest.fn(),
+    PlaceOnFloor: jest.fn(),
+    GetSceneObject: jest.fn(),
+    background: {
+        getHexString: jest.fn().mockReturnValue('ffffff'),
+    },
+    Root: {
+        Floor: {
+            isFloor: true,
+            visible: true,
+            material: {
+                color: {
+                    getHexString: jest.fn().mockReturnValue('ffffff'),
+                },
+            },
+            SetVisibility: jest.fn(),
+            SetColor: jest.fn(),
+        },
+        Grid: {
+            SetVisibility: jest.fn(),
+        },
+    },
+} as unknown as DIVEScene;
+
+const mockController = {
+    enableDamping: true,
+    dampingFactor: 0.25,
+    enableZoom: true,
+    enablePan: true,
+    minPolarAngle: 0,
+    maxPolarAngle: Math.PI,
+    minDistance: 0,
+    maxDistance: Infinity,
+    rotateSpeed: 0.5,
+    panSpeed: 0.5,
+    zoomSpeed: 0.5,
+    keyPanSpeed: 0.5,
+    screenSpacePanning: true,
+    autoRotate: false,
+    autoRotateSpeed: 2.0,
+    enableKeys: true,
+    keys: {
+        LEFT: 37,
+        UP: 38,
+        RIGHT: 39,
+        BOTTOM: 40,
+    },
+    mouseButtons: {
+        LEFT: 0,
+        MIDDLE: 1,
+        RIGHT: 2,
+    },
+    target: {
+        x: 4,
+        y: 5,
+        z: 6,
+        set: jest.fn(),
+        clone: jest.fn().mockReturnValue({ x: 4, y: 5, z: 6 }),
+        copy: jest.fn(),
+    },
+    update: jest.fn(),
+    dispose: jest.fn(),
+    ZoomIn: jest.fn(),
+    ZoomOut: jest.fn(),
+    object: {
+        position: {
+            x: 1,
+            y: 2,
+            z: 3,
+            clone: jest.fn().mockReturnValue({ x: 1, y: 2, z: 3 }),
+            copy: jest.fn(),
+        },
+        quaternion: {
+            x: 1,
+            y: 2,
+            z: 3,
+            w: 4,
+            clone: jest.fn().mockReturnValue({ x: 1, y: 2, z: 3, w: 4 }),
+            copy: jest.fn(),
+        },
+        SetCameraLayer: jest.fn(),
+        OnResize: jest.fn(),
+        layers: {
+            mask: 1,
+        },
+    },
+    MoveTo: jest.fn(),
+    RevertLast: jest.fn(),
+} as unknown as DIVEOrbitControls;
+
+let textAxisCamera: DIVEAxisCamera;
+
 describe('dive/axiscamera/DIVEAxisCamera', () => {
+    beforeEach(() => {
+        textAxisCamera = new DIVEAxisCamera(mockRenderer, mockScene, mockController);
+    });
+
     it('should instantiate', () => {
-        const cam = new DIVEAxisCamera();
-        expect(cam).toBeDefined();
+        expect(textAxisCamera).toBeDefined();
     });
 
     it('should set rotation from Matrix4', () => {
@@ -35,7 +205,10 @@ describe('dive/axiscamera/DIVEAxisCamera', () => {
                 0, 0, 0, 1,
             ],
         } as Matrix4;
-        const cam = new DIVEAxisCamera();
-        cam.SetFromCameraMatrix(matrix);
+        textAxisCamera.SetFromCameraMatrix(matrix);
+    });
+
+    it('should dispose', () => {
+        textAxisCamera.Dispose();
     });
 });

package/src/com/Communication.ts

@@ -1,13 +1,17 @@
-import { Color, MeshStandardMaterial, MathUtils } from "three";
-import DIVEScene from "../scene/Scene.ts";
 import { Actions } from "./actions/index.ts";
-import { COMLight, COMModel, COMEntity, COMPov } from "./types.ts";
-import DIVEToolbox from "../toolbox/Toolbox.ts";
-import DIVEMediaCreator from "../mediacreator/MediaCreator.ts";
-import DIVEOrbitControls from "../controls/OrbitControls.ts";
-import { DIVESelectable } from "../interface/Selectable.ts";
-import DIVESelectTool from "../toolbox/select/SelectTool.ts";
+import { generateUUID } from 'three/src/math/MathUtils';
+
+// type imports
+import { type Color, type MeshStandardMaterial } from "three";
+import { type COMLight, type COMModel, type COMEntity, type COMPov } from "./types.ts";
+import type DIVEScene from "../scene/Scene.ts";
+import type DIVEToolbox from "../toolbox/Toolbox.ts";
+import type DIVEOrbitControls from "../controls/OrbitControls.ts";
 import type DIVEModel from "../model/Model.ts";
+import { type DIVEMediaCreator } from "../mediacreator/MediaCreator.ts";
+import { type DIVERenderer } from "../renderer/Renderer.ts";
+import { type DIVESelectable } from "../interface/Selectable.ts";
+import { isSelectTool } from "../toolbox/select/SelectTool.ts";
 
 type EventListener<Action extends keyof Actions> = (payload: Actions[Action]['PAYLOAD']) => void;
 
@@ -41,22 +45,32 @@ export default class DIVECommunication {
     }
 
     private id: string;
+    private renderer: DIVERenderer;
     private scene: DIVEScene;
     private controller: DIVEOrbitControls;
     private toolbox: DIVEToolbox;
-    private mediaGenerator: DIVEMediaCreator;
+
+    private _mediaGenerator: DIVEMediaCreator | null;
+    private get mediaGenerator(): DIVEMediaCreator {
+        if (!this._mediaGenerator) {
+            const DIVEMediaCreator = require('../mediacreator/MediaCreator.ts').default as typeof import('../mediacreator/MediaCreator.ts').DIVEMediaCreator;
+            this._mediaGenerator = new DIVEMediaCreator(this.renderer, this.scene, this.controller);
+        }
+        return this._mediaGenerator;
+    }
 
     private registered: Map<string, COMEntity> = new Map();
 
     // private listeners: { [key: string]: EventListener[] } = {};
     private listeners: Map<keyof Actions, EventListener<keyof Actions>[]> = new Map();
 
-    constructor(scene: DIVEScene, controls: DIVEOrbitControls, toolbox: DIVEToolbox, mediaGenerator: DIVEMediaCreator) {
-        this.id = MathUtils.generateUUID();
+    constructor(renderer: DIVERenderer, scene: DIVEScene, controls: DIVEOrbitControls, toolbox: DIVEToolbox) {
+        this.id = generateUUID();
+        this.renderer = renderer;
         this.scene = scene;
         this.controller = controls;
         this.toolbox = toolbox;
-        this.mediaGenerator = mediaGenerator;
+        this._mediaGenerator = null;
 
         DIVECommunication.__instances.push(this);
     }
@@ -132,6 +146,10 @@ export default class DIVECommunication {
                 returnValue = this.resetCamera(payload as Actions['RESET_CAMERA']['PAYLOAD']);
                 break;
             }
+            case 'COMPUTE_ENCOMPASSING_VIEW': {
+                returnValue = this.computeEncompassingView(payload as Actions['COMPUTE_ENCOMPASSING_VIEW']['PAYLOAD']);
+                break;
+            }
             case 'SET_CAMERA_LAYER': {
                 returnValue = this.setCameraLayer(payload as Actions['SET_CAMERA_LAYER']['PAYLOAD']);
                 break;
@@ -144,6 +162,10 @@ export default class DIVECommunication {
                 returnValue = this.setGizmoMode(payload as Actions['SET_GIZMO_MODE']['PAYLOAD']);
                 break;
             }
+            case 'SET_GIZMO_VISIBILITY': {
+                returnValue = this.setGizmoVisibility(payload as Actions['SET_GIZMO_VISIBILITY']['PAYLOAD']);
+                break;
+            }
             case 'MODEL_LOADED': {
                 returnValue = this.modelLoaded(payload as Actions['MODEL_LOADED']['PAYLOAD']);
                 break;
@@ -272,8 +294,10 @@ export default class DIVECommunication {
 
         if (!('isSelectable' in sceneObject)) return false;
 
-        this.toolbox.UseTool('select');
-        (this.toolbox.GetActiveTool() as DIVESelectTool).AttachGizmo(sceneObject as DIVESelectable);
+        const activeTool = this.toolbox.GetActiveTool();
+        if (activeTool && isSelectTool(activeTool)) {
+            activeTool.AttachGizmo(sceneObject as DIVESelectable);
+        }
 
         // copy object to payload to use later
         Object.assign(payload, object);
@@ -290,8 +314,10 @@ export default class DIVECommunication {
 
         if (!('isSelectable' in sceneObject)) return false;
 
-        this.toolbox.UseTool('select');
-        (this.toolbox.GetActiveTool() as DIVESelectTool).DetachGizmo();
+        const activeTool = this.toolbox.GetActiveTool();
+        if (activeTool && isSelectTool(activeTool)) {
+            activeTool.DetachGizmo();
+        }
 
         // copy object to payload to use later
         Object.assign(payload, object);
@@ -368,6 +394,15 @@ export default class DIVECommunication {
         return true;
     }
 
+    private computeEncompassingView(payload: Actions['COMPUTE_ENCOMPASSING_VIEW']['PAYLOAD']): Actions['COMPUTE_ENCOMPASSING_VIEW']['RETURN'] {
+        const sceneBB = this.scene.ComputeSceneBB();
+
+        const transform = this.controller.ComputeEncompassingView(sceneBB);
+        Object.assign(payload, transform);
+
+        return transform;
+    }
+
     private zoomCamera(payload: Actions['ZOOM_CAMERA']['PAYLOAD']): Actions['ZOOM_CAMERA']['RETURN'] {
         if (payload.direction === 'IN') this.controller.ZoomIn(payload.by);
         if (payload.direction === 'OUT') this.controller.ZoomOut(payload.by);
@@ -380,6 +415,11 @@ export default class DIVECommunication {
         return true;
     }
 
+    private setGizmoVisibility(payload: Actions['SET_GIZMO_VISIBILITY']['PAYLOAD']): Actions['SET_GIZMO_VISIBILITY']['RETURN'] {
+        this.toolbox.SetGizmoVisibility(payload);
+        return payload;
+    }
+
     private modelLoaded(payload: Actions['MODEL_LOADED']['PAYLOAD']): Actions['MODEL_LOADED']['RETURN'] {
         (this.registered.get(payload.id) as COMModel).loaded = true;
         return true;
@@ -389,6 +429,8 @@ export default class DIVECommunication {
         if (payload.name !== undefined) this.scene.name = payload.name;
         if (payload.backgroundColor !== undefined) this.scene.SetBackground(payload.backgroundColor);
 
+        if (payload.gridEnabled !== undefined) this.scene.Root.Grid.SetVisibility(payload.gridEnabled);
+
         if (payload.floorEnabled !== undefined) this.scene.Root.Floor.SetVisibility(payload.floorEnabled);
         if (payload.floorColor !== undefined) this.scene.Root.Floor.SetColor(payload.floorColor);
 
@@ -397,6 +439,7 @@ export default class DIVECommunication {
         // TODO optmize this
         payload.name = this.scene.name;
         payload.backgroundColor = '#' + (this.scene.background as Color).getHexString();
+        payload.gridEnabled = this.scene.Root.Grid.visible;
         payload.floorEnabled = this.scene.Root.Floor.visible;
         payload.floorColor = '#' + (this.scene.Root.Floor.material as MeshStandardMaterial).color.getHexString();