@shopware-ag/dive 1.14.0 → 1.15.0

package/package.json

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

package/src/group/Group.ts

@@ -1,15 +1,11 @@
-import { Box3, BoxGeometry, Mesh, MeshBasicMaterial, Object3D, Vector3, type Vector3Like } from "three";
-import { type DIVEMoveable } from "../interface/Moveable";
-import { type DIVESelectable } from "../interface/Selectable";
-import { type DIVESceneObject } from "../types";
+import { BoxGeometry, Mesh, MeshBasicMaterial, Vector3 } from "three";
+import { DIVENode } from "../node/Node";
 import { DIVECommunication } from "../com/Communication";
+import { type DIVESceneObject } from "../types";
 
-export class DIVEGroup extends Object3D implements DIVESelectable, DIVEMoveable {
+export class DIVEGroup extends DIVENode {
     readonly isDIVEGroup: true = true;
-    readonly isSelectable: true = true;
-    readonly isMoveable: true = true;
 
-    private _bb: Box3;
     private _boxMesh: Mesh;
 
     constructor() {
@@ -17,32 +13,11 @@ export class DIVEGroup extends Object3D implements DIVESelectable, DIVEMoveable
 
         this.name = 'DIVEGroup';
 
-        this._bb = new Box3();
-
         this._boxMesh = new Mesh(new BoxGeometry(0, 0, 0), new MeshBasicMaterial({ color: 0xff0000, wireframe: true }));
         this._boxMesh.visible = false;
         this.add(this._boxMesh);
     }
 
-    public SetPosition(position: Vector3Like): void {
-        this.position.set(position.x, position.y, position.z);
-    }
-
-    public SetRotation(rotation: Vector3Like): void {
-        this.rotation.setFromVector3(new Vector3(rotation.x, rotation.y, rotation.z));
-    }
-
-    public SetScale(scale: Vector3Like): void {
-        this.scale.set(scale.x, scale.y, scale.z);
-    }
-
-    public SetVisibility(visible: boolean): void {
-        this.traverse((child) => {
-            if (child.uuid === this._boxMesh.uuid) return;
-            child.visible = visible;
-        });
-    }
-
     public SetBoundingBoxVisibility(visible: boolean): void {
         this._boxMesh.visible = visible;
     }
@@ -99,28 +74,24 @@ export class DIVEGroup extends Object3D implements DIVESelectable, DIVEMoveable
      * @returns {Vector3} The new center of the bounding box.
      */
     private updateBB(): Vector3 {
-        this._bb.makeEmpty();
+        this._boundingBox.makeEmpty();
         this.children.forEach((child) => {
             if (child.uuid === this._boxMesh.uuid) return;
-            this._bb.expandByObject(child);
+            this._boundingBox.expandByObject(child);
         });
 
-        return this._bb.getCenter(new Vector3());
+        return this._boundingBox.getCenter(new Vector3());
     }
 
     private updateBoxMesh(): void {
-        this._boxMesh.geometry = new BoxGeometry(this._bb.max.x - this._bb.min.x, this._bb.max.y - this._bb.min.y, this._bb.max.z - this._bb.min.z);
+        this._boxMesh.quaternion.copy(this.quaternion.clone().invert());
+        this._boxMesh.scale.set(1 / this.scale.x, 1 / this.scale.y, 1 / this.scale.z);
+        this._boxMesh.geometry = new BoxGeometry(this._boundingBox.max.x - this._boundingBox.min.x, this._boundingBox.max.y - this._boundingBox.min.y, this._boundingBox.max.z - this._boundingBox.min.z);
     }
 
     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 });
+        super.onMove();
+        this.updateBB();
+        this.updateBoxMesh();
     }
 }

package/src/group/__test__/Group.test.ts

@@ -1,4 +1,3 @@
-import { type GLTF } from "three/examples/jsm/loaders/GLTFLoader";
 import { DIVECommunication } from "../../com/Communication";
 import { DIVEGroup } from "../Group";
 
@@ -31,22 +30,6 @@ describe('dive/group/DIVEGroup', () => {
         expect(group).toBeDefined();
     });
 
-    it('should set position', () => {
-        expect(() => group.SetPosition({ x: 0, y: 0, z: 0 })).not.toThrow();
-    });
-
-    it('should set rotation', () => {
-        expect(() => group.SetRotation({ x: 0, y: 0, z: 0 })).not.toThrow();
-    });
-
-    it('should set scale', () => {
-        expect(() => group.SetScale({ x: 1, y: 1, z: 1 })).not.toThrow();
-    });
-
-    it('should set visibility', () => {
-        expect(() => group.SetVisibility(true)).not.toThrow();
-    });
-
     it('should set bounding box visibility', () => {
         expect(() => group.SetBoundingBoxVisibility(true)).not.toThrow();
     });
