@shopware-ag/dive 1.19.0 → 1.19.1-beta.1

package/src/dive.ts

@@ -1,363 +0,0 @@
-import {
-    DIVERenderer,
-    DIVERendererDefaultSettings,
-    DIVERendererSettings,
-} from './renderer/Renderer.ts';
-import { DIVEScene } from './scene/Scene.ts';
-import DIVEPerspectiveCamera, {
-    DIVEPerspectiveCameraDefaultSettings,
-    DIVEPerspectiveCameraSettings,
-} from './camera/PerspectiveCamera.ts';
-import DIVEOrbitControls, {
-    DIVEOrbitControlsDefaultSettings,
-    DIVEOrbitControlsSettings,
-} from './controls/OrbitControls.ts';
-import DIVEToolbox from './toolbox/Toolbox.ts';
-import { DIVECommunication } from './com/Communication.ts';
-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 pkgjson from '../package.json';
-
-export type DIVESettings = {
-    autoResize: boolean;
-    autoStart: boolean;
-    displayAxes: boolean;
-    renderer: Partial<DIVERendererSettings>;
-    perspectiveCamera: Partial<DIVEPerspectiveCameraSettings>;
-    orbitControls: Partial<DIVEOrbitControlsSettings>;
-};
-
-export const DIVEDefaultSettings: DIVESettings = {
-    autoResize: true,
-    autoStart: true,
-    displayAxes: false,
-    renderer: DIVERendererDefaultSettings,
-    perspectiveCamera: DIVEPerspectiveCameraDefaultSettings,
-    orbitControls: DIVEOrbitControlsDefaultSettings,
-};
-
-/**
- * #### DIVE
- * is the main class of the DIVE framework.
- *
- * An instance of this class delivers a complete 3D environment with a perspective camera, orbit controls, a toolbox, and a communication system.
- * ```ts
- * import { DIVE } from "@shopware-ag/dive";
- *
- * const myWrapper = document.getElementById('myWrapper');
- *
- * const dive = new DIVE();
- *
- * myWrapper.appendChild(dive.Canvas);
- *
- * dive.Communication.Subscribe('GET_ALL_SCENE_DATA', () => {
- *  // do something
- * }));
- *
- * dive.Communication.PerformAction('GET_ALL_SCENE_DATA', {});
- * ```
- * @module
- */
-
-export default class DIVE {
-    // static members
-    public static QuickView(
-        uri: string,
-        settings?: Partial<DIVESettings>,
-    ): DIVE {
-        const dive = new DIVE(settings);
-
-        dive.Communication.PerformAction('SET_CAMERA_TRANSFORM', {
-            position: { x: 0, y: 2, z: 2 },
-            target: { x: 0, y: 0.5, z: 0 },
-        });
-
-        // generate scene light id
-        const lightid = MathUtils.generateUUID();
-
-        // add scene light
-        dive.Communication.PerformAction('ADD_OBJECT', {
-            entityType: 'light',
-            type: 'scene',
-            name: 'light',
-            id: lightid,
-            enabled: true,
-            visible: true,
-            intensity: 1,
-            color: 0xffffff,
-        });
-
-        // generate model id
-        const modelid = MathUtils.generateUUID();
-
-        // add loaded listener
-        dive.Communication.Subscribe('MODEL_LOADED', (data) => {
-            if (data.id !== modelid) return;
-
-            const transform = dive.Communication.PerformAction(
-                'COMPUTE_ENCOMPASSING_VIEW',
-                {},
-            );
-
-            dive.Communication.PerformAction('SET_CAMERA_TRANSFORM', {
-                position: transform.position,
-                target: transform.target,
-            });
-        });
-
-        // instantiate model
-        dive.Communication.PerformAction('ADD_OBJECT', {
-            entityType: 'model',
-            name: 'object',
-            id: modelid,
-            position: { x: 0, y: 0, z: 0 },
-            rotation: { x: 0, y: 0, z: 0 },
-            scale: { x: 1, y: 1, z: 1 },
-            uri: uri,
-            visible: true,
-            loaded: false,
-        });
-
-        // set scene properties
-        dive.Communication.PerformAction('UPDATE_SCENE', {
-            backgroundColor: 0xffffff,
-            gridEnabled: false,
-            floorColor: 0xffffff,
-        });
-
-        return dive;
-    }
-
-    // descriptive members
-    private _settings: DIVESettings;
-    private _resizeObserverId: string;
-    private _width: number;
-    private _height: number;
-
-    // functional components
-    private renderer: DIVERenderer;
-    private scene: DIVEScene;
-    private perspectiveCamera: DIVEPerspectiveCamera;
-    private orbitControls: DIVEOrbitControls;
-    private toolbox: DIVEToolbox;
-    private communication: DIVECommunication;
-
-    // additional components
-    private animationSystem: DIVEAnimationSystem;
-    private axisCamera: DIVEAxisCamera | null;
-
-    // getters
-    public get Communication(): DIVECommunication {
-        return this.communication;
-    }
-
-    public get Canvas(): HTMLCanvasElement {
-        return this.renderer.domElement;
-    }
-
-    public get Info(): DIVEInfo {
-        return DIVEInfo;
-    }
-
-    // setters
-    public set Settings(settings: Partial<DIVESettings>) {
-        const settingsDelta = getObjectDelta(this._settings, settings);
-
-        // apply renderer settings (we have to rebuild the renderer to apply the settings)
-        if (settingsDelta.renderer)
-            this.renderer = new DIVERenderer(this._settings.renderer);
-
-        // apply perspective camera settings
-        if (settingsDelta.perspectiveCamera) {
-            if (settingsDelta.perspectiveCamera.fov !== undefined)
-                this.perspectiveCamera.fov =
-                    settingsDelta.perspectiveCamera.fov;
-            if (settingsDelta.perspectiveCamera.near !== undefined)
-                this.perspectiveCamera.near =
-                    settingsDelta.perspectiveCamera.near;
-            if (settingsDelta.perspectiveCamera.far !== undefined)
-                this.perspectiveCamera.far =
-                    settingsDelta.perspectiveCamera.far;
-            this.perspectiveCamera.OnResize(
-                this.renderer.domElement.width,
-                this.renderer.domElement.height,
-            );
-        }
-        // apply orbit controls settings
-        if (settingsDelta.orbitControls) {
-            if (settingsDelta.orbitControls.enableDamping !== undefined)
-                this.orbitControls.enableDamping =
-                    settingsDelta.orbitControls.enableDamping;
-            if (settingsDelta.orbitControls.dampingFactor !== undefined)
-                this.orbitControls.dampingFactor =
-                    settingsDelta.orbitControls.dampingFactor;
-        }
-
-        if (settingsDelta.autoResize !== this._settings.autoResize) {
-            if (settingsDelta.autoResize) {
-                this.addResizeObserver();
-            } else {
-                this.removeResizeObserver();
-            }
-        }
-
-        if (settingsDelta.displayAxes) {
-            this.axisCamera = new DIVEAxisCamera(
-                this.renderer,
-                this.scene,
-                this.orbitControls,
-            );
-        } else {
-            this.axisCamera?.Dispose();
-            this.axisCamera = null;
-        }
-
-        Object.assign(this._settings, settings);
-    }
-
-    constructor(settings?: Partial<DIVESettings>) {
-        this._settings = {
-            ...DIVEDefaultSettings,
-            ...(settings !== undefined ? settings : {}),
-        };
-
-        this._resizeObserverId = '';
-        this._width = 0;
-        this._height = 0;
-
-        // initialize functional components
-        this.renderer = new DIVERenderer(this._settings.renderer);
-        this.scene = new DIVEScene();
-        this.perspectiveCamera = new DIVEPerspectiveCamera(
-            this._settings.perspectiveCamera,
-        );
-
-        // initialize animation system
-        this.animationSystem = new DIVEAnimationSystem(this.renderer);
-
-        this.orbitControls = new DIVEOrbitControls(
-            this.perspectiveCamera,
-            this.renderer,
-            this.animationSystem,
-            this._settings.orbitControls,
-        );
-        this.toolbox = new DIVEToolbox(this.scene, this.orbitControls);
-        this.communication = new DIVECommunication(
-            this.renderer,
-            this.scene,
-            this.orbitControls,
-            this.toolbox,
-        );
-
-        // initialize axis camera
-        if (this._settings.displayAxes) {
-            this.axisCamera = new DIVEAxisCamera(
-                this.renderer,
-                this.scene,
-                this.orbitControls,
-            );
-        } else {
-            this.axisCamera = null;
-        }
-
-        // add resize observer if autoResize is enabled
-        if (this._settings.autoResize) {
-            this.addResizeObserver();
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any).DIVE = {
-            PrintScene: () => {
-                console.log(this.scene);
-            },
-        };
-
-        console.log(`DIVE ${pkgjson.version} initialized successfully!`);
-        console.log(`
-                    @@@@@@@@@@@@@@@@@@@@@@@              @@@@@@@@@@@@@@@@@@@@@@@
-               @@@@+-:::::::---------------------==------------------------------=#@@@@
-            @@%=::::.......::---------------------------------------------------------+@@
-          @@+:::...........::-----------------------------------------------------------#@@
-        @@=:::.........::::::-------------------------------------------------------------%@
-       @%:::.......:::::::-----------------------------------------------------------------#@
-      @*:::.....:::::-----------------------------------------------------------------------*@
-     @%::::::.::::---------------------------------------------------------------------------@@
-    @@-:::::::::-----------------------------------------------------------------------------=@
-    @%::::::::--------------------------------------------------------------------------------%@
-    @+::::::::--------------------------------=@@@@@%-----------------------------------------%@
-    @=:::::::--------------------------------*@@    @@+---------------------------------------#@
-    @+:::::::-------------------------------*@        @*--------------------------------------%@
-    @#::::::::-----------------------------=@@        @@=-------------------------------------%@
-    @@-::::::::----------------------------@@          @@------------------------------------=@
-     @%:::::::::--------------------------*@            @*-----------------------------------@@
-      @*:::::::::-------------------------@@            @@----------------------------------%@
-       @#::::::::::----------------------%@              @%--------------------------------%@
-        @#:::::::::::-------------------=@@              @@=------------------------------%@
-         @@-::::::::::::----------------%@                @%----------------------------=@@
-          @@#::::::::::::::------------*@                  @*--------------------------#@@
-            @@+::::::::::::::::--------@@                  @@------------------------+@@
-              @@*:::::::::::::::::----@@                    @@---------------------+@@
-                @@@-:::::::::::::::--#@                      @#-----------------=%@@
-                   @@%-::::::::::::-%@                        @%-------------=%@@
-                      @@@@+:::::::#@@                          @@*-------*@@@@
-                           @@@@@@@                                @@@@@@
-
-        `);
-
-        if (this._settings.autoStart) {
-            // when everything is done, start the renderer
-            this.renderer.StartRenderer(this.scene, this.perspectiveCamera);
-        }
-    }
-
-    public Dispose(): void {
-        this.removeResizeObserver();
-        this.renderer.Dispose();
-        this.orbitControls.Dispose();
-        this.axisCamera?.Dispose();
-        this.animationSystem.Dispose();
-        this.toolbox.Dispose();
-        this.communication.DestroyInstance();
-    }
-
-    // methods
-    public OnResize(width: number, height: number): void {
-        // resize renderer
-        this.renderer.OnResize(width, height);
-
-        // resize camera
-        this.perspectiveCamera.OnResize(width, height);
-    }
-
-    private addResizeObserver(): void {
-        this._resizeObserverId = this.renderer.AddPreRenderCallback(() => {
-            // check if the canvas is mounted
-            const canvasWrapper = this.renderer.domElement.parentElement;
-            if (!canvasWrapper) return;
-
-            const { clientWidth, clientHeight } = canvasWrapper;
-            if (clientWidth === this._width && clientHeight === this._height)
-                return;
-
-            this.OnResize(clientWidth, clientHeight);
-
-            this._width = clientWidth;
-            this._height = clientHeight;
-        });
-    }
-
-    private removeResizeObserver(): void {
-        this.renderer.RemovePreRenderCallback(this._resizeObserverId);
-    }
-}
-
-export { DIVE, DIVECommunication };
-
-export * from './math/index.ts';
-
-export type * from './com/actions/index.ts';
-export type * from './com/types';
-export type * from './types';

