@shopware-ag/dive 1.0.7 → 1.0.9

package/src/model/__test__/Model.test.ts

@@ -0,0 +1,163 @@
+import Model from '../Model';
+import DIVECommunication from '../../com/Communication';
+import { GLTF } from 'three/examples/jsm/Addons';
+
+jest.mock('three', () => {
+    return {
+        Vector3: jest.fn(function (x: number, y: number, z: number) {
+            return { x, y, z };
+        }),
+        Object3D: jest.fn(function () {
+            this.clear = jest.fn();
+            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 = jest.fn();
+            this.children = [{
+                material: {
+                    color: {},
+                },
+            }];
+            this.userData = {};
+            this.position = {
+                x: 0,
+                y: 0,
+                z: 0,
+                set: jest.fn(),
+            };
+            this.rotation = {
+                x: 0,
+                y: 0,
+                z: 0,
+                setFromVector3: jest.fn(),
+            };
+            this.scale = {
+                x: 1,
+                y: 1,
+                z: 1,
+                set: jest.fn(),
+            };
+            return this;
+        }),
+        Box3: jest.fn(function () {
+            this.min = { x: 0, y: 0, z: 0 };
+            this.expandByObject = jest.fn();
+            return this;
+        }),
+    }
+});
+
+jest.mock('../../com/Communication.ts', () => {
+    return {
+        get: jest.fn(() => {
+            return {
+                PerformAction: jest.fn(),
+            }
+        }),
+    }
+});
+
+const gltf = {
+    scene: {
+        isObject3D: true,
+        parent: null,
+        dispatchEvent: jest.fn(),
+        layers: {
+            mask: 0,
+        },
+        updateWorldMatrix: jest.fn(),
+        children: [
+            {
+                castShadow: false,
+                receiveShadow: false,
+                layers: {
+                    mask: 0,
+                },
+                children: [],
+                updateWorldMatrix: jest.fn(),
+            },
+        ],
+        traverse: function (callback: (object: object) => void) {
+            callback(this);
+        },
+        removeFromParent: jest.fn(),
+    },
+} as unknown as GLTF;
+
+jest.spyOn(DIVECommunication, 'get').mockReturnValue({ PerformAction: jest.fn() } as unknown as DIVECommunication);
+
+describe('dive/model/DIVEModel', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should instantiate', () => {
+        const model = new Model();
+        expect(model).toBeDefined();
+    });
+
+    it('should set model', () => {
+        const model = new Model();
+        expect(() => model.SetModel(gltf)).not.toThrow();
+    });
+
+    it('should set position', () => {
+        const model = new Model();
+        expect(() => model.SetPosition({ x: 0, y: 0, z: 0 })).not.toThrow();
+    });
+
+    it('should set rotation', () => {
+        const model = new Model();
+        expect(() => model.SetRotation({ x: 0, y: 0, z: 0 })).not.toThrow();
+    });
+
+    it('should set scale', () => {
+        const model = new Model();
+        expect(() => model.SetScale({ x: 1, y: 1, z: 1 })).not.toThrow();
+    });
+
+    it('should set to world origin', () => {
+        const model = new Model();
+        model.userData.id = 'something';
+
+        expect(() => model.SetToWorldOrigin()).not.toThrow();
+        expect(model.position.x).toBe(0);
+        expect(model.position.y).toBe(0);
+        expect(model.position.z).toBe(0);
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => model.SetToWorldOrigin()).not.toThrow();
+    });
+
+    it('should place on floor', () => {
+        const model = new Model();
+        model.userData.id = 'something';
+
+        expect(() => model.PlaceOnFloor()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => model.PlaceOnFloor()).not.toThrow();
+    });
+
+    it('should onMove', () => {
+        const model = new Model();
+        model.userData.id = 'something';
+
+        expect(() => model.onMove()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => model.onMove()).not.toThrow();
+    });
+});

package/src/primitive/floor/Floor.ts

