@shopware-ag/dive 1.4.2 → 1.6.0

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

@@ -1,6 +1,6 @@
-import DIVEOrbitControls from '../../controls/OrbitControls';
-import DIVEScene from '../../scene/Scene';
-import DIVEToolbox from '../Toolbox';
+import DIVEToolbox, { type ToolType } from '../Toolbox';
+import type DIVEOrbitControls from '../../controls/OrbitControls';
+import type DIVEScene from '../../scene/Scene';
 
 /**
  * @jest-environment jsdom
@@ -21,25 +21,20 @@ const mock_Canvas = {
     offsetTop: 0,
 };
 
-const mock_Activate = jest.fn();
-const mock_Deactivate = jest.fn();
-const mock_onPointerDown = jest.fn();
-const mock_onPointerMove = jest.fn();
-const mock_onPointerUp = jest.fn();
-const mock_onWheel = jest.fn();
-const mock_SetGizmoMode = jest.fn();
-
 jest.mock('../select/SelectTool.ts', () => {
-    return jest.fn(function () {
-        this.Activate = mock_Activate;
-        this.Deactivate = mock_Deactivate;
-        this.onPointerDown = mock_onPointerDown;
-        this.onPointerMove = mock_onPointerMove;
-        this.onPointerUp = mock_onPointerUp;
-        this.onWheel = mock_onWheel;
-        this.SetGizmoMode = mock_SetGizmoMode;
-        return this;
-    });
+    return {
+        DIVESelectTool: jest.fn(function () {
+            this.Activate = jest.fn();
+            this.Deactivate = jest.fn();
+            this.onPointerDown = jest.fn();
+            this.onPointerMove = jest.fn();
+            this.onPointerUp = jest.fn();
+            this.onWheel = jest.fn();
+            this.SetGizmoMode = jest.fn();
+            this.SetGizmoVisibility = jest.fn();
+            return this;
+        })
+    }
 });
 
 const mockController = {
@@ -56,52 +51,56 @@ describe('dive/toolbox/DIVEToolBox', () => {
     it('should instantiate', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
         expect(toolBox).toBeDefined();
-        expect(mock_Activate).toHaveBeenCalledTimes(1);
-        expect(mock_addEventListener).toHaveBeenCalled();
     });
 
     it('should dispose', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.dispose();
+        toolBox.Dispose();
         expect(mock_removeEventListener).toHaveBeenCalled();
     });
 
     it('should throw with incorrect tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        expect(() => toolBox.UseTool('not a real tool')).toThrow();
-        expect(mock_Deactivate).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.UseTool('not a real tool' as unknown as ToolType)).toThrow();
+    });
+
+    it('should use no tool', () => {
+        const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.UseTool('none')).not.toThrow();
     });
 
     it('should use select tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        expect(mock_Activate).toHaveBeenCalledTimes(1);
-        toolBox.UseTool(DIVEToolbox.DefaultTool);
-        expect(mock_Deactivate).toHaveBeenCalledTimes(1);
-        expect(mock_Activate).toHaveBeenCalledTimes(2);
+        expect(() => toolBox.UseTool(DIVEToolbox.DefaultTool)).not.toThrow();
     });
 
     it('should execute pointer down event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onPointerDown({ type: 'pointerdown' } as PointerEvent);
-        expect(mock_onPointerDown).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onPointerDown({ type: 'pointerdown' } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onPointerDown({ type: 'pointerdown' } as PointerEvent)).not.toThrow();
     });
 
     it('should execute pointer move event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onPointerMove({ type: 'pointermove' } as PointerEvent);
-        expect(mock_onPointerMove).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onPointerMove({ type: 'pointermove' } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onPointerMove({ type: 'pointermove' } as PointerEvent)).not.toThrow();
     });
 
     it('should execute pointer up event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent);
-        expect(mock_onPointerUp).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent)).not.toThrow();
     });
 
     it('should execute wheel event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onWheel({ type: 'wheel' } as WheelEvent);
-        expect(mock_onWheel).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onWheel({ type: 'wheel' } as WheelEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onWheel({ type: 'wheel' } as WheelEvent)).not.toThrow();
     });
 
     it('should get active tool', () => {
@@ -111,7 +110,11 @@ describe('dive/toolbox/DIVEToolBox', () => {
 
     it('should set gizmo mode', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.SetGizmoMode('translate');
-        expect(mock_SetGizmoMode).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.SetGizmoMode('translate')).not.toThrow();
+    });
+
+    it('should set gizmo active', () => {
+        const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
+        expect(() => toolBox.SetGizmoVisibility(true)).not.toThrow();
     });
 });

package/src/toolbox/select/SelectTool.ts

@@ -1,9 +1,14 @@
-import { Object3D } from "three";
-import { DIVESelectable, isSelectable } from "../../interface/Selectable.ts";
+import { type Object3D } from "three";
 import DIVEScene from "../../scene/Scene.ts";
-import { DIVEMoveable } from "../../interface/Moveable.ts";
-import DIVEOrbitControls from "../../controls/OrbitControls.ts";
 import DIVETransformTool from "../transform/TransformTool.ts";
+import type DIVEOrbitControls from "../../controls/OrbitControls.ts";
+import { type DIVESelectable, findSelectableInterface } from "../../interface/Selectable.ts";
+import { type DIVEMoveable } from "../../interface/Moveable.ts";
+import { type DIVEBaseTool } from "../BaseTool.ts";
+
+export const isSelectTool = (tool: DIVEBaseTool): tool is DIVESelectTool => {
+    return (tool as DIVESelectTool).isSelectTool !== undefined;
+}
 
 export interface DIVEObjectEventMap {
     select: object
@@ -17,7 +22,8 @@ export interface DIVEObjectEventMap {
  * @module
  */
 
