@shopware-ag/dive 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "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;
     });
 });

package/src/animation/AnimationSystem.ts

@@ -1,4 +1,4 @@
-import { update as updateTween } from "@tweenjs/tween.js";
+import { Tween, update as updateTween } from "@tweenjs/tween.js";
 import { DIVERenderer } from "../renderer/Renderer";
 
 /**
@@ -8,7 +8,7 @@ import { DIVERenderer } from "../renderer/Renderer";
  * @module
  */
 
-export default class DIVEAnimationSystem {
+export class DIVEAnimationSystem {
     private _renderer: DIVERenderer;
     private _rendererCallbackId: string;
 
@@ -16,7 +16,7 @@ export default class DIVEAnimationSystem {
         this._renderer = renderer;
 
         this._rendererCallbackId = this._renderer.AddPreRenderCallback(() => {
-            this.update();
+            this.Update();
         })
     }
 
@@ -24,7 +24,11 @@ export default class DIVEAnimationSystem {
         this._renderer.RemovePreRenderCallback(this._rendererCallbackId);
     }
 
-    public update(): void {
+    public Update(): void {
         updateTween();
     }
+
+    public Animate<T extends object>(object: T): Tween<T> {
+        return new Tween<T>(object);
+    }
 }

package/src/animation/__test__/AnimationSystem.test.ts

@@ -1,8 +1,9 @@
 import { DIVERenderer } from '../../renderer/Renderer';
-import DIVEAnimationSystem from '../AnimationSystem';
+import { DIVEAnimationSystem } from '../AnimationSystem';
 
 jest.mock('@tweenjs/tween.js', () => {
     return {
+        Tween: jest.fn(() => { }),
         update: jest.fn(),
     }
 });
@@ -28,9 +29,15 @@ describe('dive/animation/DIVEAnimationSystem', () => {
         expect(anim).toBeDefined();
     });
 
+    it('should Animate', () => {
+        const anim = new DIVEAnimationSystem(mockRenderer);
+        const tween = anim.Animate({});
+        expect(tween).toBeDefined();
+    });
+
     it('should update', () => {
         const anim = new DIVEAnimationSystem(mockRenderer);
-        expect(() => anim.update()).not.toThrow();
+        expect(() => anim.Update()).not.toThrow();
     });
 
     it('should dispose', () => {

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

@@ -2,7 +2,8 @@ import { OrbitControls } from "three/examples/jsm/Addons.js";
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
 import { DIVERenderer } from "../renderer/Renderer.ts";
 import { type Box3, MathUtils, Vector3, Vector3Like } from "three";
-import { Easing, Tween } from "@tweenjs/tween.js";
+import { Easing } from "@tweenjs/tween.js";
+import { type DIVEAnimationSystem } from "../animation/AnimationSystem.ts";
 
 export type DIVEOrbitControlsSettings = {
     enableDamping: boolean;
@@ -23,6 +24,8 @@ export const DIVEOrbitControlsDefaultSettings: DIVEOrbitControlsSettings = {
 export default class DIVEOrbitControls extends OrbitControls {
     public static readonly DEFAULT_ZOOM_FACTOR = 1;
 
+    private _animationSystem: DIVEAnimationSystem;
+
     private last: { pos: Vector3Like, target: Vector3Like } | null = null;
 
     private animating: boolean = false;
@@ -34,21 +37,34 @@ export default class DIVEOrbitControls extends OrbitControls {
     public object: DIVEPerspectiveCamera;
     public domElement: HTMLCanvasElement;
 
-    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
+    private _removePreRenderCallback: () => void = () => { };
+
+    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
         super(camera, renderer.domElement);
 
+        this._animationSystem = animationSystem;
+
         this.domElement = renderer.domElement;
 
         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());
@@ -93,12 +109,12 @@ export default class DIVEOrbitControls extends OrbitControls {
         this.locked = lock;
         this.enabled = false;
 
-        const tweenPos = new Tween(this.object.position)
+        const tweenPos = this._animationSystem.Animate(this.object.position)
             .to(toPosition, duration)
             .easing(Easing.Quadratic.Out)
             .start();
 
-        const tweenQuat = new Tween(this.target)
+        const tweenQuat = this._animationSystem.Animate(this.target)
             .to(toTarget, duration)
             .easing(Easing.Quadratic.Out)
             .onUpdate(() => {
@@ -126,12 +142,12 @@ export default class DIVEOrbitControls extends OrbitControls {
 
         const { pos, target } = this.last!;
 
-        const tweenPos = new Tween(this.object.position)
+        const tweenPos = this._animationSystem.Animate(this.object.position)
             .to(pos, duration)
             .easing(Easing.Quadratic.Out)
             .start();
 
-        const tweenQuat = new Tween(this.target)
+        const tweenQuat = this._animationSystem.Animate(this.target)
             .to(target, duration)
             .easing(Easing.Quadratic.Out)
             .onUpdate(() => {

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

@@ -2,6 +2,15 @@ import DIVEOrbitControls from '../OrbitControls';
 import type DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
 import { DIVERenderer } from '../../renderer/Renderer';
 import { Box3 } from 'three';
+import { DIVEAnimationSystem } from '../../animation/AnimationSystem';
+import { Tween } from '@tweenjs/tween.js';
+
+jest.mock('@tweenjs/tween.js', () => {
+    return {
+        Tween: jest.fn(() => { }),
+        update: jest.fn(),
+    }
+});
 
 jest.mock('three/examples/jsm/Addons.js', () => {
     return {
@@ -60,6 +69,21 @@ jest.mock('../../renderer/Renderer', () => {
     });
 });
 
+jest.mock('../../animation/AnimationSystem', () => {
+    return {
+        DIVEAnimationSystem: jest.fn(function () {
+            this.domElement = {
+                style: {},
+            };
+            this.Animate = <T extends object>(obj: T) => {
+                return new Tween<T>(obj);
+            };
+
+            return this;
+        }),
+    }
+});
+
 jest.mock('@tweenjs/tween.js', () => {
     return {
         Easing: {
@@ -116,72 +140,79 @@ const mockRenderer = {
     RemovePostRenderCallback: jest.fn(),
 } as unknown as DIVERenderer;
 
+const mockAnimSystem = new DIVEAnimationSystem(mockRenderer);
+
 describe('dive/controls/DIVEOrbitControls', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
 
     it('should instantiate', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         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);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.ComputeEncompassingView(new Box3())).not.toThrow();
     });
 
     it('should zoom in with default value', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.ZoomIn()).not.toThrow();
     });
 
     it('should zoom in with custom value', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.ZoomIn(10)).not.toThrow();
     });
 
     it('should zoom out with default value', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.ZoomOut()).not.toThrow();
     });
 
     it('should zoom out with custom value', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.ZoomOut(10)).not.toThrow();
     });
 
     it('should move to', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, false)).not.toThrow();
     });
 
     it('should revert move to', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
         expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
     });
 
     it('should revert move to without values', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         expect(() => controller.MoveTo(undefined, undefined, moveToDuration, true)).not.toThrow();
     });
 
     it('should revert move to with lock', async () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
         expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
     });
 
     it('should move after revert with lock', async () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
         controller.RevertLast(moveToDuration);
         expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true)).not.toThrow();
     });
 
     it('should catch multiple move tos', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
         controller.RevertLast(moveToDuration);
         expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true)).not.toThrow();
