@shopware-ag/dive 1.6.3 → 1.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Shopware Spatial Framework",
   "type": "module",
   "main": "./build/dive.cjs",

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/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,9 +37,11 @@ export default class DIVEOrbitControls extends OrbitControls {
     public object: DIVEPerspectiveCamera;
     public domElement: HTMLCanvasElement;
 
-    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
+    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
         super(camera, renderer.domElement);
 
+        this._animationSystem = animationSystem;
+
         this.domElement = renderer.domElement;
 
         this.object = camera;
@@ -93,12 +98,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 +131,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,74 @@ 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 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 +217,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 +225,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) {
@@ -228,6 +230,7 @@ export default class DIVE {
         this.removeResizeObserver();
         this.renderer.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', () => {