@@ -0,0 +1,34 @@
+import { Color, ColorRepresentation, Mesh, MeshStandardMaterial, PlaneGeometry } from "three";
+import { PRODUCT_LAYER_MASK } from "../../constant/VisibilityLayerMask.ts";
+
+/**
+ * A basic floor geometry.
+ *
+ * Can change the color and visibility of the floor.
+ *
+ * @module
+ */
+
+export default class DIVEFloor extends Mesh {
+    public isFloor: true = true;
+
+    constructor() {
+        super(new PlaneGeometry(10000, 10000), new MeshStandardMaterial({ color: new Color(150 / 255, 150 / 255, 150 / 255) }));
+
+        this.name = 'Floor';
+
+        this.layers.mask = PRODUCT_LAYER_MASK;
+
+        this.receiveShadow = true;
+
+        this.rotateX(-Math.PI / 2);
+    }
+
+    public SetVisibility(visible: boolean): void {
+        this.visible = visible;
+    }
+
+    public SetColor(color: ColorRepresentation): void {
+        (this.material as MeshStandardMaterial).color = new Color(color);
+    }
+}

package/src/primitive/floor/__test__/Floor.test.ts

@@ -0,0 +1,21 @@
+import { MeshStandardMaterial } from 'three';
+import DIVEFloor from '../Floor';
+
+describe('dive/primitive/floor/DIVEFloor', () => {
+    it('should instantiate', () => {
+        const floor = new DIVEFloor();
+        expect(floor).toBeDefined();
+    });
+
+    it('should set visibility', () => {
+        const floor = new DIVEFloor();
+        expect(() => { floor.SetVisibility(false) }).not.toThrow();
+        expect(floor.visible).toBe(false);
+    });
+
+    it('should set color', () => {
+        const floor = new DIVEFloor();
+        expect(() => { floor.SetColor('#ff00ff') }).not.toThrow();
+        expect('#' + (floor.material as MeshStandardMaterial).color.getHexString()).toBe('#ff00ff');
+    });
+});

package/src/renderer/Renderer.ts

