@shopware-ag/dive 1.12.1 → 1.14.0

package/src/com/types/COMPrimitive.ts

@@ -0,0 +1,12 @@
+import { type Vector3Like } from "three";
+import { type COMBaseEntity } from "./COMBaseEntity";
+import { type COMGeometry } from "./COMGeometry";
+import { type COMMaterial } from "./COMMaterial";
+
+export type COMPrimitive = COMBaseEntity & {
+    position: Vector3Like;
+    rotation: Vector3Like;
+    scale: Vector3Like;
+    geometry: COMGeometry;
+    material?: Partial<COMMaterial>;
+};

package/src/com/types/index.ts

@@ -0,0 +1,21 @@
+import { type COMEntity } from "./COMEntity";
+import { type COMPrimitive } from "./COMPrimitive";
+import { type COMModel } from "./COMModel";
+import { type COMLight } from "./COMLight";
+import { type COMPov } from "./COMPov";
+import { type COMGeometry } from "./COMGeometry";
+import { type COMMaterial } from "./COMMaterial";
+import { type COMGroup } from "./COMGroup";
+import { type COMEntityType } from "./COMEntityType";
+
+export type {
+    COMEntity,
+    COMPrimitive,
+    COMModel,
+    COMLight,
+    COMPov,
+    COMGeometry,
+    COMMaterial,
+    COMGroup,
+    COMEntityType,
+}

package/src/dive.ts

@@ -1,16 +1,13 @@
 import { DIVERenderer, DIVERendererDefaultSettings, DIVERendererSettings } from "./renderer/Renderer.ts";
-import DIVEScene from "./scene/Scene.ts";
+import { DIVEScene } from "./scene/Scene.ts";
 import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings, DIVEPerspectiveCameraSettings } from "./camera/PerspectiveCamera.ts";
 import DIVEOrbitControls, { DIVEOrbitControlsDefaultSettings, DIVEOrbitControlsSettings } from "./controls/OrbitControls.ts";
 import DIVEToolbox from "./toolbox/Toolbox.ts";
-import DIVECommunication from "./com/Communication.ts";
+import { DIVECommunication } from "./com/Communication.ts";
 import { DIVEAnimationSystem } from "./animation/AnimationSystem.ts";
 import DIVEAxisCamera from "./axiscamera/AxisCamera.ts";
 import { getObjectDelta } from "./helper/getObjectDelta/getObjectDelta.ts";
 
-import type { Actions } from './com/actions/index.ts';
-import type { COMPov, COMLight, COMModel, COMEntity, COMPrimitive } from './com/types.ts';
-import { DIVEMath } from './math/index.ts';
 import { generateUUID } from "three/src/math/MathUtils";
 import { DIVEInfo } from "./info/Info.ts";
 
@@ -273,17 +270,13 @@ export default class DIVE {
     }
 }
 
-export type {
-    Actions,
-    COMPov,
-    COMLight,
-    COMModel,
-    COMPrimitive,
-    COMEntity,
-};
-
 export {
     DIVE,
     DIVECommunication,
-    DIVEMath,
-}
+}
+
+export * from './math/index.ts';
+
+export type * from './com/actions/index.ts';
+export type * from './com/types';
+

package/src/grid/Grid.ts

@@ -8,7 +8,7 @@ import { GridHelper, Object3D } from "three";
  * @module
  */
 