@@ -191,7 +222,7 @@ describe('dive/controls/DIVEOrbitControls', () => {
     });
 
     it('should catch multiple reverts', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
         expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
         expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
@@ -199,7 +230,7 @@ describe('dive/controls/DIVEOrbitControls', () => {
     });
 
     it('should execute preRenderCallback', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
         controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
         expect(() => controller['preRenderCallback']()).not.toThrow();
         controller['locked'] = true;

package/src/dive.ts

@@ -4,7 +4,7 @@ import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings, DIVEPerspe
 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 { DIVEAnimationSystem } from "./animation/AnimationSystem.ts";
 import DIVEAxisCamera from "./axiscamera/AxisCamera.ts";
 import { getObjectDelta } from "./helper/getObjectDelta/getObjectDelta.ts";
 
@@ -133,7 +133,7 @@ export default class DIVE {
     private communication: DIVECommunication;
 
     // additional components
-    private animationSystem: DIVEAnimationSystem | null;
+    private animationSystem: DIVEAnimationSystem;
     private axisCamera: DIVEAxisCamera | null;
 
     // getters
@@ -194,12 +194,14 @@ export default class DIVE {
         this.renderer = new DIVERenderer(this._settings.renderer);
         this.scene = new DIVEScene();
         this.perspectiveCamera = new DIVEPerspectiveCamera(this._settings.perspectiveCamera);
-        this.orbitControls = new DIVEOrbitControls(this.perspectiveCamera, this.renderer, this._settings.orbitControls);
+
+        // 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 animation system
-        this.animationSystem = null;
 
         // initialize axis camera
         if (this._settings.displayAxes) {
@@ -227,7 +229,9 @@ export default class DIVE {
     public Dispose(): void {
         this.removeResizeObserver();
         this.renderer.Dispose();
+        this.orbitControls.Dispose();
         this.axisCamera?.Dispose();
+        this.animationSystem.Dispose();
         this.toolbox.Dispose();
         this.communication.DestroyInstance();
     }

package/src/mediacreator/__test__/MediaCreator.test.ts

@@ -4,6 +4,7 @@ import DIVEScene from '../../scene/Scene';
 import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../../camera/PerspectiveCamera';
 import { COMPov } from '../../com';
 import DIVEOrbitControls from '../../controls/OrbitControls';
+import { DIVEAnimationSystem } from '../../animation/AnimationSystem';
 
 /**
  * @jest-environment jsdom
@@ -83,12 +84,29 @@ jest.mock('../../renderer/Renderer', () => {
     }
 });
 
+jest.mock('../../animation/AnimationSystem', () => {
+    return {
+        DIVEAnimationSystem: jest.fn(function () {
+            this.domElement = {
+                toDataURL: mock_toDataURL,
+            }
+            this.render = mock_render;
+            this.OnResize = jest.fn();
+            this.AddPreRenderCallback = jest.fn((callback) => {
+                callback();
+                return 'id';
+            });
+            return this;
+        })
+    }
+});
+
 let mediaCreator: DIVEMediaCreator;
 
 describe('dive/mediacreator/DIVEMediaCreator', () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        mediaCreator = new DIVEMediaCreator(new DIVERenderer(), new DIVEScene(), new DIVEOrbitControls(new DIVEPerspectiveCamera(DIVEPerspectiveCameraDefaultSettings), new DIVERenderer()));
+        mediaCreator = new DIVEMediaCreator(new DIVERenderer(), new DIVEScene(), new DIVEOrbitControls(new DIVEPerspectiveCamera(DIVEPerspectiveCameraDefaultSettings), new DIVERenderer(), new DIVEAnimationSystem(new DIVERenderer())));
     });
 
     it('should instantiate', () => {

package/src/toolbox/select/__test__/SelectTool.test.ts

@@ -6,6 +6,15 @@ import { DIVESelectable } from '../../../interface/Selectable';
 import type DIVEPerspectiveCamera from '../../../camera/PerspectiveCamera';
 import { type Object3D } from 'three';
 import { type DIVEBaseTool } from '../../BaseTool';
+import { DIVEAnimationSystem } from '../../../animation/AnimationSystem';
+import { Tween } from '@tweenjs/tween.js';
+
+jest.mock('@tweenjs/tween.js', () => {
+    return {
+        Tween: jest.fn(() => { }),
+        update: jest.fn(),
+    }
+});
 
 jest.mock('../../../renderer/Renderer', () => {
     return jest.fn(function () {
@@ -39,6 +48,22 @@ jest.mock('../../../controls/OrbitControls', () => {
     });
 });
 
+
+jest.mock('../../../animation/AnimationSystem', () => {
+    return {
+        DIVEAnimationSystem: jest.fn(function () {
+            this.domElement = {
+                style: {},
+            };
+            this.Animate = <T extends object>(obj: T) => {
+                return new Tween<T>(obj);
+            };
+
+            return this;
+        }),
+    }
+});
+
 jest.mock('../../../scene/Scene', () => {
     return jest.fn(function () {
         this.add = jest.fn();
@@ -115,7 +140,8 @@ const mockRenderer = {
     OnResize: jest.fn(),
 } as unknown as DIVERenderer;
 const mockScene: DIVEScene = new DIVEScene();
-const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer);
+const mockAnimSystem = new DIVEAnimationSystem(mockRenderer);
+const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
 
 describe('dive/toolbox/select/DIVESelectTool', () => {
     it('should test if it is SelectTool', () => {

package/src/toolbox/transform/__test__/TransformTool.test.ts

@@ -4,6 +4,15 @@ import DIVEOrbitControls from '../../../controls/OrbitControls';
 import DIVEPerspectiveCamera from '../../../camera/PerspectiveCamera';
 import { DIVERenderer } from '../../../renderer/Renderer';
 import { type DIVEBaseTool } from '../../BaseTool';
+import { Tween } from '@tweenjs/tween.js';
+import { DIVEAnimationSystem } from '../../../animation/AnimationSystem';
+
+jest.mock('@tweenjs/tween.js', () => {
+    return {
+        Tween: jest.fn(() => { }),
+        update: jest.fn(),
+    }
+});
 
 jest.mock('../../../renderer/Renderer', () => {
     return jest.fn(function () {
@@ -49,6 +58,21 @@ jest.mock('../../../scene/Scene', () => {
     });
 });
 
+jest.mock('../../../animation/AnimationSystem', () => {
+    return {
+        DIVEAnimationSystem: jest.fn(function () {
+            this.domElement = {
+                style: {},
+            };
+            this.Animate = <T extends object>(obj: T) => {
+                return new Tween<T>(obj);
+            };
+
+            return this;
+        }),
+    }
+});
+
 const mock_intersectObjects = jest.fn().mockReturnValue([]);
 
 jest.mock('three', () => {
@@ -126,7 +150,8 @@ const mockRenderer = {
     RemovePostRenderCallback: jest.fn(),
 } as unknown as DIVERenderer;
 const mockScene: DIVEScene = new DIVEScene();
-const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer);
+const mockAnimSystem = new DIVEAnimationSystem(mockRenderer);
+const mockController: DIVEOrbitControls = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
 
 describe('dive/toolbox/select/DIVETransformTool', () => {
     it('should test if it is SelectTool', () => {