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

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

@@ -34,6 +34,7 @@ import {
     type COMPov,
 } from '../types';
 import { type DIVESceneObject } from '../../types';
+import { type ARSystemOptions } from '../../ar/AR';
 
 const mockModule: Record<string, any> = {
     get: jest.fn().mockReturnValue(Promise.resolve({})),
@@ -92,6 +93,7 @@ jest.mock('../../toolbox/select/SelectTool', () => {
 const mockRenderer = {
     render: jest.fn(),
     OnResize: jest.fn(),
+    StartRenderer: jest.fn(),
 } as unknown as DIVERenderer;
 
 const mockScene = {
@@ -288,6 +290,12 @@ describe('dive/communication/DIVECommunication', () => {
         ).not.toThrow();
     });
 
+    it('should perform action START_RENDER', () => {
+        const success = testCom.PerformAction('START_RENDER');
+        expect(mockRenderer.StartRenderer).toHaveBeenCalledTimes(1);
+        expect(success).toBe(true);
+    });
+
     it('should perform action ADD_OBJECT', () => {
         const payload = {
             entityType: 'light',
@@ -998,14 +1006,19 @@ describe('dive/communication/DIVECommunication', () => {
 
     it('should perform action LAUNCH_AR', async () => {
         jest.spyOn(mockModule, 'get').mockResolvedValue({
-            Launch: jest.fn(),
+            launch: jest.fn(),
         });
         const arModule = await testCom['_ar'].get();
         const arLaunchSpy = jest
-            .spyOn(arModule, 'Launch')
+            .spyOn(arModule, 'launch')
             .mockResolvedValueOnce();
 
-        const result = await testCom.PerformAction('LAUNCH_AR', undefined);
+        const result = await testCom.PerformAction('LAUNCH_AR', {
+            uri: 'https://example.com',
+            options: {
+                arPlacement: 'horizontal',
+            } as ARSystemOptions,
+        });
         expect(arLaunchSpy).toHaveBeenCalledTimes(1);
     });
 

package/src/com/actions/index.ts

@@ -1,3 +1,4 @@
+import START_RENDER from './renderer/startrender.ts';
 import SET_BACKGROUND from './scene/setbackground.ts';
 import RESET_CAMERA from './camera/resetcamera.ts';
 import SET_CAMERA_LAYER from './camera/setcameralayer.ts';
@@ -28,6 +29,7 @@ import EXPORT_SCENE from './scene/exportscene.ts';
 import LAUNCH_AR from './scene/launchar.ts';
 
 export interface Actions {
+    START_RENDER: START_RENDER;
     GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA;
     GET_ALL_OBJECTS: GET_ALL_OBJECTS;
     GET_OBJECTS: GET_OBJECTS;

package/src/com/actions/renderer/startrender.ts

@@ -0,0 +1,5 @@
+export default interface START_RENDER {
+    DESCRIPTION: 'Starts the render process.';
+    PAYLOAD: undefined;
+    RETURN: boolean;
+}

package/src/com/actions/scene/launchar.ts

@@ -1,7 +1,7 @@
-import { type DIVEAROptions } from '../../../ar/AR';
+import { type ARSystemOptions } from '../../../ar/AR';
 
 export default interface LAUNCH_AR {
     DESCRIPTION: 'Launches AR mode in native capabilities. (iOS: AR Quick Look, Android: Google Scene Viewer)';
-    PAYLOAD?: DIVEAROptions;
+    PAYLOAD: { uri: string; options?: ARSystemOptions };
     RETURN: Promise<void>;
 }

package/src/converter/Converter.ts

@@ -0,0 +1,117 @@
+import { Loader } from '../loader/Loader';
+import { Exporter } from '../exporter/Exporter';
+import {
+    type FileType,
+    SUPPORTED_FILE_TYPES,
+    type ExportOptions,
+} from '../types';
+
+export class ConversionError extends Error {
+    constructor(
+        message: string,
+        public readonly cause?: unknown,
+    ) {
+        super(message);
+        this.name = 'ConversionError';
+    }
+}
+
+export class FileTypeError extends ConversionError {
+    constructor(extension: string) {
+        super(
+            `Unsupported file type: ${extension}. Supported types are: ${SUPPORTED_FILE_TYPES.join(', ')}`,
+        );
+        this.name = 'FileTypeError';
+    }
+}
+
+export class NetworkError extends ConversionError {
+    constructor(uri: string, cause?: unknown) {
+        super(`Failed to fetch file from ${uri}`, cause);
+        this.name = 'NetworkError';
+    }
+}
+
+export class Converter {
+    private _loader: Loader;
+    private _exporter: Exporter;
+
+    constructor(private readonly _uri: string) {
+        this._loader = new Loader();
+        this._exporter = new Exporter();
+    }
+
+    public static convert(uri: string): Converter {
+        return new Converter(uri);
+    }
+
+    public async to<T extends FileType>(
+        type: T,
+        options?: ExportOptions<T>,
+    ): Promise<ArrayBuffer> {
+        try {
+            const sourceType = this._getFileTypeFromUri();
+
+            // If source and target types match, just return the file content
+            if (sourceType === type) {
+                return await this._loadFile();
+            }
+
+            // Otherwise, convert through Object3D
+            const object3D = await this._loader.load(this._uri);
+            return await this._exporter.export(object3D, type, options);
+        } catch (error) {
+            if (error instanceof ConversionError) {
+                throw error;
+            }
+            throw new ConversionError('Failed to convert file', error);
+        }
+    }
+
+    private _getFileTypeFromUri(): FileType {
+        const extension = this._uri.split('.').pop()?.toLowerCase();
+        if (!extension) {
+            throw new FileTypeError('no extension');
+        }
+        if (!SUPPORTED_FILE_TYPES.includes(extension as FileType)) {
+            throw new FileTypeError(extension);
+        }
+        return extension as FileType;
+    }
+
+    private async _loadFile(): Promise<ArrayBuffer> {
+        try {
+            const response = await fetch(this._uri);
+            if (!response.ok) {
+                throw new NetworkError(
+                    this._uri,
+                    `HTTP error! status: ${response.status}`,
+                );
+            }
+            return response.arrayBuffer();
+        } catch (error) {
+            if (error instanceof NetworkError) {
+                throw error;
+            }
+            throw new NetworkError(this._uri, error);
+        }
+    }
+}
+
+// Example usage:
+// Converter.convert('https://example.com/model.glb').to('usdz', {
+//     usdz: {
+//         ar: {
+//             anchoring: { type: 'plane' },
+//             planeAnchoring: { alignment: 'horizontal' }
+//         }
+//     }
+// });
+//
+// Converter.convert('https://example.com/model.usdz').to('gltf', {
+//     gltf: {
+//         onlyVisible: true,
+//         maxTextureSize: 2048,
+//         includeCustomExtensions: true
+//     }
+// });

package/src/dive.ts

@@ -18,11 +18,12 @@ import { DIVEAnimationSystem } from './animation/AnimationSystem.ts';
 import DIVEAxisCamera from './axiscamera/AxisCamera.ts';
 import { getObjectDelta } from './helper/getObjectDelta/getObjectDelta.ts';
 import { MathUtils } from 'three';
-import { DIVEInfo } from './info/Info.ts';
+import { SystemInfo } from './info/Info.ts';
 import pkgjson from '../package.json';
 
 export type DIVESettings = {
     autoResize: boolean;
+    autoStart: boolean;
     displayAxes: boolean;
     renderer: Partial<DIVERendererSettings>;
     perspectiveCamera: Partial<DIVEPerspectiveCameraSettings>;
@@ -31,6 +32,7 @@ export type DIVESettings = {
 
 export const DIVEDefaultSettings: DIVESettings = {
     autoResize: true,
+    autoStart: true,
     displayAxes: false,
     renderer: DIVERendererDefaultSettings,
     perspectiveCamera: DIVEPerspectiveCameraDefaultSettings,
@@ -156,8 +158,8 @@ export default class DIVE {
         return this.renderer.domElement;
     }
 
-    public get Info(): DIVEInfo {
-        return DIVEInfo;
+    public get Info(): SystemInfo {
+        return SystemInfo;
     }
 
     // setters
@@ -266,9 +268,6 @@ export default class DIVE {
             this.addResizeObserver();
         }
 
-        // whene everything is done, start the renderer
-        this.renderer.StartRenderer(this.scene, this.perspectiveCamera);
-
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).DIVE = {
             PrintScene: () => {
@@ -307,6 +306,11 @@ export default class DIVE {
                            @@@@@@@                                @@@@@@
 
         `);
+
+        if (this._settings.autoStart) {
+            // when everything is done, start the renderer
+            this.renderer.StartRenderer(this.scene, this.perspectiveCamera);
+        }
     }
 
     public Dispose(): void {

package/src/exporter/Exporter.ts

@@ -0,0 +1,75 @@
+import { Object3D } from 'three';
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
+import { USDZExporter } from 'three/examples/jsm/exporters/USDZExporter';
+import {
+    type FileType,
+    type GLTFExporterOptions,
+    type USDZExporterOptions,
+    type ExportOptions,
+} from '../types';
+
+export class Exporter {
+    private _gltfExporter: GLTFExporter;
+    private _usdzExporter: USDZExporter;
+
+    constructor() {
+        this._gltfExporter = new GLTFExporter();
+        this._usdzExporter = new USDZExporter();
+    }
+
+    public async export<T extends FileType>(
+        object: Object3D,
+        type: T,
+        options?: ExportOptions<T>,
+    ): Promise<ArrayBuffer> {
+        switch (type) {
+            case 'glb': {
+                return this._exportGlb(object, options);
+            }
+            case 'gltf': {
+                return this._exportGltf(object, options);
+            }
+            case 'usdz': {
+                return this._exportUsdz(object, options);
+            }
+            default:
+                throw new Error(`Unsupported file type: ${type}`);
+        }
+    }
+
+    private async _exportGlb(
+        object: Object3D,
+        options?: GLTFExporterOptions,
+    ): Promise<ArrayBuffer> {
+        const result = await this._gltfExporter.parseAsync(object, {
+            ...options,
+            binary: true,
+        });
+        if (result instanceof ArrayBuffer) {
+            return result;
+        }
+        throw new Error('Failed to export GLB: expected ArrayBuffer');
+    }
+
+    private async _exportGltf(
+        object: Object3D,
+        options?: GLTFExporterOptions,
+    ): Promise<ArrayBuffer> {
+        const json = await this._gltfExporter.parseAsync(object, {
+            ...options,
+            binary: false,
+        });
+        const text = JSON.stringify(json);
+        const encoder = new TextEncoder();
+        const bytes = encoder.encode(text);
+        return bytes.buffer as ArrayBuffer;
+    }
+
+    private async _exportUsdz(
+        object: Object3D,
+        options?: USDZExporterOptions,
+    ): Promise<ArrayBuffer> {
+        const result = await this._usdzExporter.parse(object, options);
+        return result.buffer as ArrayBuffer;
+    }
+}

package/src/helper/applyMixins/applyMixins.ts

@@ -1,11 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+// A generic constructor type.
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+// Converts a union of types to an intersection of types.
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+    k: infer I,
+) => void
+    ? I
+    : never;
+
+// Merges the instance types of the base class and all mixin classes.
+type MixedInstance<
+    T extends Constructor,
+    K extends readonly Constructor[],
+> = InstanceType<T> & UnionToIntersection<InstanceType<K[number]>>;
+
+// Recursively flatten the constructor parameter lists for a tuple of constructors.
+type FlattenConstructorParams<T extends readonly Constructor[]> =
+    T extends readonly [infer First, ...infer Rest]
+        ? First extends Constructor
+            ? Rest extends readonly Constructor[]
+                ? [
+                      ...ConstructorParameters<First>,
+                      ...FlattenConstructorParams<Rest>,
+                  ]
+                : ConstructorParameters<First>
+            : []
+        : [];
+
+// Constructs the mixed constructor type.
+// It accepts the parameters of T followed by all the parameters of K and
+// produces an instance that is the intersection of the instance types.
+type MixedConstructor<
+    T extends Constructor,
+    K extends readonly Constructor[],
+> = new (
+    ...args: [...ConstructorParameters<T>, ...FlattenConstructorParams<K>]
+) => MixedInstance<T, K>;
+
 /**
- * Merges two class prototypes to a new one.
+ * Applies mixins to a base class.
+ *
+ * @param derivedCtor Base class constructor
+ * @param constructors Additional constructors that get mixed into the base class
+ * @returns A mixed constructor with the instance type of the base class and all mixin classes
+ * @example
+ * ```
+ * const SelectableMovableObject3D = applyMixins(Object3D, [DIVESelectable, DIVEMovable]);
+ * const instance = new SelectableMovableObject3D();
+ * instance.onMove();
+ * instance.onSelect();
+ * ```
  */
-
-export const applyMixins = (
-    derivedCtor: { prototype: object },
-    constructors: { prototype: object }[],
-): void => {
+export function applyMixins<
+    T extends Constructor,
+    K extends readonly Constructor[],
+>(derivedCtor: T, constructors: K): MixedConstructor<T, K> {
     constructors.forEach((baseCtor) => {
         Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
             Object.defineProperty(
@@ -15,4 +66,5 @@ export const applyMixins = (
             );
         });
     });
-};
+    return derivedCtor as unknown as MixedConstructor<T, K>;
+}

package/src/info/Info.ts

@@ -1,137 +1,161 @@
-export enum WebXRUnsupportedReason {
-    'UNKNWON_ERROR' = 0,
-    'NO_HTTPS' = 1,
-    'IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE' = 2,
-    'AR_SESSION_NOT_ALLOWED' = 3,
-}
+import { ESystem, EWebXRUnsupportedReason } from '../types/info';
 
-export class DIVEInfo {
-    private static _supportsWebXR: boolean | null = null;
-    private static _webXRUnsupportedReason: WebXRUnsupportedReason | null =
+export class SystemInfo {
+    private static _supportsWebXR: boolean = false;
+    private static _webXRUnsupportedReason: EWebXRUnsupportedReason | null =
         null;
 
     /**
-     *
-     * @returns The system the user is using. Possible values are "Android", "iOS", "Windows", "MacOS", "Linux" or "Unknown".
+     * Gets the current system (iOS, Android, Windows, etc.)
+     * @returns DIVESystem The current system
      */
-    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';
+    public static GetSystem(): ESystem {
+        if (typeof window === 'undefined' || !window.navigator) {
+            return ESystem.UNKNOWN;
+        }
+
+        const userAgent = window.navigator.userAgent.toLowerCase();
+        if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
+            return ESystem.IOS;
+        }
+        if (userAgent.includes('android')) {
+            return ESystem.ANDROID;
         }
+        if (userAgent.includes('windows')) {
+            return ESystem.WINDOWS;
+        }
+        if (userAgent.includes('macintosh')) {
+            return ESystem.MACOS;
+        }
+        if (userAgent.includes('linux')) {
+            return ESystem.LINUX;
+        }
+        return ESystem.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) {
+        if (this._supportsWebXR !== false) {
             return this._supportsWebXR;
         }
 
-        // check if XRSystem is available && if https enabled
-        if (!navigator.xr) {
+        // Check if we're in a secure context (HTTPS)
+        if (!window.isSecureContext) {
             this._supportsWebXR = false;
+            this._webXRUnsupportedReason = EWebXRUnsupportedReason.NO_HTTPS;
+            return this._supportsWebXR;
+        }
 
-            if (window.isSecureContext === false) {
-                this._webXRUnsupportedReason = WebXRUnsupportedReason.NO_HTTPS;
-            } else {
-                this._webXRUnsupportedReason =
-                    WebXRUnsupportedReason.UNKNWON_ERROR;
-            }
-
+        // Check if XRSystem is available
+        if (!navigator.xr) {
+            this._supportsWebXR = false;
+            this._webXRUnsupportedReason = EWebXRUnsupportedReason.NO_WEBXR_API;
             return this._supportsWebXR;
         }
 
-        // Check if immersive-vr session mode is supported
         try {
-            const supported =
-                await navigator.xr!.isSessionSupported('immersive-ar');
-            if (!supported) {
+            // Check specifically for immersive-ar support
+            const arSupported =
+                await navigator.xr.isSessionSupported('immersive-ar');
+            this._supportsWebXR = arSupported;
+
+            if (!this._supportsWebXR) {
                 this._webXRUnsupportedReason =
-                    WebXRUnsupportedReason.IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE;
+                    EWebXRUnsupportedReason.IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE;
             }
-            this._supportsWebXR = supported;
         } catch (error) {
             this._supportsWebXR = false;
             this._webXRUnsupportedReason =
-                WebXRUnsupportedReason.AR_SESSION_NOT_ALLOWED;
+                EWebXRUnsupportedReason.AR_PERMISSION_DENIED;
         }
+
         return this._supportsWebXR;
     }
 
     /**
-     * @returns The reason why WebXR is not supported on the user's device. Returns null if WebXR is supported nor not has been checked yet.
+     * @returns The reason why WebXR is not supported on the user's device. Returns null if WebXR is supported.
      */
-    public static GetWebXRUnsupportedReason(): WebXRUnsupportedReason | null {
-        if (this._supportsWebXR === null) {
-            console.log('WebXR support has not been checked yet.');
+    public static GetWebXRUnsupportedReason(): EWebXRUnsupportedReason | null {
+        if (this._supportsWebXR) {
+            console.log('WebXR is supported.');
             return null;
         }
         return this._webXRUnsupportedReason;
     }
 
     /**
-     * @returns A boolean indicating whether the user's device supports AR Quick Look.
+     * Checks if ARQuickLook is supported on the current device
+     * This checks for:
+     * 1. AR support via relList
+     *
+     * Requirements:
+     * - iOS 13.0 or later
+     * - Safari browser (ARQuickLook is only supported in Safari)
+     * - Device with AR capabilities (iPhone/iPad with LiDAR scanner or ARKit support)
+     *
+     * Note: ARQuickLook is only available in Safari on iOS. Other browsers
+     * (Chrome, Firefox, etc.) do not support ARQuickLook, even on iOS.
+     *
+     * @returns boolean indicating if ARQuickLook is supported
      */
     public static GetSupportsARQuickLook(): boolean {
         const a = document.createElement('a');
-        if (a.relList.supports('ar')) {
-            return true;
-        }
-
-        // fallback check
-        const userAgent = navigator.userAgent;
+        return a.relList.supports('ar');
+    }
 
-        // Check if the device is running iOS
-        const isIOS =
-            /iPad|iPhone|iPod/.test(userAgent) &&
-            !(window as unknown as Window & { MSStream?: string }).MSStream;
-        if (!isIOS) {
+    /**
+     * Checks if SceneViewer is supported on the current device
+     * This checks for:
+     * 1. Android device
+     * 2. Chrome browser (version 89 or later)
+     *
+     * Requirements:
+     * - Android 7.0 (API level 24) or later
+     * - Chrome for Android 89 or later
+     *
+     * Note: According to Google's documentation, if these requirements are met,
+     * SceneViewer will be available. If ARCore is not installed, SceneViewer will
+     * fall back to showing the model in 3D.
+     *
+     * @returns boolean indicating if SceneViewer is supported
+     */
+    public static GetSupportsSceneViewer(): boolean {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || !window.navigator) {
             return false;
         }
 
-        // Extract iOS version
-        const match = userAgent.match(/OS (\d+)_/);
-        if (!match || match.length < 2) {
+        const userAgent = window.navigator.userAgent.toLowerCase();
+
+        // Check if we're on Android
+        if (!userAgent.includes('android')) {
             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) {
+        // Check if we're using Chrome
+        if (!userAgent.includes('chrome')) {
             return false;
         }
 
-        // Check for supported browser
-        const isSupportedBrowser =
-            /^((?!chrome|android).)*safari|CriOS|FxiOS/i.test(userAgent);
-        if (isSupportedBrowser) {
-            return true;
+        // Check Chrome version (89 or later)
+        const chromeVersion = userAgent.match(/chrome\/(\d+)/);
+        if (!chromeVersion || parseInt(chromeVersion[1]) < 89) {
+            return false;
         }
 
-        // Default to false if none of the conditions are met
-        return false;
+        return true;
     }
 
     /**
      * @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';
+        return (
+            this.GetSystem() === ESystem.ANDROID ||
+            this.GetSystem() === ESystem.IOS
+        );
     }
 
     /**