-export default class DIVEGrid extends Object3D {
+export class DIVEGrid extends Object3D {
     constructor() {
         super();
         this.name = 'Grid';

package/src/grid/__test__/Grid.test.ts

@@ -1,4 +1,4 @@
-import DIVEGrid from '../Grid.ts';
+import { DIVEGrid } from '../Grid.ts';
 import { HELPER_LAYER_MASK } from "../../constant/VisibilityLayerMask.ts";
 import { GridHelper } from 'three';
 

package/src/group/Group.ts

@@ -0,0 +1,126 @@
+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 { DIVECommunication } from "../com/Communication";
+
+export class DIVEGroup extends Object3D implements DIVESelectable, DIVEMoveable {
+    readonly isDIVEGroup: true = true;
+    readonly isSelectable: true = true;
+    readonly isMoveable: true = true;
+
+    private _bb: Box3;
+    private _boxMesh: Mesh;
+
+    constructor() {
+        super();
+
+        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;
+    }
+
+    public attach(object: DIVESceneObject): this {
+        // attach (insted of add) object to keep it's world position
+        super.attach(object);
+
+        // set position to it's bb's center
+        this.recalculatePosition();
+
+        // update box mesh
+        this.updateBoxMesh();
+
+        return this;
+    }
+
+    public remove(object: DIVESceneObject): this {
+        // removes object from group while keeping it's world position
+        super.remove(object);
+
+        // set position to it's bb's center
+        this.recalculatePosition();
+
+        // update box mesh
+        this.updateBoxMesh();
+
+        return this;
+    }
+
+    /**
+     * Recalculates the position of the group based on it's bounding box.
+     * Children's world positions are kept.
+     */
+    private recalculatePosition(): void {
+        // store all children's world positions
+        const childrensWorldPositions: Vector3[] = this.children.map((child) => child.getWorldPosition(new Vector3()));
+
+        // calculate new center and set it as the group's position
+        const bbcenter = this.updateBB();
+        this.position.copy(bbcenter);
+
+        // set childrens's positions so their world positions are kept
+        this.children.forEach((child, i) => {
+            if (child.uuid === this._boxMesh.uuid) return;
+            child.position.copy(this.worldToLocal(childrensWorldPositions[i]));
+        });
+
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position });
+    }
+
+    /**
+     * Updates the bounding box of the group.
+     * @returns {Vector3} The new center of the bounding box.
+     */
+    private updateBB(): Vector3 {
+        this._bb.makeEmpty();
+        this.children.forEach((child) => {
+            if (child.uuid === this._boxMesh.uuid) return;
+            this._bb.expandByObject(child);
+        });
+
+        return this._bb.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);
+    }
+
+    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/group/__test__/Group.test.ts

@@ -0,0 +1,100 @@
+import { type GLTF } from "three/examples/jsm/loaders/GLTFLoader";
+import { DIVECommunication } from "../../com/Communication";
+import { DIVEGroup } from "../Group";
+
+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 group: DIVEGroup;
+
+describe('dive/group/DIVEGroup', () => {
+    beforeEach(() => {
+        group = new DIVEGroup();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should instantiate', () => {
+        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();
+    });
+
+    it('should add an object', () => {
+        const mockObject = new DIVEGroup();
+
+        expect(() => group.attach(mockObject)).not.toThrow();
+        expect(group.children).toContain(mockObject);
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => group.attach(mockObject)).not.toThrow();
+    });
+
+    it('should remove an object', () => {
+        const mockObject = new DIVEGroup();
+
+        expect(() => group.remove(mockObject)).not.toThrow();
+        expect(group.children).not.toContain(mockObject);
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => group.remove(mockObject)).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();
+    });
+
+    it('should onSelect', () => {
+        group.userData.id = 'something';
+
+        expect(() => group.onSelect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => group.onSelect()).not.toThrow();
+    });
+
+    it('should onDeselect', () => {
+        group.userData.id = 'something';
+
+        expect(() => group.onDeselect()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => group.onDeselect()).not.toThrow();
+    });
+});

package/src/helper/findSceneRecursive/findSceneRecursive.ts

@@ -1,5 +1,5 @@
 import type { Object3D } from 'three';
