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

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

@@ -1,4 +1,5 @@
-import { DIVEInfo, WebXRUnsupportedReason } from '../Info';
+import { SystemInfo } from '../Info';
+import { ESystem, EWebXRUnsupportedReason } from '../../types/info';
 
 const mockNavigator = (navigator: any) => {
     Object.defineProperty(global, 'navigator', {
@@ -9,54 +10,62 @@ const mockNavigator = (navigator: any) => {
 
 describe('dive/info/DIVEInfo', () => {
     beforeEach(() => {
-        DIVEInfo['_supportsWebXR'] = null;
+        SystemInfo['_supportsWebXR'] = false;
         jest.clearAllMocks();
     });
 
     it('should get system: Windows', () => {
         mockNavigator({
-            platform: 'Win64',
+            userAgent:
+                'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.153 Safari/537.36',
         });
-        expect(DIVEInfo.GetSystem()).toBe('Windows');
+        expect(SystemInfo.GetSystem()).toBe(ESystem.WINDOWS);
     });
 
     it('should get system: MacOS', () => {
         mockNavigator({
-            platform: 'MacIntel',
+            userAgent:
+                'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.153 Safari/537.36',
         });
-        expect(DIVEInfo.GetSystem()).toBe('MacOS');
+        expect(SystemInfo.GetSystem()).toBe(ESystem.MACOS);
     });
 
     it('should get system: Linux', () => {
         mockNavigator({
-            platform: 'Linux',
+            userAgent:
+                'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.153 Safari/537.36',
         });
-        expect(DIVEInfo.GetSystem()).toBe('Linux');
+        expect(SystemInfo.GetSystem()).toBe(ESystem.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',
+                'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.153 Mobile Safari/537.36',
         });
-        expect(DIVEInfo.GetSystem()).toBe('Android');
+        expect(SystemInfo.GetSystem()).toBe(ESystem.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',
+                'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
         });
-        expect(DIVEInfo.GetSystem()).toBe('iOS');
+        expect(SystemInfo.GetSystem()).toBe(ESystem.IOS);
     });
 
     it('should get system: Unknown', () => {
         mockNavigator({
-            platform: 'Unknown',
+            userAgent: 'Unknown Browser',
         });
-        expect(DIVEInfo.GetSystem()).toBe('Unknown');
+        expect(SystemInfo.GetSystem()).toBe(ESystem.UNKNOWN);
+    });
+
+    it('should get system: Unknown when window is undefined', () => {
+        const originalNavigator = window.navigator;
+        window.navigator = undefined as any;
+        expect(SystemInfo.GetSystem()).toBe(ESystem.UNKNOWN);
+        window.navigator = originalNavigator;
     });
 
     it('should support webXR', async () => {
@@ -65,19 +74,29 @@ describe('dive/info/DIVEInfo', () => {
                 isSessionSupported: jest.fn().mockResolvedValue(true),
             },
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const restoreSecureContext = window.isSecureContext;
+        window.isSecureContext = true;
+
+        const supports = await SystemInfo.GetSupportsWebXR();
         expect(supports).toBe(true);
+
+        window.isSecureContext = restoreSecureContext;
     });
 
     it('should not support webXR (xr undefined)', async () => {
         mockNavigator({
             xr: undefined,
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const restoreSecureContext = window.isSecureContext;
+        window.isSecureContext = true;
+
+        const supports = await SystemInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
 
-        const reason = DIVEInfo.GetWebXRUnsupportedReason();
-        expect(reason).toBe(WebXRUnsupportedReason.UNKNWON_ERROR);
+        const reason = SystemInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(EWebXRUnsupportedReason.NO_WEBXR_API);
+
+        window.isSecureContext = restoreSecureContext;
     });
 
     it('should not support webXR (xr undefined & isSecureContext false)', async () => {
@@ -85,11 +104,11 @@ describe('dive/info/DIVEInfo', () => {
         mockNavigator({
             xr: undefined,
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const supports = await SystemInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
 
-        const reason = DIVEInfo.GetWebXRUnsupportedReason();
-        expect(reason).toBe(WebXRUnsupportedReason.NO_HTTPS);
+        const reason = SystemInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(EWebXRUnsupportedReason.NO_HTTPS);
     });
 
     it('should get empty reason (not checked)', async () => {
@@ -98,9 +117,15 @@ describe('dive/info/DIVEInfo', () => {
                 isSessionSupported: jest.fn().mockResolvedValue(true),
             },
         });
+        const restoreSecureContext = window.isSecureContext;
+        window.isSecureContext = true;
+
+        await SystemInfo.GetSupportsWebXR();
         console.log = jest.fn();
-        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        const reason = SystemInfo.GetWebXRUnsupportedReason();
         expect(reason).toBe(null);
+
+        window.isSecureContext = restoreSecureContext;
     });
 
     it('should get empty reason (webXR supported)', async () => {
@@ -109,8 +134,14 @@ describe('dive/info/DIVEInfo', () => {
                 isSessionSupported: jest.fn().mockResolvedValue(true),
             },
         });
-        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        const restoreSecureContext = window.isSecureContext;
+        window.isSecureContext = true;
+
+        await SystemInfo.GetSupportsWebXR();
+        const reason = SystemInfo.GetWebXRUnsupportedReason();
         expect(reason).toBe(null);
+
+        window.isSecureContext = restoreSecureContext;
     });
 
     it('should not support webXR', async () => {
@@ -119,13 +150,18 @@ describe('dive/info/DIVEInfo', () => {
                 isSessionSupported: jest.fn().mockResolvedValue(false),
             },
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const restoreSecureContext = window.isSecureContext;
+        window.isSecureContext = true;
+
+        const supports = await SystemInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
 
-        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        const reason = SystemInfo.GetWebXRUnsupportedReason();
         expect(reason).toBe(
-            WebXRUnsupportedReason.IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE,
+            EWebXRUnsupportedReason.IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE,
         );
+
+        window.isSecureContext = restoreSecureContext;
     });
 
     it('should not support webXR on error', async () => {
@@ -134,205 +170,177 @@ describe('dive/info/DIVEInfo', () => {
                 isSessionSupported: jest.fn().mockRejectedValue('error'),
             },
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const restoreSecureContext = window.isSecureContext;
+        window.isSecureContext = true;
+
+        const supports = await SystemInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
 
-        const reason = DIVEInfo.GetWebXRUnsupportedReason();
-        expect(reason).toBe(WebXRUnsupportedReason.AR_SESSION_NOT_ALLOWED);
+        const reason = SystemInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(EWebXRUnsupportedReason.AR_PERMISSION_DENIED);
+
+        window.isSecureContext = restoreSecureContext;
     });
 
     it('should return cached value', async () => {
-        DIVEInfo['_supportsWebXR'] = true;
+        SystemInfo['_supportsWebXR'] = true;
         mockNavigator({
             xr: {
                 isSessionSupported: jest.fn().mockRejectedValue('error'),
             },
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const supports = await SystemInfo.GetSupportsWebXR();
         expect(supports).toBe(true);
     });
 
     it('should return cached value (false)', async () => {
-        DIVEInfo['_supportsWebXR'] = false;
+        SystemInfo['_supportsWebXR'] = false;
         mockNavigator({
             xr: {
                 isSessionSupported: jest.fn().mockRejectedValue('error'),
             },
         });
-        const supports = await DIVEInfo.GetSupportsWebXR();
+        const supports = await SystemInfo.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.',
-        });
+    it('should support ARQuickLook when relList supports AR', () => {
         jest.spyOn(document, 'createElement').mockReturnValue({
             relList: { supports: () => true },
         } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.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.',
-        });
+    it('should not support ARQuickLook when relList does not support AR', () => {
         jest.spyOn(document, 'createElement').mockReturnValue({
             relList: { supports: () => false },
         } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
-        expect(supports).toBe(true);
+        const supports = SystemInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
     });
 
-    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 be mobile (iOS)', () => {
+        jest.spyOn(SystemInfo, 'GetSystem').mockReturnValue(ESystem.IOS);
+        expect(SystemInfo.isMobile).toBe(true);
+        expect(SystemInfo.isDesktop).toBe(false);
     });
 
-    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 be mobile (Android)', () => {
+        jest.spyOn(SystemInfo, 'GetSystem').mockReturnValue(ESystem.ANDROID);
+        expect(SystemInfo.isMobile).toBe(true);
+        expect(SystemInfo.isDesktop).toBe(false);
+    });
+
+    it('should be desktop (Windows)', () => {
+        jest.spyOn(SystemInfo, 'GetSystem').mockReturnValue(ESystem.WINDOWS);
+        expect(SystemInfo.isMobile).toBe(false);
+        expect(SystemInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (MacOS)', () => {
+        jest.spyOn(SystemInfo, 'GetSystem').mockReturnValue(ESystem.MACOS);
+        expect(SystemInfo.isMobile).toBe(false);
+        expect(SystemInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Linux)', () => {
+        jest.spyOn(SystemInfo, 'GetSystem').mockReturnValue(ESystem.LINUX);
+        expect(SystemInfo.isMobile).toBe(false);
+        expect(SystemInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Unknown)', () => {
+        jest.spyOn(SystemInfo, 'GetSystem').mockReturnValue(ESystem.UNKNOWN);
+        expect(SystemInfo.isMobile).toBe(false);
+        expect(SystemInfo.isDesktop).toBe(true);
     });
 
-    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+    it('should be capable of AR (ARQuickLook)', async () => {
+        jest.spyOn(SystemInfo, 'GetSupportsARQuickLook').mockReturnValue(true);
+        jest.spyOn(SystemInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await SystemInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should be capable of AR (WebXR)', async () => {
+        jest.spyOn(SystemInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(SystemInfo, 'GetSupportsWebXR').mockResolvedValue(true);
+        expect(await SystemInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should not be capable of AR', async () => {
+        jest.spyOn(SystemInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(SystemInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await SystemInfo.GetIsARCapable()).toBe(false);
+    });
+
+    it('should support SceneViewer (Android, Chrome 89+)', () => {
         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.',
+                'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Mobile Safari/537.36',
         });
-        jest.spyOn(document, 'createElement').mockReturnValue({
-            relList: { supports: () => false },
-        } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.GetSupportsSceneViewer();
         expect(supports).toBe(true);
     });
 
-    it('should support ARQuickLook (iPhone, iOS 17, Firefox)', () => {
+    it('should support SceneViewer (Android, Chrome 126+)', () => {
         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.',
+                'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.153 Mobile Safari/537.36',
         });
-        jest.spyOn(document, 'createElement').mockReturnValue({
-            relList: { supports: () => false },
-        } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.GetSupportsSceneViewer();
         expect(supports).toBe(true);
     });
 
-    it('should not support ARQuickLook (Android)', () => {
+    it('should not support SceneViewer (Android, Chrome <89)', () => {
         mockNavigator({
             userAgent:
-                'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.3',
+                'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4389.72 Mobile Safari/537.36',
         });
-        jest.spyOn(document, 'createElement').mockReturnValue({
-            relList: { supports: () => false },
-        } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.GetSupportsSceneViewer();
         expect(supports).toBe(false);
     });
 
-    it('should not support ARQuickLook (iPhone, no iOS version)', () => {
+    it('should not support SceneViewer (Android, no Chrome)', () => {
         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.',
+                'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Mobile Safari/537.36',
         });
-        jest.spyOn(document, 'createElement').mockReturnValue({
-            relList: { supports: () => false },
-        } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.GetSupportsSceneViewer();
         expect(supports).toBe(false);
     });
 
-    it('should not support ARQuickLook (iPhone, iOS 17, no browser)', () => {
+    it('should not support SceneViewer (iOS)', () => {
         mockNavigator({
-            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X)',
+            userAgent:
+                'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
         });
-        jest.spyOn(document, 'createElement').mockReturnValue({
-            relList: { supports: () => false },
-        } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.GetSupportsSceneViewer();
         expect(supports).toBe(false);
     });
 
-    it('should not support ARQuickLook (iPhone, iOS <12, Safari)', () => {
+    it('should not support SceneViewer (Windows)', () => {
         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.',
+                'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.153 Safari/537.36',
         });
-        jest.spyOn(document, 'createElement').mockReturnValue({
-            relList: { supports: () => false },
-        } as unknown as HTMLAnchorElement);
-        const supports = DIVEInfo.GetSupportsARQuickLook();
+        const supports = SystemInfo.GetSupportsSceneViewer();
         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 support SceneViewer (no window)', () => {
+        const originalWindow = global.window;
+        global.window = undefined as any;
+        const supports = SystemInfo.GetSupportsSceneViewer();
+        expect(supports).toBe(false);
+        global.window = originalWindow;
     });
 
-    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);
+    it('should not support SceneViewer (no navigator)', () => {
+        const originalNavigator = global.navigator;
+        global.navigator = undefined as any;
+        const supports = SystemInfo.GetSupportsSceneViewer();
+        expect(supports).toBe(false);
+        global.navigator = originalNavigator;
     });
 });

package/src/interface/Movable.ts

@@ -4,9 +4,9 @@
  * @module
  */
 
-export interface DIVEMovable {
-    isMovable: true;
-    onMoveStart?: () => void;
-    onMove?: () => void;
-    onMoveEnd?: () => void;
+export class DIVEMovable {
+    readonly isMovable: true = true;
+    public onMoveStart?(): void;
+    public onMove?(): void;
+    public onMoveEnd?(): void;
 }

package/src/interface/Selectable.ts

@@ -4,8 +4,8 @@
  * @module
  */
 
-export interface DIVESelectable {
-    isSelectable: true;
-    onSelect?: () => void;
-    onDeselect?: () => void;
+export class DIVESelectable {
+    readonly isSelectable: true = true;
+    public onSelect?(): void;
+    public onDeselect?(): void;
 }

package/src/loader/Loader.ts

@@ -0,0 +1,48 @@
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { USDZLoader } from 'three/examples/jsm/loaders/USDZLoader';
+import { Object3D } from 'three';
+import { type FileType, SUPPORTED_FILE_TYPES } from '../types';
+
+export class Loader {
+    private _gltfLoader: GLTFLoader;
+    private _usdzLoader: USDZLoader;
+
+    constructor() {
+        this._gltfLoader = new GLTFLoader();
+        this._usdzLoader = new USDZLoader();
+    }
+
+    public async load(uri: string): Promise<Object3D> {
+        const type = this._getFileTypeFromUri(uri);
+        return this._load(uri, type);
+    }
+
+    private _getFileTypeFromUri(uri: string): FileType {
+        const extension = uri.split('.').pop()?.toLowerCase() as FileType;
+        if (!extension || !SUPPORTED_FILE_TYPES.includes(extension)) {
+            throw new Error(`Unsupported file type: ${extension}`);
+        }
+        return extension;
+    }
+
+    private async _load(uri: string, type: FileType): Promise<Object3D> {
+        switch (type) {
+            case 'glb':
+            case 'gltf': {
+                return this._loadGltf(uri);
+            }
+            case 'usdz': {
+                return this._loadUsdz(uri);
+            }
+        }
+    }
+
+    private async _loadGltf(uri: string): Promise<Object3D> {
+        const gltf = await this._gltfLoader.loadAsync(uri);
+        return gltf.scene;
+    }
+
+    private async _loadUsdz(uri: string): Promise<Object3D> {
+        return this._usdzLoader.loadAsync(uri);
+    }
+}

package/src/model/Model.ts

@@ -1,6 +1,11 @@
-import { Mesh, MeshStandardMaterial, Raycaster, Vector3 } from 'three';
+import {
+    Mesh,
+    MeshStandardMaterial,
+    type Object3D,
+    Raycaster,
+    Vector3,
+} from 'three';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
-import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
 import { type COMMaterial } from '../com/types';
 import { DIVENode } from '../node/Node';
@@ -22,11 +27,11 @@ export class DIVEModel extends DIVENode {
     private _mesh: Mesh | null = null;
     private _material: MeshStandardMaterial | null = null;
 
-    public SetModel(gltf: GLTF): void {
+    public SetModel(gltf: Object3D): void {
         this.clear();
         this._boundingBox.makeEmpty();
 
-        gltf.scene.traverse((child) => {
+        gltf.traverse((child) => {
             child.castShadow = true;
             child.receiveShadow = true;
 
@@ -47,7 +52,7 @@ export class DIVEModel extends DIVENode {
             }
         });
 
-        this.add(gltf.scene);
+        this.add(gltf);
     }
 
     public SetMaterial(material: Partial<COMMaterial>): void {

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

@@ -2,7 +2,6 @@ import { RaycasterIntersectObjectMock } from '../../../__mocks__/three';
 
 import { DIVEModel } from '../Model';
 import { DIVECommunication } from '../../com/Communication';
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DIVEScene } from '../../scene/Scene';
 import {
     Vector3,
@@ -29,12 +28,6 @@ jest.mock('../../com/Communication.ts', () => {
 const object = new Object3D();
 object.children.push(new Mesh());
 
-const gltf = {
-    scene: {
-        ...object,
-    },
-} as unknown as GLTF;
-
 jest.spyOn(DIVECommunication, 'get').mockReturnValue({
     PerformAction: jest.fn(),
 } as unknown as DIVECommunication);
@@ -57,11 +50,11 @@ describe('dive/model/DIVEModel', () => {
     });
 
     it('should set model', () => {
-        expect(() => model.SetModel(gltf)).not.toThrow();
+        expect(() => model.SetModel(object)).not.toThrow();
     });
 
     it('should place on floor', () => {
-        model.SetModel(gltf);
+        model.SetModel(object);
 
         const com = DIVECommunication.get('id')!;
         const spyPerformAction = jest.spyOn(com, 'PerformAction');
@@ -204,14 +197,14 @@ describe('dive/model/DIVEModel', () => {
 
     it('should set model material when material already set before', () => {
         model.SetMaterial({ roughness: 0.5 } as COMMaterial);
-        expect(() => model.SetModel(gltf)).not.toThrow();
+        expect(() => model.SetModel(object)).not.toThrow();
         expect(
             (model['_mesh']?.material as MeshStandardMaterial).roughness,
         ).toBe(0.5);
     });
 
     it('should set material to model when model already set before', () => {
-        model.SetModel(gltf);
+        model.SetModel(object);
         expect(() =>
             model.SetMaterial({ roughness: 0.5 } as COMMaterial),
         ).not.toThrow();