@shopware-ag/dive 1.17.2 → 1.18.0

package/package.json

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

package/src/__test__/DIVE.test.ts

@@ -1,45 +1,5 @@
 import DIVE, { DIVESettings } from '../dive.ts';
 
-jest.mock('three', () => {
-    return {
-        Vector4: jest.fn(),
-        WebGLRenderer: jest.fn(function () {
-            this.domElement = {
-                clientWidth: 800,
-                clientHeight: 600,
-                style: {
-                    position: 'absolute',
-                },
-            };
-            this.domElement.parentElement = this.domElement;
-            this.debug = {
-                checkShaderErrors: true,
-            };
-            this.setSize = jest.fn();
-            this.setPixelRatio = jest.fn();
-            this.render = jest.fn();
-            this.setAnimationLoop = jest.fn();
-            this.shadowMap = {
-                enabled: false,
-            };
-            return this;
-        }),
-        MathUtils: {
-            generateUUID: () => {
-                return 'test_uuid';
-            },
-        },
-    };
-});
-
-jest.mock('three/src/math/MathUtils', () => {
-    return {
-        generateUUID: () => {
-            return 'test_uuid';
-        },
-    };
-});
-
 jest.mock('../com/Communication.ts', () => {
     return {
         DIVECommunication: jest.fn(function () {

package/src/animation/__test__/AnimationSystem.test.ts

@@ -1,13 +1,6 @@
 import { DIVERenderer } from '../../renderer/Renderer';
 import { DIVEAnimationSystem } from '../AnimationSystem';
 
-jest.mock('@tweenjs/tween.js', () => {
-    return {
-        Tween: jest.fn(() => {}),
-        update: jest.fn(),
-    };
-});
-
 const mockRenderer = {
     render: jest.fn(),
     OnResize: jest.fn(),

package/src/ar/arquicklook/__test__/ARQuickLook.test.ts

@@ -3,146 +3,6 @@ import { DIVEScene } from '../../../scene/Scene';
 import { DIVEAROptions } from '../../AR';
 import { DIVEARQuickLook } from '../ARQuickLook';
 
-jest.mock('three', () => {
-    return {
-        Vector3: jest.fn(function (
-            x: number = 0,
-            y: number = 0,
-            z: number = 0,
-        ) {
-            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]);
-            });
-            this.getWorldPosition = jest.fn(() => {
-                return new Vector3();
-            });
-            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;
-        }),
-        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('../../../exporters/usdz/USDZExporter', () => {
     return {
         DIVEUSDZExporter: jest.fn().mockImplementation(() => {

package/src/ar/sceneviewer/__test__/SceneViewer.test.ts

@@ -21,146 +21,6 @@ jest.mock('../../../scene/Scene', () => {
     };
 });
 
-jest.mock('three', () => {
-    return {
-        Vector3: jest.fn(function (
-            x: number = 0,
-            y: number = 0,
-            z: number = 0,
-        ) {
-            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]);
-            });
-            this.getWorldPosition = jest.fn(() => {
-                return new Vector3();
-            });
-            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;
-        }),
-        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('../../../exporters/usdz/USDZExporter', () => {
     return {
         DIVEUSDZExporter: jest.fn().mockImplementation(() => {

package/src/axiscamera/__test__/AxisCamera.test.ts

@@ -4,82 +4,6 @@ import { DIVERenderer } from '../../renderer/Renderer';
 import { DIVEScene } from '../../scene/Scene';
 import DIVEOrbitControls from '../../controls/OrbitControls';
 
-jest.mock('three', () => {
-    return {
-        Vector4: jest.fn(),
-        Color: jest.fn(function () {
-            this.getHexString = jest.fn().mockReturnValue('ffffff');
-            return this;
-        }),
-        Matrix4: jest.fn(function () {
-            this.extractRotation = jest.fn(() => {
-                return this;
-            });
-            this.invert = jest.fn(() => {
-                return this;
-            });
-            // prettier-multiline-arrays-next-line-pattern: 4
-            this.elements = [
-                1, 0, 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                0, 0, 0, 1,
-            ];
-            return this;
-        }),
-        OrthographicCamera: jest.fn(function () {
-            this.isObject3D = true;
-            this.parent = null;
-            this.dispatchEvent = jest.fn();
-            this.layers = {
-                mask: 0,
-            };
-            this.position = {
-                set: jest.fn(),
-            };
-            this.add = jest.fn();
-            return this;
-        }),
-        AxesHelper: jest.fn(function () {
-            this.isObject3D = true;
-            this.parent = null;
-            this.dispatchEvent = jest.fn();
-            this.layers = {
-                mask: 0,
-            };
-            this.position = {
-                set: jest.fn(),
-            };
-            this.add = jest.fn();
-            this.material = {
-                depthTest: false,
-            };
-            this.setColors = jest.fn();
-            this.rotation = {
-                setFromRotationMatrix: jest.fn(),
-            };
-            return this;
-        }),
-    };
-});
-
-jest.mock('three-spritetext', () => {
-    return jest.fn(() => {
-        return {
-            isObject3D: true,
-            parent: null,
-            dispatchEvent: jest.fn(),
-            layers: {
-                mask: 0,
-            },
-            position: {
-                set: jest.fn(),
-            },
-            removeFromParent: jest.fn(),
-        };
-    });
-});
-
 const mockRenderer = {
     render: jest.fn(),
     OnResize: jest.fn(),

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

@@ -36,12 +36,6 @@ import {
 } from '../types';
 import { type DIVESceneObject } from '../../types';
 
-jest.mock('three/src/math/MathUtils', () => {
-    return {
-        generateUUID: jest.fn().mockReturnValue('uuid'),
-    };
-});
-
 jest.mock('../../mediacreator/MediaCreator', () => {
     return {
         DIVEMediaCreator: jest.fn(function () {

package/src/controls/__test__/OrbitControls.test.ts

@@ -5,56 +5,6 @@ import { Box3 } from 'three';
 import { DIVEAnimationSystem } from '../../animation/AnimationSystem';
 import { Tween } from '@tweenjs/tween.js';
 
-jest.mock('@tweenjs/tween.js', () => {
-    return {
-        Tween: jest.fn(() => {}),
-        update: jest.fn(),
-    };
-});
-
-jest.mock('three/examples/jsm/controls/OrbitControls', () => {
-    return {
-        OrbitControls: jest.fn(function () {
-            this.enableDamping = true;
-            this.dampingFactor = 0.25;
-            this.enableZoom = true;
-            this.enablePan = true;
-            this.minPolarAngle = 0;
-            this.maxPolarAngle = Math.PI;
-            this.minDistance = 0;
-            this.maxDistance = Infinity;
-            this.rotateSpeed = 0.5;
-            this.panSpeed = 0.5;
-            this.zoomSpeed = 0.5;
-            this.keyPanSpeed = 0.5;
-            this.screenSpacePanning = true;
-            this.autoRotate = false;
-            this.autoRotateSpeed = 2.0;
-            this.enableKeys = true;
-            this.keys = {
-                LEFT: 37,
-                UP: 38,
-                RIGHT: 39,
-                BOTTOM: 40,
-            };
-            this.mouseButtons = {
-                LEFT: 0,
-                MIDDLE: 1,
-                RIGHT: 2,
-            };
-            this.update = jest.fn();
-            this.dispose = jest.fn();
-            this.getDistance = jest.fn();
-            this.target = {
-                clone: jest.fn(),
-                set: jest.fn(),
-                copy: jest.fn(),
-            };
-            return this;
-        }),
-    };
-});
-
 jest.mock('../../renderer/Renderer', () => {
     return jest.fn(function () {
         this.domElement = {
@@ -83,43 +33,6 @@ jest.mock('../../animation/AnimationSystem', () => {
     };
 });
 
-jest.mock('@tweenjs/tween.js', () => {
-    return {
-        Easing: {
-            Quadratic: {
-                In: jest.fn(),
-                Out: jest.fn(),
-                InOut: jest.fn(),
-            },
-        },
-        Tween: jest.fn(() => {
-            const instance: object = {
-                easing: () => {
-                    return instance;
-                },
-                to: () => {
-                    return instance;
-                },
-                start: () => {
-                    return instance;
-                },
-                stop: () => {
-                    return instance;
-                },
-                onComplete: (callback: () => typeof instance) => {
-                    callback();
-                    return instance;
-                },
-                onUpdate: (callback: () => typeof instance) => {
-                    callback();
-                    return instance;
-                },
-            };
-            return instance;
-        }),
-    };
-});
-
 const moveToPos = { x: 10, y: 0, z: 0 };
 const moveToQuat = { x: 0, y: 0, z: 0 };
 const moveToDuration = 1000;

package/src/dive.ts

@@ -17,7 +17,7 @@ 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 { generateUUID } from 'three/src/math/MathUtils';
+import { MathUtils } from 'three';
 import { DIVEInfo } from './info/Info.ts';
 import pkgjson from '../package.json';
 
@@ -74,7 +74,7 @@ export default class DIVE {
         });
 
         // generate scene light id
-        const lightid = generateUUID();
+        const lightid = MathUtils.generateUUID();
 
         // add scene light
         dive.Communication.PerformAction('ADD_OBJECT', {
@@ -89,7 +89,7 @@ export default class DIVE {
         });
 
         // generate model id
-        const modelid = generateUUID();
+        const modelid = MathUtils.generateUUID();
 
         // add loaded listener
         dive.Communication.Subscribe('MODEL_LOADED', (data) => {

package/src/exporters/usdz/__test__/USDZExporter.test.ts

@@ -0,0 +1,57 @@
+import { Object3D } from 'three';
+import { DIVEUSDZExporter, DIVEUSDZExporterOptions } from '../USDZExporter';
+
+describe('DIVEUSDZExporter', () => {
+    let exporter: DIVEUSDZExporter;
+    let scene: Object3D;
+
+    beforeEach(() => {
+        exporter = new DIVEUSDZExporter();
+        scene = new Object3D();
+    });
+
+    test('should create an instance of DIVEUSDZExporter', () => {
+        expect(exporter).toBeInstanceOf(DIVEUSDZExporter);
+    });
+
+    test('should call parse method with scene and options', async () => {
+        const options: DIVEUSDZExporterOptions = {
+            ar: {
+                anchoring: { type: 'plane' },
+                planeAnchoring: { alignment: 'horizontal' },
+            },
+        };
+
+        const result = await exporter.parse(scene, options);
+        expect(result).toBeInstanceOf(Uint8Array);
+    });
+
+    test('should call parse method without options', async () => {
+        const result = await exporter.parse(scene);
+        expect(result).toBeInstanceOf(Uint8Array);
+    });
+
+    test('should handle parse method with different anchoring types', async () => {
+        const options: DIVEUSDZExporterOptions = {
+            ar: {
+                anchoring: { type: 'image' },
+                planeAnchoring: { alignment: 'vertical' },
+            },
+        };
+
+        const result = await exporter.parse(scene, options);
+        expect(result).toBeInstanceOf(Uint8Array);
+    });
+
+    test('should handle parse method with different plane anchoring alignments', async () => {
+        const options: DIVEUSDZExporterOptions = {
+            ar: {
+                anchoring: { type: 'face' },
+                planeAnchoring: { alignment: 'any' },
+            },
+        };
+
+        const result = await exporter.parse(scene, options);
+        expect(result).toBeInstanceOf(Uint8Array);
+    });
+});

package/src/group/Group.ts

@@ -54,12 +54,17 @@ export class DIVEGroup extends DIVENode {
     }
 
     public attach(object: DIVESceneObject): this {
+        // Check if the object is already a member
+        if (this._members.includes(object)) {
+            return this;
+        }
+
         // create a line to the new object
         const line = this.createLine();
         this.add(line);
         this._lines.push(line);
 
-        // attach (insted of add) object to keep it's world position
+        // attach (instead of add) object to keep its world position
         super.attach(object);
         this._members.push(object);
 

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

@@ -1,4 +1,4 @@
-import { type Vector3Like } from 'three';
+import { Object3D, type Vector3Like } from 'three';
 import { DIVECommunication } from '../../com/Communication';
 import { type DIVENode } from '../../node/Node';
 import { DIVEGroup } from '../Group';
@@ -21,6 +21,8 @@ jest.spyOn(DIVECommunication, 'get').mockReturnValue({
 
 let group: DIVEGroup;
 
+Object3D.prototype.attach = jest.fn();
+
 describe('dive/group/DIVEGroup', () => {
     beforeEach(() => {
         group = new DIVEGroup();
@@ -38,8 +40,9 @@ describe('dive/group/DIVEGroup', () => {
         const mockObject = new DIVEGroup();
 
         expect(() => group.attach(mockObject)).not.toThrow();
-        expect(group.children).toContain(mockObject);
-        expect(group.members).toContain(mockObject);
+        expect(group.members).toContainEqual(
+            expect.objectContaining(mockObject),
+        );
 
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
         expect(() => group.attach(mockObject)).not.toThrow();