@@ -97,4 +80,13 @@ describe('dive/group/DIVEGroup', () => {
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
         expect(() => group.onDeselect()).not.toThrow();
     });
+
+    it('should onMove', () => {
+        group.userData.id = 'something';
+
+        expect(() => group.onMove()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => group.onMove()).not.toThrow();
+    });
 });

package/src/model/Model.ts

@@ -1,11 +1,10 @@
-import { Box3, Mesh, MeshStandardMaterial, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
-import { DIVESelectable } from '../interface/Selectable';
+import { Mesh, MeshStandardMaterial, Raycaster, Vector3 } from 'three';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
-import { DIVEMoveable } from '../interface/Moveable';
 import { DIVECommunication } from '../com/Communication';
-import type { GLTF, TransformControls } from 'three/examples/jsm/Addons.js';
+import type { GLTF } from 'three/examples/jsm/Addons.js';
 import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
 import { type COMMaterial } from '../com/types';
+import { DIVENode } from '../node/Node';
 
 /**
  * A basic model class.
@@ -17,26 +16,12 @@ import { type COMMaterial } from '../com/types';
  * @module
  */
 
-export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable {
+export class DIVEModel extends DIVENode {
     readonly isDIVEModel: true = true;
-    readonly isSelectable: true = true;
-    readonly isMoveable: true = true;
-
-    public gizmo: TransformControls | null = null;
-
-    private boundingBox: Box3;
 
     private _mesh: Mesh | null = null;
     private _material: MeshStandardMaterial | null = null;
 
-    constructor() {
-        super();
-
-        this.layers.mask = PRODUCT_LAYER_MASK;
-
-        this.boundingBox = new Box3();
-    }
-
     public SetModel(gltf: GLTF): void {
         this.clear();
 
@@ -45,7 +30,7 @@ export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable
             child.receiveShadow = true;
 
             child.layers.mask = this.layers.mask;
-            this.boundingBox.expandByObject(child);
+            this._boundingBox.expandByObject(child);
 
             // only search for first mesh for now
             if (!this._mesh && 'isMesh' in child) {
@@ -63,24 +48,6 @@ export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable
         this.add(gltf.scene);
     }
 
-    public SetPosition(position: Vector3Like): void {
-        this.position.set(position.x, position.y, position.z);
-    }
-
-    public SetRotation(rotation: Vector3Like): void {
-        this.rotation.setFromVector3(new Vector3(rotation.x, rotation.y, rotation.z));
-    }
-
-    public SetScale(scale: Vector3Like): void {
-        this.scale.set(scale.x, scale.y, scale.z);
-    }
-
-    public SetVisibility(visible: boolean): void {
-        this.traverse((child) => {
-            child.visible = visible;
-        });
-    }
-
     public SetMaterial(material: Partial<COMMaterial>): void {
         // if there is no material, create a new one
         if (!this._material) {
@@ -142,13 +109,8 @@ export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable
         }
     }
 
-    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 });
-    }
-
     public PlaceOnFloor(): void {
-        this.position.y = -this.boundingBox.min.y * this.scale.y;
+        this.position.y = -this._boundingBox.min.y * this.scale.y;
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
     }
 
@@ -159,8 +121,8 @@ export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable
         }
 
         // calculate the bottom center of the bounding box
-        const bottomY = this.boundingBox.min.y * this.scale.y;
-        const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new Vector3()).multiply(this.scale));
+        const bottomY = this._boundingBox.min.y * this.scale.y;
+        const bbBottomCenter = this.localToWorld(this._boundingBox.getCenter(new Vector3()).multiply(this.scale));
         bbBottomCenter.y = bottomY + this.position.y;
 
         // set up raycaster and raycast all scene objects (product layer)
@@ -184,16 +146,4 @@ export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable
             DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
         }
     }
-
-    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

@@ -214,34 +214,6 @@ describe('dive/model/DIVEModel', () => {
         expect(() => model.SetModel(gltf)).not.toThrow();
     });
 
