@shopware-ag/dive 1.0.7 → 1.0.9

package/src/light/__test__/SceneLight.test.ts

@@ -0,0 +1,122 @@
+import DIVESceneLight from '../SceneLight';
+import DIVECommunication from '../../com/Communication';
+import { Color } from 'three';
+
+jest.mock('../../com/Communication.ts', () => {
+    return {
+        get: jest.fn(() => {
+            return {
+                PerformAction: jest.fn(),
+            }
+        }),
+    }
+});
+
+const mockAdd = jest.fn();
+
+jest.mock('three', () => {
+    return {
+        Color: jest.fn(function () {
+            return {};
+        }),
+        PointLight: jest.fn(function () {
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            }
+            this.add = mockAdd;
+            this.children = [{
+                material: {
+                    color: {},
+                },
+            }];
+            this.userData = {};
+            return this;
+        }),
+        SphereGeometry: jest.fn(function () {
+            return this;
+        }),
+        MeshBasicMaterial: jest.fn(function () {
+            return this;
+        }),
+        Mesh: jest.fn(function () {
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+        Object3D: jest.fn(function () {
+            this.add = mockAdd;
+            return this;
+        }),
+        HemisphereLight: jest.fn(function () {
+            this.layers = {
+                mask: 0,
+            };
+            this.position = {
+                set: jest.fn(),
+            };
+            this.removeFromParent = mockAdd;
+            return this;
+        }),
+        DirectionalLight: jest.fn(function () {
+            this.layers = {
+                mask: 0,
+            };
+            this.position = {
+                set: jest.fn(),
+                multiplyScalar: jest.fn(),
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            }
+            this.removeFromParent = mockAdd;
+            return this;
+        }),
+    }
+});
+
+jest.spyOn(DIVECommunication, 'get').mockReturnValue({ PerformAction: jest.fn() } as unknown as DIVECommunication);
+
+describe('dive/light/DIVESceneLight', () => {
+    it('should instantiate', () => {
+        const testLight = new DIVESceneLight();
+        expect(testLight).toBeDefined();
+        expect(mockAdd).toHaveBeenCalledTimes(2);
+    });
+
+    it('should set intensity', () => {
+        const testLight = new DIVESceneLight();
+        expect(() => testLight.SetIntensity(1.0)).not.toThrow();
+        expect(() => testLight.SetIntensity(0.6)).not.toThrow();
+    });
+
+    it('should set color', () => {
+        const testLight = new DIVESceneLight();
+        expect(() => testLight.SetColor({ test: true } as unknown as Color)).not.toThrow();
+    });
+
+    it('should set enabled', () => {
+        const testLight = new DIVESceneLight();
+        testLight.SetEnabled(false);
+        expect(testLight.visible).toBe(false);
+    });
+});

package/src/loadingmanager/LoadingManager.ts

@@ -0,0 +1,44 @@
+import { DRACOLoader, GLTF, GLTFLoader } from "three/examples/jsm/Addons.js";
+
+/**
+ * A basic loading manager.
+ *
+ * @module
+ */
+
+export default class DIVELoadingManager {
+    private gltfloader: GLTFLoader;
+    private dracoloader: DRACOLoader;
+    // ... maybe extend with other loaders later
+
+    constructor() {
+        this.gltfloader = new GLTFLoader();
+        this.dracoloader = new DRACOLoader();
+        this.dracoloader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
+        this.gltfloader.setDRACOLoader(this.dracoloader);
+    }
+
+    private progress: Map<string, number> = new Map<string, number>();
+
+    public async LoadGLTF(uri: string): Promise<GLTF> {
+        const progEvent = (p: ProgressEvent<EventTarget>): void => {
+            this.progress.set(uri, p.loaded / p.total);
+        }
+
+        this.progress.set(uri, 0);
+
+        return new Promise<GLTF>((resolve, reject) => {
+            this.gltfloader.loadAsync(uri, progEvent).then(resolve).catch(reject);
+        })
+    }
+
+    public PollProgress(): number {
+        let total = 0;
+        this.progress.forEach((progress: number) => {
+            total += progress;
+        });
+
+        if (this.progress.size === 0) return 1;
+        return total / this.progress.size;
+    }
+}

package/src/loadingmanager/__test__/LoadingManager.test.ts

@@ -0,0 +1,52 @@
+import DIVELoadingManager from '../LoadingManager';
+
+const mock_setDRACOLoader = jest.fn();
+const mock_setDecoderPath = jest.fn();
+
+jest.mock('three/examples/jsm/Addons.js', () => {
+    return {
+        GLTFLoader: jest.fn(function () {
+
+            this.loadAsync = (uri: string, progEvent: (p: ProgressEvent<EventTarget>) => void) => new Promise<void>((resolve) => {
+                progEvent({ loaded: 0, total: 1 } as ProgressEvent<EventTarget>);
+                resolve();
+            });
+            this.setDRACOLoader = mock_setDRACOLoader;
+            return this;
+        }),
+        DRACOLoader: jest.fn(() => {
+            return {
+                setDecoderPath: mock_setDecoderPath,
+            }
+        }),
+    }
+});
+
+describe('dive/loadingmanager/DIVELoadingManager', () => {
+    it('should instantiate', () => {
+        const testLight = new DIVELoadingManager();
+        expect(testLight).toBeDefined();
+        expect(mock_setDecoderPath).toHaveBeenCalledTimes(1);
+        expect(mock_setDRACOLoader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return GLTF promise', () => {
+        const testLight = new DIVELoadingManager();
+        const promise = testLight.LoadGLTF('test.gltf');
+        expect(promise).toBeDefined();
+    });
+
+    it('should return progress', () => {
+        const testLight = new DIVELoadingManager();
+        testLight.LoadGLTF('test.gltf');
+        const progress = testLight.PollProgress();
+        expect(progress).toBe(0);
+    });
+
+    it('should return done progress without load', () => {
+        const testLight = new DIVELoadingManager();
+        const progress = testLight.PollProgress();
+        expect(progress).toBe(1);
+    });
+
+});

package/src/math/__test__/DIVEMath.test.ts

@@ -0,0 +1,12 @@
+import { DIVEMath } from '../index';
+
+describe('dive/math', () => {
+    it('should be defined', () => {
+        expect(DIVEMath).toBeDefined();
+        expect(DIVEMath.ceilExp).toBeDefined();
+        expect(DIVEMath.floorExp).toBeDefined();
+        expect(DIVEMath.roundExp).toBeDefined();
+        expect(DIVEMath.toFixedExp).toBeDefined();
+        expect(DIVEMath.truncateExp).toBeDefined();
+    });
+});

package/src/math/ceil/__test__/ceilExp.test.ts

@@ -0,0 +1,12 @@
+import ceilExp from '../ceilExp';
+
+describe('dive/math/ceil/ceilExp', () => {
+    it('should ceilExp', () => {
+        expect(ceilExp(-0.5)).toBe(0);
+        expect(ceilExp(0.5)).toBe(1);
+        expect(ceilExp(0.55)).toBe(1);
+        expect(ceilExp(0.49)).toBe(1);
+        expect(ceilExp(0.49, 2)).toBe(0.49);
+        expect(ceilExp(-1.49, 2)).toBe(-1.49);
+    });
+});

package/src/math/ceil/ceilExp.ts

@@ -0,0 +1,6 @@
+import shift from "../helper/shift.ts";
+
+export default function ceilExp(number: number, decimals: number = 0): number {
+    const n = shift(number, +decimals);
+    return shift(Math.ceil(n), -decimals);
+}

package/src/math/floor/__test__/floorExp.test.ts

@@ -0,0 +1,14 @@
+import floorExp from '../floorExp';
+
+describe('dive/math/floor/floorExp', () => {
+    it('should floorExp', () => {
+        expect(floorExp(-0.5)).toBe(-1);
+        expect(floorExp(0.5)).toBe(0);
+        expect(floorExp(0.55)).toBe(0);
+        expect(floorExp(0.49)).toBe(0);
+        expect(floorExp(1.49)).toBe(1);
+        expect(floorExp(0.49, 2)).toBe(0.49);
+        expect(floorExp(1.49, 2)).toBe(1.49);
+        expect(floorExp(-1.49, 2)).toBe(-1.49);
+    });
+});

package/src/math/floor/floorExp.ts

@@ -0,0 +1,6 @@
+import shift from "../helper/shift.ts";
+
+export default function floorExp(number: number, decimals: number = 0): number {
+    const n = shift(number, +decimals);
+    return shift(Math.floor(n), -decimals);
+}

package/src/math/helper/__test__/shift.test.ts

@@ -0,0 +1,12 @@
+import shift from '../shift';
+
+describe('dive/math/helper/shift', () => {
+    it('should shift', () => {
+        expect(shift(0.5, 2)).toBe(50);
+        expect(shift(0.55, 2)).toBe(55);
+        expect(shift(0.49, 2)).toBe(49);
+        expect(shift(1.49, 2)).toBe(149);
+        expect(shift(0.49, 2)).toBe(49);
+        expect(shift(1.49, 2)).toBe(149);
+    });
+});

package/src/math/helper/shift.ts

@@ -0,0 +1,4 @@
+export default function shift(value: number, exponent: number): number {
+    const subvalues = (value + 'e').split('e');
+    return +(subvalues[0] + 'e' + (+subvalues[1] + (exponent || 0)));
+}

package/src/math/index.ts

@@ -0,0 +1,19 @@
+import ceilExp from "./ceil/ceilExp.ts";
+import floorExp from "./floor/floorExp.ts";
+import roundExp from "./round/roundExp.ts";
+import toFixedExp from "./toFixed/toFixedExp.ts";
+import truncateExp from "./truncate/truncateExp.ts";
+
+export const DIVEMath: {
+    ceilExp: typeof ceilExp;
+    floorExp: typeof floorExp;
+    roundExp: typeof roundExp;
+    toFixedExp: typeof toFixedExp;
+    truncateExp: typeof truncateExp;
+} = {
+    ceilExp,
+    floorExp,
+    roundExp,
+    toFixedExp,
+    truncateExp,
+}

package/src/math/round/__test__/roundExp.test.ts

@@ -0,0 +1,14 @@
+import roundExp from '../roundExp';
+
+describe('dive/math/round/roundExp', () => {
+    it('should roundExp', () => {
+        expect(roundExp(-0.5)).toBe(-1);
+        expect(roundExp(0.5)).toBe(1);
+        expect(roundExp(0.55)).toBe(1);
+        expect(roundExp(0.49)).toBe(0);
+        expect(roundExp(1.49)).toBe(1);
+        expect(roundExp(0.49, 2)).toBe(0.49);
+        expect(roundExp(1.49, 2)).toBe(1.49);
+        expect(roundExp(-1.49, 2)).toBe(-1.49);
+    });
+});

package/src/math/round/roundExp.ts

@@ -0,0 +1,7 @@
+import shift from "../helper/shift.ts";
+
+export default function roundExponential(number: number, decimals: number = 0): number {
+    if (number < 0) return -roundExponential(-number, decimals);
+    const n = shift(number, +decimals);
+    return shift(Math.round(n), -decimals);
+};

package/src/math/toFixed/__test__/toFixedExp.test.ts

@@ -0,0 +1,14 @@
+import toFixedExp from '../toFixedExp';
+
+describe('dive/math/toFixed/toFixedExp', () => {
+    it('should toFixedExp', () => {
+        expect(toFixedExp(-0.5)).toBe("0");
+        expect(toFixedExp(0.5)).toBe("1");
+        expect(toFixedExp(0.55)).toBe("1");
+        expect(toFixedExp(0.49)).toBe("0");
+        expect(toFixedExp(1.49)).toBe("1");
+        expect(toFixedExp(0.49, 2)).toBe("0.49");
+        expect(toFixedExp(1.49, 2)).toBe("1.49");
+        expect(toFixedExp(-1.49, 2)).toBe("-1.49");
+    });
+});

package/src/math/toFixed/toFixedExp.ts

@@ -0,0 +1,6 @@
+import shift from "../helper/shift.ts";
+
+export default function toFixedExp(number: number, decimals: number = 0): string {
+    const n = shift(number, +decimals);
+    return shift(Math.round(n), -decimals).toFixed(decimals);
+}

package/src/math/truncate/__test__/truncateExp.test.ts

@@ -0,0 +1,14 @@
+import truncateExp from '../truncateExp';
+
+describe('dive/math/truncate/truncateExp', () => {
+    it('should truncateExp', () => {
+        expect(truncateExp(-0.5)).toBe(0);
+        expect(truncateExp(0.5)).toBe(0);
+        expect(truncateExp(0.55)).toBe(0);
+        expect(truncateExp(0.49)).toBe(0);
+        expect(truncateExp(1.49)).toBe(1);
+        expect(truncateExp(0.49, 2)).toBe(0.49);
+        expect(truncateExp(1.49, 2)).toBe(1.49);
+        expect(truncateExp(-1.49, 2)).toBe(-1.49);
+    });
+});

package/src/math/truncate/truncateExp.ts

@@ -0,0 +1,6 @@
+import shift from "../helper/shift.ts";
+
+export default function truncateExp(number: number, decimals: number = 0): number {
+    const n = shift(number, +decimals);
+    return shift(Math.trunc(n), -decimals);
+}

package/src/mediacreator/MediaCreator.ts

@@ -0,0 +1,65 @@
+import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
+import DIVEScene from "../scene/Scene.ts";
+import DIVERenderer from "../renderer/Renderer.ts";
+import DIVEOrbitControls from "../controls/OrbitControls.ts";
+import { Vector3Like } from "three";
+
+/**
+ * Creates renderings of the current scene
+ *
+ * @module
+ */
+
+export default class DIVEMediaCreator {
+    private renderer: DIVERenderer;
+    private scene: DIVEScene;
+    private controller: DIVEOrbitControls;
+
+    constructor(renderer: DIVERenderer, scene: DIVEScene, controller: DIVEOrbitControls) {
+        this.renderer = renderer;
+        this.scene = scene;
+        this.controller = controller;
+    }
+
+    public GenerateMedia(position: Vector3Like, target: Vector3Like, width: number, height: number): string {
+        const resetPosition = this.controller.object.position.clone();
+        const resetRotation = this.controller.object.quaternion.clone();
+
+        this.renderer.OnResize(width, height);
+        this.controller.object.OnResize(width, height);
+
+        this.controller.object.position.copy(position);
+        this.controller.target.copy(target);
+        this.controller.update();
+
+
+        const dataUri = this.DrawCanvas().toDataURL();
+
+        this.controller.object.position.copy(resetPosition);
+        this.controller.object.quaternion.copy(resetRotation);
+
+        return dataUri;
+    }
+
+    public DrawCanvas(canvasElement?: HTMLCanvasElement): HTMLCanvasElement {
+        // save current canvas
+        const restore = this.renderer.domElement;
+        if (canvasElement) {
+            this.renderer.domElement = canvasElement;
+        }
+
+        // draw canvas
+        this.controller.object.layers.mask = DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK;
+        this.renderer.render(this.scene, this.controller.object);
+        this.controller.object.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+
+        const returnCanvas = this.renderer.domElement;
+
+        // restore canvas
+        if (canvasElement) {
+            this.renderer.domElement = restore;
+        }
+
+        return returnCanvas;
+    }
+}

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

@@ -0,0 +1,113 @@
+import DIVEMediaCreator from '../MediaCreator';
+import DIVERenderer from '../../renderer/Renderer';
+import DIVEScene from '../../scene/Scene';
+import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../../camera/PerspectiveCamera';
+import { COMPov } from '../../com';
+import DIVEOrbitControls from '../../controls/OrbitControls';
+
+/**
+ * @jest-environment jsdom
+ */
+
+const mock_render = jest.fn();
+const mock_toDataURL = jest.fn();
+
+jest.mock('../../scene/Scene', () => {
+    return jest.fn(() => {
+        return {};
+    });
+});
+
+jest.mock('../../camera/PerspectiveCamera', () => {
+    return jest.fn(function () {
+        this.position = {
+            clone: jest.fn(),
+            copy: jest.fn(),
+        };
+        this.quaternion = {
+            clone: jest.fn(),
+            copy: jest.fn(),
+        };
+        this.orbitControls = {
+            target: {
+                clone: jest.fn(),
+                copy: jest.fn(),
+            },
+            update: jest.fn(),
+        };
+        this.layers = {
+            mask: 0,
+        }
+        return this;
+    });
+});
+
+jest.mock('../../controls/OrbitControls', () => {
+    return jest.fn(function () {
+        this.object = {
+            position: {
+                clone: jest.fn(),
+                copy: jest.fn(),
+            },
+            quaternion: {
+                clone: jest.fn(),
+                copy: jest.fn(),
+            },
+            layers: {
+                mask: 0,
+            },
+            OnResize: jest.fn(),
+        };
+
+        this.target = {
+            clone: jest.fn(),
+            copy: jest.fn(),
+        };
+
+        this.update = jest.fn();
+
+        return this;
+    });
+});
+
+jest.mock('../../renderer/Renderer', () => {
+    return jest.fn(function () {
+        this.domElement = {
+            toDataURL: mock_toDataURL,
+        }
+        this.render = mock_render;
+        this.OnResize = jest.fn();
+        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()));
+    });
+
+    it('should instantiate', () => {
+        expect(mediaCreator).toBeDefined();
+    });
+
+    it('should generate media', () => {
+        const mock_POV = {
+            position: { x: 0, y: 0, z: 0 },
+            target: { x: 0, y: 0, z: 0 }
+        } as COMPov;
+        expect(() => {
+            mediaCreator.GenerateMedia(mock_POV.position, mock_POV.target, 800, 600)
+        }).not.toThrow();
+        expect(mock_render).toHaveBeenCalledTimes(1);
+        expect(mock_toDataURL).toHaveBeenCalledTimes(1);
+    });
+
+    it('should draw canvas with custom canvas', () => {
+        const canvas = document.createElement('canvas');
+        mediaCreator.DrawCanvas(canvas);
+        expect(mock_render).toHaveBeenCalledTimes(1);
+    });
+});

