@shopware-ag/dive 1.0.7 → 1.0.8

package/src/com/actions/index.ts

@@ -0,0 +1,41 @@
+import SET_BACKGROUND from "./scene/setbackground.ts";
+import RESET_CAMERA from "./camera/resetcamera.ts";
+import SET_CAMERA_LAYER from "./camera/setcameralayer.ts";
+import ZOOM_CAMERA from "./camera/zoomcamera.ts";
+import SET_GIZMO_MODE from "./toolbox/select/setgizmomode.ts";
+import SET_CAMERA_TRANSFORM from "./camera/setcameratransform.ts";
+import MOVE_CAMERA from "./camera/movecamera.ts";
+import PLACE_ON_FLOOR from "./object/model/placeonfloor.ts";
+import GET_ALL_OBJECTS from "./object/getallobjects.ts";
+import GET_OBJECTS from "./object/getobjects.ts";
+import ADD_OBJECT from "./object/addobject.ts";
+import DELETE_OBJECT from "./object/deleteobject.ts";
+import UPDATE_OBJECT from "./object/updateobject.ts";
+import MODEL_LOADED from "./object/model/modelloaded.ts";
+import UPDATE_SCENE from "./scene/updatescene.ts";
+import GENERATE_MEDIA from "./media/generatemedia.ts";
+import GET_ALL_SCENE_DATA from "./scene/getallscenedata.ts";
+import SELECT_OBJECT from "./object/selectobject.ts";
+import GET_CAMERA_TRANSFORM from "./camera/getcameratransform.ts";
+
+export type Actions = {
+    GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA,
+    GET_ALL_OBJECTS: GET_ALL_OBJECTS,
+    GET_OBJECTS: GET_OBJECTS,
+    ADD_OBJECT: ADD_OBJECT,
+    UPDATE_OBJECT: UPDATE_OBJECT,
+    DELETE_OBJECT: DELETE_OBJECT,
+    SELECT_OBJECT: SELECT_OBJECT,
+    SET_BACKGROUND: SET_BACKGROUND,
+    PLACE_ON_FLOOR: PLACE_ON_FLOOR,
+    SET_CAMERA_TRANSFORM: SET_CAMERA_TRANSFORM,
+    GET_CAMERA_TRANSFORM: GET_CAMERA_TRANSFORM,
+    MOVE_CAMERA: MOVE_CAMERA,
+    RESET_CAMERA: RESET_CAMERA,
+    SET_CAMERA_LAYER: SET_CAMERA_LAYER,
+    ZOOM_CAMERA: ZOOM_CAMERA,
+    SET_GIZMO_MODE: SET_GIZMO_MODE,
+    MODEL_LOADED: MODEL_LOADED,
+    UPDATE_SCENE: UPDATE_SCENE,
+    GENERATE_MEDIA: GENERATE_MEDIA,
+};

package/src/com/actions/media/generatemedia.ts

@@ -0,0 +1,15 @@
+import { Vector3Like } from "three";
+
+export default interface GENERATE_MEDIA {
+    'PAYLOAD': ({
+        position: Vector3Like,
+        target: Vector3Like,
+    } | {
+        id: string,
+    }) & {
+        width: number, // image width in pixels
+        height: number, // image height in pixels
+        dataUri: string
+    },
+    'RETURN': boolean,
+}

package/src/com/actions/object/addobject.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface ADD_OBJECT {
+    'PAYLOAD': COMEntity,
+    'RETURN': boolean,
+};

package/src/com/actions/object/deleteobject.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface DELETE_OBJECT {
+    'PAYLOAD': Partial<COMEntity> & { id: string },
+    'RETURN': boolean,
+}

package/src/com/actions/object/getallobjects.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface GET_ALL_OBJECTS {
+    'PAYLOAD': Map<string, COMEntity>,
+    'RETURN': Map<string, COMEntity>,
+};

package/src/com/actions/object/getobjects.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface GET_OBJECTS {
+    'PAYLOAD': { map: Map<string, COMEntity>, ids?: string[] },
+    'RETURN': Map<string, COMEntity>,
+};

