@shopware-ag/dive 1.15.4 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.15.4",
+  "version": "1.16.0",
   "description": "Shopware Spatial Framework",
   "type": "module",
   "main": "./build/dive.cjs",
@@ -30,12 +30,14 @@
   ],
   "dependencies": {
     "@tweenjs/tween.js": "^23.1.1",
+    "lodash": "^4.17.21",
     "three": "^0.163.0",
     "three-spritetext": "^1.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.1.1",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.12",
     "@types/node": "^20.12.7",
     "@types/three": "^0.163.0",
     "eslint": "^9.1.1",

package/src/com/Communication.ts

@@ -1,6 +1,7 @@
 import { Actions } from "./actions/index.ts";
 import { generateUUID } from 'three/src/math/MathUtils';
 import { isSelectTool } from "../toolbox/select/SelectTool.ts";
+import { merge } from 'lodash';
 
 // type imports
 import { type Color, type MeshStandardMaterial } from "three";
@@ -12,6 +13,8 @@ import { type DIVEModel } from "../model/Model.ts";
 import { type DIVEMediaCreator } from "../mediacreator/MediaCreator.ts";
 import { type DIVERenderer } from "../renderer/Renderer.ts";
 import { type DIVESelectable } from "../interface/Selectable.ts";
+import { type DIVEIO } from "../io/IO.ts";
+
 
 type EventListener<Action extends keyof Actions> = (payload: Actions[Action]['PAYLOAD']) => void;
 
@@ -65,6 +68,15 @@ export class DIVECommunication {
         return this._mediaGenerator;
     }
 
+    private _io: DIVEIO | null;
+    private get io(): DIVEIO {
+        if (!this._io) {
+            const DIVEIO = require('../io/IO.ts').DIVEIO as typeof import('../io/IO.ts').DIVEIO;
+            this._io = new DIVEIO(this.scene);
+        }
+        return this._io;
+    }
+
     private registered: Map<string, COMEntity> = new Map();
 
     // private listeners: { [key: string]: EventListener[] } = {};
@@ -77,6 +89,7 @@ export class DIVECommunication {
         this.controller = controls;
         this.toolbox = toolbox;
         this._mediaGenerator = null;
+        this._io = null;
 
         DIVECommunication.__instances.push(this);
     }
@@ -192,6 +205,10 @@ export class DIVECommunication {
                 returnValue = this.setParent(payload as Actions['SET_PARENT']['PAYLOAD']);
                 break;
             }
+            case 'EXPORT_SCENE': {
+                returnValue = this.exportScene(payload as Actions['EXPORT_SCENE']['PAYLOAD']);
+                break;
+            }
         }
 
         this.dispatch(action, payload);