@@ -0,0 +1,165 @@
+import { Camera, MathUtils, NoToneMapping, PCFSoftShadowMap, Scene, ShadowMapType, ToneMapping, WebGLRenderer } from "three";
+
+export type DIVERendererSettings = {
+    antialias: boolean;
+    alpha: boolean;
+    stencil: boolean;
+    shadowMapEnabled: boolean;
+    shadowMapType: ShadowMapType;
+    toneMapping: ToneMapping;
+}
+
+export const DIVERendererDefaultSettings: DIVERendererSettings = {
+    antialias: true,
+    alpha: true,
+    stencil: false,
+    shadowMapEnabled: true,
+    shadowMapType: PCFSoftShadowMap,
+    toneMapping: NoToneMapping,
+}
+
+/**
+ * A changed version of the WebGLRenderer.
+ *
+ * Has to be started manually by calling StartRenderer().
+ *
+ * @module
+ */
+
+export default class DIVERenderer extends WebGLRenderer {
+    // basic functionality members
+    private paused: boolean = false;
+    private running: boolean = false;
+    private force: boolean = false;
+
+    // pre- and post-render callbacks
+    private preRenderCallbacks: Map<string, () => void> = new Map<string, () => void>();
+    private postRenderCallbacks: Map<string, () => void> = new Map<string, () => void>();
+
+    constructor(rendererSettings: DIVERendererSettings = DIVERendererDefaultSettings) {
+        super({
+            antialias: rendererSettings.antialias,
+            alpha: rendererSettings.alpha,
+            preserveDrawingBuffer: true
+        });
+        this.setPixelRatio(window.devicePixelRatio);
+
+        this.shadowMap.enabled = rendererSettings.shadowMapEnabled;
+        this.shadowMap.type = rendererSettings.shadowMapType;
+
+        this.toneMapping = rendererSettings.toneMapping;
+
+        this.debug.checkShaderErrors = false;
+    }
+
+    // Starts the renderer with the given scene and camera.
+    public StartRenderer(scene: Scene, cam: Camera): void {
+        this.setAnimationLoop(() => { this.internal_render(scene, cam) });
+        this.running = true;
+    }
+
+    // Pauses the renderer.
+    public PauseRenderer(): void {
+        this.paused = true;
+    }
+
+    // Resumes the renderer after pausing.
+    public ResumeRenderer(): void {
+        this.paused = false;
+    }
+
+    // Stops the renderer completely. Has to be started again with StartRenderer().
+    public StopRenderer(): void {
+        this.setAnimationLoop(null);
+        this.running = false;
+    }
+
+    // Resizes the renderer to the given width and height.
+    public OnResize(width: number, height: number): void {
+        this.setSize(width, height);
+    }
+
+    /**
+     * Adds a callback to the render loop before actual render call.
+     * @param callback Executed before rendering.
+     * @returns uuid to remove the callback.
+     */
+    public AddPreRenderCallback(callback: () => void): string {
+        // add callback to renderloop
+        const newUUID = MathUtils.generateUUID();
+        this.preRenderCallbacks.set(newUUID, callback);
+
+        return newUUID;
+    }
+
+    /**
+     * Removes a callback from the render loop before actual render call.
+     * @param uuid of callback to remove.
+     * @returns if removing was successful.
+     */
+    public RemovePreRenderCallback(uuid: string): boolean {
+        // check if callback exists
+        if (!this.preRenderCallbacks.has(uuid)) return false;
+
+        // remove callback from renderloop
+        this.preRenderCallbacks.delete(uuid);
+
+        return true;
+    }
+
+    /**
+     * Adds a callback to the render loop after actual render call.
+     * @param callback Executed after rendering.
+     * @returns uuid to remove the callback.
+     */
+    public AddPostRenderCallback(callback: () => void): string {
+        // add callback to renderloop
+        const newUUID = MathUtils.generateUUID();
+        this.postRenderCallbacks.set(newUUID, callback);
+
+        return newUUID;
+    }
+
+    /**
+     * Removes a callback from the render loop after actual render call.
+     * @param uuid of callback to remove.
+     * @returns if removing was successful.
+     */
+    public RemovePostRenderCallback(uuid: string): boolean {
+        // check if callback exists
+        if (!this.postRenderCallbacks.has(uuid)) return false;
+
+        // remove callback from renderloop
+        this.postRenderCallbacks.delete(uuid);
+
+        return true;
+    }
+
+    /**
+     * Forces the renderer to render the next frame.
+     */
+    public ForceRendering(): void {
+        this.force = true;
+    }
+
+    /**
+     * Internal render loop.
+     *
+     * To control renderloop you can add callbacks via AddPreRenderCallback() and AddPostRenderCallback().
+     * @param scene Scene to render.
+     * @param cam Camera to render with.
+     */
+    private internal_render(scene: Scene, cam: Camera): void {
+        // execute background render loop callbacks
+        if ((this.paused || !this.running) && !this.force) return;
+
+        // execute render loop callbacks
+        this.preRenderCallbacks.forEach((callback) => { callback(); });
+
+        this.render(scene, cam);
+
+        this.postRenderCallbacks.forEach((callback) => { callback(); });
+
+        this.force = false;
+    }
+}

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

