@shopware-ag/dive 1.6.4 → 1.7.0

package/package.json

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

package/src/__test__/DIVE.test.ts

@@ -137,6 +137,7 @@ jest.mock('../controls/OrbitControls.ts', () => {
             id: undefined,
         }
         this.removeFromParent = jest.fn();
+        this.Dispose = jest.fn();
         return this;
     });
 });
@@ -243,6 +244,11 @@ describe('dive/DIVE', () => {
         expect(dive.Communication).toBeDefined();
     });
 
+    it('should have Info', () => {
+        const dive = new DIVE();
+        expect(dive.Info).toBeDefined();
+    });
+
     it('should resize', () => {
         const dive = new DIVE();
         expect(() => dive.OnResize(800, 600)).not.toThrow();

package/src/com/Communication.ts

@@ -41,10 +41,16 @@ export default class DIVECommunication {
     private static __instances: DIVECommunication[] = [];
 
     public static get(id: string): DIVECommunication | undefined {
+        const fromComID = this.__instances.find((instance) => instance.id === id);
+        if (fromComID) return fromComID;
         return this.__instances.find((instance) => Array.from(instance.registered.values()).find((object) => object.id === id));
     }
 
-    private id: string;
+    private _id: string;
+    public get id(): string {
+        return this._id;
+    }
+
     private renderer: DIVERenderer;
     private scene: DIVEScene;
     private controller: DIVEOrbitControls;
@@ -65,7 +71,7 @@ export default class DIVECommunication {
     private listeners: Map<keyof Actions, EventListener<keyof Actions>[]> = new Map();
 
     constructor(renderer: DIVERenderer, scene: DIVEScene, controls: DIVEOrbitControls, toolbox: DIVEToolbox) {
-        this.id = generateUUID();
+        this._id = generateUUID();
         this.renderer = renderer;
         this.scene = scene;
         this.controller = controls;

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

@@ -186,10 +186,19 @@ describe('dive/communication/DIVECommunication', () => {
 
     it('should instantiate', () => {
         expect(testCom).toBeDefined();
-        expect(() => DIVECommunication.get('id')).not.toThrow();
         expect(DIVECommunication['__instances']).toHaveLength(1);
     });
 
+    it('should get instance', () => {
+        expect(testCom).toBeDefined();
+        expect(DIVECommunication.get(testCom.id)).toBeDefined();
+
+        testCom.PerformAction('ADD_OBJECT', {
+            id: 'someID',
+        } as COMModel);
+        expect(DIVECommunication.get('someID')).toBeDefined();
+    });
+
     it('should destroy instance', () => {
         expect(testCom).toBeDefined();
         testCom.DestroyInstance();
@@ -670,6 +679,14 @@ describe('dive/communication/DIVECommunication', () => {
         expect(visibility).toBe(false);
     });
 
+    it('should perform action USE_TOOL', () => {
+        let success = testCom.PerformAction('USE_TOOL', { tool: 'select' });
+        expect(success).toBe(true);
+
+        success = testCom.PerformAction('USE_TOOL', { tool: 'none' });
+        expect(success).toBe(true);
+    });
+
     it('should perform action MODEL_LOADED', () => {
         const payload = {
             entityType: "model",

package/src/controls/OrbitControls.ts

@@ -37,6 +37,8 @@ export default class DIVEOrbitControls extends OrbitControls {
     public object: DIVEPerspectiveCamera;
     public domElement: HTMLCanvasElement;
 
+    private _removePreRenderCallback: () => void = () => { };
+
     constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
         super(camera, renderer.domElement);
 
@@ -46,14 +48,23 @@ export default class DIVEOrbitControls extends OrbitControls {
 
         this.object = camera;
 
-        renderer.AddPreRenderCallback(() => {
+        const id = renderer.AddPreRenderCallback(() => {
             this.preRenderCallback();
         });
 
+        this._removePreRenderCallback = () => {
+            renderer.RemovePreRenderCallback(id);
+        }
+
         this.enableDamping = settings.enableDamping;
         this.dampingFactor = settings.dampingFactor;
     }
 
+    public Dispose(): void {
+        this._removePreRenderCallback();
+        this.dispose();
+    }
+
     public ComputeEncompassingView(bb: Box3): { position: Vector3Like, target: Vector3Like } {
         const center = bb.getCenter(new Vector3());
         const size = bb.getSize(new Vector3());

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

@@ -152,6 +152,11 @@ describe('dive/controls/DIVEOrbitControls', () => {
         expect(controller).toBeDefined();
     });
 
+    it('should dispose', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
+        expect(() => controller.Dispose()).not.toThrow();
+    });
+
     it('should compute encompassing view', () => {
         const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.ComputeEncompassingView(new Box3())).not.toThrow();

package/src/dive.ts

@@ -12,6 +12,7 @@ import type { Actions } from './com/actions/index.ts';
 import type { COMPov, COMLight, COMModel, COMEntity } from './com/types.ts';
 import { DIVEMath } from './math/index.ts';
 import { generateUUID } from "three/src/math/MathUtils";
+import { DIVEInfo } from "./info/Info.ts";
 
 export type DIVESettings = {
     autoResize: boolean;
@@ -145,6 +146,10 @@ export default class DIVE {
         return this.renderer.domElement;
     }
 
+    public get Info(): DIVEInfo {
+        return DIVEInfo;
+    }
+
     // setters
     public set Settings(settings: Partial<DIVESettings>) {
         const settingsDelta = getObjectDelta(this._settings, settings);
@@ -229,6 +234,7 @@ export default class DIVE {
     public Dispose(): void {
         this.removeResizeObserver();
         this.renderer.Dispose();
+        this.orbitControls.Dispose();
         this.axisCamera?.Dispose();
         this.animationSystem.Dispose();
         this.toolbox.Dispose();

package/src/info/Info.ts

@@ -0,0 +1,114 @@
+export class DIVEInfo {
+    private static _supportsWebXR: boolean | null = null;
+
+    /**
+     *
+     * @returns The system the user is using. Possible values are "Android", "iOS", "Windows", "MacOS", "Linux" or "Unknown".
+     */
+    public static GetSystem(): string {
+        const platform = navigator.platform;
+        if (/Android/.test(navigator.userAgent)) {
+            return "Android";
+        } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
+            return "iOS";
+        } else if (platform.startsWith("Win")) {
+            return "Windows";
+        } else if (platform.startsWith("Mac")) {
+            return "MacOS";
+        } else if (platform.startsWith("Linux")) {
+            return "Linux";
+        } else {
+            return "Unknown";
+        }
+    }
+
+    /**
+     * @returns A promise that resolves to a boolean indicating whether the user's device supports WebXR.
+     */
+    public static async GetSupportsWebXR(): Promise<boolean> {
+        if (this._supportsWebXR !== null) {
+            return this._supportsWebXR;
+        }
+
+        if (!navigator.xr) {
+            this._supportsWebXR = false;
+            return this._supportsWebXR;
+        }
+        // Check if immersive-vr session mode is supported
+        try {
+            const supported = await navigator.xr.isSessionSupported('immersive-ar');
+            this._supportsWebXR = supported;
+        } catch (error) {
+            this._supportsWebXR = false;
+        }
+        return this._supportsWebXR;
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device supports AR Quick Look.
+     */
+    public static GetSupportsARQuickLook(): boolean {
+        const a = document.createElement("a");
+        if (a.relList.supports("ar")) {
+            return true;
+        }
+
+        // fallback check
+        const userAgent = navigator.userAgent;
+
+        // Check if the device is running iOS
+        const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as unknown as Window & { MSStream?: string }).MSStream;
+        if (!isIOS) {
+            return false;
+        }
+
+        // Extract iOS version
+        const match = userAgent.match(/OS (\d+)_/);
+        if (!match || match.length < 2) {
+            return false;
+        }
+        const iOSVersion = parseInt(match[1], 10);
+
+        // Minimum iOS version for QuickLook support
+        const minQuickLookVersion = 12;
+
+        // Check if the iOS version is supported
+        if (iOSVersion < minQuickLookVersion) {
+            return false;
+        }
+
+        // Check for supported browser
+        const isSupportedBrowser = /^((?!chrome|android).)*safari|CriOS|FxiOS/i.test(userAgent);
+        if (isSupportedBrowser) {
+            return true;
+        }
+
+        // Default to false if none of the conditions are met
+        return false;
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device is a mobile device.
+     */
+    public static get isMobile(): boolean {
+        return this.GetSystem() === "Android" || this.GetSystem() === "iOS";
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device is a desktop device.
+     */
+    public static get isDesktop(): boolean {
+        return !this.isMobile;
+    }
+
+    /**
+     * @returns A promise that resolves to a boolean indicating whether the user's device is capable of AR.
+     */
+    public static async GetIsARCapable(): Promise<boolean> {
+        if (this.GetSupportsARQuickLook()) {
+            return true;
+        }
+
+        return await this.GetSupportsWebXR();
+    }
+}

package/src/info/__test__/Info.test.ts

@@ -0,0 +1,267 @@
+import { DIVEInfo } from '../Info';
+
+const mockNavigator = (navigator: any) => {
+    Object.defineProperty(global, 'navigator', {
+        value: navigator,
+        writable: true
+    });
+};
+
+describe('dive/info/DIVEInfo', () => {
+    beforeEach(() => {
+        DIVEInfo['_supportsWebXR'] = null;
+        jest.clearAllMocks();
+    });
+
+    it('should get system: Windows', () => {
+        mockNavigator({
+            platform: 'Win64'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Windows');
+    });
+
+    it('should get system: MacOS', () => {
+        mockNavigator({
+            platform: 'MacIntel'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('MacOS');
+    });
+
+    it('should get system: Linux', () => {
+        mockNavigator({
+            platform: 'Linux'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Linux');
+    });
+
+    it('should get system: Android', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            platform: 'Linux'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Android');
+    });
+
+    it('should get system: iOS', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            platform: 'iPhone'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('iOS');
+    });
+
+    it('should get system: Unknown', () => {
+        mockNavigator({
+            platform: 'Unknown'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Unknown');
+    });
+
+    it('should support webXR', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(true),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(true);
+    });
+
+    it('should not support webXR (xr undefined)', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: undefined
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support webXR', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(false),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support webXR on error', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should return cached value', async () => {
+        DIVEInfo['_supportsWebXR'] = true;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(true);
+    });
+
+    it('should return cached value (false)', async () => {
+        DIVEInfo['_supportsWebXR'] = false;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should support ARQuickLook with feature detection', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => true } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 15, Safari)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Google)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) GSA/277.0.555192628 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0.6478.153 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 CriOS/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Firefox)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 FxiOS/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should not support ARQuickLook (Android)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.3'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, no iOS version)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, iOS 17, no browser)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X)'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, iOS <12, Safari)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should be mobile (iOS)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('iOS');
+        expect(DIVEInfo.isMobile).toBe(true);
+        expect(DIVEInfo.isDesktop).toBe(false);
+    });
+
+    it('should be mobile (Android)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Android');
+        expect(DIVEInfo.isMobile).toBe(true);
+        expect(DIVEInfo.isDesktop).toBe(false);
+    });
+
+    it('should be desktop (Windows)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Windows');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (MacOS)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('MacOS');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Linux)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Linux');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Unknown)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Unknown');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be capable of AR (ARQuickLook)', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(true);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should be capable of AR (WebXR)', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(true);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should not be capable of AR', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(false);
+    });
+});