@@ -266,7 +283,7 @@ export class DIVECommunication {
     private addObject(payload: Actions['ADD_OBJECT']['PAYLOAD']): Actions['ADD_OBJECT']['RETURN'] {
         if (this.registered.get(payload.id)) return false;
 
-        if (payload.parent === undefined) payload.parent = null;
+        if (payload.parentId === undefined) payload.parentId = null;
 
         this.registered.set(payload.id, payload);
 
@@ -279,7 +296,7 @@ export class DIVECommunication {
         const objectToUpdate = this.registered.get(payload.id);
         if (!objectToUpdate) return false;
 
-        this.registered.set(payload.id, { ...objectToUpdate, ...payload });
+        this.registered.set(payload.id, merge(objectToUpdate, payload));
 
         const updatedObject = this.registered.get(payload.id)!;
         this.scene.UpdateSceneObject({ ...payload, id: updatedObject.id, entityType: updatedObject.entityType });
@@ -522,6 +539,10 @@ export class DIVECommunication {
         parentObject.attach(sceneObject);
         return true;
     }
+
+    private exportScene(payload: Actions['EXPORT_SCENE']['PAYLOAD']): Actions['EXPORT_SCENE']['RETURN'] {
+        return this.io.Export(payload.type);
+    }
 }
 
 export type { Actions } from './actions/index.ts';

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

@@ -44,6 +44,16 @@ jest.mock('../../mediacreator/MediaCreator', () => {
     }
 });
 
+jest.mock('../../io/IO', () => {
+    return {
+        DIVEIO: jest.fn(function () {
+            this.Import = jest.fn();
+            this.Export = jest.fn();
+            return this;
+        }),
+    }
+});
+
 jest.mock('../../toolbox/select/SelectTool', () => {
     return {
         isSelectTool: jest.fn().mockReturnValue(true),
@@ -521,7 +531,7 @@ describe('dive/communication/DIVECommunication', () => {
             id: "group1",
             position: { x: 0, y: 0, z: 0 },
             rotation: { x: 0, y: 0, z: 0 },
-            parent: null,
+            parentId: null,
         } as COMGroup);
 
         const success = testCom.PerformAction('GET_ALL_SCENE_DATA', {});
@@ -532,7 +542,7 @@ describe('dive/communication/DIVECommunication', () => {
                 id: "pov",
                 position: { x: 0, y: 0, z: 0 },
                 target: { x: 0, y: 0, z: 0 },
-                parent: null,
+                parentId: null,
             }],
             floorColor: "#ffffff",
             floorEnabled: true,
@@ -542,7 +552,7 @@ describe('dive/communication/DIVECommunication', () => {
                 type: "ambient",
                 intensity: 0.5,
                 color: 'white',
-                parent: null,
+                parentId: null,
             }],
             mediaItem: null,
             name: undefined,
@@ -552,7 +562,7 @@ describe('dive/communication/DIVECommunication', () => {
                 position: { x: 0, y: 0, z: 0 },
                 rotation: { x: 0, y: 0, z: 0 },
                 scale: { x: 0.01, y: 0.01, z: 0.01 },
-                parent: null,
+                parentId: null,
                 uri: "https://threejs.org/examples/models/gltf/LittlestTokyo.glb",
             }],
             primitives: [],
@@ -566,7 +576,7 @@ describe('dive/communication/DIVECommunication', () => {
                 id: "group1",
                 position: { x: 0, y: 0, z: 0 },
                 rotation: { x: 0, y: 0, z: 0 },
-                parent: null,
+                parentId: null,
             }],
         });
     });
@@ -592,7 +602,7 @@ describe('dive/communication/DIVECommunication', () => {
         expect(Array.from(successWithoutIds.values())).toStrictEqual([]);
 
         const successWithIds = testCom.PerformAction('GET_OBJECTS', { ids: ['test1'] });
-        expect(Array.from(successWithIds.values())).toStrictEqual([{ entityType: "pov", id: "test1", position: { x: 0, y: 0, z: 0 }, target: { x: 0, y: 0, z: 0 }, parent: null }]);
+        expect(Array.from(successWithIds.values())).toStrictEqual([{ entityType: "pov", id: "test1", position: { x: 0, y: 0, z: 0 }, target: { x: 0, y: 0, z: 0 }, parentId: null }]);
     });
 
     it('should perform action SELECT_OBJECT', () => {
@@ -846,4 +856,15 @@ describe('dive/communication/DIVECommunication', () => {
         });
         expect(attachToValidParent).toBe(true);
     });
+
+    it('should perform action EXPORT_SCENE', async () => {
+        const url = 'https://example.com';
+
+        jest.spyOn(testCom['io'], 'Export').mockResolvedValueOnce(url);
+
+        const result = await testCom.PerformAction('EXPORT_SCENE', {
+            type: 'glb',
+        });
+        expect(result).toBe(url);
+    });
 });

package/src/com/actions/index.ts

@@ -23,6 +23,7 @@ import SET_GIZMO_VISIBILITY from "./toolbox/transform/setgizmovisible.js";
 import COMPUTE_ENCOMPASSING_VIEW from "./camera/computeencompassingview.ts";
 import USE_TOOL from "./toolbox/usetool.ts";
 import SET_PARENT from "./object/setparent.ts";