package/src/com/actions/object/model/modelloaded.ts

@@ -0,0 +1,4 @@
+export default interface MODEL_LOADED {
+    'PAYLOAD': { id: string },
+    'RETURN': boolean,
+};

package/src/com/actions/object/model/placeonfloor.ts

@@ -0,0 +1,4 @@
+export default interface PLACE_ON_FLOOR {
+    'PAYLOAD': { id: string },
+    'RETURN': boolean,
+};

package/src/com/actions/object/selectobject.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface SELECT_OBJECT {
+    'PAYLOAD': Partial<COMEntity> & { id: string },
+    'RETURN': boolean,
+};

package/src/com/actions/object/updateobject.ts

@@ -0,0 +1,6 @@
+import { COMEntity } from "../../types.ts";
+
+export default interface UPDATE_OBJECT {
+    'PAYLOAD': Partial<COMEntity> & { id: string },
+    'RETURN': boolean,
+};

package/src/com/actions/scene/getallscenedata.ts

@@ -0,0 +1,23 @@
+import { Vector3Like } from "three";
+import { COMLight, COMModel, COMPov } from "../../types.ts";
+
+type SceneData = {
+    name: string,
+    mediaItem: null,
+    backgroundColor: string,
+    floorEnabled: boolean,
+    floorColor: string,
+    userCamera: {
+        position: Vector3Like,
+        target: Vector3Like,
+    },
+    spotmarks: object[],
+    lights: COMLight[],
+    objects: COMModel[],
+    cameras: COMPov[],
+};
+
+export default interface GET_ALL_SCENE_DATA {
+    'PAYLOAD': object,
+    'RETURN': SceneData,
+};

package/src/com/actions/scene/setbackground.ts

@@ -0,0 +1,4 @@
+export default interface SET_BACKGROUND {
+    'PAYLOAD': { color: string | number },
+    'RETURN': boolean,
+};

package/src/com/actions/scene/updatescene.ts

@@ -0,0 +1,9 @@
+export default interface UPDATE_SCENE {
+    'PAYLOAD': {
+        name?: string,
+        backgroundColor?: string | number,
+        floorEnabled?: boolean,
+        floorColor?: string | number
+    },
+    'RETURN': boolean,
+};

package/src/com/actions/toolbox/select/setgizmomode.ts

@@ -0,0 +1,4 @@
+export default interface SET_GIZMO_MODE {
+    'PAYLOAD': { mode: 'translate' | 'rotate' | 'scale' },
+    'RETURN': boolean,
+};

package/src/com/index.ts

@@ -0,0 +1,4 @@
+import DIVECommunication from './Communication.ts';
+export type { Actions } from './actions/index.ts';
+export type { COMLight, COMModel, COMPov, COMEntity } from './types.ts';
+export default DIVECommunication;

package/src/com/types.ts

@@ -0,0 +1,30 @@
+import { Vector3Like } from "three";
+
+type COMBaseEntity = {
+    id: string;
+    name: string;
+    entityType: 'pov' | 'light' | 'model';
+}
+export type COMPov = COMBaseEntity & {
+    position: Vector3Like;
+    target: Vector3Like;
+    locked?: boolean;
+};
+
+export type COMLight = COMBaseEntity & {
+    type: 'ambient' | 'point' | 'scene';
+    intensity: number;
+    color: string | number;
+    enabled: boolean;
+    position?: Vector3Like;
+};
+
+export type COMModel = COMBaseEntity & {
+    uri: string;
+    position: Vector3Like;
+    rotation: Vector3Like;
+    scale: Vector3Like;
+    loaded: boolean;
+};
+
+export type COMEntity = COMPov | COMLight | COMModel;

package/src/constant/AxisHelperColors.ts

@@ -0,0 +1,7 @@
+export const AxesColorRedLetter = '#c20017';
+export const AxesColorGreenLetter = '#00ab26';
+export const AxesColorBlueLetter = '#0081d4';
+
+export const AxesColorRed = AxesColorRedLetter;
+export const AxesColorGreen = AxesColorGreenLetter;
+export const AxesColorBlue = AxesColorBlueLetter;

