@shopware-ag/dive 1.0.7 → 1.0.8

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Shopware Spatial Framework",
   "type": "module",
   "main": "./build/dive.cjs",
   "module": "./build/dive.js",
   "types": "./build/dive.d.ts",
   "files": [
-    "/build/*",
-    "/src/*"
+    "build",
+    "LICENSE",
+    "package.json",
+    "README.md",
+    "src"
   ],
   "keywords": [
     "dive",

package/src/__test__/DIVE.test.ts

@@ -0,0 +1,244 @@
+import DIVE, { DIVESettings } from '../dive.ts';
+
+jest.mock('three', () => {
+    return {
+        Vector4: jest.fn(),
+        WebGLRenderer: jest.fn(function () {
+            this.domElement = {
+                clientWidth: 800,
+                clientHeight: 600,
+                style: {
+                    position: 'absolute',
+                },
+            };
+            this.domElement.parentElement = this.domElement;
+            this.debug = {
+                checkShaderErrors: true,
+            };
+            this.setSize = jest.fn();
+            this.setPixelRatio = jest.fn();
+            this.render = jest.fn();
+            this.setAnimationLoop = jest.fn();
+            this.shadowMap = {
+                enabled: false,
+            };
+            return this;
+        }),
+        MathUtils: {
+            generateUUID: () => { return 'test_uuid'; },
+        },
+    }
+});
+
+jest.mock('../renderer/Renderer.ts', () => {
+    return jest.fn(function () {
+        this.domElement = {
+            clientWidth: 800,
+            clientHeight: 600,
+            style: {
+                position: 'absolute',
+            },
+        };
+        this.domElement.parentElement = this.domElement;
+        this.AddPreRenderCallback = (callback: () => void) => {
+            callback();
+        };
+        this.RemovePreRenderCallback = jest.fn();
+        this.AddPostRenderCallback = (callback: () => void) => {
+            callback();
+        };
+        this.getViewport = jest.fn();
+        this.setViewport = jest.fn();
+        this.autoClear = false;
+        this.render = jest.fn();
+        this.StartRenderer = jest.fn();
+        this.OnResize = jest.fn();
+
+        return this;
+    });
+});
+
+jest.mock('../scene/Scene.ts', () => {
+    return 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;
+    });
+});
+
+jest.mock('../camera/PerspectiveCamera.ts', () => {
+    return jest.fn(function () {
+        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();
+        this.OnResize = jest.fn();
+        return this;
+    });
+});
+
+jest.mock('../controls/OrbitControls.ts', () => {
+    return jest.fn(function () {
+        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;
+    });
+});
+
+jest.mock('../toolbox/Toolbox.ts', () => {
+    return jest.fn(function () {
+        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;
+    });
+});
+
+jest.mock('../axiscamera/AxisCamera.ts', () => {
+    return jest.fn(function () {
+        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();
+        this.SetFromCameraMatrix = jest.fn();
+        return this;
+    });
+});
+
+describe('dive/DIVE', () => {
+    it('should instantiate', () => {
+        const dive = new DIVE();
+        expect(dive).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        const settings = {
+            autoResize: false,
+            renderer: {
+                antialias: false,
+                alpha: false,
+                stencil: false,
+                shadowMapEnabled: false,
+                shadowMapType: 0,
+                toneMapping: 0,
+            },
+            perspectiveCamera: {
+                fov: 0,
+                near: 0,
+                far: 0,
+            },
+            orbitControls: {
+                enableDamping: false,
+                dampingFactor: 0,
+            }
+        } as DIVESettings;
+        const dive = new DIVE(settings);
+        expect(dive).toBeDefined();
+    });
+
+    it('should have Canvas', () => {
+        const dive = new DIVE();
+        expect(dive.Canvas).toBeDefined();
+    });
+
+    it('should have Communication', () => {
+        const dive = new DIVE();
+        expect(dive.Communication).toBeDefined();
+    });
+
+    it('should resize', () => {
+        const dive = new DIVE();
+        expect(() => dive.OnResize(800, 600)).not.toThrow();
+    });
+
+    it('should update settings', () => {
+        const dive = new DIVE();
+        dive.Settings = {
+            autoResize: false,
+            renderer: {
+                antialias: false,
+                alpha: false,
+                stencil: false,
+                shadowMapEnabled: false,
+                shadowMapType: 0,
+                toneMapping: 0,
+            },
+            perspectiveCamera: {
+                fov: 0,
+                near: 0,
+                far: 0,
+            },
+            orbitControls: {
+                enableDamping: false,
+                dampingFactor: 0,
+            }
+        }
+
+        dive.Settings = {
+            autoResize: true,
+        }
+
+        Object.assign(dive.Canvas, { parentElement: null });
+
+        dive.Settings = {
+            autoResize: false,
+        }
+
+        dive.Settings = {
+            autoResize: true,
+        }
+    });
+
+
+});

