@shopware-ag/dive 1.18.5-beta.2 → 1.18.5

package/build/src/ar/arquicklook/ARQuickLook.d.ts

@@ -1,8 +1,7 @@
 import { DIVEScene } from '../../scene/Scene';
 import { DIVEAROptions } from '../AR';
 export declare class DIVEARQuickLook {
-    private static _usdzExporter;
     static Launch(scene: DIVEScene, options?: DIVEAROptions): Promise<void>;
-    private static extractModels;
-    private static launchARFromNode;
+    private static launchARQuickLook;
+    private static findARQuickLookSrc;
 }

package/build/src/com/Communication.d.ts

@@ -34,16 +34,13 @@ export declare class DIVECommunication {
     private controller;
     private toolbox;
     private _mediaGenerator;
-    private get mediaGenerator();
     private _io;
-    private get io();
     private _ar;
-    private get ar();
     private registered;
     private listeners;
     constructor(renderer: DIVERenderer, scene: DIVEScene, controls: DIVEOrbitControls, toolbox: DIVEToolbox);
     DestroyInstance(): boolean;
-    PerformAction<Action extends keyof Actions>(action: Action, payload: Actions[Action]['PAYLOAD']): Actions[Action]['RETURN'];
+    PerformAction<Action extends keyof Actions>(action: Action, payload?: Actions[Action]['PAYLOAD']): Actions[Action]['RETURN'];
     Subscribe<Action extends keyof Actions>(type: Action, listener: EventListener<Action>): Unsubscribe;
     private dispatch;
     private getAllSceneData;

package/build/src/module/Module.d.ts

@@ -0,0 +1,8 @@
+export declare class DIVEModule<T> {
+    private _path;
+    private _ctor;
+    constructor(_path: string, _ctor: string);
+    private _promise;
+    private _instance;
+    get(): Promise<T>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shopware-ag/dive",
-    "version": "1.18.5-beta.2",
+    "version": "1.18.5",
     "description": "Shopware Spatial Framework",
     "type": "module",
     "main": "build/dive.cjs",
@@ -51,7 +51,7 @@
         "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
         "tsc": "^2.0.4",
-        "typescript": "^5.4.5",
+        "typescript": "^5.8.2",
         "typescript-eslint": "^7.7.1",
         "vite": "^6.2.1",
         "vite-plugin-dts": "^4.5.3"

package/src/ar/arquicklook/ARQuickLook.ts

@@ -1,66 +1,93 @@
-import { Object3D } from 'three';
-import { DIVEUSDZExporter } from '../../exporters/usdz/USDZExporter';
 import { type DIVEScene } from '../../scene/Scene';
 import { type DIVEAROptions } from '../AR';
 
 export class DIVEARQuickLook {
-    private static _usdzExporter: DIVEUSDZExporter = new DIVEUSDZExporter();
-
     public static Launch(
         scene: DIVEScene,
         options?: DIVEAROptions,
     ): Promise<void> {
-        // create node to build usdz from
-        const quickLookScene = new Object3D();
-
-        // extract models from scene
-        const rootCopy = scene.Root.clone(true);
-
-        quickLookScene.add(...rootCopy.children);
+        const url = this.findARQuickLookSrc(scene);
 
         // launch ARQuickLook
-        return this.launchARFromNode(quickLookScene, options);
+        return this.launchARQuickLook(url, options);
     }
 
-    private static extractModels(scene: DIVEScene): Object3D[] {
-        // extract models
-        return scene.Root.children;
-    }
-
-    private static launchARFromNode(
-        node: Object3D,
+    private static launchARQuickLook(
+        uri: string,
         options?: DIVEAROptions,
     ): Promise<void> {
-        // bundle USDZ
-        return this._usdzExporter
-            .parse(node, {
-                quickLookCompatible: true,
-                ar: {
-                    anchoring: { type: 'plane' },
-                    planeAnchoring: {
-                        alignment:
-                            options?.arPlacement === 'vertical'
-                                ? 'vertical'
-                                : 'horizontal',
-                    },
-                },
-            })
-            .then((usdz: Uint8Array) => {
-                // create blob
-                const blob = new Blob([usdz], { type: 'model/vnd.usdz+zip' });
-                let url = URL.createObjectURL(blob);
+        return new Promise((resolve) => {
+            if (options?.arScale === 'fixed') {
+                uri = uri.concat('#allowsContentScaling=0');
+            }
+
+            // launch ARQuickLook
+            const a = document.createElement('a');
+            a.innerHTML = '<picture></picture>'; // This is actually needed so the viewer opens instantly
+            a.rel = 'ar';
+            a.href = uri;
+            a.download = 'scene.usdz';
+            resolve();
+            a.click();
+        });
+    }
 
-                if (options?.arScale === 'fixed') {
-                    url = url.concat('#allowsContentScaling=0');
-                }
+    private static findARQuickLookSrc(scene: DIVEScene): string {
+        let uri: string | null = null;
 
-                // launch ARQuickLook
-                const a = document.createElement('a');
-                a.innerHTML = '<picture></picture>'; // This is actually needed so the viewer opens instantly
-                a.rel = 'ar';
-                a.href = url;
-                a.download = 'scene.usdz';
-                a.click();
-            });
+        scene.traverse((object) => {
+            if (uri) return;
+            if (object.userData.uri) {
+                uri = object.userData.uri;
+            }
+        });
+
+        if (!uri) {
+            throw new Error('No model found in scene');
+        }
+
+        return uri;
     }
+
+    // private static extractModels(scene: DIVEScene): Object3D[] {
+    //     // extract models
+    //     return scene.Root.children;
+    // }
+
+    // private static launchARFromNode(
+    //     node: Object3D,
+    //     options?: DIVEAROptions,
+    // ): Promise<void> {
+    //     // bundle USDZ
+    //     return this._usdzExporter
+    //         .parse(node, {
+    //             quickLookCompatible: true,
+    //             ar: {
+    //                 anchoring: { type: 'plane' },
+    //                 planeAnchoring: {
+    //                     alignment:
+    //                         options?.arPlacement === 'vertical'
+    //                             ? 'vertical'
+    //                             : 'horizontal',
+    //                 },
+    //             },
+    //         })
+    //         .then((usdz: Uint8Array) => {
+    //             // create blob
+    //             const blob = new Blob([usdz], { type: 'model/vnd.usdz+zip' });
+    //             let url = URL.createObjectURL(blob);
+
+    //             if (options?.arScale === 'fixed') {
+    //                 url = url.concat('#allowsContentScaling=0');
+    //             }
+
+    //             // launch ARQuickLook
+    //             const a = document.createElement('a');
+    //             a.innerHTML = '<picture></picture>'; // This is actually needed so the viewer opens instantly
+    //             a.rel = 'ar';
+    //             a.href = url;
+    //             a.download = 'scene.usdz';
+    //             a.click();
+    //         });
+    // }
 }

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

@@ -1,16 +1,22 @@
-import { Object3D } from 'three';
+import { Box3, Color, Euler, Mesh, Object3D, Vector3 } from 'three';
 import { DIVEScene } from '../../../scene/Scene';
 import { DIVEAROptions } from '../../AR';
 import { DIVEARQuickLook } from '../ARQuickLook';
 
-jest.mock('../../../exporters/usdz/USDZExporter', () => {
+jest.mock('../../../scene/Scene', () => {
     return {
-        DIVEUSDZExporter: jest.fn().mockImplementation(() => {
-            return {
-                parse: jest.fn(() => {
-                    return Promise.resolve(new Uint8Array());
-                }),
+        DIVEScene: jest.fn(function () {
+            this.add = jest.fn();
+            this.children = [];
+            this.Root = {
+                children: [],
             };
+            this.traverse = jest.fn((callback) => {
+                this.Root.children.forEach((child: Object3D) => {
+                    callback(child);
+                });
+            });
+            return this;
         }),
     };
 });
@@ -26,10 +32,12 @@ describe('DIVEARQuickLook', () => {
         mockModels = [
             new Object3D(),
             new Object3D(),
+            new Object3D(),
         ];
-        mockScene = {
-            Root: new Object3D(),
-        } as DIVEScene;
+        mockModels[1].userData = {
+            uri: 'https://example.com',
+        };
+        mockScene = new DIVEScene();
         mockOptions = {
             arPlacement: 'horizontal',
             arScale: 'auto',
@@ -41,88 +49,45 @@ describe('DIVEARQuickLook', () => {
             expect(DIVEARQuickLook.Launch).toBeInstanceOf(Function);
         });
 
-        it('should return a promise', () => {
-            expect(
-                DIVEARQuickLook.Launch(mockScene, mockOptions),
-            ).toBeInstanceOf(Promise);
-        });
-
-        it('should not throw when called without options', () => {
-            const usdzParseSpy = jest.spyOn(
-                DIVEARQuickLook['_usdzExporter'],
-                'parse',
-            );
-
-            expect(
-                async () => await DIVEARQuickLook.Launch(mockScene),
-            ).not.toThrow();
-
-            expect(usdzParseSpy).toHaveBeenCalled();
-        });
-
-        it('should not throw when called with empty scene', () => {
-            const usdzParseSpy = jest.spyOn(
-                DIVEARQuickLook['_usdzExporter'],
-                'parse',
-            );
-
-            expect(
-                async () =>
-                    await DIVEARQuickLook.Launch(mockScene, mockOptions),
-            ).not.toThrow();
+        it('should not throw without options', () => {
+            mockScene.Root.children = mockModels;
 
-            expect(usdzParseSpy).toHaveBeenCalled();
+            expect(() => {
+                DIVEARQuickLook.Launch(mockScene);
+            }).not.toThrow();
         });
 
-        it('should not throw when called with filled scene', () => {
-            const usdzParseSpy = jest.spyOn(
-                DIVEARQuickLook['_usdzExporter'],
-                'parse',
-            );
-
+        it('should not throw with options', () => {
             mockScene.Root.children = mockModels;
 
-            expect(
-                async () =>
-                    await DIVEARQuickLook.Launch(mockScene, mockOptions),
-            ).not.toThrow();
-
-            expect(usdzParseSpy).toHaveBeenCalled();
+            expect(() => {
+                DIVEARQuickLook.Launch(mockScene, mockOptions);
+            }).not.toThrow();
         });
 
-        it('should pass options to exporter', async () => {
-            const usdzParseSpy = jest.spyOn(
-                DIVEARQuickLook['_usdzExporter'],
-                'parse',
-            );
-
-            mockOptions.arPlacement = 'vertical';
-            mockOptions.arScale = 'fixed';
+        it('should not throw with alternated options', () => {
+            mockScene.Root.children = mockModels;
 
-            await DIVEARQuickLook.Launch(mockScene, mockOptions);
+            mockOptions = {
+                arPlacement: 'vertical',
+                arScale: 'fixed',
+            } as DIVEAROptions;
 
-            expect(usdzParseSpy).toHaveBeenCalledWith(expect.any(Object3D), {
-                quickLookCompatible: true,
-                ar: {
-                    anchoring: { type: 'plane' },
-                    planeAnchoring: {
-                        alignment: 'vertical',
-                    },
-                },
-            });
+            expect(() => {
+                DIVEARQuickLook.Launch(mockScene, mockOptions);
+            }).not.toThrow();
         });
 
-        it('should reject when USDZExporter fails', async () => {
-            const usdzParseSpy = jest.spyOn(
-                DIVEARQuickLook['_usdzExporter'],
-                'parse',
-            );
-
-            usdzParseSpy.mockReturnValueOnce(Promise.reject());
+        it('should throw if no url is found', () => {
+            mockScene.Root.children = [
+                new Object3D(),
+                new Object3D(),
+                new Object3D(),
+            ];
 
-            await expect(
-                DIVEARQuickLook.Launch(mockScene, mockOptions),
-            ).rejects.toBeUndefined();
+            expect(() => {
+                DIVEARQuickLook.Launch(mockScene, mockOptions);
+            }).toThrow();
         });
     });
 });

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

@@ -21,18 +21,6 @@ jest.mock('../../../scene/Scene', () => {
     };
 });
 
-jest.mock('../../../exporters/usdz/USDZExporter', () => {
-    return {
-        DIVEUSDZExporter: jest.fn().mockImplementation(() => {
-            return {
-                parse: jest.fn(() => {
-                    return Promise.resolve(new Uint8Array());
-                }),
-            };
-        }),
-    };
-});
-
 URL.createObjectURL = jest.fn(() => 'blob:http://localhost:8080/');
 
 describe('DIVESceneViewer', () => {

package/src/com/Communication.ts

@@ -2,6 +2,7 @@ import { Actions } from './actions/index.ts';
 import { generateUUID } from 'three/src/math/MathUtils';
 import { isSelectTool } from '../toolbox/select/SelectTool.ts';
 import { merge } from 'lodash';
+import { DIVEModule } from '../module/Module.ts';
 
 // type imports
 import { type Color, type MeshStandardMaterial } from 'three';
@@ -74,80 +75,13 @@ export class DIVECommunication {
     private controller: DIVEOrbitControls;
     private toolbox: DIVEToolbox;
 
-    private _mediaGenerator: DIVEMediaCreator | null;
-    private get mediaGenerator(): Promise<DIVEMediaCreator> {
-        if (!this._mediaGenerator) {
-            return new Promise((resolve, reject) => {
-                import('../mediacreator/MediaCreator.ts')
-                    .then((module) => {
-                        const DIVEMediaCreator = module.DIVEMediaCreator;
-                        this._mediaGenerator = new DIVEMediaCreator(
-                            this.renderer,
-                            this.scene,
-                            this.controller,
-                        );
-                        resolve(this._mediaGenerator);
-                    })
-                    .catch((error) => {
-                        console.error(
-                            'DIVE: Error while lazy-loading IO module:',
-                            error,
-                        );
-                        reject(error);
-                    });
-            });
-        }
-        return Promise.resolve(this._mediaGenerator);
-    }
-
-    private _io: DIVEIO | null;
-    private get io(): Promise<DIVEIO> {
-        if (!this._io) {
-            return new Promise((resolve, reject) => {
-                import('../io/IO.ts')
-                    .then((module) => {
-                        const DIVEIO = module.DIVEIO;
-                        this._io = new DIVEIO(this.scene);
-                        resolve(this._io);
-                    })
-                    .catch((error) => {
-                        console.error(
-                            'DIVE: Error while lazy-loading IO module:',
-                            error,
-                        );
-                        reject(error);
-                    });
-            });
-        }
-        return Promise.resolve(this._io);
-    }
-
-    private _ar: DIVEAR | null;
-    private get ar(): Promise<DIVEAR> {
-        if (!this._ar) {
-            return new Promise((resolve, reject) => {
-                import('../ar/AR.ts')
-                    .then((module) => {
-                        const DIVEAR = module.DIVEAR;
-                        this._ar = new DIVEAR(
-                            this.renderer,
-                            this.scene,
-                            this.controller,
-                        );
-                        resolve(this._ar);
-                    })
-                    .catch((error) => {
-                        console.error(
-                            'DIVE: Error while lazy-loading AR module:',
-                            error,
-                        );
-                        reject(error);
-                    });
-            });
-        }
+    private _mediaGenerator: DIVEModule<DIVEMediaCreator> = new DIVEModule(
+        '../mediacreator/MediaCreator.ts',
+        'DIVEMediaCreator',
+    );
+    private _io: DIVEModule<DIVEIO> = new DIVEModule('../io/IO.ts', 'DIVEIO');
 
-        return Promise.resolve(this._ar);
-    }
+    private _ar: DIVEModule<DIVEAR> = new DIVEModule('../ar/AR.ts', 'DIVEAR');
 
     private registered: Map<string, COMEntity> = new Map();
 
@@ -166,9 +100,6 @@ export class DIVECommunication {
         this.scene = scene;
         this.controller = controls;
         this.toolbox = toolbox;
-        this._mediaGenerator = null;
-        this._io = null;
-        this._ar = null;
 
         DIVECommunication.__instances.push(this);
     }
@@ -184,7 +115,7 @@ export class DIVECommunication {
 
     public PerformAction<Action extends keyof Actions>(
         action: Action,
-        payload: Actions[Action]['PAYLOAD'],
+        payload?: Actions[Action]['PAYLOAD'],
     ): Actions[Action]['RETURN'] {
         let returnValue: Actions[Action]['RETURN'] = false;
 
@@ -353,10 +284,11 @@ export class DIVECommunication {
             }
             case 'LAUNCH_AR': {
                 returnValue = new Promise<void>((resolve, reject) => {
-                    this.ar
-                        .then((arModule) => {
+                    this._ar
+                        .get()
+                        .then((ar) => {
                             resolve(
-                                arModule.Launch(
+                                ar.Launch(
                                     payload as Actions['LAUNCH_AR']['PAYLOAD'],
                                 ),
                             );
@@ -784,7 +716,7 @@ export class DIVECommunication {
             target = payload.target;
         }
 
-        return this.mediaGenerator.then((module) => {
+        return this._mediaGenerator.get().then((module) => {
             return module.GenerateMedia(
                 position,
                 target,
@@ -858,9 +790,10 @@ export class DIVECommunication {
         payload: Actions['EXPORT_SCENE']['PAYLOAD'],
     ): Actions['EXPORT_SCENE']['RETURN'] {
         return new Promise<string | null>((resolve, reject) => {
-            this.io
-                .then((ioModule) => {
-                    resolve(ioModule.Export(payload.type));
+            this._io
+                .get()
+                .then((io) => {
+                    resolve(io.Export(payload.type));
                 })
                 .catch(reject);
         });

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

@@ -32,36 +32,47 @@ import {
     type COMLight,
     type COMModel,
     type COMPov,
-    type COMPrimitive,
 } from '../types';
 import { type DIVESceneObject } from '../../types';
 
-jest.mock('../../mediacreator/MediaCreator', () => {
+const mockModule: Record<string, any> = {
+    get: jest.fn().mockReturnValue(Promise.resolve({})),
+};
+jest.mock('../../module/Module', () => {
     return {
-        DIVEMediaCreator: jest.fn(function () {
-            this.GenerateMedia = jest.fn();
+        DIVEModule: jest.fn().mockImplementation(() => {
+            return mockModule;
+        }),
+    };
+});
 
-            return this;
+jest.mock('../../mediacreator/MediaCreator', () => {
+    return {
+        DIVEMediaCreator: jest.fn().mockImplementation(() => {
+            return {
+                GenerateMedia: jest.fn(),
+            };
         }),
     };
 });
 
 jest.mock('../../io/IO', () => {
     return {
-        DIVEIO: jest.fn(function () {
-            this.Import = jest.fn();
-            this.Export = jest.fn();
-            return this;
+        DIVEIO: jest.fn().mockImplementation(() => {
+            return {
+                Import: jest.fn(),
+                Export: jest.fn(),
+            };
         }),
     };
 });
 
 jest.mock('../../ar/AR', () => {
     return {
-        DIVEAR: jest.fn(function () {
-            this.Launch = jest.fn();
-
-            return this;
+        DIVEAR: jest.fn().mockImplementation(() => {
+            return {
+                Launch: jest.fn(),
+            };
         }),
     };
 });
@@ -194,12 +205,14 @@ const mockToolBox = {
     }),
     SetGizmoMode: jest.fn(),
     SetGizmoVisibility: jest.fn(),
+    SetGizmoScaleLinked: jest.fn(),
 } as unknown as DIVEToolbox;
 
 let testCom: DIVECommunication;
 
 describe('dive/communication/DIVECommunication', () => {
     beforeEach(() => {
+        jest.clearAllMocks();
         testCom = new DIVECommunication(
             mockRenderer,
             mockScene,
@@ -797,6 +810,11 @@ describe('dive/communication/DIVECommunication', () => {
         expect(visibility).toBe(false);
     });
 
+    it('should perform action SET_GIZMO_SCALE_LINKED', () => {
+        const success = testCom.PerformAction('SET_GIZMO_SCALE_LINKED', true);
+        expect(success).toBe(true);
+    });
+
     it('should perform action USE_TOOL', () => {
         let success = testCom.PerformAction('USE_TOOL', { tool: 'select' });
         expect(success).toBe(true);
@@ -844,7 +862,10 @@ describe('dive/communication/DIVECommunication', () => {
 
     it('should perform action GENERATE_MEDIA', async () => {
         const blobUri = 'blob:http://localhost:3000/1234';
-        const mediaGeneratorModule = await testCom['mediaGenerator'];
+        jest.spyOn(mockModule, 'get').mockResolvedValue({
+            GenerateMedia: jest.fn(),
+        });
+        const mediaGeneratorModule = await testCom['_mediaGenerator'].get();
 
         jest.spyOn(mediaGeneratorModule, 'GenerateMedia').mockReturnValue(
             blobUri,
@@ -962,7 +983,10 @@ describe('dive/communication/DIVECommunication', () => {
 
     it('should perform action EXPORT_SCENE', async () => {
         const url = 'https://example.com';
-        const ioModule = await testCom['io'];
+        jest.spyOn(mockModule, 'get').mockResolvedValue({
+            Export: jest.fn(),
+        });
+        const ioModule = await testCom['_io'].get();
 
         jest.spyOn(ioModule, 'Export').mockResolvedValueOnce(url);
 
@@ -973,7 +997,10 @@ describe('dive/communication/DIVECommunication', () => {
     });
 
     it('should perform action LAUNCH_AR', async () => {
-        const arModule = await testCom['ar'];
+        jest.spyOn(mockModule, 'get').mockResolvedValue({
+            Launch: jest.fn(),
+        });
+        const arModule = await testCom['_ar'].get();
         const arLaunchSpy = jest
             .spyOn(arModule, 'Launch')
             .mockResolvedValueOnce();