package/src/constant/GridColors.ts

@@ -0,0 +1,2 @@
+export const GRID_CENTER_LINE_COLOR = '#888888';
+export const GRID_SIDE_LINE_COLOR = '#dddddd';

package/src/constant/VisibilityLayerMask.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_LAYER_MASK = 0b00000001; //  1
+export const COORDINATE_LAYER_MASK = 0b00000010; //  2
+export const UI_LAYER_MASK = 0b00000100; //  4
+export const HELPER_LAYER_MASK = 0b00001000; //  8
+export const PRODUCT_LAYER_MASK = 0b00010000; // 16

package/src/controls/OrbitControls.ts

@@ -0,0 +1,145 @@
+import { OrbitControls } from "three/examples/jsm/Addons.js";
+import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
+import DIVERenderer from "../renderer/Renderer.ts";
+import { MathUtils, Vector3Like } from "three";
+import { Easing, Tween } from "@tweenjs/tween.js";
+
+export type DIVEOrbitControlsSettings = {
+    enableDamping: boolean;
+    dampingFactor: number;
+}
+
+export const DIVEOrbitControlsDefaultSettings: DIVEOrbitControlsSettings = {
+    enableDamping: true,
+    dampingFactor: 0.04,
+}
+
+/**
+ * Orbit Controls. Basic functionality to orbit around a given target point in the scene.
+ *
+ * @module
+ */
+
+export default class DIVEOrbitControls extends OrbitControls {
+    public static readonly DEFAULT_ZOOM_FACTOR = 1;
+
+    private last: { pos: Vector3Like, target: Vector3Like } | null = null;
+
+    private animating: boolean = false;
+    private locked: boolean = false;
+
+    private stopMoveTo: () => void = () => { };
+    private stopRevertLast: () => void = () => { };
+
+    public object: DIVEPerspectiveCamera;
+    public domElement: HTMLCanvasElement;
+
+    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
+        super(camera, renderer.domElement);
+
+        this.domElement = renderer.domElement;
+
+        this.object = camera;
+
+        renderer.AddPreRenderCallback(() => {
+            this.preRenderCallback();
+        });
+
+        this.enableDamping = settings.enableDamping;
+        this.dampingFactor = settings.dampingFactor;
+    }
+
+    public ZoomIn(by?: number): void {
+        const zoomBy = by || DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
+        const { minDistance, maxDistance } = this;
+        this.minDistance = this.maxDistance = MathUtils.clamp(this.getDistance() - zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
+        this.update();
+        this.minDistance = minDistance;
+        this.maxDistance = maxDistance;
+    }
+
+    public ZoomOut(by?: number): void {
+        const zoomBy = by || DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
+        const { minDistance, maxDistance } = this;
+        this.minDistance = this.maxDistance = MathUtils.clamp(this.getDistance() + zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
+        this.update();
+        this.minDistance = minDistance;
+        this.maxDistance = maxDistance;
+    }
+
+    public MoveTo(pos: Vector3Like | undefined, target: Vector3Like | undefined, duration: number, lock: boolean): void {
+        if (this.animating) return;
+
+        const toPosition = pos || this.object.position.clone();
+        const toTarget = target || this.target.clone();
+
+        this.stopRevertLast();
+
+        if (!this.locked) this.last = { pos: this.object.position.clone(), target: this.target.clone() };
+
+        this.animating = duration > 0;
+        this.locked = lock;
+        this.enabled = false;
+
+        const tweenPos = new Tween(this.object.position)
+            .to(toPosition, duration)
+            .easing(Easing.Quadratic.Out)
+            .start();
+
+        const tweenQuat = new Tween(this.target)
+            .to(toTarget, duration)
+            .easing(Easing.Quadratic.Out)
+            .onUpdate(() => {
+                this.object.lookAt(this.target);
+            })
+            .onComplete(() => {
+                this.animating = false;
+                this.enabled = !lock;
+            })
+            .start();
+
+        this.stopMoveTo = () => {
+            tweenPos.stop();
+            tweenQuat.stop();
+        }
+    }
+
+    public RevertLast(duration: number): void {
+        if (this.animating || !this.locked) return;
+
+        this.stopMoveTo();
+
+        this.animating = duration > 0;
+        this.enabled = false;
+
+        const { pos, target } = this.last!;
+
+        const tweenPos = new Tween(this.object.position)
+            .to(pos, duration)
+            .easing(Easing.Quadratic.Out)
+            .start();
+
+        const tweenQuat = new Tween(this.target)
+            .to(target, duration)
+            .easing(Easing.Quadratic.Out)
+            .onUpdate(() => {
+                this.object.lookAt(this.target);
+            })
+            .onComplete(() => {
+                this.animating = false;
+                this.locked = false;
+                this.enabled = true;
+            })
+            .start();
+
+        this.stopRevertLast = () => {
+            tweenPos.stop();
+            tweenQuat.stop();
+        }
+    }
+
+    private preRenderCallback = (): void => {
+        if (this.locked) return;
+        this.update();
+    }
+}

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

@@ -0,0 +1,181 @@
+import DIVEOrbitControls from '../OrbitControls';
+import DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
+import DIVERenderer, { DIVERendererDefaultSettings } from '../../renderer/Renderer';
+
+jest.mock('three/examples/jsm/Addons.js', () => {
+    return {
+        OrbitControls: jest.fn(function () {
+            this.enableDamping = true;
+            this.dampingFactor = 0.25;
+            this.enableZoom = true;
+            this.enablePan = true;
+            this.minPolarAngle = 0;
+            this.maxPolarAngle = Math.PI;
+            this.minDistance = 0;
+            this.maxDistance = Infinity;
+            this.rotateSpeed = 0.5;
+            this.panSpeed = 0.5;
+            this.zoomSpeed = 0.5;
+            this.keyPanSpeed = 0.5;
+            this.screenSpacePanning = true;
+            this.autoRotate = false;
+            this.autoRotateSpeed = 2.0;
+            this.enableKeys = true;
+            this.keys = {
+                LEFT: 37,
+                UP: 38,
+                RIGHT: 39,
+                BOTTOM: 40,
+            };
+            this.mouseButtons = {
+                LEFT: 0,
+                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(),
+            };
+            return this;
+        }),
+    }
+});
+
+jest.mock('../../renderer/Renderer', () => {
+    return jest.fn(function () {
+        this.domElement = {
+            style: {},
+        };
+        this.AddPreRenderCallback = (callback: () => void) => {
+            callback();
+        };
+
+        return this;
+    });
+});
+
+jest.mock('@tweenjs/tween.js', () => {
+    return {
+        Easing: {
+            Quadratic: {
+                In: jest.fn(),
+                Out: jest.fn(),
+                InOut: jest.fn(),
+            },
+        },
+        Tween: jest.fn(() => {
+            const instance: object = {
+                easing: () => { return instance; },
+                to: () => { return instance; },
+                start: () => { return instance; },
+                stop: () => { return instance; },
+                onComplete: (callback: () => typeof instance) => { callback(); return instance; },
+                onUpdate: (callback: () => typeof instance) => { callback(); return instance; },
+            }
+            return instance;
+        }),
+    }
+});
+
+const moveToPos = { x: 10, y: 0, z: 0 };
+const moveToQuat = { x: 0, y: 0, z: 0 };
+const moveToDuration = 1000;
+
+const mockCamera = {
+    position: {
+        clone: jest.fn(),
+    },
+    lookAt: jest.fn(),
+} as unknown as DIVEPerspectiveCamera;
+const mockRenderer: DIVERenderer = new DIVERenderer(DIVERendererDefaultSettings);
+
+describe('dive/controls/DIVEOrbitControls', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should instantiate', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(controller).toBeDefined();
+    });
+
+    it('should zoom in with default value', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(() => controller.ZoomIn()).not.toThrow();
+    });
+
+    it('should zoom in with custom value', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(() => controller.ZoomIn(10)).not.toThrow();
+    });
+
+    it('should zoom out with default value', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(() => controller.ZoomOut()).not.toThrow();
+    });
+
+    it('should zoom out with custom value', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(() => controller.ZoomOut(10)).not.toThrow();
+    });
+
+    it('should move to', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, false)).not.toThrow();
+    });
+
+    it('should revert move to', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        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);
+        expect(() => controller.MoveTo(undefined, undefined, moveToDuration, true)).not.toThrow();
+    });
+
+    it('should revert move to with lock', async () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        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);
+        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);
+        controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
+        controller.RevertLast(moveToDuration);
+        expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true)).not.toThrow();
+        controller['animating'] = true;
+        expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true)).not.toThrow();
+        expect(() => controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true)).not.toThrow();
+    });
+
+    it('should catch multiple reverts', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
+        expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
+        expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
+        expect(() => controller.RevertLast(moveToDuration)).not.toThrow();
+    });
+
+    it('should execute preRenderCallback', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        controller.MoveTo(moveToPos, moveToQuat, moveToDuration, true);
+        expect(() => controller['preRenderCallback']()).not.toThrow();
+        controller['locked'] = true;
+        expect(() => controller['preRenderCallback']()).not.toThrow();
+    });
+});