package/src/events/EventExecutor.ts

@@ -1,35 +0,0 @@
-export class DIVEEventExecutor<T> {
-    private _listeners: Map<keyof T, ((payload: T[keyof T]) => void)[]> =
-        new Map();
-
-    public Subscribe<S extends keyof T>(
-        type: S,
-        listener: (payload: T[S]) => void,
-    ): () => boolean {
-        if (!this._listeners.get(type)) this._listeners.set(type, []);
-
-        this._listeners
-            .get(type)!
-            .push(listener as (payload: T[keyof T]) => void);
-
-        return () => {
-            const listenerArray = this._listeners.get(type);
-            if (!listenerArray) return false;
-
-            const existingIndex = listenerArray.findIndex(
-                (entry) => entry === listener,
-            );
-            if (existingIndex === -1) return false;
-
-            listenerArray.splice(existingIndex, 1);
-            return true;
-        };
-    }
-
-    protected dispatch<S extends keyof T>(type: S, payload?: T[S]): void {
-        const listenerArray = this._listeners.get(type);
-        if (!listenerArray) return;
-
-        listenerArray.forEach((listener) => listener(payload as T[S]));
-    }
-}

package/src/exporters/usdz/USDZExporter.ts

@@ -1,21 +0,0 @@
-import { Object3D } from 'three';
-import {
-    USDZExporter,
-    USDZExporterOptions,
-} from 'three/examples/jsm/exporters/USDZExporter';
-
-export type DIVEUSDZExporterOptions = USDZExporterOptions & {
-    ar?: {
-        anchoring: { type: 'plane' | 'image' | 'face' | 'none' }; // source: https://developer.apple.com/documentation/realitykit/preliminary-anchoring-type
-        planeAnchoring: { alignment: 'horizontal' | 'vertical' | 'any' }; // source: https://developer.apple.com/documentation/realitykit/preliminary-planeanchoring-alignment
-    };
-};
-
-export class DIVEUSDZExporter extends USDZExporter {
-    public parse(
-        scene: Object3D,
-        options?: DIVEUSDZExporterOptions,
-    ): Promise<Uint8Array> {
-        return super.parse(scene, options);
-    }
-}

