@shopware-ag/dive 1.4.2 → 1.5.0

package/package.json

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

package/src/com/Communication.ts

@@ -144,6 +144,10 @@ export default class DIVECommunication {
                 returnValue = this.setGizmoMode(payload as Actions['SET_GIZMO_MODE']['PAYLOAD']);
                 break;
             }
+            case 'SET_GIZMO_VISIBILITY': {
+                returnValue = this.setGizmoVisibility(payload as Actions['SET_GIZMO_VISIBILITY']['PAYLOAD']);
+                break;
+            }
             case 'MODEL_LOADED': {
                 returnValue = this.modelLoaded(payload as Actions['MODEL_LOADED']['PAYLOAD']);
                 break;
@@ -380,6 +384,11 @@ export default class DIVECommunication {
         return true;
     }
 
+    private setGizmoVisibility(payload: Actions['SET_GIZMO_VISIBILITY']['PAYLOAD']): Actions['SET_GIZMO_VISIBILITY']['RETURN'] {
+        this.toolbox.SetGizmoVisibility(payload);
+        return payload;
+    }
+
     private modelLoaded(payload: Actions['MODEL_LOADED']['PAYLOAD']): Actions['MODEL_LOADED']['RETURN'] {
         (this.registered.get(payload.id) as COMModel).loaded = true;
         return true;

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

@@ -23,6 +23,7 @@ import '../actions/scene/getallscenedata';
 import '../actions/scene/setbackground';
 import '../actions/scene/updatescene';
 import '../actions/toolbox/select/setgizmomode';
+import '../actions/toolbox/transform/setgizmovisible';
 import '../actions/camera/getcameratransform';
 import DIVEOrbitControls from '../../controls/OrbitControls';
 import { COMLight, COMModel, COMPov } from '../types';
@@ -122,6 +123,7 @@ const mockToolBox = {
         DetachGizmo: mockDetach,
     }),
     SetGizmoMode: jest.fn(),
+    SetGizmoVisibility: jest.fn(),
 } as unknown as DIVEToolbox;
 
 const mockMediaCreator = {
@@ -614,6 +616,14 @@ describe('dive/communication/DIVECommunication', () => {
         expect(success).toBe(true);
     });
 
+    it('should perform action SET_GIZMO_VISIBILITY', () => {
+        let visibility = testCom.PerformAction('SET_GIZMO_VISIBILITY', true);
+        expect(visibility).toBe(true);
+
+        visibility = testCom.PerformAction('SET_GIZMO_VISIBILITY', false);
+        expect(visibility).toBe(false);
+    });
+
     it('should perform action MODEL_LOADED', () => {
         const payload = {
             entityType: "model",

package/src/com/actions/index.ts

@@ -19,6 +19,7 @@ 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";
+import SET_GIZMO_VISIBILITY from "./toolbox/transform/setgizmovisible.js";
 
 export type Actions = {
     GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA,
@@ -39,6 +40,7 @@ export type Actions = {
     SET_CAMERA_LAYER: SET_CAMERA_LAYER,
     ZOOM_CAMERA: ZOOM_CAMERA,
     SET_GIZMO_MODE: SET_GIZMO_MODE,
+    SET_GIZMO_VISIBILITY: SET_GIZMO_VISIBILITY,
     MODEL_LOADED: MODEL_LOADED,
     UPDATE_SCENE: UPDATE_SCENE,
     GENERATE_MEDIA: GENERATE_MEDIA,

package/src/com/actions/toolbox/transform/setgizmovisible.ts

@@ -0,0 +1,4 @@
+export default interface SET_GIZMO_VISIBILITY {
+    'PAYLOAD': boolean,
+    'RETURN': boolean,
+}

package/src/model/Model.ts

@@ -57,6 +57,12 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
         this.scale.set(scale.x, scale.y, scale.z);
     }
 
+    public SetVisibility(visible: boolean): void {
+        this.traverse((child) => {
+            child.visible = visible;
+        });
+    }
+
     public SetToWorldOrigin(): void {
         this.position.set(0, 0, 0);
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });

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/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

@@ -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

@@ -69,6 +69,10 @@ 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);
     }

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

@@ -134,6 +134,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid',
                         isHoverable: true,
+                        visible: true,
                     } as Object3D & DIVEHoverable
                 }
             ]
@@ -158,6 +159,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid',
                         isHoverable: true,
+                        visible: true,
                         onPointerEnter() {
                             return;
                         },
@@ -183,6 +185,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid',
                         isHoverable: true,
+                        visible: true,
                         onPointerOver() {
                             return;
                         }
@@ -193,6 +196,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
 
         toolBox['_hovered'] = {
             uuid: 'uuid',
+            visible: true,
             onPointerLeave() {
                 return;
             },
@@ -215,6 +219,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
                     object: {
                         uuid: 'uuid2',
                         isHoverable: true,
+                        visible: true,
                         onPointerEnter() {
                             return;
                         },
@@ -225,6 +230,7 @@ describe('dive/toolbox/DIVEBaseTool', () => {
 
         toolBox['_hovered'] = {
             uuid: 'uuid',
+            visible: true,
             onPointerLeave() {
                 return;
             },

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

@@ -28,6 +28,7 @@ const mock_onPointerMove = jest.fn();
 const mock_onPointerUp = jest.fn();
 const mock_onWheel = jest.fn();
 const mock_SetGizmoMode = jest.fn();
+const mock_SetGizmoVisibility = jest.fn();
 
 jest.mock('../select/SelectTool.ts', () => {
     return jest.fn(function () {
@@ -38,6 +39,7 @@ jest.mock('../select/SelectTool.ts', () => {
         this.onPointerUp = mock_onPointerUp;
         this.onWheel = mock_onWheel;
         this.SetGizmoMode = mock_SetGizmoMode;
+        this.SetGizmoVisibility = mock_SetGizmoVisibility;
         return this;
     });
 });
@@ -114,4 +116,10 @@ describe('dive/toolbox/DIVEToolBox', () => {
         toolBox.SetGizmoMode('translate');
         expect(mock_SetGizmoMode).toHaveBeenCalledTimes(1);
     });
+
+    it('should set gizmo active', () => {
+        const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
+        toolBox.SetGizmoVisibility(true);
+        expect(mock_SetGizmoVisibility).toHaveBeenCalledTimes(1);
+    });
 });

package/src/toolbox/select/SelectTool.ts

@@ -47,13 +47,14 @@ export default class DIVESelectTool extends DIVETransformTool {
         if ('isMoveable' in selectable) {
             const movable = selectable as (Object3D & DIVESelectable & DIVEMoveable);
             this._gizmo.attach(movable);
+            this.SetGizmoVisibility(movable.visible);
         }
     }
 
     public onClick(e: PointerEvent): void {
         super.onClick(e);
 
-        const first = this._raycaster.intersectObjects(this._scene.Root.children, true)[0];
+        const first = this._raycaster.intersectObjects(this._scene.Root.children, true).filter((intersect) => intersect.object.visible )[0];
         const selectable = this.findSelectableInterface(first?.object);
 
         // if nothing is hit

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

@@ -41,6 +41,7 @@ jest.mock('../../../controls/OrbitControls', () => {
 jest.mock('../../../scene/Scene', () => {
     return jest.fn(function () {
         this.add = jest.fn();
+        this.children = [];
         this.Root = {
             children: [],
         }
@@ -130,7 +131,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 +148,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 +161,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 +172,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

@@ -50,6 +50,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

@@ -41,9 +41,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;
     });
 });
@@ -129,4 +131,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();
+    });
 });