-    it('should set position', () => {
-        expect(() => model.SetPosition({ x: 0, y: 0, z: 0 })).not.toThrow();
-    });
-
-    it('should set rotation', () => {
-        expect(() => model.SetRotation({ x: 0, y: 0, z: 0 })).not.toThrow();
-    });
-
-    it('should set scale', () => {
-        expect(() => model.SetScale({ x: 1, y: 1, z: 1 })).not.toThrow();
-    });
-
-    it('should set visibility', () => {
-        expect(() => model.SetVisibility(true)).not.toThrow();
-    });
-
-    it('should set to world origin', () => {
-        model.userData.id = 'something';
-
-        expect(() => model.SetToWorldOrigin()).not.toThrow();
-        expect(model.position.x).toBe(0);
-        expect(model.position.y).toBe(0);
-        expect(model.position.z).toBe(0);
-
-        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        expect(() => model.SetToWorldOrigin()).not.toThrow();
-    });
-
     it('should place on floor', () => {
         model.userData.id = 'something';
 
@@ -265,7 +237,7 @@ describe('dive/model/DIVEModel', () => {
 
         model.userData.id = 'something';
         model.position.set(0, 4, 0);
-        model['boundingBox'] = {
+        model['_boundingBox'] = {
             min: new Vector3(-size.x / 2, -size.y / 2, -size.z / 2),
             max: new Vector3(size.x / 2, size.y / 2, size.z / 2),
             getCenter: jest.fn(() => {
@@ -315,33 +287,6 @@ describe('dive/model/DIVEModel', () => {
 
     });
 
-    it('should onMove', () => {
-        model.userData.id = 'something';
-
-        expect(() => model.onMove()).not.toThrow();
-
-        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        expect(() => model.onMove()).not.toThrow();
-    });
-
-    it('should onSelect', () => {
-        model.userData.id = 'something';
-
-        expect(() => model.onSelect()).not.toThrow();
-
-        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        expect(() => model.onSelect()).not.toThrow();
-    });
-
-    it('should onDeselect', () => {
-        model.userData.id = 'something';
-
-        expect(() => model.onDeselect()).not.toThrow();
-
-        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        expect(() => model.onDeselect()).not.toThrow();
-    });
-
     it('should set material', () => {
         // apply invalid material should not crash
         expect(() => model.SetMaterial({} as COMMaterial)).not.toThrow();

package/src/node/Node.ts

@@ -0,0 +1,58 @@
+import { Box3, Object3D, type Vector3Like } from "three";
+import { PRODUCT_LAYER_MASK } from "../constant/VisibilityLayerMask";
+import { DIVECommunication } from "../com/Communication";
+
+import { type DIVEMoveable } from "../interface/Moveable";
+import { type DIVESelectable } from "../interface/Selectable";
+import { type TransformControls } from "three/examples/jsm/controls/TransformControls";
+
+export class DIVENode extends Object3D implements DIVESelectable, DIVEMoveable {
+    readonly isDIVENode: true = true;
+    readonly isSelectable: true = true;
+    readonly isMoveable: true = true;
+
+    public gizmo: TransformControls | null = null;
+
+    protected _boundingBox: Box3;
+
+    constructor() {
+        super();
+
+        this.layers.mask = PRODUCT_LAYER_MASK;
+
+        this._boundingBox = new Box3();
+    }
+
+    public SetPosition(position: Vector3Like): void {
+        this.position.set(position.x, position.y, position.z);
+    }
+
+    public SetRotation(rotation: Vector3Like): void {
+        this.rotation.set(rotation.x, rotation.y, rotation.z);
+    }
+
+    public SetScale(scale: Vector3Like): void {
+        this.scale.set(scale.x, scale.y, scale.z);
+    }
+
+    public SetVisibility(visible: boolean): void {
+        this.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 });
+    }
+
+    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/node/__test__/Node.test.ts

@@ -0,0 +1,229 @@
+import { DIVENode } from '../Node';
+import { DIVECommunication } from '../../com/Communication';
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+import { Vector3, Box3, Mesh, Color, Euler } from 'three';
+
+const intersectObjectsMock = jest.fn();
+
+jest.mock('three', () => {
+    return {
+        Vector3: jest.fn(function (x: number, y: number, z: number) {
+            this.x = x;
+            this.y = y;
+            this.z = z;
+            this.copy = (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.x = x;
+                this.y = y;
+                this.z = z;
+                return this;
+            };
+            this.multiply = (vec3: Vector3) => {
+                this.x *= vec3.x;
+                this.y *= vec3.y;
+                this.z *= vec3.z;
+                return this;
+            };
+            this.clone = () => {
+                return new Vector3(this.x, this.y, this.z);
+            };
+            this.setY = (y: number) => {
+                this.y = y;
+                return this;
+            }
+            this.add = (vec3: Vector3) => {
+                this.x += vec3.x;
+                this.y += vec3.y;
+                this.z += vec3.z;
+                return this;
+            };
+            this.sub = (vec3: Vector3) => {
+                this.x -= vec3.x;
+                this.y -= vec3.y;
+                this.z -= vec3.z;
+                return this;
+            };
+            return this;
+        }),
+        Euler: jest.fn(function () {
+            this.set = jest.fn();
+            return this;
+        }),
+        Object3D: jest.fn(function () {
+            this.clear = jest.fn();
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            }
+            this.add = jest.fn();
+            this.sub = jest.fn();
+            this.children = [{
+                visible: true,
+                material: {
+                    color: {},
+                },
+            }];
+            this.userData = {};
+            this.position = new Vector3();
+            this.rotation = new Euler();
+            this.scale = new Vector3(1, 1, 1);
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.mesh = new Mesh();
+            this.traverse = jest.fn((callback) => {
+                callback(this.children[0])
+            });
+            return this;
+        }),
+        Box3: jest.fn(function () {
+            this.min = new Vector3(Infinity, Infinity, Infinity);
+            this.max = new Vector3(-Infinity, -Infinity, -Infinity);
+            this.getCenter = jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            });
+            this.expandByObject = jest.fn();
+
+            return this;
+        }),
+        Raycaster: jest.fn(function () {
+            this.intersectObjects = intersectObjectsMock;
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+        Mesh: jest.fn(function () {
+            this.geometry = {
+                computeBoundingBox: jest.fn(),
+                boundingBox: new Box3(),
+            };
+            this.material = {};
+            this.castShadow = true;
+            this.receiveShadow = true;
+            this.layers = {
+                mask: 0,
+            };
+            this.updateWorldMatrix = jest.fn();
+            this.traverse = jest.fn();
+            this.removeFromParent = jest.fn();
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            return this;
+        }),
+        MeshStandardMaterial: jest.fn(function () {
+            this.color = new Color();
+            this.roughness = 1;
+            this.roughnessMap = undefined;
+            this.metalness = 0;
+            this.metalnessMap = undefined;
+            return this;
+        }),
+        Color: jest.fn(function () {
+            this.set = jest.fn();
+            return this;
+        }),
+    }
+});
+
+jest.mock('../../com/Communication.ts', () => {
+    return {
+        DIVECommunication: {
+            get: jest.fn(() => {
+                return {
+                    PerformAction: jest.fn(),
+                }
+            }),
+        },
+    }
+});
+
+jest.spyOn(DIVECommunication, 'get').mockReturnValue({ PerformAction: jest.fn() } as unknown as DIVECommunication);
+
+let node: DIVENode;
+
+describe('dive/node/DIVENode', () => {
+    beforeEach(() => {
+        node = new DIVENode();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should instantiate', () => {
+        expect(node).toBeDefined();
+    });
+
+    it('should set position', () => {
+        expect(() => node.SetPosition({ x: 0, y: 0, z: 0 })).not.toThrow();
+    });
+
+    it('should set rotation', () => {
+        expect(() => node.SetRotation({ x: 0, y: 0, z: 0 })).not.toThrow();
+    });
+
+    it('should set scale', () => {
+        expect(() => node.SetScale({ x: 1, y: 1, z: 1 })).not.toThrow();
+    });
+
+    it('should set visibility', () => {
+        expect(() => node.SetVisibility(true)).not.toThrow();
+    });
+
+    it('should set to world origin', () => {
+        node.userData.id = 'something';
+
+        expect(() => node.SetToWorldOrigin()).not.toThrow();
+        expect(node.position.x).toBe(0);
+        expect(node.position.y).toBe(0);
+        expect(node.position.z).toBe(0);
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => node.SetToWorldOrigin()).not.toThrow();
+    });
+
+    it('should onMove', () => {
+        node.userData.id = 'something';
+
+        expect(() => node.onMove()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => node.onMove()).not.toThrow();
+    });
+
+    it('should onSelect', () => {
+        node.userData.id = 'something';
+
+        expect(() => node.onSelect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => node.onSelect()).not.toThrow();
+    });
+
+    it('should onDeselect', () => {
+        node.userData.id = 'something';
+
+        expect(() => node.onDeselect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => node.onDeselect()).not.toThrow();
+    });
+});