@shopware-ag/dive 1.3.2 → 1.4.1

package/package.json

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

package/src/__test__/DIVE.test.ts

@@ -161,6 +161,7 @@ describe('dive/DIVE', () => {
         const dive = new DIVE();
         expect(dive).toBeDefined();
         expect((window as any).DIVE.PrintScene).toBeDefined();
+        console.log = jest.fn();
         expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 

package/src/com/Communication.ts

@@ -100,6 +100,10 @@ export default class DIVECommunication {
                 returnValue = this.selectObject(payload as Actions['SELECT_OBJECT']['PAYLOAD']);
                 break;
             }
+            case 'DESELECT_OBJECT': {
+                returnValue = this.deselectObject(payload as Actions['DESELECT_OBJECT']['PAYLOAD']);
+                break;
+            }
             case 'SET_BACKGROUND': {
                 returnValue = this.setBackground(payload as Actions['SET_BACKGROUND']['PAYLOAD']);
                 break;
@@ -269,7 +273,25 @@ export default class DIVECommunication {
         if (!('isSelectable' in sceneObject)) return false;
 
         this.toolbox.UseTool('select');
-        (this.toolbox.GetActiveTool() as DIVESelectTool).Select(sceneObject as DIVESelectable);
+        (this.toolbox.GetActiveTool() as DIVESelectTool).AttachGizmo(sceneObject as DIVESelectable);
+
+        // copy object to payload to use later
+        Object.assign(payload, object);
+
+        return true;
+    }
+
+    private deselectObject(payload: Actions['DESELECT_OBJECT']['PAYLOAD']): Actions['DESELECT_OBJECT']['RETURN'] {
+        const object = this.registered.get(payload.id);
+        if (!object) return false;
+
+        const sceneObject = this.scene.GetSceneObject(object);
+        if (!sceneObject) return false;
+
+        if (!('isSelectable' in sceneObject)) return false;
+
+        this.toolbox.UseTool('select');
+        (this.toolbox.GetActiveTool() as DIVESelectTool).DetachGizmo();
 
         // copy object to payload to use later
         Object.assign(payload, object);

package/src/com/__test__/Communication.test.ts

@@ -113,11 +113,13 @@ const mockController = {
     RevertLast: jest.fn(),
 } as unknown as DIVEOrbitControls;
 
-const mockSelect = jest.fn();
+const mockAttach = jest.fn();
+const mockDetach = jest.fn();
 const mockToolBox = {
     UseTool: jest.fn(),
     GetActiveTool: jest.fn().mockReturnValue({
-        Select: mockSelect,
+        AttachGizmo: mockAttach,
+        DetachGizmo: mockDetach,
     }),
     SetGizmoMode: jest.fn(),
 } as unknown as DIVEToolbox;
@@ -540,7 +542,33 @@ describe('dive/communication/DIVECommunication', () => {
         jest.spyOn(mockScene, 'GetSceneObject').mockReturnValueOnce({ isSelectable: true } as unknown as Object3D);
         const success3 = testCom.PerformAction('SELECT_OBJECT', { id: 'test0' });
         expect(success3).toBe(true);
-        expect(mockSelect).toHaveBeenCalledTimes(1);
+        expect(mockAttach).toHaveBeenCalledTimes(1);
+    });
+
+    it('should perform action DESELECT_OBJECT', () => {
+        const success0 = testCom.PerformAction('DESELECT_OBJECT', { id: 'test0' });
+        expect(success0).toBe(false);
+
+        const mock0 = {
+            entityType: "pov",
+            id: "test0",
+            position: { x: 0, y: 0, z: 0 },
+            target: { x: 0, y: 0, z: 0 },
+        } as COMPov;
+        testCom.PerformAction('ADD_OBJECT', mock0);
+
+        jest.spyOn(mockScene, 'GetSceneObject').mockReturnValueOnce(undefined);
+        const success1 = testCom.PerformAction('DESELECT_OBJECT', { id: 'test0' });
+        expect(success1).toBe(false);
+
+        jest.spyOn(mockScene, 'GetSceneObject').mockReturnValueOnce({} as unknown as Object3D);
+        const success2 = testCom.PerformAction('DESELECT_OBJECT', { id: 'test0' });
+        expect(success2).toBe(false);
+
+        jest.spyOn(mockScene, 'GetSceneObject').mockReturnValueOnce({ isSelectable: true } as unknown as Object3D);
+        const success3 = testCom.PerformAction('DESELECT_OBJECT', { id: 'test0' });
+        expect(success3).toBe(true);
+        expect(mockDetach).toHaveBeenCalledTimes(1);
     });
 
     it('should perform action SET_CAMERA_TRANSFORM', () => {

package/src/com/actions/index.ts

@@ -16,6 +16,7 @@ import UPDATE_SCENE from "./scene/updatescene.ts";
 import GENERATE_MEDIA from "./media/generatemedia.ts";
 import GET_ALL_SCENE_DATA from "./scene/getallscenedata.ts";
 import SELECT_OBJECT from "./object/selectobject.ts";
+import DESELECT_OBJECT from "./object/deselectobject.ts";
 import GET_CAMERA_TRANSFORM from "./camera/getcameratransform.ts";
 import DROP_IT from "./object/model/dropit.ts";
 
@@ -27,6 +28,7 @@ export type Actions = {
     UPDATE_OBJECT: UPDATE_OBJECT,
     DELETE_OBJECT: DELETE_OBJECT,
     SELECT_OBJECT: SELECT_OBJECT,
+    DESELECT_OBJECT: DESELECT_OBJECT,
     SET_BACKGROUND: SET_BACKGROUND,
     DROP_IT: DROP_IT,
     PLACE_ON_FLOOR: PLACE_ON_FLOOR,

package/src/com/actions/object/deselectobject.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface DESELECT_OBJECT {
+    'PAYLOAD': Partial<COMEntity> & { id: string },
+    'RETURN': boolean,
+};

package/src/light/PointLight.ts

@@ -1,6 +1,6 @@
 import { PointLight, Color, SphereGeometry, MeshBasicMaterial, Mesh, FrontSide, Object3D } from 'three';
 import DIVECommunication from '../com/Communication';
-import { HELPER_LAYER_MASK, PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
+import { PRODUCT_LAYER_MASK, UI_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { DIVEMoveable } from '../interface/Moveable';
 import { DIVESelectable } from '../interface/Selectable';
 import type { TransformControls } from 'three/examples/jsm/Addons.js';
@@ -44,7 +44,7 @@ export default class DIVEPointLight extends Object3D implements DIVESelectable,
         const material = new MeshBasicMaterial({ color: this.light.color, transparent: true, opacity: 0.8, side: FrontSide });
 
         this.mesh = new Mesh(geometry, material);
-        this.mesh.layers.mask = HELPER_LAYER_MASK;
+        this.mesh.layers.mask = UI_LAYER_MASK;
 
         this.add(this.mesh);
     }
@@ -68,4 +68,12 @@ export default class DIVEPointLight extends Object3D implements DIVESelectable,
     public onMove(): void {
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position });
     }
+
+    public onSelect(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('SELECT_OBJECT', { id: this.userData.id });
+    }
+
+    public onDeselect(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('DESELECT_OBJECT', { id: this.userData.id });
+    }
 }

package/src/light/__test__/PointLight.test.ts

@@ -108,4 +108,22 @@ describe('dive/light/DIVEPointLight', () => {
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
         expect(() => testLight.onMove()).not.toThrow();
     });
+
+    it('should onSelect', () => {
+        const testLight = new DIVEPointLight();
+        testLight.userData.id = 'something';
+        expect(() => testLight.onSelect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => testLight.onSelect()).not.toThrow();
+    });
+
+    it('should onDeselect', () => {
+        const testLight = new DIVEPointLight();
+        testLight.userData.id = 'something';
+        expect(() => testLight.onDeselect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => testLight.onDeselect()).not.toThrow();
+    });
 });

package/src/model/Model.ts

@@ -103,4 +103,12 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
     public onMove(): void {
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
     }
+
+    public onSelect(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('SELECT_OBJECT', { id: this.userData.id });
+    }
+
+    public onDeselect(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('DESELECT_OBJECT', { id: this.userData.id });
+    }
 }

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

@@ -293,4 +293,24 @@ describe('dive/model/DIVEModel', () => {
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
         expect(() => model.onMove()).not.toThrow();
     });
+
+    it('should onSelect', () => {
+        const testLight = new Model();
+        testLight.userData.id = 'something';
+
+        expect(() => testLight.onSelect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => testLight.onSelect()).not.toThrow();
+    });
+
+    it('should onDeselect', () => {
+        const testLight = new Model();
+        testLight.userData.id = 'something';
+
+        expect(() => testLight.onDeselect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => testLight.onDeselect()).not.toThrow();
+    });
 });

