@shopware-ag/dive 1.1.2 → 1.3.0

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

@@ -0,0 +1,389 @@
+
+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';
+
+/**
+ * @jest-environment jsdom
+ */
+
+
+const mock_Canvas = {
+    width: 0,
+    height: 0,
+    getContext: jest.fn(),
+    clientWidth: 1000,
+    clientHeight: 1000,
+    offsetLeft: 0,
+    offsetTop: 0,
+};
+
+const mockController = {
+    domElement: mock_Canvas,
+    object: {
+        isPerspectiveCamera: true,
+        type: 'cameraP'
+    }
+} as unknown as DIVEOrbitControls;
+
+const mockScene = {
+    children: [],
+} as unknown as DIVEScene;
+
+const abstractWrapper = class Wrapper extends DIVEBaseTool {
+    constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
+        super(scene, controller);
+        this.name = "DIVEBaseTool";
+    }
+};
+
+describe('dive/toolbox/DIVEBaseTool', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should instantiate', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(toolBox).toBeDefined();
+    });
+
+    it('should raycast', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox['raycast']()).not.toThrow();
+        expect(() => toolBox['raycast']([])).not.toThrow();
+    });
+
+    it('should return correct pointerAnyDown', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(toolBox).toBeDefined();
+        expect(toolBox['_pointerAnyDown']).toBeDefined();
+        expect(toolBox['_pointerAnyDown']).toBe(false);
+
+        toolBox['_pointerPrimaryDown'] = true;
+        expect(toolBox['_pointerAnyDown']).toBe(true);
+    });
+
+    it('should execute onPointerDown correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onPointerDown({ button: 0 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerDown({ button: 1 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerDown({ button: 2 } as PointerEvent)).not.toThrow();
+
+        toolBox['_intersects'] = [
+            {
+                distance: 1,
+                point: {
+                    clone() {
+                        return {
+                            x: 1,
+                            y: 1,
+                            z: 1
+                        } as unknown as Vector3;
+                    },
+                    x: 1,
+                    y: 1,
+                    z: 1
+                } as unknown as Vector3,
+                object: {
+                    uuid: 'uuid2',
+                    isHoverable: true,
+                    onPointerEnter() {
+                        return;
+                    },
+                } as unknown as Object3D & DIVEHoverable
+            }
+        ];
+
+        expect(() => toolBox.onPointerDown({ button: 0 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerDown({ button: 1 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerDown({ button: 2 } as PointerEvent)).not.toThrow();
+    });
+
+    it('should execute onPointerMove correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        jest.spyOn(toolBox['_raycaster'], 'setFromCamera').mockImplementation();
+
+        // test with no hit with hovered object before
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce([]);
+
+        toolBox['_hovered'] = {
+            uuid: 'uuid',
+            onPointerLeave() {
+                return;
+            },
+        } as Object3D & DIVEHoverable;
+
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+
+        // test with no hovered object
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce(
+            [
+                {
+                    distance: 1,
+                    point: {
+                        x: 1,
+                        y: 1,
+                        z: 1
+                    } as unknown as Vector3,
+                    object: {
+                        uuid: 'uuid',
+                        isHoverable: true,
+                    } as Object3D & DIVEHoverable
+                }
+            ]
+        );
+
+        toolBox['_hovered'] = null;
+
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+
+        // test with no hovered object with onPointerEnter
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce(
+            [
+                {
+                    distance: 1,
+                    point: {
+                        x: 1,
+                        y: 1,
+                        z: 1
+                    } as unknown as Vector3,
+                    object: {
+                        uuid: 'uuid',
+                        isHoverable: true,
+                        onPointerEnter() {
+                            return;
+                        },
+                    } as unknown as Object3D & DIVEHoverable
+                }
+            ]
+        );
+
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+
+        // test with same hovered object
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce(
+            [
+                {
+                    distance: 1,
+                    point: {
+                        x: 1,
+                        y: 1,
+                        z: 1
+                    } as unknown as Vector3,
+                    object: {
+                        uuid: 'uuid',
+                        isHoverable: true,
+                        onPointerOver() {
+                            return;
+                        }
+                    } as unknown as Object3D & DIVEHoverable
+                }
+            ]
+        );
+
+        toolBox['_hovered'] = {
+            uuid: 'uuid',
+            onPointerLeave() {
+                return;
+            },
+        } as Object3D & DIVEHoverable;
+
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+
+        // test with different hovered object
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce(
+            [
+                {
+                    distance: 1,
+                    point: {
+                        x: 1,
+                        y: 1,
+                        z: 1
+                    } as unknown as Vector3,
+                    object: {
+                        uuid: 'uuid2',
+                        isHoverable: true,
+                        onPointerEnter() {
+                            return;
+                        },
+                    } as unknown as Object3D & DIVEHoverable
+                }
+            ]
+        );
+
+        toolBox['_hovered'] = {
+            uuid: 'uuid',
+            onPointerLeave() {
+                return;
+            },
+        } as Object3D & DIVEHoverable;
+
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+
+        // test with pointer down
+        toolBox['_pointerPrimaryDown'] = true;
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+
+        // test with pointer down while already dragging
+        toolBox['_pointerPrimaryDown'] = true;
+        toolBox['_dragging'] = true;
+        expect(() => toolBox.onPointerMove({ button: 0, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 1, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerMove({ button: 2, offsetX: 100, offsetY: 100 } as PointerEvent)).not.toThrow();
+    });
+
+    it('should execute onPointerUp correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onPointerUp({ button: 0 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerUp({ button: 1 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerUp({ button: 2 } as PointerEvent)).not.toThrow();
+
+        toolBox['pointerWasDragged'] = () => { return true; };
+        toolBox['_dragging'] = true;
+        toolBox['_intersects'] = [
+            {
+                distance: 1,
+                point: {
+                    clone() {
+                        return {
+                            x: 1,
+                            y: 1,
+                            z: 1
+                        } as unknown as Vector3;
+                    },
+                    x: 1,
+                    y: 1,
+                    z: 1
+                } as unknown as Vector3,
+                object: {
+                    uuid: 'uuid2',
+                    isHoverable: true,
+                    onPointerEnter() {
+                        return;
+                    },
+                } as unknown as Object3D & DIVEHoverable
+            }
+        ];
+        toolBox['_draggable'] = {
+            onDragEnd() {
+                return;
+            },
+        } as unknown as Object3D & DIVEDraggable;
+        expect(() => toolBox.onPointerUp({ button: 0 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerUp({ button: 1 } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.onPointerUp({ button: 2 } as PointerEvent)).not.toThrow();
+    });
+
+    it('should execute onDragStart correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onDragStart({} as PointerEvent)).not.toThrow();
+
+        toolBox['_draggable'] = {
+            onDragStart() {
+                return;
+            },
+        } as unknown as Object3D & DIVEDraggable;
+        expect(() => toolBox.onDragStart({} as PointerEvent)).not.toThrow();
+
+        toolBox['_dragRaycastOnObjects'] = [];
+        expect(() => toolBox.onDragStart({} as PointerEvent)).not.toThrow();
+
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce([]);
+        expect(() => toolBox.onDragStart({} as PointerEvent)).not.toThrow();
+
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce([
+            {
+                distance: 1,
+                point: {
+                    clone() {
+                        return {
+                            x: 1,
+                            y: 1,
+                            z: 1
+                        } as unknown as Vector3;
+                    },
+                    x: 1,
+                    y: 1,
+                    z: 1
+                } as unknown as Vector3,
+                object: {
+                    uuid: 'uuid2',
+                    isHoverable: true,
+                    onPointerEnter() {
+                        return;
+                    },
+                } as unknown as Object3D & DIVEHoverable
+            }
+        ]);
+        expect(() => toolBox.onDragStart({} as PointerEvent)).not.toThrow();
+
+        toolBox['_draggable'] = {
+            onDragStart() {
+                return;
+            },
+        } as unknown as Object3D & DIVEDraggable;
+        expect(() => toolBox.onDragStart({} as PointerEvent)).not.toThrow();
+    });
+
+    it('should execute onDrag correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onDrag({} as PointerEvent)).not.toThrow();
+
+        toolBox['_dragRaycastOnObjects'] = [];
+        expect(() => toolBox.onDrag({} as PointerEvent)).not.toThrow();
+
+        toolBox['_draggable'] = {
+            onDrag() {
+                return;
+            },
+        } as unknown as Object3D & DIVEDraggable;
+        jest.spyOn(toolBox['_raycaster'], 'intersectObjects').mockReturnValueOnce(
+            [
+                {
+                    distance: 1,
+                    point: {
+                        clone() {
+                            return {
+                                x: 1,
+                                y: 1,
+                                z: 1
+                            } as unknown as Vector3;
+                        },
+                        x: 1,
+                        y: 1,
+                        z: 1
+                    } as unknown as Vector3,
+                    object: {
+                        uuid: 'uuid2',
+                        isHoverable: true,
+                        onPointerEnter() {
+                            return;
+                        },
+                    } as unknown as Object3D & DIVEHoverable
+                }
+            ]
+        );
+        expect(() => toolBox.onDrag({} as PointerEvent)).not.toThrow();
+    });
+
+    it('should execute onDragEnd correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onDragEnd({} as PointerEvent)).not.toThrow();
+    });
+});

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

@@ -24,6 +24,7 @@ const mock_Canvas = {
 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();
@@ -33,6 +34,7 @@ jest.mock('../select/SelectTool.ts', () => {
         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;
@@ -84,6 +86,12 @@ describe('dive/toolbox/DIVEToolBox', () => {
         expect(mock_onPointerDown).toHaveBeenCalledTimes(1);
     });
 
+    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);
+    });
+
     it('should execute pointer up event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
         toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent);

package/src/toolbox/select/SelectTool.ts

@@ -1,11 +1,9 @@
-import { Intersection, Object3D, Raycaster, Vector2 } from "three";
-import { TransformControls } from "three/examples/jsm/Addons.js";
-import DIVEBaseTool from "../BaseTool.ts";
-import { DIVESelectable } from "../../interface/Selectable.ts";
+import { Object3D } from "three";
+import { DIVESelectable, isSelectable } from "../../interface/Selectable.ts";
 import DIVEScene from "../../scene/Scene.ts";
-import { HELPER_LAYER_MASK, PRODUCT_LAYER_MASK, UI_LAYER_MASK } from "../../constant/VisibilityLayerMask.ts";
 import { DIVEMoveable } from "../../interface/Moveable.ts";
 import DIVEOrbitControls from "../../controls/OrbitControls.ts";
+import DIVETransformTool from "../transform/TransformTool.ts";
 
 export interface DIVEObjectEventMap {
     select: object
@@ -19,82 +17,54 @@ export interface DIVEObjectEventMap {
  * @module
  */
 
-export default class DIVESelectTool extends DIVEBaseTool {
-    private canvas: HTMLElement;
-    private scene: DIVEScene;
-    private controller: DIVEOrbitControls;
-    private raycaster: Raycaster;
-    private gizmo: TransformControls;
-
+export default class DIVESelectTool extends DIVETransformTool {
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
-        super();
+        super(scene, controller);
         this.name = "SelectTool";
-
-        this.canvas = controller.domElement;
-        this.scene = scene;
-        this.controller = controller;
-        this.raycaster = new Raycaster();
-        this.raycaster.layers.mask = PRODUCT_LAYER_MASK | HELPER_LAYER_MASK;
-
-        this.gizmo = new TransformControls(this.controller.object, this.canvas);
-
-        this.gizmo.layers.mask = UI_LAYER_MASK;
-        this.gizmo.getRaycaster().layers.mask = UI_LAYER_MASK & this.controller.object.layers.mask;
-        this.gizmo.traverse((child) => {
-            child.layers.mask = UI_LAYER_MASK;
-        });
-        this.gizmo.addEventListener('objectChange', () => {
-            if (!this.gizmo.object) return;
-            if (!('onMove' in this.gizmo.object)) return;
-            if (typeof this.gizmo.object.onMove !== 'function') return;
-            this.gizmo.object.onMove();
-        });
-
-        this.controller.object.onSetCameraLayer = (mask: number) => {
-            this.gizmo.getRaycaster().layers.mask = UI_LAYER_MASK & mask;
-        };
-
-        this.gizmo.addEventListener('dragging-changed', function (event) {
-            controller.enabled = !event.value;
-        });
-
-        this.scene.add(this.gizmo);
     }
 
     public Activate(): void { }
 
-    public SetGizmoMode(mode: 'translate' | 'rotate' | 'scale'): void {
-        this.gizmo.setMode(mode);
-    }
 
     public Select(selectable: DIVESelectable): void {
         if (selectable.onSelect) selectable.onSelect();
 
         if ('isMoveable' in selectable) {
             const movable = selectable as (Object3D & DIVESelectable & DIVEMoveable);
-            movable.gizmo = this.gizmo;
-            this.gizmo.attach(movable);
+            this._gizmo.attach(movable);
         }
     }
 
     public Deselect(selectable: DIVESelectable): void {
         if (selectable.onDeselect) selectable.onDeselect();
-        if (('isMoveable' in selectable)) (selectable as unknown as DIVEMoveable).gizmo = null;
-        this.gizmo.detach();
+        this._gizmo.detach();
     }
 
-    public onPointerUp(e: PointerEvent): void {
-        const pointerPos: Vector2 = new Vector2(e.offsetX / this.canvas.clientWidth * 2 - 1, e.offsetY / this.canvas.clientHeight * -2 + 1);
-        this.raycaster.setFromCamera(pointerPos, this.controller.object);
+    public onClick(e: PointerEvent): void {
+        super.onClick(e);
 
-        const first = this.raycastFirst();
+        const first = this._raycaster.intersectObjects(this._scene.Root.children, true)[0];
         const selectable = this.findSelectableInterface(first?.object);
+
+        // if nothing is hit
         if (!first || !selectable) {
-            if (this.gizmo.object) this.Deselect(this.gizmo.object as (Object3D & DIVESelectable));
+            if (this._gizmo.object) {
+                this.Deselect(this._gizmo.object as Object3D & DIVESelectable);
+            }
             return;
         }
 
+        if (this._gizmo.object) {
+            // do not reselect if the same object was clicked
+            if (this._gizmo.object.uuid === selectable.uuid) return;
+
+            // deselect previous object
+            this.Deselect(this._gizmo.object as (Object3D & DIVESelectable));
+        }
+
+
+        // select clicked object
         this.Select(selectable);
     }
 
@@ -106,18 +76,12 @@ export default class DIVESelectTool extends DIVEBaseTool {
             return undefined;
         }
 
-        if ('isSelectable' in child) {
-            return child as (Object3D & DIVESelectable);
+        if (isSelectable(child)) {
+            // in this case it is the Selectable
+            return child;
         }
 
+        // search recursively in parent
         return this.findSelectableInterface(child.parent);
     }
-
-    private raycastFirst(): Intersection {
-        return this.raycastAll()[0];
-    }
-
-    private raycastAll(): Intersection[] {
-        return this.raycaster.intersectObjects(this.scene.Root.children, true);
-    }
 }