@@ -0,0 +1,169 @@
+import DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
+import DIVEScene from '../../scene/Scene';
+import DIVERenderer, { DIVERendererDefaultSettings } from '../Renderer';
+
+/**
+ * @jest-environment jsdom
+ */
+
+const test_uuid = 'test-uuid';
+
+const mock_render = jest.fn();
+const mock_setSize = jest.fn();
+const mock_setAnimationLoop = jest.fn();
+
+jest.mock('three', () => {
+    return {
+        WebGLRenderer: jest.fn(function () {
+            this.domElement = {
+                style: {
+                    position: 'absolute',
+                },
+            };
+            this.debug = {
+                checkShaderErrors: true,
+            };
+            this.setSize = mock_setSize;
+            this.setPixelRatio = jest.fn();
+            this.render = mock_render;
+            this.setAnimationLoop = mock_setAnimationLoop;
+            this.shadowMap = {
+                enabled: false,
+            };
+            return this;
+        }),
+        MathUtils: {
+            generateUUID: () => { return test_uuid; },
+        },
+    }
+});
+
+let renderer: DIVERenderer;
+
+describe('dive/renderer/DIVERenderer', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        renderer = new DIVERenderer(DIVERendererDefaultSettings);
+    });
+
+    it('should instantiate', () => {
+        expect(renderer).toBeDefined();
+        renderer = new DIVERenderer();
+    });
+
+    it('should start render', () => {
+        expect(() => { renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera) }).not.toThrow();
+        expect(renderer['running']).toBe(true);
+    });
+
+    it('should pause render', () => {
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(() => { renderer.PauseRenderer() }).not.toThrow();
+        expect(renderer['paused']).toBe(true);
+    });
+
+    it('should resume render', () => {
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        renderer.PauseRenderer();
+        expect(() => { renderer.ResumeRenderer() }).not.toThrow();
+        expect(renderer['paused']).toBe(false);
+    });
+
+    it('should stop render', () => {
+        expect(() => { renderer.StopRenderer() }).not.toThrow();
+        expect(renderer['running']).toBe(false);
+    });
+
+    it('should resize renderer', () => {
+        expect(() => { renderer.OnResize(500, 500) }).not.toThrow();
+        expect(mock_setSize).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render', () => {
+        expect(mock_render).toHaveBeenCalledTimes(0);
+
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(() => { renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera) }).not.toThrow();
+        expect(mock_render).toHaveBeenCalledTimes(1);
+    });
+
+    it('should force render', () => {
+        expect(() => { renderer.ForceRendering() }).not.toThrow();
+    });
+
+    it('should not render when not started', () => {
+        expect(mock_render).toHaveBeenCalledTimes(0);
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not render when stopped', () => {
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(1);
+
+        renderer.StopRenderer();
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not render when paused', () => {
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(1);
+
+        renderer.PauseRenderer();
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(1);
+    });
+
+    it('should resume render when running', () => {
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        renderer.PauseRenderer();
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(0);
+
+        renderer.ResumeRenderer();
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(mock_render).toHaveBeenCalledTimes(1);
+    });
+
+    it('should add pre render callback', () => {
+        expect(renderer.AddPreRenderCallback(() => { })).toBe(test_uuid);
+        expect(renderer['preRenderCallbacks'].size).toBe(1);
+    });
+
+    it('should remove pre render callback', () => {
+        const uuid = renderer.AddPreRenderCallback(() => { });
+        expect(renderer.RemovePreRenderCallback(uuid)).toBe(true);
+    });
+
+    it('should not crash while removing non-existing pre render callback', () => {
+        expect(() => { renderer.RemovePreRenderCallback(test_uuid) }).not.toThrow();
+    });
+
+    it('should add post render callback', () => {
+        expect(renderer.AddPostRenderCallback(() => { })).toBe(test_uuid);
+        expect(renderer['postRenderCallbacks'].size).toBe(1);
+    });
+
+    it('should remove post render callback', () => {
+        const uuid = renderer.AddPostRenderCallback(() => { });
+        expect(renderer.RemovePostRenderCallback(uuid)).toBe(true);
+    });
+
+    it('should not crash while removing non-existing post render callback', () => {
+        expect(() => { renderer.RemovePostRenderCallback(test_uuid) }).not.toThrow();
+    });
+
+    it('should execute pre and post render callbacks', () => {
+        renderer.StartRenderer({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        const precallback = jest.fn();
+        const postcallback = jest.fn();
+        renderer.AddPreRenderCallback(precallback);
+        renderer.AddPostRenderCallback(postcallback);
+        renderer['internal_render']({} as DIVEScene, {} as DIVEPerspectiveCamera);
+        expect(precallback).toHaveBeenCalledTimes(1);
+        expect(postcallback).toHaveBeenCalledTimes(1);
+    });
+});

