@shopware-ag/dive 1.17.0 → 1.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shopware-ag/dive",
-    "version": "1.17.0",
+    "version": "1.17.2",
     "description": "Shopware Spatial Framework",
     "type": "module",
     "main": "./build/dive.cjs",
@@ -44,6 +44,7 @@
         "globals": "^15.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-junit": "^16.0.0",
         "jsdom": "^24.0.0",
         "prettier": "^3.3.3",
         "prettier-plugin-multiline-arrays": "^3.0.6",

package/src/com/Communication.ts

@@ -457,6 +457,27 @@ export class DIVECommunication {
         const deletedObject = this.registered.get(payload.id);
         if (!deletedObject) return false;
 
+        // If the object has a parent, detach it first
+        if (deletedObject.parentId) {
+            // First detach from parent group
+            this.setParent({
+                object: { id: deletedObject.id },
+                parent: null,
+            });
+        }
+
+        // If deleting a group, update all children to have no parent
+        if (deletedObject.entityType === 'group') {
+            this.registered.forEach((object) => {
+                if (object.parentId === deletedObject.id) {
+                    this.updateObject({
+                        id: object.id,
+                        parentId: null,
+                    });
+                }
+            });
+        }
+
         // copy object to payload to use later
         Object.assign(payload, deletedObject);
 
@@ -723,6 +744,11 @@ export class DIVECommunication {
         if (payload.parent === null) {
             // detach from current parent
             this.scene.Root.attach(sceneObject);
+            // Update registration to reflect no parent
+            this.updateObject({
+                id: object.id,
+                parentId: null,
+            });
             return true;
         }
 
@@ -735,6 +761,11 @@ export class DIVECommunication {
         if (!parent) {
             // detach from current parent
             this.scene.Root.attach(sceneObject);
+            // Update registration to reflect no parent
+            this.updateObject({
+                id: object.id,
+                parentId: null,
+            });
             return true;
         }
 
@@ -743,11 +774,21 @@ export class DIVECommunication {
         if (!parentObject) {
             // detach from current parent
             this.scene.Root.attach(sceneObject);
+            // Update registration to reflect no parent
+            this.updateObject({
+                id: object.id,
+                parentId: null,
+            });
             return true;
         }
 
         // attach to new parent
         parentObject.attach(sceneObject);
+        // Update registration to reflect new parent
+        this.updateObject({
+            id: object.id,
+            parentId: parent.id,
+        });
         return true;
     }
 

package/src/gizmo/Gizmo.ts

@@ -20,6 +20,12 @@ export class DIVEGizmo extends Object3D {
         this.assemble();
     }
 
+    public set debug(value: boolean) {
+        this._translateGizmo.debug = value;
+        this._rotateGizmo.debug = value;
+        this._scaleGizmo.debug = value;
+    }
+
     private _gizmoNode: Object3D;
     public get gizmoNode(): Object3D {
         return this._gizmoNode;

package/src/gizmo/handles/AxisHandle.ts

@@ -20,6 +20,10 @@ export class DIVEAxisHandle
     readonly isHoverable: true = true;
     readonly isDraggable: true = true;
 
+    public set debug(value: boolean) {
+        this._colliderMesh.visible = value;
+    }
+
     public parent: DIVETranslateGizmo | null = null;
 
     public axis: 'x' | 'y' | 'z';
@@ -39,6 +43,8 @@ export class DIVEAxisHandle
 
     private _lineMaterial: MeshBasicMaterial;
 
+    private _colliderMesh: Mesh;
+
     public get forwardVector(): Vector3 {
         return new Vector3(0, 0, 1)
             .applyQuaternion(this.quaternion)
@@ -89,7 +95,7 @@ export class DIVEAxisHandle
         this.add(lineMesh);
 
         // create collider
-        const collider = new CylinderGeometry(0.1, 0.1, length, 3);
+        const colliderGeo = new CylinderGeometry(0.1, 0.1, length, 3);
         const colliderMaterial = new MeshBasicMaterial({
             color: 0xff00ff,
             transparent: true,
@@ -97,13 +103,13 @@ export class DIVEAxisHandle
             depthTest: false,
             depthWrite: false,
         });
-        const colliderMesh = new Mesh(collider, colliderMaterial);
-        colliderMesh.visible = false;
-        colliderMesh.layers.mask = UI_LAYER_MASK;
-        colliderMesh.renderOrder = Infinity;
-        colliderMesh.rotateX(Math.PI / 2);
-        colliderMesh.translateY(length / 2);
-        this.add(colliderMesh);
+        this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
+        this._colliderMesh.visible = false;
+        this._colliderMesh.layers.mask = UI_LAYER_MASK;
+        this._colliderMesh.renderOrder = Infinity;
+        this._colliderMesh.rotateX(Math.PI / 2);
+        this._colliderMesh.translateY(length / 2);
+        this.add(this._colliderMesh);
 
         this.rotateX((direction.y * -Math.PI) / 2);
         this.rotateY((direction.x * Math.PI) / 2);

package/src/gizmo/handles/RadialHandle.ts

@@ -20,6 +20,10 @@ export class DIVERadialHandle
     readonly isHoverable: true = true;
     readonly isDraggable: true = true;
 
+    public set debug(value: boolean) {
+        this._colliderMesh.visible = value;
+    }
+
     public parent: DIVERotateGizmo | null = null;
 
     public axis: 'x' | 'y' | 'z';
@@ -39,6 +43,8 @@ export class DIVERadialHandle
 
     private _lineMaterial: MeshBasicMaterial;
 
+    private _colliderMesh: Mesh;
+
     public get forwardVector(): Vector3 {
         return new Vector3(0, 0, 1)
             .applyQuaternion(this.quaternion)
@@ -87,7 +93,7 @@ export class DIVERadialHandle
         this.add(lineMesh);
 
         // create collider
-        const collider = new TorusGeometry(radius, 0.1, 3, 48, arc);
+        const colliderGeo = new TorusGeometry(radius, 0.1, 3, 48, arc);
         const colliderMaterial = new MeshBasicMaterial({
             color: 0xff00ff,
             transparent: true,
@@ -95,12 +101,12 @@ export class DIVERadialHandle
             depthTest: false,
             depthWrite: false,
         });
-        const colliderMesh = new Mesh(collider, colliderMaterial);
-        colliderMesh.visible = false;
-        colliderMesh.layers.mask = UI_LAYER_MASK;
-        colliderMesh.renderOrder = Infinity;
+        this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
+        this._colliderMesh.visible = false;
+        this._colliderMesh.layers.mask = UI_LAYER_MASK;
+        this._colliderMesh.renderOrder = Infinity;
 
-        this.add(colliderMesh);
+        this.add(this._colliderMesh);
 
         this.lookAt(direction);
     }

package/src/gizmo/handles/ScaleHandle.ts

@@ -21,6 +21,10 @@ export class DIVEScaleHandle
     readonly isHoverable: true = true;
     readonly isDraggable: true = true;
 
+    public set debug(value: boolean) {
+        this._colliderMesh.visible = value;
+    }
+
     public parent: DIVEScaleGizmo | null = null;
 
     public axis: 'x' | 'y' | 'z';
@@ -40,6 +44,8 @@ export class DIVEScaleHandle
 
     private _lineMaterial: MeshBasicMaterial;
 
+    private _colliderMesh: Mesh;
+
     private _box: Mesh;
     private _boxSize: number;
 
@@ -113,7 +119,7 @@ export class DIVEScaleHandle
         this.add(this._box);
 
         // create collider
-        const collider = new CylinderGeometry(
+        const colliderGeo = new CylinderGeometry(
             0.1,
             0.1,
             length + boxSize / 2,
@@ -126,13 +132,13 @@ export class DIVEScaleHandle
             depthTest: false,
             depthWrite: false,
         });
-        const colliderMesh = new Mesh(collider, colliderMaterial);
-        colliderMesh.visible = false;
-        colliderMesh.layers.mask = UI_LAYER_MASK;
-        colliderMesh.renderOrder = Infinity;
-        colliderMesh.rotateX(Math.PI / 2);
-        colliderMesh.translateY(length / 2);
-        this.add(colliderMesh);
+        this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
+        this._colliderMesh.visible = false;
+        this._colliderMesh.layers.mask = UI_LAYER_MASK;
+        this._colliderMesh.renderOrder = Infinity;
+        this._colliderMesh.rotateX(Math.PI / 2);
+        this._colliderMesh.translateY(length / 2);
+        this.add(this._colliderMesh);
 
         this.rotateX((direction.y * -Math.PI) / 2);
         this.rotateY((direction.x * Math.PI) / 2);

package/src/gizmo/rotate/RotateGizmo.ts

@@ -15,6 +15,12 @@ export class DIVERotateGizmo extends Object3D {
 
     private _controller: DIVEOrbitControls;
 
+    public set debug(value: boolean) {
+        this.children.forEach((child) => {
+            child.debug = value;
+        });
+    }
+
     private _startRot: Euler | null;
 
     constructor(controller: DIVEOrbitControls) {

package/src/gizmo/scale/ScaleGizmo.ts

@@ -17,6 +17,12 @@ export class DIVEScaleGizmo extends Object3D implements DIVEHoverable {
 
     private _controller: DIVEOrbitControls;
 
+    public set debug(value: boolean) {
+        this.children.forEach((child) => {
+            child.debug = value;
+        });
+    }
+
     private _startScale: Vector3 | null;
 
     constructor(controller: DIVEOrbitControls) {

package/src/gizmo/translate/TranslateGizmo.ts

@@ -12,6 +12,12 @@ import { DraggableEvent } from '../../toolbox/BaseTool';
 export class DIVETranslateGizmo extends Object3D {
     private _controller: DIVEOrbitControls;
 
+    public set debug(value: boolean) {
+        this.children.forEach((child) => {
+            child.debug = value;
+        });
+    }
+
     public children: DIVEAxisHandle[];
 
     private _startPos: Vector3 | null;

package/src/model/Model.ts

@@ -116,8 +116,13 @@ export class DIVEModel extends DIVENode {
         const worldPos = this.getWorldPosition(this._positionWorldBuffer);
         const oldWorldPos = worldPos.clone();
 
-        // calculate the bottom center of the bounding box and set it to world posion
-        worldPos.y = (this._boundingBox.max.y - this._boundingBox.min.y) / 2;
+        // compute the bounding box
+        this._mesh?.geometry?.computeBoundingBox();
+        const meshBB = this._mesh?.geometry?.boundingBox;
+
+        // subtract the bounding box min y axis value from the world position y value
+        if (!meshBB || !this._mesh) return;
+        worldPos.y = worldPos.y - this._mesh.localToWorld(meshBB.min.clone()).y;
 
         // skip any action when the position did not change
         if (worldPos.y === oldWorldPos.y) return;

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

@@ -9,9 +9,9 @@ import {
     MeshStandardMaterial,
     type Texture,
     Color,
+    Object3D,
 } from 'three';
 import { type COMMaterial } from '../../com/types';
-import { isTypeOnlyImportOrExportDeclaration } from 'typescript';
 
 const intersectObjectsMock = jest.fn();
 
@@ -25,43 +25,43 @@ jest.mock('three', () => {
             this.x = x;
             this.y = y;
             this.z = z;
-            this.copy = (vec3: Vector3) => {
+            this.copy = jest.fn((vec3: Vector3) => {
                 this.x = vec3.x;
                 this.y = vec3.y;
                 this.z = vec3.z;
                 return this;
-            };
-            this.set = (x: number, y: number, z: number) => {
+            });
+            this.set = jest.fn((x: number, y: number, z: number) => {
                 this.x = x;
                 this.y = y;
                 this.z = z;
                 return this;
-            };
-            this.multiply = (vec3: Vector3) => {
+            });
+            this.multiply = jest.fn((vec3: Vector3) => {
                 this.x *= vec3.x;
                 this.y *= vec3.y;
                 this.z *= vec3.z;
                 return this;
-            };
-            this.clone = () => {
+            });
+            this.clone = jest.fn(() => {
                 return new Vector3(this.x, this.y, this.z);
-            };
-            this.setY = (y: number) => {
+            });
+            this.setY = jest.fn((y: number) => {
                 this.y = y;
                 return this;
-            };
-            this.add = (vec3: Vector3) => {
+            });
+            this.add = jest.fn((vec3: Vector3) => {
                 this.x += vec3.x;
                 this.y += vec3.y;
                 this.z += vec3.z;
                 return this;
-            };
-            this.sub = (vec3: Vector3) => {
+            });
+            this.sub = jest.fn((vec3: Vector3) => {
                 this.x -= vec3.x;
                 this.y -= vec3.y;
                 this.z -= vec3.z;
                 return this;
-            };
+            });
             return this;
         }),
         Object3D: jest.fn(function () {
@@ -83,14 +83,7 @@ jest.mock('three', () => {
             };
             this.add = jest.fn();
             this.sub = jest.fn();
-            this.children = [
-                {
-                    visible: true,
-                    material: {
-                        color: {},
-                    },
-                },
-            ];
+            this.children = [];
             this.userData = {};
             this.position = new Vector3();
             this.rotation = {
@@ -105,12 +98,14 @@ jest.mock('three', () => {
                 z: 1,
                 set: jest.fn(),
             };
-            this.localToWorld = (vec3: Vector3) => {
+            this.localToWorld = jest.fn((vec3: Vector3) => {
                 return vec3;
-            };
-            this.mesh = new Mesh();
+            });
             this.traverse = jest.fn((callback) => {
-                callback(this.children[0]);
+                callback(this);
+                this.children.forEach((child: Object3D) => {
+                    callback(child);
+                });
             });
             this.getWorldPosition = jest.fn(() => {
                 return this.position.clone();
@@ -136,11 +131,12 @@ jest.mock('three', () => {
             return this;
         }),
         Mesh: jest.fn(function () {
+            this.isMesh = true;
             this.geometry = {
                 computeBoundingBox: jest.fn(),
                 boundingBox: new Box3(),
             };
-            this.material = {};
+            this.material = new MeshStandardMaterial();
             this.castShadow = true;
             this.receiveShadow = true;
             this.layers = {
@@ -149,9 +145,9 @@ jest.mock('three', () => {
             this.updateWorldMatrix = jest.fn();
             this.traverse = jest.fn();
             this.removeFromParent = jest.fn();
-            this.localToWorld = (vec3: Vector3) => {
+            this.localToWorld = jest.fn((vec3: Vector3) => {
                 return vec3;
-            };
+            });
             return this;
         }),
         MeshStandardMaterial: jest.fn(function () {
@@ -181,33 +177,12 @@ jest.mock('../../com/Communication.ts', () => {
     };
 });
 
+const object = new Object3D();
+object.children.push(new Mesh());
+
 const gltf = {
     scene: {
-        isMesh: true,
-        isObject3D: true,
-        parent: null,
-        dispatchEvent: jest.fn(),
-        layers: {
-            mask: 0,
-        },
-        material: {},
-        updateWorldMatrix: jest.fn(),
-        children: [
-            {
-                castShadow: false,
-                receiveShadow: false,
-                layers: {
-                    mask: 0,
-                },
-                children: [],
-                updateWorldMatrix: jest.fn(),
-                isMesh: true,
-            },
-        ],
-        traverse: function (callback: (object: object) => void) {
-            callback(this);
-        },
-        removeFromParent: jest.fn(),
+        ...object,
     },
 } as unknown as GLTF;
 
@@ -236,38 +211,38 @@ describe('dive/model/DIVEModel', () => {
     });
 
     it('should place on floor', () => {
+        model.SetModel(gltf);
+
         const com = DIVECommunication.get('id')!;
         const spyPerformAction = jest.spyOn(com, 'PerformAction');
 
         model.userData.id = 'something';
+        model.position.set(0, 4, 0);
 
-        model['_boundingBox'] = {
-            min: new Vector3(0, 1, 0),
-            max: new Vector3(1, 4, 1),
-        } as unknown as Box3;
+        jest.spyOn(model['_mesh']!, 'localToWorld').mockReturnValueOnce(
+            new Vector3(0, 2, 0),
+        );
+
+        const scene = {
+            parent: null,
+            Root: {
+                children: [
+                    model,
+                ],
+            },
+        } as unknown as DIVEScene;
+        scene.Root.parent = scene;
+        model.parent = scene.Root;
 
         expect(() => model.PlaceOnFloor()).not.toThrow();
         expect(spyPerformAction).toHaveBeenCalledWith(
             'UPDATE_OBJECT',
             expect.objectContaining({
                 position: expect.objectContaining({
-                    y: 1.5,
+                    y: 2,
                 }),
             }),
         );
-
-        // skip any action when the position did not change
-        spyPerformAction.mockClear();
-        model.position.y = 1.5;
-        expect(() => model.PlaceOnFloor()).not.toThrow();
-        expect(spyPerformAction).not.toHaveBeenCalled();
-
-        // mock that the communication is not available
-        spyPerformAction.mockClear();
-        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        model.position.y = 0;
-        expect(() => model.PlaceOnFloor()).not.toThrow();
-        expect(spyPerformAction).not.toHaveBeenCalled();
     });
 
     it('should drop it', () => {

package/src/primitive/Primitive.ts

@@ -111,8 +111,13 @@ export class DIVEPrimitive extends DIVENode {
         const worldPos = this.getWorldPosition(this._positionWorldBuffer);
         const oldWorldPos = worldPos.clone();
 
-        // calculate the bottom center of the bounding box and set it to world posion
-        worldPos.y = (this._boundingBox.max.y - this._boundingBox.min.y) / 2;
+        // compute the bounding box
+        this._mesh?.geometry?.computeBoundingBox();
+        const meshBB = this._mesh?.geometry?.boundingBox;
+
+        // subtract the bounding box min y axis value from the world position y value
+        if (!meshBB || !this._mesh) return;
+        worldPos.y = worldPos.y - this._mesh.localToWorld(meshBB.min.clone()).y;
 
         // skip any action when the position did not change
         if (worldPos.y === oldWorldPos.y) return;

package/src/primitive/__test__/Primitive.test.ts

@@ -139,7 +139,15 @@ jest.mock('three', () => {
         Mesh: jest.fn(function () {
             this.geometry = {
                 computeBoundingBox: jest.fn(),
-                boundingBox: new Box3(),
+                boundingBox: {
+                    min: new Vector3(0, 2, 0),
+                    max: new Vector3(2, 4, 2),
+                    getCenter: jest.fn(() => {
+                        return new Vector3(0, 0, 0);
+                    }),
+                    expandByObject: jest.fn(),
+                    setFromObject: jest.fn(),
+                },
             };
             this.material = {};
             this.castShadow = true;
@@ -258,34 +266,33 @@ describe('dive/primitive/DIVEPrimitive', () => {
         const spyPerformAction = jest.spyOn(com, 'PerformAction');
 
         primitive.userData.id = 'something';
-
+        primitive.position.set(0, 2, 0);
         primitive['_boundingBox'] = {
-            min: new Vector3(0, 1, 0),
-            max: new Vector3(0, 4, 0),
+            min: new Vector3(0, -2, 0),
+            setFromObject: jest.fn(),
         } as unknown as Box3;
 
+        const scene = {
+            parent: null,
+            Root: {
+                children: [
+                    primitive,
+                ],
+            },
+        } as unknown as DIVEScene;
+        scene.Root.parent = scene;
+
+        primitive.parent = scene.Root;
+
         expect(() => primitive.PlaceOnFloor()).not.toThrow();
         expect(spyPerformAction).toHaveBeenCalledWith(
             'UPDATE_OBJECT',
             expect.objectContaining({
                 position: expect.objectContaining({
-                    y: 1.5,
+                    y: 0,
                 }),
             }),
         );
-
-        // skip any action when the position did not change
-        spyPerformAction.mockClear();
-        primitive.position.y = 1.5;
-        expect(() => primitive.PlaceOnFloor()).not.toThrow();
-        expect(spyPerformAction).not.toHaveBeenCalled();
-
-        // mock that the communication is not available
-        spyPerformAction.mockClear();
-        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        primitive.position.y = 0;
-        expect(() => primitive.PlaceOnFloor()).not.toThrow();
-        expect(spyPerformAction).not.toHaveBeenCalled();
     });
 
     it('should drop it', () => {