package/src/grid/Grid.ts

@@ -0,0 +1,22 @@
+import { GRID_SIDE_LINE_COLOR, GRID_CENTER_LINE_COLOR } from "../constant/GridColors.ts";
+import { HELPER_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
+import { GridHelper, Object3D } from "three";
+
+/**
+ * A basic grid for the scene.
+ *
+ * @module
+ */
+
+export default class DIVEGrid extends Object3D {
+    constructor() {
+        super();
+        this.name = 'Grid';
+
+        const grid = new GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
+        grid.material.depthTest = false;
+        grid.layers.mask = HELPER_LAYER_MASK;
+
+        this.add(grid);
+    }
+}

package/src/grid/__test__/Grid.test.ts

@@ -0,0 +1,19 @@
+import DIVEGrid from '../Grid.ts';
+import { HELPER_LAYER_MASK } from "../../constant/VisibilityLayerMask.ts";
+import { GridHelper } from 'three';
+
+let grid: DIVEGrid;
+
+describe('dive/grid/DIVEGrid', () => {
+    beforeEach(() => {
+        grid = new DIVEGrid();
+    });
+
+    it('should instantiate', () => {
+        expect(grid).toBeDefined();
+        expect(grid.name).toBeTruthy();
+        expect(grid.children.length).toBeGreaterThanOrEqual(1);
+        expect((grid.children[0] as GridHelper).material.depthTest).toBe(false);
+        expect((grid.children[0] as GridHelper).layers.mask).toBe(HELPER_LAYER_MASK);
+    });
+});

package/src/helper/applyMixins/__test__/applyMixins.test.ts

@@ -0,0 +1,27 @@
+import { applyMixins } from '../applyMixins.ts';
+
+class Moveable {
+    move() { }
+}
+
+class Selectable {
+    select() { }
+}
+
+describe('dive/helper/applyMixins', () => {
+    it('should apply mixins', () => {
+        class Product {
+            doProductThings() { }
+        }
+
+        interface Product extends Moveable, Selectable { }
+
+        applyMixins(Product, [Moveable, Selectable]);
+
+        const instance = new Product();
+        expect(instance).toBeDefined();
+        expect(instance.move).toBeDefined();
+        expect(instance.select).toBeDefined();
+        expect(instance.doProductThings).toBeDefined();
+    });
+});

package/src/helper/applyMixins/applyMixins.ts

@@ -0,0 +1,15 @@
+/**
+ * Merges two class prototypes to a new one.
+ */
+
+export const applyMixins = (derivedCtor: { prototype: object }, constructors: { prototype: object }[]): void => {
+    constructors.forEach((baseCtor) => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+            Object.defineProperty(
+                derivedCtor.prototype,
+                name,
+                Object.getOwnPropertyDescriptor(baseCtor.prototype, name)!
+            );
+        });
+    });
+}