package/src/toolbox/Toolbox.ts

@@ -21,16 +21,21 @@ export default class DIVEToolbox {
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         this.selectTool = new DIVESelectTool(scene, controller);
 
-        controller.domElement.addEventListener('pointermove', this.onPointerMove.bind(this));
-        controller.domElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
-        controller.domElement.addEventListener('pointerup', this.onPointerUp.bind(this));
-        controller.domElement.addEventListener('wheel', this.onWheel.bind(this));
+        const pointerMove = this.onPointerMove.bind(this);
+        const pointerDown = this.onPointerDown.bind(this);
+        const pointerUp = this.onPointerUp.bind(this);
+        const wheel = this.onWheel.bind(this);
+
+        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', this.onPointerMove.bind(this));
-            controller.domElement.removeEventListener('pointerdown', this.onPointerDown.bind(this));
-            controller.domElement.removeEventListener('pointerup', this.onPointerUp.bind(this));
-            controller.domElement.removeEventListener('wheel', this.onWheel.bind(this));
+            controller.domElement.removeEventListener('pointermove', pointerMove);
+            controller.domElement.removeEventListener('pointerdown', pointerDown);
+            controller.domElement.removeEventListener('pointerup', pointerUp);
+            controller.domElement.removeEventListener('wheel', wheel);
         };
 
         // default tool