-export default class DIVESelectTool extends DIVETransformTool {
+export class DIVESelectTool extends DIVETransformTool {
+    readonly isSelectTool: boolean = true;
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         super(scene, controller);
@@ -39,22 +45,23 @@ export default class DIVESelectTool extends DIVETransformTool {
         this.DetachGizmo();
     }
 
-    public DetachGizmo(): void {
-        this._gizmo.detach();
-    }
-
     public AttachGizmo(selectable: DIVESelectable): void {
         if ('isMoveable' in selectable) {
             const movable = selectable as (Object3D & DIVESelectable & DIVEMoveable);
             this._gizmo.attach(movable);
+            this.SetGizmoVisibility(movable.visible);
         }
     }
 
+    public DetachGizmo(): void {
+        this._gizmo.detach();
+    }
+
     public onClick(e: PointerEvent): void {
         super.onClick(e);
 
-        const first = this._raycaster.intersectObjects(this._scene.Root.children, true)[0];
-        const selectable = this.findSelectableInterface(first?.object);
+        const first = this._raycaster.intersectObjects(this._scene.Root.children, true).filter((intersect) => intersect.object.visible)[0];
+        const selectable = findSelectableInterface(first?.object);
 
         // if nothing is hit
         if (!first || !selectable) {
@@ -76,21 +83,4 @@ export default class DIVESelectTool extends DIVETransformTool {
         // select clicked object
         this.Select(selectable);
     }
-
-    private findSelectableInterface(child: Object3D): (Object3D & DIVESelectable) | undefined {
-        if (child === undefined) return undefined;
-
-        if (child.parent === null) {
-            // in this case it is the scene itself
-            return undefined;
-        }
-
-        if (isSelectable(child)) {
-            // in this case it is the Selectable
-            return child;
-        }
-
-        // search recursively in parent
-        return this.findSelectableInterface(child.parent);
-    }
 }

package/src/toolbox/select/__test__/SelectTool.test.ts

@@ -1,10 +1,11 @@
-import DIVESelectTool from '../SelectTool';
+import { DIVESelectTool, isSelectTool } from '../SelectTool';
 import DIVEScene from '../../../scene/Scene';
 import DIVEOrbitControls from '../../../controls/OrbitControls';
-import DIVEPerspectiveCamera from '../../../camera/PerspectiveCamera';
-import DIVERenderer, { DIVERendererDefaultSettings } from '../../../renderer/Renderer';
-import { DIVESelectable, isSelectable } from '../../../interface/Selectable';
+import { DIVERenderer, DIVERendererDefaultSettings } from '../../../renderer/Renderer';
+import { DIVESelectable } from '../../../interface/Selectable';
+import type DIVEPerspectiveCamera from '../../../camera/PerspectiveCamera';
 import { type Object3D } from 'three';
+import { type DIVEBaseTool } from '../../BaseTool';
 
 jest.mock('../../../renderer/Renderer', () => {
     return jest.fn(function () {
@@ -41,6 +42,7 @@ jest.mock('../../../controls/OrbitControls', () => {
 jest.mock('../../../scene/Scene', () => {
     return jest.fn(function () {
         this.add = jest.fn();
+        this.children = [];
         this.Root = {
             children: [],
         }
@@ -108,11 +110,19 @@ jest.mock('three/examples/jsm/Addons.js', () => {
 });
 
 const mockCamera: DIVEPerspectiveCamera = {} as DIVEPerspectiveCamera;
-const mockRenderer: DIVERenderer = new DIVERenderer(DIVERendererDefaultSettings);
+const mockRenderer = {
+    render: jest.fn(),
+    OnResize: jest.fn(),
+} as unknown as DIVERenderer;
 const mockScene: DIVEScene = new DIVEScene();
 const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer);
 
 describe('dive/toolbox/select/DIVESelectTool', () => {
+    it('should test if it is SelectTool', () => {
+        const selectTool = { isSelectTool: true } as unknown as DIVEBaseTool;
+        expect(isSelectTool(selectTool)).toBeDefined();
+    });
+
     it('should instantiate', () => {
         const selectTool = new DIVESelectTool(mockScene, mockController);
         expect(selectTool).toBeDefined();
@@ -130,7 +140,15 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
     });
 
     it('should execute onClick with hit', () => {
-        mock_intersectObjects.mockReturnValueOnce([{ object: { uuid: 'test', parent: { name: 'this is the test scene root!!!', parent: null } } }]);
+        mock_intersectObjects.mockReturnValueOnce(
+            [{
+                object: {
+                    uuid: 'test',
+                    visible: true,
+                    parent: { name: 'this is the test scene root!!!', parent: null }
+                }
+            }]
+        );
         const selectTool = new DIVESelectTool(mockScene, mockController);
         expect(() => selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
     });
@@ -139,10 +157,10 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
         const mock_onSelect = jest.fn();
 
         mock_intersectObjects.mockReturnValueOnce([{
-
             object: {
                 isSelectable: true,
                 onSelect: mock_onSelect,
+                visible: true,
                 parent: {
                     name: 'this is the test scene root!!!',
                     parent: null,
@@ -152,6 +170,7 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
         }]);
         const selectTool = new DIVESelectTool(mockScene, mockController);
         selectTool['_gizmo'].object = {
+            visible: true,
             isSelectable: true,
             uuid: 'test0',
         } as unknown as Object3D & DIVESelectable;
@@ -162,10 +181,10 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
         const mock_onSelect = jest.fn();
 
         mock_intersectObjects.mockReturnValueOnce([{
-
             object: {
                 isSelectable: true,
                 onSelect: mock_onSelect,
+                visible: true,
                 parent: {
                     name: 'this is the test scene root!!!',
                     parent: null,

package/src/toolbox/transform/TransformTool.ts

@@ -1,9 +1,13 @@
-import DIVEBaseTool from "../BaseTool.ts";
+import { DIVEBaseTool } from "../BaseTool.ts";
 import DIVEScene from "../../scene/Scene.ts";
 import DIVEOrbitControls from "../../controls/OrbitControls.ts";
 import { TransformControls } from "three/examples/jsm/Addons";
 import { type DIVEMoveable } from "../../interface/Moveable.ts";
 
+export const isTransformTool = (tool: DIVEBaseTool): tool is DIVETransformTool => {
+    return (tool as DIVETransformTool).isTransformTool !== undefined;
+}
+
 export interface DIVEObjectEventMap {
     select: object
 }
@@ -17,6 +21,8 @@ export interface DIVEObjectEventMap {
  */
 
 export default class DIVETransformTool extends DIVEBaseTool {
+    readonly isTransformTool: boolean = true;
+
     protected _gizmo: TransformControls;
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
@@ -50,6 +56,15 @@ export default class DIVETransformTool extends DIVEBaseTool {
         this._gizmo.mode = mode;
     }
 
+    public SetGizmoVisibility(active: boolean): void {
+        const contains = this._scene.children.includes(this._gizmo);
+        if (active && !contains) {
+            this._scene.add(this._gizmo);
+        } else if (!active && contains) {
+            this._scene.remove(this._gizmo);
+        }
+    }
+
     // public onPointerDown(e: PointerEvent): void {
     //     super.onPointerDown(e);
 

package/src/toolbox/transform/__test__/TransformTool.test.ts

@@ -1,10 +1,9 @@
-import DIVETransformTool from '../TransformTool';
+import DIVETransformTool, { isTransformTool } from '../TransformTool';
 import DIVEScene from '../../../scene/Scene';
 import DIVEOrbitControls from '../../../controls/OrbitControls';
 import DIVEPerspectiveCamera from '../../../camera/PerspectiveCamera';
-import DIVERenderer, { DIVERendererDefaultSettings } from '../../../renderer/Renderer';
-import { type Object3D } from 'three';
-import { type DIVEMoveable } from '../../../interface/Moveable';
+import { DIVERenderer } from '../../../renderer/Renderer';
+import { type DIVEBaseTool } from '../../BaseTool';
 
 jest.mock('../../../renderer/Renderer', () => {
     return jest.fn(function () {
@@ -41,9 +40,11 @@ jest.mock('../../../controls/OrbitControls', () => {
 jest.mock('../../../scene/Scene', () => {
     return jest.fn(function () {
         this.add = jest.fn();
+        this.remove = jest.fn();
         this.Root = {
             children: [],
         }
+        this.children = [];
         return this;
     });
 });
@@ -110,11 +111,29 @@ jest.mock('three/examples/jsm/Addons.js', () => {
 });
 
 const mockCamera: DIVEPerspectiveCamera = {} as DIVEPerspectiveCamera;
-const mockRenderer: DIVERenderer = new DIVERenderer(DIVERendererDefaultSettings);
+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;
 const mockScene: DIVEScene = new DIVEScene();
 const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer);
 
 describe('dive/toolbox/select/DIVETransformTool', () => {
+    it('should test if it is SelectTool', () => {
+        const selectTool = { isTransformTool: true } as unknown as DIVEBaseTool;
+        expect(isTransformTool(selectTool)).toBeDefined();
+    });
+
     it('should instantiate', () => {
         const transformTool = new DIVETransformTool(mockScene, mockController);
         expect(transformTool).toBeDefined();
@@ -129,4 +148,14 @@ describe('dive/toolbox/select/DIVETransformTool', () => {
         const transformTool = new DIVETransformTool(mockScene, mockController);
         expect(() => transformTool.SetGizmoMode('translate')).not.toThrow();
     });
+
+    it('should set gizmo active', () => {
+        const transformTool = new DIVETransformTool(mockScene, mockController);
+        expect(() => transformTool.SetGizmoVisibility(true)).not.toThrow();
+
+        expect(mockScene.add).toBeCalled();
+
+        mockScene.children.includes = jest.fn().mockReturnValue(true);
+        expect(() => transformTool.SetGizmoVisibility(false)).not.toThrow();
+    });
 });