@shopware-ag/dive 1.7.0 → 1.8.0

package/package.json

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

package/src/__test__/DIVE.test.ts

@@ -183,6 +183,8 @@ jest.mock('../axiscamera/AxisCamera.ts', () => {
     });
 });
 
+console.log = jest.fn();
+
 describe('dive/DIVE', () => {
     it('should QuickView', () => {
         const dive = DIVE.QuickView('test_uri');
@@ -193,7 +195,6 @@ describe('dive/DIVE', () => {
         const dive = new DIVE();
         expect(dive).toBeDefined();
         expect((window as any).DIVE.PrintScene).toBeDefined();
-        console.log = jest.fn();
         expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 

package/src/camera/PerspectiveCamera.ts

@@ -25,8 +25,13 @@ export default class DIVEPerspectiveCamera extends PerspectiveCamera {
 
     public onSetCameraLayer: (mask: number) => void = () => { };
 
-    constructor(settings: DIVEPerspectiveCameraSettings = DIVEPerspectiveCameraDefaultSettings) {
-        super(settings.fov, 1, settings.near, settings.far);
+    constructor(settings: Partial<DIVEPerspectiveCameraSettings> = DIVEPerspectiveCameraDefaultSettings) {
+        super(
+            settings.fov || DIVEPerspectiveCameraDefaultSettings.fov,
+            1,
+            settings.near || DIVEPerspectiveCameraDefaultSettings.near,
+            settings.far || DIVEPerspectiveCameraDefaultSettings.far
+        );
 
         this.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
     }

package/src/camera/__test__/PerspectiveCamera.test.ts

@@ -5,11 +5,20 @@ let cam: DIVEPerspectiveCamera;
 describe('dive/camera/DIVEPerspectiveCamera', () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        cam = new DIVEPerspectiveCamera(DIVEPerspectiveCameraDefaultSettings);
+        cam = new DIVEPerspectiveCamera();
     });
 
     it('should instantiate', () => {
-        cam = new DIVEPerspectiveCamera();
+        cam = new DIVEPerspectiveCamera({});
+        expect(cam).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        cam = new DIVEPerspectiveCamera({
+            fov: 45,
+            near: 0.1,
+            far: 100,
+        });
         expect(cam).toBeDefined();
     });
 

package/src/controls/OrbitControls.ts

@@ -1,4 +1,4 @@
-import { OrbitControls } from "three/examples/jsm/Addons.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
 import { DIVERenderer } from "../renderer/Renderer.ts";
 import { type Box3, MathUtils, Vector3, Vector3Like } from "three";
@@ -39,7 +39,7 @@ export default class DIVEOrbitControls extends OrbitControls {
 
     private _removePreRenderCallback: () => void = () => { };
 
-    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
+    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: Partial<DIVEOrbitControlsSettings> = DIVEOrbitControlsDefaultSettings) {
         super(camera, renderer.domElement);
 
         this._animationSystem = animationSystem;
@@ -56,8 +56,13 @@ export default class DIVEOrbitControls extends OrbitControls {
             renderer.RemovePreRenderCallback(id);
         }
 
-        this.enableDamping = settings.enableDamping;
-        this.dampingFactor = settings.dampingFactor;
+        this.enableDamping = settings.enableDamping || DIVEOrbitControlsDefaultSettings.enableDamping;
+        this.dampingFactor = settings.dampingFactor || DIVEOrbitControlsDefaultSettings.dampingFactor;
+
+        // initialize camera transformation
+        this.object.position.set(0, 2, 2);
+        this.target.copy({ x: 0, y: 0.5, z: 0 });
+        this.update();
     }
 
     public Dispose(): void {

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

@@ -12,7 +12,7 @@ jest.mock('@tweenjs/tween.js', () => {
     }
 });
 
-jest.mock('three/examples/jsm/Addons.js', () => {
+jest.mock('three/examples/jsm/controls/OrbitControls', () => {
     return {
         OrbitControls: jest.fn(function () {
             this.enableDamping = true;
@@ -42,14 +42,13 @@ jest.mock('three/examples/jsm/Addons.js', () => {
                 MIDDLE: 1,
                 RIGHT: 2,
             };
-            this.target = {
-                set: jest.fn(),
-            };
             this.update = jest.fn();
             this.dispose = jest.fn();
             this.getDistance = jest.fn();
             this.target = {
                 clone: jest.fn(),
+                set: jest.fn(),
+                copy: jest.fn(),
             };
             return this;
         }),
@@ -122,6 +121,9 @@ const mockCamera = {
         multiplyScalar: jest.fn(() => {
             return mockCamera.position;
         }),
+        set: jest.fn(() => {
+            return mockCamera.position;
+        }),
     },
     lookAt: jest.fn(),
 } as unknown as DIVEPerspectiveCamera;
@@ -148,7 +150,15 @@ describe('dive/controls/DIVEOrbitControls', () => {
     });
 
     it('should instantiate', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem, {});
+        expect(controller).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem, {
+            enableDamping: false,
+            dampingFactor: 0.5,
+        });
         expect(controller).toBeDefined();
     });
 

package/src/dive.ts

@@ -17,9 +17,9 @@ import { DIVEInfo } from "./info/Info.ts";
 export type DIVESettings = {
     autoResize: boolean;
     displayAxes: boolean;
-    renderer: DIVERendererSettings;
-    perspectiveCamera: DIVEPerspectiveCameraSettings;
-    orbitControls: DIVEOrbitControlsSettings;
+    renderer: Partial<DIVERendererSettings>;
+    perspectiveCamera: Partial<DIVEPerspectiveCameraSettings>;
+    orbitControls: Partial<DIVEOrbitControlsSettings>;
 }
 
 export const DIVEDefaultSettings: DIVESettings = {
@@ -159,15 +159,15 @@ export default class DIVE {
 
         // apply perspective camera settings
         if (settingsDelta.perspectiveCamera) {
-            this.perspectiveCamera.fov = settingsDelta.perspectiveCamera.fov;
-            this.perspectiveCamera.near = settingsDelta.perspectiveCamera.near;
-            this.perspectiveCamera.far = settingsDelta.perspectiveCamera.far;
+            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) {
-            this.orbitControls.enableDamping = settingsDelta.orbitControls.enableDamping;
-            this.orbitControls.dampingFactor = settingsDelta.orbitControls.dampingFactor;
+            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) {
@@ -229,6 +229,8 @@ export default class DIVE {
                 console.log(this.scene);
             },
         }
+
+        console.log('DIVE initialized');
     }
 
     public Dispose(): void {

package/src/renderer/Renderer.ts

@@ -7,6 +7,7 @@ export type DIVERendererSettings = {
     shadowMapEnabled: boolean;
     shadowMapType: ShadowMapType;
     toneMapping: ToneMapping;
+    canvas?: HTMLCanvasElement;
 }
 
 export const DIVERendererDefaultSettings: DIVERendererSettings = {
@@ -16,6 +17,7 @@ export const DIVERendererDefaultSettings: DIVERendererSettings = {
     shadowMapEnabled: true,
     shadowMapType: PCFSoftShadowMap,
     toneMapping: NoToneMapping,
+    canvas: undefined,
 }
 
 /**
@@ -36,18 +38,19 @@ export class DIVERenderer extends WebGLRenderer {
     private preRenderCallbacks: Map<string, () => void> = new Map<string, () => void>();
     private postRenderCallbacks: Map<string, () => void> = new Map<string, () => void>();
 
-    constructor(rendererSettings: DIVERendererSettings = DIVERendererDefaultSettings) {
+    constructor(rendererSettings: Partial<DIVERendererSettings> = DIVERendererDefaultSettings) {
         super({
-            antialias: rendererSettings.antialias,
-            alpha: rendererSettings.alpha,
-            preserveDrawingBuffer: true
+            antialias: rendererSettings.antialias || DIVERendererDefaultSettings.antialias,
+            alpha: rendererSettings.alpha || DIVERendererDefaultSettings.alpha,
+            preserveDrawingBuffer: true,
+            canvas: rendererSettings.canvas,
         });
         this.setPixelRatio(window.devicePixelRatio);
 
-        this.shadowMap.enabled = rendererSettings.shadowMapEnabled;
-        this.shadowMap.type = rendererSettings.shadowMapType;
+        this.shadowMap.enabled = rendererSettings.shadowMapEnabled || DIVERendererDefaultSettings.shadowMapEnabled;
+        this.shadowMap.type = rendererSettings.shadowMapType || DIVERendererDefaultSettings.shadowMapType;
 
-        this.toneMapping = rendererSettings.toneMapping;
+        this.toneMapping = rendererSettings.toneMapping || DIVERendererDefaultSettings.toneMapping;
 
         this.debug.checkShaderErrors = false;
     }

package/src/renderer/__test__/Renderer.test.ts

@@ -48,9 +48,20 @@ describe('dive/renderer/DIVERenderer', () => {
     });
 
     it('should instantiate', () => {
+        renderer = new DIVERenderer({});
         expect(renderer).toBeDefined();
     });
 
+    it('should instantiate', () => {
+        renderer = new DIVERenderer({
+            alpha: true,
+            shadowMapEnabled: true,
+            shadowMapType: 1,
+            toneMapping: 1,
+            antialias: true,
+        });
+    });
+
     it('should instantiate with settings parameter', () => {
         renderer = new DIVERenderer(DIVERendererDefaultSettings);
         expect(renderer).toBeDefined();