+import EXPORT_SCENE from "./scene/exportscene.ts";
 
 export type Actions = {
     GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA,
@@ -50,4 +51,5 @@ export type Actions = {
     UPDATE_SCENE: UPDATE_SCENE,
     GENERATE_MEDIA: GENERATE_MEDIA,
     SET_PARENT: SET_PARENT,
+    EXPORT_SCENE: EXPORT_SCENE,
 };

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

@@ -0,0 +1,6 @@
+import { type DIVESceneFileType } from "../../../types";
+
+export default interface EXPORT_SCENE {
+    'PAYLOAD': { type: keyof DIVESceneFileType },
+    'RETURN': Promise<string | null>,
+};

package/src/com/types/COMBaseEntity.ts

@@ -5,5 +5,5 @@ export type COMBaseEntity = {
     name: string;
     entityType: COMEntityType;
     visible: boolean;
-    parent?: Partial<COMBaseEntity> & { id: string } | null;
+    parentId?: string | null;
 }

package/src/dive.ts

@@ -10,6 +10,7 @@ import { getObjectDelta } from "./helper/getObjectDelta/getObjectDelta.ts";
 
 import { generateUUID } from "three/src/math/MathUtils";
 import { DIVEInfo } from "./info/Info.ts";
+import pkgjson from '../package.json';
 
 export type DIVESettings = {
     autoResize: boolean;
@@ -227,7 +228,7 @@ export default class DIVE {
             },
         }
 
-        console.log('DIVE initialized');
+        console.log(`DIVE ${pkgjson.version} initialized`);
     }
 
     public Dispose(): void {

package/src/io/IO.ts

@@ -0,0 +1,107 @@
+import { DIVEGLTFIO } from "./gltf/GLTFIO";
+
+import { type DIVESceneFileType } from "../types";
+import { type DIVEScene } from "../scene/Scene";
+
+export class DIVEIO {
+
+    private _scene: DIVEScene;
+
+    private _gltfIO: DIVEGLTFIO;
+
+    constructor(scene: DIVEScene) {
+
+        this._scene = scene;
+
+        this._gltfIO = new DIVEGLTFIO();
+
+    }
+
+    public Import<FileType extends keyof DIVESceneFileType>(type: FileType, url: string): Promise<DIVESceneFileType[FileType] | null> {
+
+        return this._importFromURL(type, url)
+
+            .catch((error) => {
+
+                console.error(error);
+
+                return null;
+
+            });
+
+    }
+
+    public Export<FileType extends keyof DIVESceneFileType>(type: FileType): Promise<string | null> {
+
+        return this._exportToURL(type)
+
+            .catch((error) => {
+
+                console.error(error);
+
+                return null;
+
+            });
+
+    }
+
+    private _importFromURL<FileType extends keyof DIVESceneFileType>(type: FileType, url: string): Promise<DIVESceneFileType[FileType]> {
+
+        switch (type) {
+
+            case 'glb': {
+
+                return this._gltfIO.Import(url);
+
+            }
+
+            default: {
+
+                return Promise.reject('Unsupported file type: ' + type);
+
+            }
+
+        }
+    }
+
+    private _exportToURL<FileType extends keyof DIVESceneFileType>(type: FileType): Promise<string> {
+
+        switch (type) {
+
+            case 'glb': {
+
+                return new Promise((resolve, reject) => {
+
+                    this._gltfIO.Export(this._scene, true, true)
+
+                        .then((data) => {
+
+                            resolve(this._createBlobURL(data))
+
+                        })
+
+                        .catch((error) => {
+
+                            reject(error);
+
+                        });
+                });
+
+            }
+
+            default: {
+
+                return Promise.reject('Unsupported file type: ' + type);
+
+            }
+
+        }
+    }
+
+    private _createBlobURL(data: ArrayBuffer): string {
+
+        return URL.createObjectURL(new Blob([data]));
+
+    }
+
+}

package/src/io/__test__/IO.test.ts

@@ -0,0 +1,145 @@
+import { DIVEIO } from '../IO';
+import { DIVEScene } from '../../scene/Scene';
+
+import { type GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+
+jest.mock('../gltf/GLTFIO', () => {
+
+    return {
+
+        DIVEGLTFIO: jest.fn(function () {
+
+            this.Import = jest.fn();
+
+            this.Export = jest.fn();
+
+            return this;
+
+        })
+
+    };
+
+});
+
+jest.mock('../../scene/Scene.ts', () => {
+
+    return {
+
+        DIVEScene: jest.fn(function () {
+
+            this.add = jest.fn();
+
+            this.isObject3D = true;
+
+            this.parent = null;
+
+            this.dispatchEvent = jest.fn();
+
+            this.position = {
+
+                set: jest.fn(),
+
+            }
+
+            this.SetIntensity = jest.fn();
+
+            this.SetEnabled = jest.fn();
+
+            this.SetColor = jest.fn();
+
+            this.userData = {
+
+                id: undefined,
+
+            }
+
+            this.removeFromParent = jest.fn();
+
+            return this;
+        })
+
+    };
+
+});
+
+let testIO: DIVEIO;
+
+describe('dive/io/DIVEIO', () => {
+    beforeEach(() => {
+
+        testIO = new DIVEIO(new DIVEScene());
+
+    });
+
+    afterEach(() => {
+
+        jest.clearAllMocks();
+
+    });
+
+    it('should instantiate', () => {
+
+        expect(testIO).toBeDefined();
+
+    });
+
+    it('should import from URL', async () => {
+
+        const mockGLTF = {} as GLTF;
+
+        jest.spyOn(testIO['_gltfIO'], 'Import').mockResolvedValueOnce(mockGLTF);
+
+        const result = await testIO.Import('glb', 'test.glb');
+
+        expect(result).toStrictEqual(mockGLTF);
+
+    });
+
+    it('should reject when importing with unsupported file type', async () => {
+
+        jest.spyOn(console, 'error').mockImplementationOnce(() => { });
+
+        const result = await testIO.Import('unsupported file type' as "glb", 'test.glb');
+
+        expect(result).toStrictEqual(null);
+
+    });
+
+    it('should export to URL', async () => {
+
+        const mockObject = {};
+
+        const mockURL = 'blob://mockURL';
+
+        jest.spyOn(testIO['_gltfIO'], 'Export').mockResolvedValueOnce(mockObject);
+
+        URL.createObjectURL = jest.fn().mockReturnValueOnce(mockURL);
+
+        const result = await testIO.Export('glb');
+
+        expect(result).toBeDefined();
+
+    });
+
+    it('should handle rejection from gltf io', async () => {
+
+        jest.spyOn(console, 'error').mockImplementationOnce(() => { });
+
+        jest.spyOn(testIO['_gltfIO'], 'Export').mockRejectedValueOnce('Error');
+
+        const result = await testIO.Export('glb');
+
+        expect(result).toBeDefined();
+
+    });
+
+    it('should reject when exporting with unsupported file type', async () => {
+
+        jest.spyOn(console, 'error').mockImplementationOnce(() => { });
+
+        const result = await testIO.Export('unsupported file type' as "glb");
+
+        expect(result).toStrictEqual(null);
+
+    });
+});

package/src/io/gltf/GLTFIO.ts

@@ -0,0 +1,53 @@
+import { GLTFLoader, type GLTF } from "three/examples/jsm/loaders/GLTFLoader";
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter";
+import { Object3D } from "three";
+
+export class DIVEGLTFIO {
+
+    private _importer: GLTFLoader;
+
+    private _exporter: GLTFExporter;
+
+    constructor() {
+
+        this._importer = new GLTFLoader();
+
+        this._exporter = new GLTFExporter();
+
+    }
+
+    public Import(url: string, onProgress?: (progress: number) => void): Promise<GLTF> {
+
+        return this._importer.loadAsync(url, (progress) => {
+
+            if (!onProgress) return;
+
+            onProgress(progress.loaded / progress.total);
+
+        });
+
+    }
+
+    public Export(object: Object3D, binary: true, onlyVisible: boolean): Promise<ArrayBuffer>;
+
+    public Export(object: Object3D, binary: false, onlyVisible: boolean): Promise<{ [key: string]: unknown }>;
+
+    public Export(object: Object3D, binary: boolean, onlyVisible: boolean): Promise<ArrayBuffer | { [key: string]: unknown }> {
+
+        if (binary) {
+
+            // export as binary ArrayBuffer
+
+            return this._exporter.parseAsync(object, { binary, onlyVisible }) as unknown as Promise<ArrayBuffer>;
+
+        } else {
+
+            // export as JSON object
+
+            return this._exporter.parseAsync(object, { binary, onlyVisible }) as unknown as Promise<{ [key: string]: unknown; }>;
+
+        }
+
+    };
+
+}