package/src/animation/AnimationSystem.ts

@@ -0,0 +1,14 @@
+import { update as updateTween } from "@tweenjs/tween.js";
+
+/**
+ * Updates all animations.
+ * DIVE uses Tween.js to handle animations.
+ *
+ * @module
+ */
+
+export default class DIVEAnimationSystem {
+    public update(): void {
+        updateTween();
+    }
+}

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

@@ -0,0 +1,19 @@
+import DIVEAnimationSystem from '../AnimationSystem';
+
+jest.mock('@tweenjs/tween.js', () => {
+    return {
+        update: jest.fn(),
+    }
+});
+
+describe('dive/animation/DIVEAnimationSystem', () => {
+    it('should instantiate', () => {
+        const anim = new DIVEAnimationSystem();
+        expect(anim).toBeDefined();
+    });
+
+    it('should update', () => {
+        const anim = new DIVEAnimationSystem();
+        expect(() => anim.update()).not.toThrow();
+    });
+});

package/src/axiscamera/AxisCamera.ts

@@ -0,0 +1,50 @@
+import { AxesHelper, Color, Material, Matrix4, OrthographicCamera } from "three";
+import SpriteText from "three-spritetext";
+import { COORDINATE_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
+import { AxesColorRed, AxesColorGreen, AxesColorBlue, AxesColorRedLetter, AxesColorGreenLetter, AxesColorBlueLetter } from "../constant/AxisHelperColors.ts";
+
+/**
+ * Shows the scene axes in the bottom left corner of the screen.
+ *
+ * @module
+ */
+
+export default class DIVEAxisCamera extends OrthographicCamera {
+    private axesHelper: AxesHelper;
+
+    constructor() {
+        super(-1, 1, 1, -1, 0.1, 100);
+
+        this.layers.mask = COORDINATE_LAYER_MASK;
+
+        this.axesHelper = new AxesHelper(0.5);
+        this.axesHelper.layers.mask = COORDINATE_LAYER_MASK;
+        (this.axesHelper.material as Material).depthTest = false; // always draw
+        this.axesHelper.position.set(0, 0, -1);
+
+        this.axesHelper.setColors(
+            new Color(AxesColorRed),
+            new Color(AxesColorGreen),
+            new Color(AxesColorBlue)
+        );
+
+        const x = new SpriteText('X', 0.2, AxesColorRedLetter);
+        const y = new SpriteText('Y', 0.2, AxesColorGreenLetter);
+        const z = new SpriteText('Z', 0.2, AxesColorBlueLetter);
+        x.layers.mask = COORDINATE_LAYER_MASK;
+        y.layers.mask = COORDINATE_LAYER_MASK;
+        z.layers.mask = COORDINATE_LAYER_MASK;
+        x.position.set(0.7, 0, 0);
+        y.position.set(0, 0.7, 0);
+        z.position.set(0, 0, 0.7);
+        this.axesHelper.add(x);
+        this.axesHelper.add(y);
+        this.axesHelper.add(z);
+
+        this.add(this.axesHelper);
+    }
+
+    public SetFromCameraMatrix(matrix: Matrix4): void {
+        this.axesHelper.rotation.setFromRotationMatrix(new Matrix4().extractRotation(matrix).invert());
+    }
+}

package/src/axiscamera/__test__/AxisCamera.test.ts

@@ -0,0 +1,41 @@
+import { Matrix4 } from 'three';
+import DIVEAxisCamera from '../AxisCamera';
+
+jest.mock('three-spritetext', () => {
+    return jest.fn(() => {
+        return {
+            isObject3D: true,
+            parent: null,
+            dispatchEvent: jest.fn(),
+            layers: {
+                mask: 0,
+            },
+            position: {
+                set: jest.fn(),
+            },
+            removeFromParent: jest.fn(),
+        }
+    },
+    )
+});
+
+describe('dive/axiscamera/DIVEAxisCamera', () => {
+    it('should instantiate', () => {
+        const cam = new DIVEAxisCamera();
+        expect(cam).toBeDefined();
+    });
+
+    it('should set rotation from Matrix4', () => {
+        expect.assertions(0);
+        const matrix = {
+            elements: [
+                1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1,
+            ],
+        } as Matrix4;
+        const cam = new DIVEAxisCamera();
+        cam.SetFromCameraMatrix(matrix);
+    });
+});

package/src/camera/PerspectiveCamera.ts

@@ -0,0 +1,43 @@
+import { PerspectiveCamera } from "three";
+import { DEFAULT_LAYER_MASK, HELPER_LAYER_MASK, PRODUCT_LAYER_MASK, UI_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
+
+export type DIVEPerspectiveCameraSettings = {
+    fov: number;
+    near: number;
+    far: number;
+}
+
+export const DIVEPerspectiveCameraDefaultSettings: DIVEPerspectiveCameraSettings = {
+    fov: 80,
+    near: 0.1,
+    far: 1000,
+}
+
+/**
+ * A Perspective camera. Can change the layer mask to show different objects.
+ *
+ * @module
+ */
+
+export default class DIVEPerspectiveCamera extends PerspectiveCamera {
+    public static readonly EDITOR_VIEW_LAYER_MASK = DEFAULT_LAYER_MASK | UI_LAYER_MASK | HELPER_LAYER_MASK | PRODUCT_LAYER_MASK;
+    public static readonly LIVE_VIEW_LAYER_MASK = PRODUCT_LAYER_MASK;
+
+    public onSetCameraLayer: (mask: number) => void = () => { };
+
+    constructor(settings: DIVEPerspectiveCameraSettings = DIVEPerspectiveCameraDefaultSettings) {
+        super(settings.fov, 1, settings.near, settings.far);
+
+        this.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+    }
+
+    public OnResize(width: number, height: number): void {
+        this.aspect = width / height;
+        this.updateProjectionMatrix();
+    }
+
+    public SetCameraLayer(layer: 'LIVE' | 'EDITOR'): void {
+        this.layers.mask = layer === 'LIVE' ? DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK : DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+        this.onSetCameraLayer(this.layers.mask);
+    }
+}

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

@@ -0,0 +1,27 @@
+import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../PerspectiveCamera';
+
+let cam: DIVEPerspectiveCamera;
+
+describe('dive/camera/DIVEPerspectiveCamera', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        cam = new DIVEPerspectiveCamera(DIVEPerspectiveCameraDefaultSettings);
+    });
+
+    it('should instantiate', () => {
+        cam = new DIVEPerspectiveCamera();
+        expect(cam).toBeDefined();
+    });
+
+    it('should resize', () => {
+        const spy = jest.spyOn(cam, 'updateProjectionMatrix');
+        expect(() => cam.OnResize(800, 600)).not.toThrow();
+        expect(cam.aspect).toBe(800 / 600);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set camera layer', () => {
+        expect(() => cam.SetCameraLayer('LIVE')).not.toThrow();
+        expect(() => cam.SetCameraLayer('EDITOR')).not.toThrow();
+    });
+});