package/src/toolbox/select/SelectTool.ts

@@ -30,17 +30,26 @@ export default class DIVESelectTool extends DIVETransformTool {
     public Select(selectable: DIVESelectable): void {
         if (selectable.onSelect) selectable.onSelect();
 
-        if ('isMoveable' in selectable) {
-            const movable = selectable as (Object3D & DIVESelectable & DIVEMoveable);
-            this._gizmo.attach(movable);
-        }
+        this.AttachGizmo(selectable);
     }
 
     public Deselect(selectable: DIVESelectable): void {
         if (selectable.onDeselect) selectable.onDeselect();
+
+        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);
+        }
+    }
+
     public onClick(e: PointerEvent): void {
         super.onClick(e);
 

package/src/toolbox/transform/TransformTool.ts

@@ -2,6 +2,7 @@ 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 interface DIVEObjectEventMap {
     select: object
@@ -25,6 +26,21 @@ export default class DIVETransformTool extends DIVEBaseTool {
         this._gizmo = new TransformControls(this._controller.object, this._controller.domElement);
         this._gizmo.mode = 'translate';
 
+        this._gizmo.addEventListener('mouseDown', () => {
+            controller.enabled = false;
+        });
+
+        this._gizmo.addEventListener('mouseUp', () => {
+            controller.enabled = true;
+        });
+
+        this._gizmo.addEventListener('objectChange', () => {
+            if (!this._gizmo.object) return;
+            if (!('isMoveable' in this._gizmo.object)) return;
+            if (!('onMove' in this._gizmo.object)) return;
+            (this._gizmo.object as DIVEMoveable).onMove!();
+        });
+
         scene.add(this._gizmo);
     }
 

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

@@ -0,0 +1,132 @@
+import DIVETransformTool 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';
+
+jest.mock('../../../renderer/Renderer', () => {
+    return jest.fn(function () {
+        return this;
+    });
+});
+
+jest.mock('../../../camera/PerspectiveCamera', () => {
+    return jest.fn(function () {
+        this.isPerspectiveCamera = true;
+        this.layers = {
+            mask: 0,
+        };
+        return this;
+    });
+});
+
+jest.mock('../../../controls/OrbitControls', () => {
+    return jest.fn(function () {
+        this.enabled = true;
+        this.domElement = {
+            clientWIdth: 0,
+            clientHeight: 0,
+        };
+        this.object = {
+            layers: {
+                mask: 0,
+            }
+        };
+        return this;
+    });
+});
+
+jest.mock('../../../scene/Scene', () => {
+    return jest.fn(function () {
+        this.add = jest.fn();
+        this.Root = {
+            children: [],
+        }
+        return this;
+    });
+});
+
+const mock_intersectObjects = jest.fn().mockReturnValue([]);
+
+jest.mock('three', () => {
+    return {
+        Vector2: jest.fn(function () {
+            return this;
+        }),
+        Vector3: jest.fn(function () {
+            return this;
+        }),
+        Raycaster: jest.fn(function () {
+            this.setFromCamera = jest.fn();
+            this.intersectObjects = mock_intersectObjects;
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+    };
+});
+
+const mock_attach = jest.fn();
+const mock_detach = jest.fn();
+
+jest.mock('three/examples/jsm/Addons.js', () => {
+    return {
+        TransformControls: jest.fn(function () {
+            this.addEventListener = (type: string, callback: (e: object) => void) => {
+                this.object = null;
+                callback({ value: false });
+                this.object = {};
+                callback({ value: false });
+                this.object = {
+                    isMoveable: true
+                };
+                callback({ value: false });
+                this.object = {
+                    isMoveable: true,
+                    onMove: jest.fn(),
+                };
+                callback({ value: false });
+            },
+                this.attach = mock_attach,
+                this.detach = mock_detach,
+                this.traverse = function (callback: (obj: object) => void) {
+                    callback(this);
+                };
+            this.setMode = jest.fn();
+            this.getRaycaster = jest.fn().mockReturnValue({
+                layers: {
+                    mask: 0,
+                },
+            });
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+    };
+});
+
+const mockCamera: DIVEPerspectiveCamera = {} as DIVEPerspectiveCamera;
+const mockRenderer: DIVERenderer = new DIVERenderer(DIVERendererDefaultSettings);
+const mockScene: DIVEScene = new DIVEScene();
+const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer);
+
+describe('dive/toolbox/select/DIVETransformTool', () => {
+    it('should instantiate', () => {
+        const transformTool = new DIVETransformTool(mockScene, mockController);
+        expect(transformTool).toBeDefined();
+    });
+
+    it('should activate', () => {
+        const transformTool = new DIVETransformTool(mockScene, mockController);
+        expect(() => transformTool.Activate()).not.toThrow();
+    });
+
+    it('should set gizmo mode', () => {
+        const transformTool = new DIVETransformTool(mockScene, mockController);
+        expect(() => transformTool.SetGizmoMode('translate')).not.toThrow();
+    });
+});