@shopware-ag/dive 1.2.0 → 1.3.1

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);
-    }
 }

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

@@ -3,7 +3,8 @@ import DIVEScene from '../../../scene/Scene';
 import DIVEOrbitControls from '../../../controls/OrbitControls';
 import DIVEPerspectiveCamera from '../../../camera/PerspectiveCamera';
 import DIVERenderer, { DIVERendererDefaultSettings } from '../../../renderer/Renderer';
-import { DIVESelectable } from '../../../interface/Selectable';
+import { DIVESelectable, isSelectable } from '../../../interface/Selectable';
+import { type Object3D } from 'three';
 
 jest.mock('../../../renderer/Renderer', () => {
     return jest.fn(function () {
@@ -11,14 +12,6 @@ jest.mock('../../../renderer/Renderer', () => {
     });
 });
 
-jest.mock('../../../toolbox/BaseTool', () => {
-    return jest.fn(function (cam) {
-        this.cam = cam;
-        this.add = jest.fn();
-        return this;
-    });
-});
-
 jest.mock('../../../camera/PerspectiveCamera', () => {
     return jest.fn(function () {
         this.isPerspectiveCamera = true;
@@ -62,6 +55,9 @@ jest.mock('three', () => {
         Vector2: jest.fn(function () {
             return this;
         }),
+        Vector3: jest.fn(function () {
+            return this;
+        }),
         Raycaster: jest.fn(function () {
             this.setFromCamera = jest.fn();
             this.intersectObjects = mock_intersectObjects;
@@ -120,8 +116,6 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
     it('should instantiate', () => {
         const selectTool = new DIVESelectTool(mockScene, mockController);
         expect(selectTool).toBeDefined();
-        expect(mockController.object.onSetCameraLayer).toBeDefined();
-        expect(() => mockController.object.onSetCameraLayer(0)).not.toThrow();
     });
 
     it('should activate', () => {
@@ -129,21 +123,23 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
         expect(() => selectTool.Activate()).not.toThrow();
     });
 
-    it('should execute onPointerUp without hit', () => {
+    it('should execute onClick without hit', () => {
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        expect(() => selectTool.onPointerUp({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
+        selectTool['_gizmo'].object = {} as unknown as Object3D & DIVESelectable;
+        expect(() => selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
     });
 
-    it('should execute onPointerUp with hit', () => {
-        mock_intersectObjects.mockReturnValueOnce([{ object: { parent: { name: 'this is the test scene root!!!', parent: null } } }]);
+    it('should execute onClick with hit', () => {
+        mock_intersectObjects.mockReturnValueOnce([{ object: { uuid: 'test', parent: { name: 'this is the test scene root!!!', parent: null } } }]);
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        expect(() => selectTool.onPointerUp({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
+        expect(() => selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
     });
 
-    it('should execute onPointerUp with ISelectable hit', () => {
+    it('should execute onClick with same ISelectable hit', () => {
         const mock_onSelect = jest.fn();
 
         mock_intersectObjects.mockReturnValueOnce([{
+
             object: {
                 isSelectable: true,
                 onSelect: mock_onSelect,
@@ -151,14 +147,41 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
                     name: 'this is the test scene root!!!',
                     parent: null,
                 },
+                uuid: 'test0',
             },
         }]);
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        expect(() => selectTool.onPointerUp({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
-        expect(mock_onSelect).toHaveBeenCalledTimes(1);
+        selectTool['_gizmo'].object = {
+            isSelectable: true,
+            uuid: 'test0',
+        } as unknown as Object3D & DIVESelectable;
+        expect(() => selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
     });
 
-    it('should execute onPointerUp with IMovable hit', () => {
+    it('should execute onClick with ISelectable hit', () => {
+        const mock_onSelect = jest.fn();
+
+        mock_intersectObjects.mockReturnValueOnce([{
+
+            object: {
+                isSelectable: true,
+                onSelect: mock_onSelect,
+                parent: {
+                    name: 'this is the test scene root!!!',
+                    parent: null,
+                },
+                uuid: 'test0',
+            },
+        }]);
+        const selectTool = new DIVESelectTool(mockScene, mockController);
+        selectTool['_gizmo'].object = {
+            isSelectable: true,
+            uuid: 'test1',
+        } as unknown as Object3D & DIVESelectable;
+        expect(() => selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
+    });
+
+    it('should execute onClick with IMovable hit', () => {
         const mock_onSelect = jest.fn();
 
         mock_intersectObjects.mockReturnValueOnce([{
@@ -173,15 +196,24 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
             },
         }]);
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        expect(() => selectTool.onPointerUp({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
-        expect(mock_attach).toHaveBeenCalledTimes(1);
+        expect(() => selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent)).not.toThrow();
     });
 
-    it('should deselect', () => {
+    it('should Select', () => {
         const selectTool = new DIVESelectTool(mockScene, mockController);
+        const mock_onSelect = jest.fn();
+        expect(() => selectTool.Select({ isSelectable: true })).not.toThrow();
+        expect(() => selectTool.Select({ isMoveable: true, onSelect: mock_onSelect } as unknown as DIVESelectable)).not.toThrow();
+        expect(mock_onSelect).toHaveBeenCalledTimes(1);
+    });
+
+    it('should Deselect', () => {
+        const selectTool = new DIVESelectTool(mockScene, mockController);
+        const mock_onDeselect = jest.fn();
         expect(() => selectTool.Deselect({ isSelectable: true })).not.toThrow();
-        expect(() => selectTool.Deselect({ isMoveable: true, onDeselect: jest.fn() } as unknown as DIVESelectable)).not.toThrow();
-    })
+        expect(() => selectTool.Deselect({ isMoveable: true, onDeselect: mock_onDeselect } as unknown as DIVESelectable)).not.toThrow();
+        expect(mock_onDeselect).toHaveBeenCalledTimes(1);
+    });
 
     it('should set gizmo mode', () => {
         const selectTool = new DIVESelectTool(mockScene, mockController);

package/src/toolbox/transform/TransformTool.ts

@@ -0,0 +1,48 @@
+import DIVEBaseTool from "../BaseTool.ts";
+import DIVEScene from "../../scene/Scene.ts";
+import DIVEOrbitControls from "../../controls/OrbitControls.ts";
+import { TransformControls } from "three/examples/jsm/Addons";
+
+export interface DIVEObjectEventMap {
+    select: object
+}
+
+/**
+ * A Tool to select and move objects in the scene.
+ *
+ * Objects have to implement the DIVESelectable interface to be selectable and DIVEMoveable to be moveable.
+ *
+ * @module
+ */
+
+export default class DIVETransformTool extends DIVEBaseTool {
+    protected _gizmo: TransformControls;
+
+    constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
+        super(scene, controller);
+        this.name = "DIVETransformTool";
+
+        this._gizmo = new TransformControls(this._controller.object, this._controller.domElement);
+        this._gizmo.mode = 'translate';
+
+        scene.add(this._gizmo);
+    }
+
+    public Activate(): void { }
+
+    public SetGizmoMode(mode: 'translate' | 'rotate' | 'scale'): void {
+        this._gizmo.mode = mode;
+    }
+
+    // public onPointerDown(e: PointerEvent): void {
+    //     super.onPointerDown(e);
+
+    //     // if (this._hovered) {
+    //     //     this._dragRaycastOnObjects = this._gizmo.gizmoPlane.children;
+    //     // }
+    // }
+
+    // protected raycast(): Intersection[] {
+    //     return super.raycast(this._gizmo.gizmoNode.children);
+    // }
+}