@shopware-ag/dive 1.4.2 → 1.6.0

package/src/model/__test__/Model.test.ts

@@ -64,6 +64,7 @@ jest.mock('three', () => {
             }
             this.add = jest.fn();
             this.children = [{
+                visible: true,
                 material: {
                     color: {},
                 },
@@ -86,6 +87,9 @@ jest.mock('three', () => {
                 return vec3;
             };
             this.mesh = new Mesh();
+            this.traverse = jest.fn((callback) => {
+                callback(this.children[0])
+            });
             return this;
         }),
         Box3: jest.fn(function () {
@@ -196,6 +200,11 @@ describe('dive/model/DIVEModel', () => {
         expect(() => model.SetScale({ x: 1, y: 1, z: 1 })).not.toThrow();
     });
 
+    it('should set visibility', () => {
+        const model = new Model();
+        expect(() => model.SetVisibility(true)).not.toThrow();
+    });
+
     it('should set to world origin', () => {
         const model = new Model();
         model.userData.id = 'something';

package/src/renderer/Renderer.ts

@@ -26,7 +26,7 @@ export const DIVERendererDefaultSettings: DIVERendererSettings = {
  * @module
  */
 
-export default class DIVERenderer extends WebGLRenderer {
+export class DIVERenderer extends WebGLRenderer {
     // basic functionality members
     private paused: boolean = false;
     private running: boolean = false;
@@ -52,6 +52,12 @@ export default class DIVERenderer extends WebGLRenderer {
         this.debug.checkShaderErrors = false;
     }
 
+    // Stops renderings and disposes the renderer.
+    public Dispose(): void {
+        this.StopRenderer();
+        this.dispose();
+    }
+
     // Starts the renderer with the given scene and camera.
     public StartRenderer(scene: Scene, cam: Camera): void {
         this.setAnimationLoop(() => { this.internal_render(scene, cam) });

package/src/renderer/__test__/Renderer.test.ts

@@ -1,6 +1,6 @@
-import DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
-import DIVEScene from '../../scene/Scene';
-import DIVERenderer, { DIVERendererDefaultSettings } from '../Renderer';
+import type DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
+import type DIVEScene from '../../scene/Scene';
+import { DIVERenderer, DIVERendererDefaultSettings } from '../Renderer';
 
 /**
  * @jest-environment jsdom
@@ -20,6 +20,7 @@ jest.mock('three', () => {
                     position: 'absolute',
                 },
             };
+            this.dispose = jest.fn();
             this.debug = {
                 checkShaderErrors: true,
             };
@@ -43,12 +44,20 @@ let renderer: DIVERenderer;
 describe('dive/renderer/DIVERenderer', () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        renderer = new DIVERenderer(DIVERendererDefaultSettings);
+        renderer = new DIVERenderer();
     });
 
     it('should instantiate', () => {
         expect(renderer).toBeDefined();
-        renderer = new DIVERenderer();
+    });
+
+    it('should instantiate with settings parameter', () => {
+        renderer = new DIVERenderer(DIVERendererDefaultSettings);
+        expect(renderer).toBeDefined();
+    });
+
+    it('should dispose', () => {
+        renderer.Dispose();
     });
 
     it('should start render', () => {

package/src/scene/Scene.ts

@@ -1,5 +1,5 @@
-import { Color, ColorRepresentation, Object3D, Scene } from 'three';
-import { COMModel, COMEntity } from '../com/types';
+import { Color, Scene, type Box3, type ColorRepresentation, type Object3D } from 'three';
+import { type COMModel, type COMEntity } from '../com/types';
 import DIVERoot from './root/Root';
 
 /**
@@ -19,6 +19,8 @@ export default class DIVEScene extends Scene {
     constructor() {
         super();
 
+        this.background = new Color(0xffffff);
+
         this.root = new DIVERoot();
         this.add(this.root);
     }
@@ -27,6 +29,10 @@ export default class DIVEScene extends Scene {
         this.background = new Color(color);
     }
 
+    public ComputeSceneBB(): Box3 {
+        return this.Root.ComputeSceneBB();
+    }
+
     public GetSceneObject(object: Partial<COMEntity>): Object3D | undefined {
         return this.Root.GetSceneObject(object);
     }

package/src/scene/__test__/Scene.test.ts

@@ -17,6 +17,7 @@ jest.mock('../root/Root', () => {
         this.PlaceOnFloor = mock_PlaceOnFloor;
         this.GetSceneObject = mock_GetSceneObject;
         this.removeFromParent = jest.fn();
+        this.ComputeSceneBB = jest.fn();
         return this;
     });
 });
@@ -38,6 +39,11 @@ describe('dive/scene/DIVEScene', () => {
         expect((scene.background as Color).getHex()).toBe(0x123456);
     });
 
+    it('should ComputeSceneBB', () => {
+        const scene = new DIVEScene();
+        expect(() => scene.ComputeSceneBB()).not.toThrow();
+    });
+
     it('should add object', () => {
         const scene = new DIVEScene();
         scene.AddSceneObject({} as COMEntity);

package/src/scene/root/Root.ts

@@ -1,4 +1,4 @@
-import { Object3D } from "three";
+import { Box3, Object3D } from "three";
 import DIVELightRoot from "./lightroot/LightRoot.ts";
 import DIVEModelRoot from "./modelroot/ModelRoot.ts";
 import { COMLight, COMModel, COMEntity } from "../../com/types.ts";
@@ -39,6 +39,16 @@ export default class DIVERoot extends Object3D {
         this.add(this.grid);
     }
 
+    public ComputeSceneBB(): Box3 {
+        const bb = new Box3();
+        this.modelRoot.traverse((object: Object3D) => {
+            if ('isObject3D' in object) {
+                bb.expandByObject(object);
+            }
+        });
+        return bb;
+    }
+
     public GetSceneObject(object: Partial<COMEntity>): Object3D | undefined {
         switch (object.entityType) {
             case "pov": {

package/src/scene/root/__test__/Root.test.ts

@@ -1,5 +1,6 @@
-import { COMLight, COMModel, COMPov } from '../../../com';
 import DIVERoot from '../Root';
+import { type Vector3, type Object3D } from 'three';
+import { type COMLight, type COMModel, type COMPov } from '../../../com';
 
 const mock_UpdateLight = jest.fn();
 const mock_UpdateModel = jest.fn();
@@ -9,6 +10,62 @@ const mock_DeleteLight = jest.fn();
 const mock_DeleteModel = jest.fn();
 const mock_PlaceOnFloor = jest.fn();
 
+jest.mock('three', () => {
+    return {
+        Box3: jest.fn(() => {
+            return {
+                expandByObject: jest.fn(),
+                setFromObject: jest.fn(),
+                applyMatrix4: jest.fn(),
+                union: jest.fn(),
+                isEmpty: jest.fn(),
+                getCenter: jest.fn(),
+                getSize: jest.fn(),
+                getBoundingSphere: jest.fn(),
+            };
+        }),
+        Object3D: jest.fn(function () {
+            this.clear = jest.fn();
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            }
+            this.add = jest.fn();
+            this.userData = {};
+            this.rotation = {
+                x: 0,
+                y: 0,
+                z: 0,
+                setFromVector3: jest.fn(),
+            };
+            this.scale = {
+                x: 1,
+                y: 1,
+                z: 1,
+                set: jest.fn(),
+            };
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.traverse = jest.fn((callback) => {
+                callback(this.children[0])
+            });
+            return this;
+        }),
+    }
+});
+
 jest.mock('../../../primitive/floor/Floor', () => {
     return jest.fn(function () {
         this.isObject3D = true;
@@ -52,6 +109,9 @@ jest.mock('../modelroot/ModelRoot', () => {
         this.PlaceOnFloor = mock_PlaceOnFloor;
         this.GetModel = mock_GetModel;
         this.removeFromParent = jest.fn();
+        this.traverse = jest.fn((callback: (object: Object3D) => void) => {
+            callback(this);
+        });
         return this;
     });
 });
@@ -64,7 +124,7 @@ describe('DIVE/scene/root/DIVERoot', () => {
     it('should instantiate', () => {
         const root = new DIVERoot();
         expect(root).toBeDefined();
-        expect(root.children).toHaveLength(4);
+        expect(root.add).toHaveBeenCalledTimes(4);
     });
 
     it('should have Floor', () => {
@@ -77,6 +137,12 @@ describe('DIVE/scene/root/DIVERoot', () => {
         expect(root.Grid).toBeDefined();
     });
 
+    it('should ComputeSceneBB', () => {
+        const root = new DIVERoot();
+        const bb = root.ComputeSceneBB();
+        expect(bb).toBeDefined();
+    });
+
     it('should add object', () => {
         const root = new DIVERoot();
         root.AddSceneObject({ entityType: 'light' } as COMLight);

package/src/scene/root/modelroot/ModelRoot.ts

@@ -51,7 +51,7 @@ export default class DIVEModelRoot extends Object3D {
         if (object.position !== undefined) (sceneObject as Model).SetPosition(object.position);
         if (object.rotation !== undefined) (sceneObject as Model).SetRotation(object.rotation);
         if (object.scale !== undefined) (sceneObject as Model).SetScale(object.scale);
-        if (object.visible !== undefined) (sceneObject as Model).visible = object.visible;
+        if (object.visible !== undefined) (sceneObject as Model).SetVisibility(object.visible);
     }
 
     public DeleteModel(object: Partial<COMModel>): void {

package/src/scene/root/modelroot/__test__/ModelRoot.test.ts

@@ -45,6 +45,7 @@ jest.mock('../../../../model/Model.ts', () => {
         this.SetPosition = mock_SetPosition;
         this.SetRotation = mock_SetRotation;
         this.SetScale = mock_SetScale;
+        this.SetVisibility = jest.fn();
         this.PlaceOnFloor = mock_PlaceOnFloor;
         this.removeFromParent = jest.fn();
         return this;

package/src/toolbox/BaseTool.ts

@@ -13,7 +13,7 @@ export type DraggableEvent = {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-export default abstract class DIVEBaseTool {
+export abstract class DIVEBaseTool {
     readonly POINTER_DRAG_THRESHOLD: number = 0.001;
 
     public name: string;
@@ -258,8 +258,8 @@ export default abstract class DIVEBaseTool {
     public onWheel(e: WheelEvent): void { }
 
     protected raycast(objects?: Object3D[]): Intersection[] {
-        if (objects !== undefined) return this._raycaster.intersectObjects(objects, true);
-        return this._raycaster.intersectObjects(this._scene.children, true);
+        if (objects !== undefined) return this._raycaster.intersectObjects(objects, true).filter(i => i.object.visible);
+        return this._raycaster.intersectObjects(this._scene.children, true).filter(i => i.object.visible);
     }
 
     private pointerWasDragged(): boolean {

package/src/toolbox/Toolbox.ts

@@ -1,7 +1,9 @@
-import DIVEOrbitControls from "../controls/OrbitControls.ts";
-import DIVEScene from "../scene/Scene.ts";
-import DIVEBaseTool from "./BaseTool.ts";
-import DIVESelectTool from "./select/SelectTool.ts";
+import type DIVEOrbitControls from "../controls/OrbitControls.ts";
+import type DIVEScene from "../scene/Scene.ts";
+import { type DIVEBaseTool } from "./BaseTool.ts";
+import { type DIVESelectTool } from "./select/SelectTool.ts";
+
+export type ToolType = 'select' | 'none';
 
 /**
  * A Toolbox to activate and deactivate tools to use with the pointer.
@@ -12,51 +14,51 @@ import DIVESelectTool from "./select/SelectTool.ts";
 export default class DIVEToolbox {
     public static readonly DefaultTool = 'select';
 
-    private activeTool: DIVEBaseTool;
+    private _scene: DIVEScene;
+    private _controller: DIVEOrbitControls;
 
-    private selectTool: DIVESelectTool;
+    private _activeTool: DIVEBaseTool | null;
 
-    private removeListenersCallback: () => void = () => { };
+    private _selectTool: DIVESelectTool | null;
+    public get selectTool(): DIVESelectTool {
+        if (!this._selectTool) {
+            const DIVESelectTool = require('./select/SelectTool.ts').DIVESelectTool as typeof import('./select/SelectTool.ts').DIVESelectTool;
+            this._selectTool = new DIVESelectTool(this._scene, this._controller);
+        }
+        return this._selectTool;
+    }
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
-        this.selectTool = new DIVESelectTool(scene, controller);
-
-        const pointerMove = this.onPointerMove.bind(this);
-        const pointerDown = this.onPointerDown.bind(this);
-        const pointerUp = this.onPointerUp.bind(this);
-        const wheel = this.onWheel.bind(this);
+        this._scene = scene;
+        this._controller = controller;
 
-        controller.domElement.addEventListener('pointermove', pointerMove);
-        controller.domElement.addEventListener('pointerdown', pointerDown);
-        controller.domElement.addEventListener('pointerup', pointerUp);
-        controller.domElement.addEventListener('wheel', wheel);
-
-        this.removeListenersCallback = () => {
-            controller.domElement.removeEventListener('pointermove', pointerMove);
-            controller.domElement.removeEventListener('pointerdown', pointerDown);
-            controller.domElement.removeEventListener('pointerup', pointerUp);
-            controller.domElement.removeEventListener('wheel', wheel);
-        };
+        // toolset
+        this._selectTool = null;
 
         // default tool
-        this.activeTool = this.selectTool;
-        this.activeTool.Activate();
+        this._activeTool = null;
     }
 
-    public dispose(): void {
-        this.removeListenersCallback();
+    public Dispose(): void {
+        this.removeEventListeners();
     }
 
-    public GetActiveTool(): DIVEBaseTool {
-        return this.activeTool;
+    public GetActiveTool(): DIVEBaseTool | null {
+        return this._activeTool;
     }
 
-    public UseTool(tool: string): void {
-        this.activeTool.Deactivate();
+    public UseTool(tool: ToolType): void {
+        this._activeTool?.Deactivate();
         switch (tool) {
             case "select": {
+                this.addEventListeners();
                 this.selectTool.Activate();
-                this.activeTool = this.selectTool;
+                this._activeTool = this.selectTool;
+                break;
+            }
+            case "none": {
+                this.removeEventListeners();
+                this._activeTool = null;
                 break;
             }
             default: {
@@ -69,19 +71,37 @@ export default class DIVEToolbox {
         this.selectTool.SetGizmoMode(mode);
     }
 
+    public SetGizmoVisibility(active: boolean): void {
+        this.selectTool.SetGizmoVisibility(active);
+    }
+
     public onPointerMove(e: PointerEvent): void {
-        this.activeTool.onPointerMove(e);
+        this._activeTool?.onPointerMove(e);
     }
 
     public onPointerDown(e: PointerEvent): void {
-        this.activeTool.onPointerDown(e);
+        this._activeTool?.onPointerDown(e);
     }
 
     public onPointerUp(e: PointerEvent): void {
-        this.activeTool.onPointerUp(e);
+        this._activeTool?.onPointerUp(e);
     }
 
     public onWheel(e: WheelEvent): void {
-        this.activeTool.onWheel(e);
+        this._activeTool?.onWheel(e);
+    }
+
+    private addEventListeners(): void {
+        this._controller.domElement.addEventListener('pointermove', (e) => this.onPointerMove(e));
+        this._controller.domElement.addEventListener('pointerdown', (e) => this.onPointerDown(e));
+        this._controller.domElement.addEventListener('pointerup', (e) => this.onPointerUp(e));
+        this._controller.domElement.addEventListener('wheel', (e) => this.onWheel(e));
+    }
+
+    private removeEventListeners(): void {
+        this._controller.domElement.removeEventListener('pointermove', (e) => this.onPointerMove(e));
+        this._controller.domElement.removeEventListener('pointerdown', (e) => this.onPointerDown(e));
+        this._controller.domElement.removeEventListener('pointerup', (e) => this.onPointerUp(e));
+        this._controller.domElement.removeEventListener('wheel', (e) => this.onWheel(e));
     }
 }

package/src/toolbox/__test__/BaseTool.test.ts

@@ -1,11 +1,10 @@
 
+import { DIVEBaseTool } from '../BaseTool';
+import type DIVEOrbitControls from '../../controls/OrbitControls';
+import type DIVEScene from '../../scene/Scene';
 import { type Object3D, type Vector3 } from 'three';
-import DIVEOrbitControls from '../../controls/OrbitControls';
-import DIVEScene from '../../scene/Scene';
-import DIVEBaseTool from '../BaseTool';
-import DIVEToolbox from '../Toolbox';
 import { type DIVEHoverable } from '../../interface/Hoverable';
-import { DIVEDraggable } from '../../interface/Draggable';
+import { type DIVEDraggable } from '../../interface/Draggable';
 
 /**
  * @jest-environment jsdom
@@ -47,8 +46,18 @@ describe('dive/toolbox/DIVEBaseTool', () => {
     });
 
     it('should instantiate', () => {
-        const toolBox = new abstractWrapper(mockScene, mockController);
-        expect(toolBox).toBeDefined();
+        const baseTool = new abstractWrapper(mockScene, mockController);
+        expect(baseTool).toBeDefined();
+    });
+
+    it('should Activate', () => {
+        const baseTool = new abstractWrapper(mockScene, mockController);
+        expect(() => baseTool.Activate()).not.toThrow();
+    });
+
+    it('should Deactivate', () => {
+        const baseTool = new abstractWrapper(mockScene, mockController);
+        expect(() => baseTool.Deactivate()).not.toThrow();
     });
 
     it('should raycast', () => {
@@ -63,7 +72,24 @@ describe('dive/toolbox/DIVEBaseTool', () => {
         expect(toolBox['_pointerAnyDown']).toBeDefined();
         expect(toolBox['_pointerAnyDown']).toBe(false);
 
+        toolBox['_pointerPrimaryDown'] = false;
+        toolBox['_pointerMiddleDown'] = false;
+        toolBox['_pointerSecondaryDown'] = false;
+        expect(toolBox['_pointerAnyDown']).toBe(false);
+
         toolBox['_pointerPrimaryDown'] = true;
+        toolBox['_pointerMiddleDown'] = false;
+        toolBox['_pointerSecondaryDown'] = false;
+        expect(toolBox['_pointerAnyDown']).toBe(true);
+
+        toolBox['_pointerPrimaryDown'] = false;
+        toolBox['_pointerMiddleDown'] = true;
+        toolBox['_pointerSecondaryDown'] = false;
+        expect(toolBox['_pointerAnyDown']).toBe(true);
+
+        toolBox['_pointerPrimaryDown'] = false;
+        toolBox['_pointerMiddleDown'] = false;
+        toolBox['_pointerSecondaryDown'] = true;
         expect(toolBox['_pointerAnyDown']).toBe(true);
     });
 
@@ -134,6 +160,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid',
                         isHoverable: true,
+                        visible: true,
                     } as Object3D & DIVEHoverable
                 }
             ]
@@ -158,6 +185,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid',
                         isHoverable: true,
+                        visible: true,
                         onPointerEnter() {
                             return;
                         },
@@ -183,6 +211,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid',
                         isHoverable: true,
+                        visible: true,
                         onPointerOver() {
                             return;
                         }
@@ -193,6 +222,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
 
         toolBox['_hovered'] = {
             uuid: 'uuid',
+            visible: true,
             onPointerLeave() {
                 return;
             },
@@ -215,6 +245,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid2',
                         isHoverable: true,
+                        visible: true,
                         onPointerEnter() {
                             return;
                         },
@@ -225,6 +256,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
 
         toolBox['_hovered'] = {
             uuid: 'uuid',
+            visible: true,
             onPointerLeave() {
                 return;
             },
@@ -382,8 +414,18 @@ describe('dive/toolbox/DIVEBaseTool', () => {
         expect(() => toolBox.onDrag({} as PointerEvent)).not.toThrow();
     });
 
+    it('should execute onCLick correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onClick({} as PointerEvent)).not.toThrow();
+    });
+
     it('should execute onDragEnd correctly', () => {
         const toolBox = new abstractWrapper(mockScene, mockController);
         expect(() => toolBox.onDragEnd({} as PointerEvent)).not.toThrow();
     });
+
+    it('should execute onWheel correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onWheel({} as WheelEvent)).not.toThrow();
+    });
 });