package/src/exporters/usdz/__test__/USDZExporter.test.ts

@@ -1,57 +0,0 @@
-import { Object3D } from 'three';
-import { DIVEUSDZExporter, DIVEUSDZExporterOptions } from '../USDZExporter';
-
-describe('DIVEUSDZExporter', () => {
-    let exporter: DIVEUSDZExporter;
-    let scene: Object3D;
-
-    beforeEach(() => {
-        exporter = new DIVEUSDZExporter();
-        scene = new Object3D();
-    });
-
-    test('should create an instance of DIVEUSDZExporter', () => {
-        expect(exporter).toBeInstanceOf(DIVEUSDZExporter);
-    });
-
-    test('should call parse method with scene and options', async () => {
-        const options: DIVEUSDZExporterOptions = {
-            ar: {
-                anchoring: { type: 'plane' },
-                planeAnchoring: { alignment: 'horizontal' },
-            },
-        };
-
-        const result = await exporter.parse(scene, options);
-        expect(result).toBeInstanceOf(Uint8Array);
-    });
-
-    test('should call parse method without options', async () => {
-        const result = await exporter.parse(scene);
-        expect(result).toBeInstanceOf(Uint8Array);
-    });
-
-    test('should handle parse method with different anchoring types', async () => {
-        const options: DIVEUSDZExporterOptions = {
-            ar: {
-                anchoring: { type: 'image' },
-                planeAnchoring: { alignment: 'vertical' },
-            },
-        };
-
-        const result = await exporter.parse(scene, options);
-        expect(result).toBeInstanceOf(Uint8Array);
-    });
-
-    test('should handle parse method with different plane anchoring alignments', async () => {
-        const options: DIVEUSDZExporterOptions = {
-            ar: {
-                anchoring: { type: 'face' },
-                planeAnchoring: { alignment: 'any' },
-            },
-        };
-
-        const result = await exporter.parse(scene, options);
-        expect(result).toBeInstanceOf(Uint8Array);
-    });
-});