package/src/scene/Scene.ts

@@ -0,0 +1,49 @@
+import { Color, ColorRepresentation, Object3D, Scene } from 'three';
+import { COMModel, COMEntity } from '../com/types';
+import DIVERoot from './root/Root';
+
+/**
+ * A basic scene class.
+ *
+ * Comes with a root object that contains all the scene objects.
+ *
+ * @module
+ */
+
+export default class DIVEScene extends Scene {
+    private root: DIVERoot;
+    public get Root(): DIVERoot {
+        return this.root;
+    }
+
+    constructor() {
+        super();
+
+        this.root = new DIVERoot();
+        this.add(this.root);
+    }
+
+    public SetBackground(color: ColorRepresentation): void {
+        this.background = new Color(color);
+    }
+
+    public GetSceneObject(object: Partial<COMEntity>): Object3D | undefined {
+        return this.Root.GetSceneObject(object);
+    }
+
+    public AddSceneObject(object: COMEntity): void {
+        this.Root.UpdateSceneObject(object);
+    }
+
+    public UpdateSceneObject(object: Partial<COMEntity>): void {
+        this.Root.UpdateSceneObject(object);
+    }
+
+    public DeleteSceneObject(object: Partial<COMEntity>): void {
+        this.Root.DeleteSceneObject(object);
+    }
+
+    public PlaceOnFloor(object: Partial<COMModel>): void {
+        this.Root.PlaceOnFloor(object);
+    }
+}

package/src/scene/__test__/Scene.test.ts

@@ -0,0 +1,70 @@
+import { Color } from 'three';
+import DIVEScene from '../Scene';
+import { COMEntity } from '../../com';
+
+const mock_UpdateSceneObject = jest.fn();
+const mock_DeleteSceneObject = jest.fn();
+const mock_PlaceOnFloor = jest.fn();
+const mock_GetSceneObject = jest.fn();
+
+jest.mock('../root/Root', () => {
+    return jest.fn(function () {
+        this.isObject3D = true;
+        this.parent = null;
+        this.dispatchEvent = jest.fn();
+        this.UpdateSceneObject = mock_UpdateSceneObject;
+        this.DeleteSceneObject = mock_DeleteSceneObject;
+        this.PlaceOnFloor = mock_PlaceOnFloor;
+        this.GetSceneObject = mock_GetSceneObject;
+        this.removeFromParent = jest.fn();
+        return this;
+    });
+});
+
+describe('dive/scene/DIVEScene', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should instantiate', () => {
+        const scene = new DIVEScene();
+        expect(scene).toBeDefined();
+        expect(scene.children).toHaveLength(1);
+    });
+
+    it('should set background color', () => {
+        const scene = new DIVEScene();
+        scene.SetBackground(0x123456);
+        expect((scene.background as Color).getHex()).toBe(0x123456);
+    });
+
+    it('should add object', () => {
+        const scene = new DIVEScene();
+        scene.AddSceneObject({} as COMEntity);
+        expect(mock_UpdateSceneObject).toHaveBeenCalledTimes(1);
+    });
+
+    it('should update object', () => {
+        const scene = new DIVEScene();
+        scene.UpdateSceneObject({});
+        expect(mock_UpdateSceneObject).toHaveBeenCalledTimes(1);
+    });
+
+    it('should remove object', () => {
+        const scene = new DIVEScene();
+        scene.DeleteSceneObject({});
+        expect(mock_DeleteSceneObject).toHaveBeenCalledTimes(1);
+    });
+
+    it('should place object on floor', () => {
+        const scene = new DIVEScene();
+        scene.PlaceOnFloor({});
+        expect(mock_PlaceOnFloor).toHaveBeenCalledTimes(1);
+    });
+
+    it('should get scene object', () => {
+        const scene = new DIVEScene();
+        scene.GetSceneObject({});
+        expect(mock_GetSceneObject).toHaveBeenCalledTimes(1);
+    });
+});