package/src/model/Model.ts

@@ -0,0 +1,72 @@
+import { Box3, Object3D, Vector3, Vector3Like } from 'three';
+import { DIVESelectable } from '../interface/Selectable';
+import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
+import { DIVEMoveable } from '../interface/Moveable';
+import DIVECommunication from '../com/Communication';
+import type { GLTF, TransformControls } from 'three/examples/jsm/Addons.js';
+
+/**
+ * A basic model class.
+ *
+ * It does calculate it's own bounding box which is used for positioning on the floor.
+ *
+ * Can be moved and selected.
+ *
+ * @module
+ */
+
+export default class DIVEModel extends Object3D implements DIVESelectable, DIVEMoveable {
+    public isSelectable: true = true;
+    public isMoveable: true = true;
+    public gizmo: TransformControls | null = null;
+
+    private boundingBox: Box3;
+
+    constructor() {
+        super();
+
+        this.layers.mask = PRODUCT_LAYER_MASK;
+
+        this.boundingBox = new Box3();
+    }
+
+    public SetModel(gltf: GLTF): void {
+        this.clear();
+
+        gltf.scene.traverse((child) => {
+            child.castShadow = true;
+            child.receiveShadow = true;
+
+            child.layers.mask = this.layers.mask;
+            this.boundingBox.expandByObject(child);
+        });
+
+        this.add(gltf.scene);
+    }
+
+    public SetPosition(position: Vector3Like): void {
+        this.position.set(position.x, position.y, position.z);
+    }
+
+    public SetRotation(rotation: Vector3Like): void {
+        this.rotation.setFromVector3(new Vector3(rotation.x, rotation.y, rotation.z));
+    }
+
+    public SetScale(scale: Vector3Like): void {
+        this.scale.set(scale.x, scale.y, scale.z);
+    }
+
+    public SetToWorldOrigin(): void {
+        this.position.set(0, 0, 0);
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+
+    public PlaceOnFloor(): void {
+        this.position.y = -this.boundingBox.min.y * this.scale.y;
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+
+    public onMove(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+}