package/src/gizmo/Gizmo.ts

@@ -1,144 +0,0 @@
-import { Euler, Object3D, Vector3 } from 'three';
-import { DIVERotateGizmo } from './rotate/RotateGizmo';
-import { DIVETranslateGizmo } from './translate/TranslateGizmo';
-import DIVEOrbitControls from '../controls/OrbitControls';
-import { DIVEScaleGizmo } from './scale/ScaleGizmo';
-import { DIVEGizmoPlane as DIVEGizmoPlane } from './plane/GizmoPlane';
-import { DIVESelectable } from '../interface/Selectable';
-
-export type DIVEGizmoMode = 'translate' | 'rotate' | 'scale';
-
-export type DIVEGizmoAxis = 'x' | 'y' | 'z';
-
-export class DIVEGizmo extends Object3D {
-    private _mode: DIVEGizmoMode;
-    public get mode(): DIVEGizmoMode {
-        return this._mode;
-    }
-    public set mode(value: DIVEGizmoMode) {
-        this._mode = value;
-        this.assemble();
-    }
-
-    public set debug(value: boolean) {
-        this._translateGizmo.debug = value;
-        this._rotateGizmo.debug = value;
-        this._scaleGizmo.debug = value;
-    }
-
-    private _gizmoNode: Object3D;
-    public get gizmoNode(): Object3D {
-        return this._gizmoNode;
-    }
-    private _translateGizmo: DIVETranslateGizmo;
-    private _rotateGizmo: DIVERotateGizmo;
-    private _scaleGizmo: DIVEScaleGizmo;
-
-    private _gizmoPlane: DIVEGizmoPlane;
-    public get gizmoPlane(): DIVEGizmoPlane {
-        return this._gizmoPlane;
-    }
-
-    // attachment stuff
-    private _object: (Object3D & DIVESelectable) | null;
-    public get object(): (Object3D & DIVESelectable) | null {
-        return this._object;
-    }
-
-    constructor(controller: DIVEOrbitControls) {
-        super();
-        this.name = 'DIVEGizmo';
-
-        controller.addEventListener('change', () => {
-            const size = controller.getDistance() / 2.5;
-            this.scale.set(size, size, size);
-        });
-
-        this._mode = 'translate';
-
-        this._gizmoNode = new Object3D();
-        this.add(this._gizmoNode);
-
-        this._translateGizmo = new DIVETranslateGizmo(controller);
-        this._rotateGizmo = new DIVERotateGizmo(controller);
-        this._scaleGizmo = new DIVEScaleGizmo(controller);
-
-        this._gizmoPlane = new DIVEGizmoPlane();
-        this._gizmoPlane.visible = false;
-
-        this._object = null;
-    }
-
-    public attach(object: Object3D & DIVESelectable): this {
-        this._object = object;
-        this.assemble();
-        return this;
-    }
-
-    public detach(): this {
-        this._object = null;
-        this.assemble();
-        return this;
-    }
-
-    public onHover(
-        mode: DIVEGizmoMode,
-        axis: DIVEGizmoAxis,
-        value: boolean,
-    ): void {
-        if (!value) return;
-        this._gizmoPlane.assemble(mode, axis);
-    }
-
-    public onChange(
-        position?: Vector3,
-        rotation?: Euler,
-        scale?: Vector3,
-    ): void {
-        if (this.object === null) return;
-
-        if (position) {
-            this.position.copy(position);
-            this.object.position.copy(position);
-        }
-
-        if (rotation) {
-            this.object.rotation.copy(rotation);
-        }
-
-        if (scale) {
-            this.object.scale.copy(scale);
-            this._scaleGizmo.update(scale);
-        }
-    }
-
-    private assemble(): void {
-        // clear all children
-        this._gizmoNode.clear();
-        this._gizmoPlane.clear();
-
-        // reset all gizmos
-        this._translateGizmo.reset();
-        this._rotateGizmo.reset();
-        this._scaleGizmo.reset();
-
-        // check for object
-        if (this.object === null) return;
-
-        // add gizmos
-        if (this._mode === 'translate') {
-            this._gizmoNode.add(this._translateGizmo);
-        }
-
-        if (this._mode === 'rotate') {
-            this._gizmoNode.add(this._rotateGizmo);
-        }
-
-        if (this._mode === 'scale') {
-            this._gizmoNode.add(this._scaleGizmo);
-        }
-
-        // add plane for raycasting properly while dragging
-        this.add(this._gizmoPlane);
-    }
-}