-import type DIVEScene from '../../scene/Scene';
+import type { DIVEScene } from '../../scene/Scene';
 
 /**
  * Find the scene object of an object.

package/src/light/AmbientLight.ts

@@ -10,6 +10,9 @@ import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
  */
 
 export default class DIVEAmbientLight extends Object3D {
+    readonly isDIVELight: true = true;
+    readonly isDIVEAmbientLight: true = true;
+
     private _light: AmbientLight;
 
     constructor() {

package/src/light/PointLight.ts

@@ -1,5 +1,5 @@
 import { PointLight, Color, SphereGeometry, MeshBasicMaterial, Mesh, FrontSide, Object3D } from 'three';
-import DIVECommunication from '../com/Communication';
+import { DIVECommunication } from '../com/Communication';
 import { PRODUCT_LAYER_MASK, UI_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { DIVEMoveable } from '../interface/Moveable';
 import { DIVESelectable } from '../interface/Selectable';
@@ -16,8 +16,11 @@ import type { TransformControls } from 'three/examples/jsm/Addons.js';
  */
 
 export default class DIVEPointLight extends Object3D implements DIVESelectable, DIVEMoveable {
-    public isMoveable: true = true;
-    public isSelectable: true = true;
+    readonly isDIVELight: true = true;
+    readonly isDIVEPointLight: true = true;
+    readonly isMoveable: true = true;
+    readonly isSelectable: true = true;
+
     public gizmo: TransformControls | null = null;
 
     private light: PointLight;

package/src/light/SceneLight.ts

@@ -10,6 +10,8 @@ import { Color, DirectionalLight, HemisphereLight, Object3D } from "three";
  */
 
 export default class DIVESceneLight extends Object3D {
+    readonly isDIVELight: true = true;
+    readonly isDIVESceneLight: true = true;
 
     private _hemiLight: HemisphereLight;
     private _dirLight: DirectionalLight;

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

@@ -1,5 +1,5 @@
 import DIVEPointLight from '../PointLight.ts';
-import DIVECommunication from '../../com/Communication.ts';
+import { DIVECommunication } from '../../com/Communication.ts';
 import { Color, MeshBasicMaterial, Object3D, PointLight } from 'three';
 
 const mockAdd = jest.fn();
@@ -63,11 +63,13 @@ jest.mock('three', () => {
 
 jest.mock('../../com/Communication.ts', () => {
     return {
-        get: jest.fn(() => {
-            return {
-                PerformAction: jest.fn(),
-            }
-        }),
+        DIVECommunication: {
+            get: jest.fn(() => {
+                return {
+                    PerformAction: jest.fn(),
+                }
+            }),
+        },
     }
 });
 

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

@@ -1,14 +1,16 @@
 import DIVESceneLight from '../SceneLight';
-import DIVECommunication from '../../com/Communication';
+import { DIVECommunication } from '../../com/Communication';
 import { Color, HemisphereLight as THREEHemisphereLight, DirectionalLight as THREEDirectionalLight, Object3D } from 'three';
 
 jest.mock('../../com/Communication.ts', () => {
     return {
-        get: jest.fn(() => {
-            return {
-                PerformAction: jest.fn(),
-            }
-        }),
+        DIVECommunication: {
+            get: jest.fn(() => {
+                return {
+                    PerformAction: jest.fn(),
+                }
+            }),
+        },
     }
 });
 

package/src/loadingmanager/LoadingManager.ts

@@ -6,7 +6,7 @@ import { DRACOLoader, GLTF, GLTFLoader } from "three/examples/jsm/Addons.js";
  * @module
  */
 
-export default class DIVELoadingManager {
+export class DIVELoadingManager {
     private gltfloader: GLTFLoader;
     private dracoloader: DRACOLoader;
     // ... maybe extend with other loaders later

package/src/loadingmanager/__test__/LoadingManager.test.ts

@@ -1,4 +1,4 @@
-import DIVELoadingManager from '../LoadingManager';
+import { DIVELoadingManager } from '../LoadingManager';
 
 const mock_setDRACOLoader = jest.fn();
 const mock_setDecoderPath = jest.fn();

package/src/mediacreator/MediaCreator.ts

@@ -1,5 +1,5 @@
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
-import DIVEScene from "../scene/Scene.ts";
+import { DIVEScene } from "../scene/Scene.ts";
 import { DIVERenderer } from "../renderer/Renderer.ts";
 import DIVEOrbitControls from "../controls/OrbitControls.ts";
 import { Vector3Like } from "three";

package/src/mediacreator/__test__/MediaCreator.test.ts

@@ -1,6 +1,6 @@
 import { DIVEMediaCreator } from '../MediaCreator';
 import { DIVERenderer } from '../../renderer/Renderer';
-import DIVEScene from '../../scene/Scene';
+import { DIVEScene } from '../../scene/Scene';
 import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../../camera/PerspectiveCamera';
 import { type COMPov } from '../../com/types';
 import DIVEOrbitControls from '../../controls/OrbitControls';
@@ -14,9 +14,11 @@ const mock_render = jest.fn();
 const mock_toDataURL = jest.fn();
 
 jest.mock('../../scene/Scene', () => {
-    return jest.fn(() => {
-        return {};
-    });
+    return {
+        DIVEScene: jest.fn(() => {
+            return {};
+        })
+    };
 });
 
 jest.mock('../../camera/PerspectiveCamera', () => {

package/src/model/Model.ts

@@ -1,8 +1,8 @@
-import { Box3, Color, Mesh, MeshStandardMaterial, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
+import { Box3, Mesh, MeshStandardMaterial, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
 import { DIVESelectable } from '../interface/Selectable';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { DIVEMoveable } from '../interface/Moveable';
-import DIVECommunication from '../com/Communication';
+import { DIVECommunication } from '../com/Communication';
 import type { GLTF, TransformControls } from 'three/examples/jsm/Addons.js';
 import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
 import { type COMMaterial } from '../com/types';
@@ -17,9 +17,11 @@ import { type COMMaterial } from '../com/types';
  * @module
  */
 
-export default class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable {
-    public isSelectable: true = true;
-    public isMoveable: true = true;
+export class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable {
+    readonly isDIVEModel: true = true;
+    readonly isSelectable: true = true;
+    readonly isMoveable: true = true;
+
     public gizmo: TransformControls | null = null;
 
     private boundingBox: Box3;
@@ -91,7 +93,7 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
 
         // apply color if supplied
         if (material.color !== undefined) {
-            this._material.color = new Color(material.color);
+            this._material.color.set(material.color);
         }
 
         // apply albedo map if supplied
@@ -137,7 +139,6 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
         // if the mesh is already set, update the material
         if (this._mesh) {
             this._mesh.material = this._material;
-            this._mesh.material.needsUpdate = true;
         }
     }
 

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

@@ -1,7 +1,7 @@
-import Model from '../Model';
-import DIVECommunication from '../../com/Communication';
+import { DIVEModel } from '../Model';
+import { DIVECommunication } from '../../com/Communication';
 import { GLTF } from 'three/examples/jsm/Addons';
-import DIVEScene from '../../scene/Scene';
+import { DIVEScene } from '../../scene/Scene';
 import { Vector3, Box3, Mesh, MeshStandardMaterial, type Texture, Color } from 'three';
 import { type COMMaterial } from '../../com/types';
 
@@ -145,6 +145,7 @@ jest.mock('three', () => {
             return this;
         }),
         Color: jest.fn(function () {
+            this.set = jest.fn();
             return this;
         }),
     }
@@ -152,11 +153,13 @@ jest.mock('three', () => {
 
 jest.mock('../../com/Communication.ts', () => {
     return {
-        get: jest.fn(() => {
-            return {
-                PerformAction: jest.fn(),
-            }
-        }),
+        DIVECommunication: {
+            get: jest.fn(() => {
+                return {
+                    PerformAction: jest.fn(),
+                }
+            }),
+        },
     }
 });
 
@@ -192,11 +195,11 @@ const gltf = {
 
 jest.spyOn(DIVECommunication, 'get').mockReturnValue({ PerformAction: jest.fn() } as unknown as DIVECommunication);
 
-let model: Model;
+let model: DIVEModel;
 
 describe('dive/model/DIVEModel', () => {
     beforeEach(() => {
-        model = new Model();
+        model = new DIVEModel();
     });
 
     afterEach(() => {

package/src/primitive/Primitive.ts

@@ -1,5 +1,5 @@
 import { Box3, BoxGeometry, BufferGeometry, Color, ConeGeometry, CylinderGeometry, Mesh, MeshStandardMaterial, Object3D, Raycaster, SphereGeometry, Vector3, Vector3Like } from 'three';
-import DIVECommunication from '../com/Communication';
+import { DIVECommunication } from '../com/Communication';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
 import { type DIVESelectable } from '../interface/Selectable';
@@ -18,8 +18,9 @@ import { type COMGeometry, type COMMaterial } from '../com/types';
  */
 
 export class DIVEPrimitive extends Object3D implements DIVESelectable, DIVEMoveable {
-    public isSelectable: true = true;
-    public isMoveable: true = true;
+    readonly isDIVEPrimitive: true = true;
+    readonly isSelectable: true = true;
+    readonly isMoveable: true = true;
 
     public gizmo: TransformControls | null = null;
 

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

@@ -1,7 +1,7 @@
 import { DIVEPrimitive } from '../Primitive';
-import DIVECommunication from '../../com/Communication';
+import { DIVECommunication } from '../../com/Communication';
 import { Vector3, Box3, Mesh, type Texture, type MeshStandardMaterial } from 'three';
-import type DIVEScene from '../../scene/Scene';
+import type { DIVEScene } from '../../scene/Scene';
 import { type COMMaterial, type COMGeometry } from '../../com/types';
 
 const intersectObjectsMock = jest.fn();
@@ -181,11 +181,13 @@ jest.mock('three', () => {
 
 jest.mock('../../com/Communication.ts', () => {
     return {
-        get: jest.fn(() => {
-            return {
-                PerformAction: jest.fn(),
-            }
-        }),
+        DIVECommunication: {
+            get: jest.fn(() => {
+                return {
+                    PerformAction: jest.fn(),
+                }
+            }),
+        },
     }
 });
 

package/src/primitive/floor/Floor.ts

@@ -9,7 +9,7 @@ import { PRODUCT_LAYER_MASK } from "../../constant/VisibilityLayerMask.ts";
  * @module
  */
 
-export default class DIVEFloor extends Mesh {
+export class DIVEFloor extends Mesh {
     public isFloor: true = true;
 
     constructor() {

package/src/primitive/floor/__test__/Floor.test.ts

@@ -1,5 +1,5 @@
 import { MeshStandardMaterial } from 'three';
-import DIVEFloor from '../Floor';
+import { DIVEFloor } from '../Floor';
 
 describe('dive/primitive/floor/DIVEFloor', () => {
     it('should instantiate', () => {

package/src/renderer/__test__/Renderer.test.ts

@@ -1,5 +1,5 @@
 import type DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
-import type DIVEScene from '../../scene/Scene';
+import type { DIVEScene } from '../../scene/Scene';
 import { DIVERenderer, DIVERendererDefaultSettings } from '../Renderer';
 
 /**