@shopware-ag/dive 1.18.5 → 1.19.1-beta.0

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

@@ -1,7 +1,8 @@
 import { Box3, Color, Euler, Mesh, Object3D, Vector3 } from 'three';
 import { DIVEScene } from '../../../scene/Scene';
-import { DIVEAROptions } from '../../AR';
-import { DIVEARQuickLook } from '../ARQuickLook';
+import { ARSystemOptions } from '../../AR';
+import { ARQuickLook } from '../ARQuickLook';
+import { Converter } from '../../../converter/Converter';
 
 jest.mock('../../../scene/Scene', () => {
     return {
@@ -21,12 +22,33 @@ jest.mock('../../../scene/Scene', () => {
     };
 });
 
+// Mock the Converter class
+jest.mock('../../../converter/Converter', () => {
+    return {
+        Converter: {
+            convert: jest.fn().mockReturnThis(),
+            to: jest.fn().mockResolvedValue(new ArrayBuffer(0)),
+        },
+    };
+});
+
+// Mock URL.createObjectURL
 URL.createObjectURL = jest.fn(() => 'blob:http://localhost:8080/');
 
-describe('DIVEARQuickLook', () => {
-    let mockScene: DIVEScene;
-    let mockOptions: DIVEAROptions;
+// Mock document.createElement
+document.createElement = jest.fn().mockReturnValue({
+    innerHTML: '',
+    rel: '',
+    href: '',
+    download: '',
+    click: jest.fn(),
+});
+
+describe('ARQuickLook', () => {
+    let mockOptions: ARSystemOptions;
     let mockModels: Object3D[];
+    let quickLook: ARQuickLook;
+    const mockUri = 'https://example.com/model.glb';
 
     beforeEach(() => {
         mockModels = [
@@ -37,57 +59,86 @@ describe('DIVEARQuickLook', () => {
         mockModels[1].userData = {
             uri: 'https://example.com',
         };
-        mockScene = new DIVEScene();
         mockOptions = {
             arPlacement: 'horizontal',
             arScale: 'auto',
-        } as DIVEAROptions;
+        };
+        quickLook = new ARQuickLook();
+        jest.clearAllMocks();
+    });
+
+    describe('constructor', () => {
+        it('should create an instance', () => {
+            expect(quickLook).toBeInstanceOf(ARQuickLook);
+        });
     });
 
-    describe('Launch', () => {
-        it('should be a function', () => {
-            expect(DIVEARQuickLook.Launch).toBeInstanceOf(Function);
+    describe('launch', () => {
+        it('should convert and launch with default options', async () => {
+            await quickLook.launch(mockUri);
+
+            expect(Converter.convert).toHaveBeenCalledWith(mockUri);
+            expect((Converter as any).to).toHaveBeenCalledWith('usdz', {
+                quickLookCompatible: true,
+                ar: {
+                    anchoring: { type: 'plane' },
+                    planeAnchoring: { alignment: 'horizontal' },
+                },
+            });
+            expect(URL.createObjectURL).toHaveBeenCalled();
+            expect(document.createElement).toHaveBeenCalledWith('a');
         });
 
-        it('should not throw without options', () => {
-            mockScene.Root.children = mockModels;
+        it('should convert and launch with custom options', async () => {
+            const options: ARSystemOptions = {
+                arPlacement: 'vertical',
+                arScale: 'fixed',
+            };
+            await quickLook.launch(mockUri, options);
 
-            expect(() => {
-                DIVEARQuickLook.Launch(mockScene);
-            }).not.toThrow();
+            expect(Converter.convert).toHaveBeenCalledWith(mockUri);
+            expect((Converter as any).to).toHaveBeenCalledWith('usdz', {
+                quickLookCompatible: true,
+                ar: {
+                    anchoring: { type: 'plane' },
+                    planeAnchoring: { alignment: 'vertical' },
+                },
+            });
+            expect(URL.createObjectURL).toHaveBeenCalled();
+            expect(document.createElement).toHaveBeenCalledWith('a');
         });
 
-        it('should not throw with options', () => {
-            mockScene.Root.children = mockModels;
+        it('should handle conversion errors', async () => {
+            const error = new Error('Conversion failed');
+            ((Converter as any).to as jest.Mock).mockRejectedValueOnce(error);
 
-            expect(() => {
-                DIVEARQuickLook.Launch(mockScene, mockOptions);
-            }).not.toThrow();
+            await expect(quickLook.launch(mockUri)).rejects.toThrow(error);
         });
 
-        it('should not throw with alternated options', () => {
-            mockScene.Root.children = mockModels;
+        it('should create a blob with correct MIME type', async () => {
+            const mockBuffer = new ArrayBuffer(100);
+            ((Converter as any).to as jest.Mock).mockResolvedValueOnce(
+                mockBuffer,
+            );
 
-            mockOptions = {
-                arPlacement: 'vertical',
-                arScale: 'fixed',
-            } as DIVEAROptions;
+            await quickLook.launch(mockUri);
 
-            expect(() => {
-                DIVEARQuickLook.Launch(mockScene, mockOptions);
-            }).not.toThrow();
+            expect(URL.createObjectURL).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'model/vnd.usdz+zip',
+                }),
+            );
         });
 
-        it('should throw if no url is found', () => {
-            mockScene.Root.children = [
-                new Object3D(),
-                new Object3D(),
-                new Object3D(),
-            ];
+        it('should add scale parameter when arScale is fixed', async () => {
+            const options: ARSystemOptions = {
+                arPlacement: 'horizontal',
+                arScale: 'fixed',
+            };
+            await quickLook.launch(mockUri, options);
 
-            expect(() => {
-                DIVEARQuickLook.Launch(mockScene, mockOptions);
-            }).toThrow();
+            const anchor = document.createElement('a');
+            expect(anchor.href).toContain('#allowsContentScaling=0');
         });
     });
 });

package/src/ar/sceneviewer/SceneViewer.ts

@@ -1,74 +1,119 @@
-import { type DIVEScene } from '../../scene/Scene';
-import { type DIVEAROptions } from '../AR';
+import { type ARSystemOptions } from '../AR';
 
-export class DIVESceneViewer {
-    public static Launch(scene: DIVEScene, options?: DIVEAROptions): void {
-        // find url in scene (first object found that has a set uri)
-        const url = this.findSceneViewerSrc(scene);
+export class SceneViewer {
+    public launch(uri: string, options?: ARSystemOptions): void {
+        const location = self.location.toString();
+        const anchor = document.createElement('a');
+        const params = this._createParams(location, uri, options);
+        const intent = this._createIntent(location, uri, params);
 
-        // launch SceneViewer
-        this.launchSceneViewer(url, options);
+        anchor.setAttribute('href', intent);
+        anchor.click();
     }
 
-    private static launchSceneViewer(
-        url: string,
-        options?: DIVEAROptions,
-    ): void {
-        const anchor = document.createElement('a');
-        const noArViewerSigil = '#model-viewer-no-ar-fallback';
-
-        const location = self.location.toString();
-        const locationUrl = new URL(location);
-        const modelUrl = new URL(url, location);
+    /**
+     * Creates the base URL parameters for SceneViewer
+     * @param location Current page location URL
+     * @returns URLSearchParams with base configuration
+     */
+    private _createParams(
+        location: string,
+        uri: string,
+        options?: ARSystemOptions,
+    ): URLSearchParams {
+        const modelUrl = new URL(uri, location);
         const params = new URLSearchParams(modelUrl.search);
 
-        locationUrl.hash = noArViewerSigil;
+        // Set AR mode as preferred
+        params.set('mode', 'ar_preferred');
+
+        // Apply any custom options
+        this._applyScaleOption(params, options);
+        this._applyPlacementOption(params, options);
 
-        // modelUrl can contain title/link/sound etc.
-        params.set('mode', 'ar_only');
+        // Apply additional parameters if present
+        this._applySoundOption(params, location);
+        this._applyLinkOption(params, location);
 
+        return params;
+    }
+
+    /**
+     * Applies the scale option to the parameters
+     * If scale is set to 'fixed', the model will not be resizable in AR
+     * @param params URLSearchParams to modify
+     */
+    private _applyScaleOption(
+        params: URLSearchParams,
+        options?: ARSystemOptions,
+    ): void {
         if (options?.arScale === 'fixed') {
             params.set('resizable', 'false');
         }
+    }
 
+    /**
+     * Applies the placement option to the parameters
+     * If placement is set to 'vertical', vertical placement will be enabled
+     * @param params URLSearchParams to modify
+     */
+    private _applyPlacementOption(
+        params: URLSearchParams,
+        options?: ARSystemOptions,
+    ): void {
         if (options?.arPlacement === 'vertical') {
             params.set('enable_vertical_placement', 'true');
         }
+    }
 
-        // will be added later if needed
-        // if (params.has('sound')) {
-        //     const soundUrl = new URL(params.get('sound')!, location);
-        //     params.set('sound', soundUrl.toString());
-        // }
-        // if (params.has('link')) {
-        //     const linkUrl = new URL(params.get('link')!, location);
-        //     params.set('link', linkUrl.toString());
-        // }
-
-        const intent = `intent://arvr.google.com/scene-viewer/1.2?${
-            params.toString() + '&file=' + modelUrl.toString()
-        }#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=${encodeURIComponent(
-            locationUrl.toString(),
-        )};end;`;
-
-        anchor.setAttribute('href', intent);
-        anchor.click();
+    /**
+     * Applies the sound option to the parameters if present
+     * This will resolve any relative sound URLs to absolute URLs
+     * @param params URLSearchParams to modify
+     * @param location Current page location URL
+     */
+    private _applySoundOption(params: URLSearchParams, location: string): void {
+        if (params.has('sound')) {
+            const soundUrl = new URL(params.get('sound')!, location);
+            params.set('sound', soundUrl.toString());
+        }
     }
 
-    private static findSceneViewerSrc(scene: DIVEScene): string {
-        let uri: string | null = null;
+    /**
+     * Applies the link option to the parameters if present
+     * This will resolve any relative link URLs to absolute URLs
+     * @param params URLSearchParams to modify
+     * @param location Current page location URL
+     */
+    private _applyLinkOption(params: URLSearchParams, location: string): void {
+        if (params.has('link')) {
+            const linkUrl = new URL(params.get('link')!, location);
+            params.set('link', linkUrl.toString());
+        }
+    }
 
-        scene.traverse((object) => {
-            if (uri) return;
-            if (object.userData.uri) {
-                uri = object.userData.uri;
-            }
-        });
+    /**
+     * Creates the Android Intent URL for SceneViewer
+     * @param params URLSearchParams containing all configuration
+     * @param location Current page location URL
+     * @returns The complete Intent URL
+     */
+    private _createIntent(
+        location: string,
+        uri: string,
+        params: URLSearchParams,
+    ): string {
+        const locationUrl = new URL(location);
+        const modelUrl = new URL(uri, location);
+        const noArViewerSigil = '#model-viewer-no-ar-fallback';
 
-        if (!uri) {
-            throw new Error('No model found in scene');
-        }
+        locationUrl.hash = noArViewerSigil;
 
-        return uri;
+        // Construct the intent URL with all parameters
+        return `intent://arvr.google.com/scene-viewer/1.2?${
+            params.toString() + '&file=' + modelUrl.toString()
+        }#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=${encodeURIComponent(
+            locationUrl.toString(),
+        )};end;`;
     }
 }

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

@@ -1,7 +1,16 @@
 import { Box3, Color, Euler, Mesh, Object3D, Vector3 } from 'three';
 import { DIVEScene } from '../../../scene/Scene';
-import { DIVEAROptions } from '../../AR';
-import { DIVESceneViewer } from '../SceneViewer';
+import { ARSystemOptions } from '../../AR';
+import { SceneViewer } from '../SceneViewer';
+import { SystemInfo } from '../../../info/Info';
+
+// Mock DIVEInfo
+jest.mock('../../../info/Info', () => ({
+    DIVEInfo: {
+        GetSystem: jest.fn().mockReturnValue('Android'),
+        GetSupportsARQuickLook: jest.fn().mockReturnValue(false),
+    },
+}));
 
 jest.mock('../../../scene/Scene', () => {
     return {
@@ -21,73 +30,161 @@ jest.mock('../../../scene/Scene', () => {
     };
 });
 
-URL.createObjectURL = jest.fn(() => 'blob:http://localhost:8080/');
+// Mock URL and document APIs
+const mockLocation = new URL('https://example.com');
+const mockCreateElement = jest.fn();
+const mockSetAttribute = jest.fn();
+const mockClick = jest.fn();
+
+Object.defineProperty(window, 'location', {
+    value: mockLocation,
+    writable: true,
+});
+
+document.createElement = mockCreateElement.mockReturnValue({
+    setAttribute: mockSetAttribute,
+    click: mockClick,
+});
 
 describe('DIVESceneViewer', () => {
-    let mockScene: DIVEScene;
-    let mockOptions: DIVEAROptions;
-    let mockModels: Object3D[];
+    const mockUri = 'https://example.com/model.glb';
+    let mockOptions: ARSystemOptions;
 
     beforeEach(() => {
-        mockModels = [
-            new Object3D(),
-            new Object3D(),
-            new Object3D(),
-        ];
-        mockModels[1].userData = {
-            uri: 'https://example.com',
-        };
-        mockScene = new DIVEScene();
         mockOptions = {
             arPlacement: 'horizontal',
             arScale: 'auto',
-        } as DIVEAROptions;
+        };
+        jest.clearAllMocks();
     });
 
-    describe('Launch', () => {
-        it('should be a function', () => {
-            expect(DIVESceneViewer.Launch).toBeInstanceOf(Function);
+    describe('constructor', () => {
+        it('should create an instance', () => {
+            const sceneViewer = new SceneViewer();
+            expect(sceneViewer).toBeInstanceOf(SceneViewer);
         });
+    });
 
-        it('should not throw without options', () => {
-            mockScene.Root.children = mockModels;
+    describe('launch', () => {
+        it('should launch with default options', () => {
+            const sceneViewer = new SceneViewer();
+            sceneViewer.launch(mockUri);
 
-            expect(() => {
-                DIVESceneViewer.Launch(mockScene);
-            }).not.toThrow();
+            expect(mockCreateElement).toHaveBeenCalledWith('a');
+            expect(mockSetAttribute).toHaveBeenCalledWith(
+                'href',
+                expect.stringContaining('mode=ar_preferred'),
+            );
+            expect(mockClick).toHaveBeenCalled();
         });
 
-        it('should not throw with options', () => {
-            mockScene.Root.children = mockModels;
+        it('should launch with custom options', () => {
+            const options: ARSystemOptions = {
+                arPlacement: 'vertical',
+                arScale: 'fixed',
+            };
+            const sceneViewer = new SceneViewer();
+            sceneViewer.launch(mockUri, options);
 
-            expect(() => {
-                DIVESceneViewer.Launch(mockScene, mockOptions);
-            }).not.toThrow();
+            expect(mockCreateElement).toHaveBeenCalledWith('a');
+            expect(mockSetAttribute).toHaveBeenCalledWith(
+                'href',
+                expect.stringContaining('enable_vertical_placement=true'),
+            );
+            expect(mockSetAttribute).toHaveBeenCalledWith(
+                'href',
+                expect.stringContaining('resizable=false'),
+            );
+            expect(mockClick).toHaveBeenCalled();
         });
 
-        it('should not throw with alternated options', () => {
-            mockScene.Root.children = mockModels;
+        it('should handle sound parameter in URL', () => {
+            const sceneViewer = new SceneViewer();
+            const params = new URLSearchParams();
+            params.set('sound', 'sound.mp3');
 
-            mockOptions = {
-                arPlacement: 'vertical',
-                arScale: 'fixed',
-            } as DIVEAROptions;
+            // Access private method for testing
+            const applySoundOption = (sceneViewer as any)._applySoundOption;
+            applySoundOption(params, mockLocation.toString());
+
+            expect(params.get('sound')).toBe('https://example.com/sound.mp3');
+        });
+
+        it('should handle link parameter in URL', () => {
+            const sceneViewer = new SceneViewer();
+            const params = new URLSearchParams();
+            params.set('link', 'details.html');
+
+            // Access private method for testing
+            const applyLinkOption = (sceneViewer as any)._applyLinkOption;
+            applyLinkOption(params, mockLocation.toString());
+
+            expect(params.get('link')).toBe('https://example.com/details.html');
+        });
+
+        it('should create intent URL with correct parameters', () => {
+            const sceneViewer = new SceneViewer();
+            const params = new URLSearchParams();
+            params.set('mode', 'ar_preferred');
+
+            // Access private method for testing and bind it to the instance
+            const createIntent = (sceneViewer as any)._createIntent.bind(
+                sceneViewer,
+            );
+            const intentUrl = createIntent(
+                mockLocation.toString(),
+                mockUri,
+                params,
+            );
+
+            expect(intentUrl).toContain(
+                'intent://arvr.google.com/scene-viewer/1.2',
+            );
+            expect(intentUrl).toContain('mode=ar_preferred');
+            expect(intentUrl).toContain('file=' + mockUri);
+            expect(intentUrl).toContain('scheme=https');
+            expect(intentUrl).toContain(
+                'package=com.google.android.googlequicksearchbox',
+            );
+        });
+
+        it('should handle relative model URLs', () => {
+            const relativeUri = '/models/model.glb';
+            const sceneViewer = new SceneViewer();
+            sceneViewer.launch(relativeUri);
+
+            expect(mockSetAttribute).toHaveBeenCalledWith(
+                'href',
+                expect.stringContaining(
+                    'file=https://example.com/models/model.glb',
+                ),
+            );
+        });
+
+        it('should handle absolute model URLs', () => {
+            const absoluteUri = 'https://cdn.example.com/model.glb';
+            const sceneViewer = new SceneViewer();
+            sceneViewer.launch(absoluteUri);
 
-            expect(() => {
-                DIVESceneViewer.Launch(mockScene, mockOptions);
-            }).not.toThrow();
+            expect(mockSetAttribute).toHaveBeenCalledWith(
+                'href',
+                expect.stringContaining(
+                    'file=https://cdn.example.com/model.glb',
+                ),
+            );
         });
 
-        it('should throw if no url is found', () => {
-            mockScene.Root.children = [
-                new Object3D(),
-                new Object3D(),
-                new Object3D(),
-            ];
+        it('should handle special characters in model URL', () => {
+            const specialUri = 'https://example.com/model with spaces.glb';
+            const sceneViewer = new SceneViewer();
+            sceneViewer.launch(specialUri);
 
-            expect(() => {
-                DIVESceneViewer.Launch(mockScene, mockOptions);
-            }).toThrow();
+            expect(mockSetAttribute).toHaveBeenCalledWith(
+                'href',
+                expect.stringContaining(
+                    'file=https://example.com/model%20with%20spaces.glb',
+                ),
+            );
         });
     });
 });

package/src/ar/webxr/WebXR.ts

@@ -72,10 +72,11 @@ export class DIVEWebXR {
         DIVEWebXR._options.domOverlay = { root: DIVEWebXR._overlay.Element };
 
         // request session
-        const session = await navigator.xr.requestSession(
-            'immersive-ar',
-            this._options,
-        );
+        const session = await navigator.xr
+            .requestSession('immersive-ar', this._options)
+            .catch((reason) => {
+                return Promise.reject(reason);
+            });
         session.addEventListener('end', () => {
             this._onSessionEnded();
         });

package/src/com/Communication.ts

@@ -22,7 +22,7 @@ import { type DIVEMediaCreator } from '../mediacreator/MediaCreator.ts';
 import { type DIVERenderer } from '../renderer/Renderer.ts';
 import { type DIVESelectable } from '../interface/Selectable.ts';
 import { type DIVEIO } from '../io/IO.ts';
-import { type DIVEAR } from '../ar/AR.ts';
+import { type ARSystem } from '../ar/AR.ts';
 
 type EventListener<Action extends keyof Actions> = (
     payload: Actions[Action]['PAYLOAD'],
@@ -81,7 +81,7 @@ export class DIVECommunication {
     );
     private _io: DIVEModule<DIVEIO> = new DIVEModule('../io/IO.ts', 'DIVEIO');
 
-    private _ar: DIVEModule<DIVEAR> = new DIVEModule('../ar/AR.ts', 'DIVEAR');
+    private _ar: DIVEModule<ARSystem> = new DIVEModule('../ar/AR.ts', 'DIVEAR');
 
     private registered: Map<string, COMEntity> = new Map();
 
@@ -120,6 +120,11 @@ export class DIVECommunication {
         let returnValue: Actions[Action]['RETURN'] = false;
 
         switch (action) {
+            case 'START_RENDER': {
+                this.renderer.StartRenderer(this.scene, this.controller.object);
+                returnValue = true;
+                break;
+            }
             case 'GET_ALL_SCENE_DATA': {
                 returnValue = this.getAllSceneData(
                     payload as Actions['GET_ALL_SCENE_DATA']['PAYLOAD'],
@@ -283,15 +288,13 @@ export class DIVECommunication {
                 break;
             }
             case 'LAUNCH_AR': {
+                const { uri, options } =
+                    payload as Actions['LAUNCH_AR']['PAYLOAD'];
                 returnValue = new Promise<void>((resolve, reject) => {
                     this._ar
                         .get()
                         .then((ar) => {
-                            resolve(
-                                ar.Launch(
-                                    payload as Actions['LAUNCH_AR']['PAYLOAD'],
-                                ),
-                            );
+                            resolve(ar.launch(uri, options));
                         })
                         .catch(reject);
                 });