@shopware-ag/dive 1.0.7 → 1.0.8

package/src/helper/getObjectDelta/__test__/getObjectDelta.spec.ts

@@ -0,0 +1,152 @@
+import { getObjectDelta } from '../getObjectDelta.ts';
+
+
+
+describe('dive/helper/getObjectDelta', () => {
+
+    // NO DELTAS
+    it('should not find any deltas with empty objects', () => {
+        const obj0 = {};
+        const obj1 = {};
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual({});
+    });
+
+    it('should not find any deltas with equal references', () => {
+        const obj0 = { test0: 'test', value0: 42, array0: [187, 6, 9, 42] };
+        const obj1 = obj0;
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual({});
+    });
+
+    it('should not find any deltas with equal objects', () => {
+        const obj0 = { test0: 'test', value0: 42, array0: [187, 6, 9, 42] };
+        const obj1 = { ...obj0 };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual({});
+    });
+
+    it('should not find any deltas with empty arrays', () => {
+        const obj0 = { array0: [] };
+        const obj1 = { array0: [] };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual({});
+    });
+
+    // DELTAS
+    it('should find deltas with incorrect types (case a)', () => {
+        const obj0 = 'test' as unknown as object;
+        const obj1 = { test: 0 };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with incorrect types (case b)', () => {
+        const obj0 = { test: 0 };
+        const obj1 = 'test' as unknown as object;
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with one empty object', () => {
+        const obj0 = {};
+        const obj1 = { test: 0 };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with different key lengths', () => {
+        const obj0 = { test: 0 };
+        const obj1 = { test: 0, test0: 0 };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual({ test0: 0 });
+    });
+
+    it('should find deltas with a type delta', () => {
+        const obj0 = { test: 'test' };
+        const obj1 = { test: 0 as unknown as string };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with a value delta', () => {
+        const obj0 = { test: 'test' };
+        const obj1 = { test: 'hello world!' };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with array value delta', () => {
+        const obj0 = { array0: [187, 6, 9, 42] };
+        const obj1 = { array0: [187, 6, 9] };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with array type difference', () => {
+        const obj0 = { array0: 'array0' };
+        const obj1 = { array0: [187, 6, 9] as unknown as string };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with deltas in objects in array', () => {
+        const obj0 = { array0: [{ test: 0 }] };
+        const obj1 = { array0: [{ test: 1 }] };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with undefined value in objects in object', () => {
+        const obj0 = { object0: undefined as unknown as object };
+        const obj1 = { object0: { test: 1 } };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with wrong type in objects in object', () => {
+        const obj0 = { object0: 'test' };
+        const obj1 = { object0: { test: 1 } as unknown as string };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+
+    it('should find deltas with empty value in objects in object', () => {
+        const obj0 = { object0: {} };
+        const obj1 = { object0: { test: 1 } };
+
+        const delta = getObjectDelta(obj0, obj1);
+
+        expect(delta).toStrictEqual(obj1);
+    });
+});

package/src/helper/getObjectDelta/getObjectDelta.ts

@@ -0,0 +1,101 @@
+/**
+ * Find the difference between two objects.
+ */
+
+export const getObjectDelta = <T extends object>(a: T, b: Partial<T>): Partial<T> => {
+
+    // if a and b have no entries we have no delta
+    if (Object.keys(a).length === 0 && Object.keys(b).length === 0) {
+        return {};
+    }
+
+    // if a or b is not an object we have a delta
+    if (typeof a !== 'object' || typeof b !== 'object') {
+        return b;
+    }
+
+    let delta = {};
+
+    Object.keys(b).forEach((key) => {
+
+        // if key is not in a we have a delta
+        if (!Object.keys(a).includes(key)) {
+            delta = { ...delta, [key]: b[key as keyof object] };
+            return;
+        }
+
+        // assumption: b[key] is an array
+        if (Array.isArray(b[key as keyof object])) {
+
+            // if a[key] is not an array we have a delta
+            if (!Array.isArray(a[key as keyof object])) {
+                delta = { ...delta, [key]: b[key as keyof object] };
+                return;
+            }
+
+            // create arrays (for TS types to be correct)
+            const aArray = a[key as keyof object] as [];
+            const bArray = b[key as keyof object] as [];
+
+            // if both arrays are empty we have no delta
+            if (aArray.length === 0 && bArray.length === 0) {
+                delta = { ...delta };
+                return;
+            }
+
+            // if array length is different we have a delta
+            if (aArray.length !== bArray.length) {
+                delta = { ...delta, [key]: b[key as keyof object] };
+                return;
+            }
+
+            // create array for deltas
+            const arrayDeltas: [] = [];
+
+            bArray.forEach((entry, index) => {
+                // getObjectDelta in array
+                const inArrayDelta = getObjectDelta(aArray[index], bArray[index]);
+
+                // if inArrayDelta has more then 0 entries we have a delta
+                if (Object.keys(inArrayDelta).length) {
+                    arrayDeltas.push(bArray[index]);
+                }
+            });
+
+            // if arrayDeltas has more than 0 entries we have a delta
+            if (Object.keys(arrayDeltas).length) {
+                delta = { ...delta, [key]: arrayDeltas };
+                return;
+            }
+
+
+            return;
+        }
+
+        // assumption: b[key] is an object
+        if (typeof b[key as keyof object] === 'object') {
+
+            // if a[key] is not an object we have a delta
+            if (typeof a[key as keyof object] !== 'object') {
+                delta = { ...delta, [key]: b[key as keyof object] };
+                return;
+            }
+
+            // recursive: find objectDelta in a and b
+            const objectDelta = getObjectDelta(a[key as keyof object], b[key as keyof object]);
+
+            // if objectDelta has more than 0 entries we have a delta
+            if (Object.keys(objectDelta).length) {
+                delta = { ...delta, [key]: objectDelta };
+                return;
+            }
+        }
+
+        // if a[key] is not equal to b[key] we have a delta
+        if (a[key as keyof object] !== b[key as keyof object]) {
+            delta = { ...delta, [key]: b[key as keyof object] };
+        }
+    });
+
+    return delta;
+}

package/src/interface/Moveable.ts

@@ -0,0 +1,13 @@
+import type { TransformControls } from "three/examples/jsm/Addons.js";
+
+/**
+ * Interface for objects that can be moved in the scene.
+ *
+ * @module
+ */
+
+export interface DIVEMoveable {
+    isMoveable: true;
+    gizmo: TransformControls | null;
+    onMove?: () => void;
+}

package/src/interface/Rotatable.ts

@@ -0,0 +1,10 @@
+/**
+ * Interface for objects that can be rotated in the scene.
+ *
+ * @module
+ */
+
+export interface DIVERotatable {
+    isRotatable: true;
+    onRotate?: () => void;
+}

package/src/interface/Scalable.ts

@@ -0,0 +1,10 @@
+/**
+ * Interface for objects that can be scaled in the scene.
+ *
+ * @module
+ */
+
+export interface DIVEScalable {
+    isScalable: true;
+    onScale?: () => void;
+}

package/src/interface/Selectable.ts

@@ -0,0 +1,11 @@
+/**
+ * Interface for objects that can be selected in the scene.
+ *
+ * @module
+ */
+
+export interface DIVESelectable {
+    isSelectable: true;
+    onSelect?: () => void;
+    onDeselect?: () => void;
+}

package/src/interface/__test__/Interfaces.test.ts

@@ -0,0 +1,13 @@
+import * as Moveable_DEF from '../Moveable';
+import * as Rotatable_DEF from '../Rotatable';
+import * as Scalable_DEF from '../Scalable';
+import * as Selectable_DEF from '../Selectable';
+
+describe('interfaces', () => {
+    it('should be defined', () => {
+        expect(Moveable_DEF).toBeDefined();
+        expect(Rotatable_DEF).toBeDefined();
+        expect(Scalable_DEF).toBeDefined();
+        expect(Selectable_DEF).toBeDefined();
+    });
+});

package/src/light/AmbientLight.ts

@@ -0,0 +1,29 @@
+import { AmbientLight, Color } from 'three';
+import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
+
+/**
+ * A basic ambient light.
+ *
+ * Can change the color, intensity, and visibility of the light.
+ *
+ * @module
+ */
+
+export default class DIVEAmbientLight extends AmbientLight {
+    constructor() {
+        super(0xffffff, 1);
+        this.layers.mask = PRODUCT_LAYER_MASK;
+    }
+
+    public SetColor(color: Color): void {
+        this.color = color;
+    }
+
+    public SetIntensity(intensity: number): void {
+        this.intensity = intensity;
+    }
+
+    public SetEnabled(enabled: boolean): void {
+        this.visible = enabled;
+    }
+}

package/src/light/PointLight.ts

@@ -0,0 +1,63 @@
+import { PointLight, Color, SphereGeometry, MeshBasicMaterial, Mesh, FrontSide } from 'three';
+import DIVECommunication from '../com/Communication';
+import { HELPER_LAYER_MASK, PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
+import { DIVEMoveable } from '../interface/Moveable';
+import { DIVESelectable } from '../interface/Selectable';
+import type { TransformControls } from 'three/examples/jsm/Addons.js';
+
+/**
+ * A basic point light.
+ *
+ * Can change the color, intensity, and visibility of the light.
+ *
+ * Can be moved and selected.
+ *
+ * @module
+ */
+
+export default class DIVEPointLight extends PointLight implements DIVESelectable, DIVEMoveable {
+    public isMoveable: true = true;
+    public isSelectable: true = true;
+    public gizmo: TransformControls | null = null;
+
+    constructor() {
+        super(0xffffff, 1);
+
+        this.layers.mask = PRODUCT_LAYER_MASK;
+
+        this.castShadow = true;
+        this.shadow.mapSize.width = 512;
+        this.shadow.mapSize.height = 512;
+
+        const geoSize = 0.1;
+
+        const geometry = new SphereGeometry(geoSize, geoSize * 320, geoSize * 320);
+
+        const material = new MeshBasicMaterial({ color: this.color, transparent: true, opacity: 0.8, side: FrontSide });
+
+        const mesh = new Mesh(geometry, material);
+        mesh.layers.mask = HELPER_LAYER_MASK;
+
+        this.add(mesh);
+    }
+
+    public SetColor(color: Color): void {
+        this.color = color;
+
+        ((this.children[0] as Mesh).material as MeshBasicMaterial).color = color;
+    }
+
+    public SetIntensity(intensity: number): void {
+        this.intensity = intensity;
+
+        ((this.children[0] as Mesh).material as MeshBasicMaterial).opacity = intensity > 0.8 ? 0.8 : intensity * 0.8;
+    }
+
+    public SetEnabled(enabled: boolean): void {
+        this.visible = enabled;
+    }
+
+    public onMove(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position });
+    }
+}

package/src/light/SceneLight.ts

@@ -0,0 +1,60 @@
+import { PRODUCT_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
+import { Color, DirectionalLight, HemisphereLight, Object3D } from "three";
+
+/**
+ * A complex scene light.
+ *
+ * Can change the color, intensity, and visibility of the light.
+ *
+ * @module
+ */
+
+export default class DIVESceneLight extends Object3D {
+
+    private hemiLight: HemisphereLight;
+    private dirLight: DirectionalLight;
+
+    constructor() {
+        super();
+
+        this.name = "SceneLight";
+
+        this.hemiLight = new HemisphereLight(0xffffff, 0xffffff, 2);
+        this.hemiLight.layers.mask = PRODUCT_LAYER_MASK;
+        this.hemiLight.position.set(0, 50, 0);
+        this.add(this.hemiLight);
+
+        this.dirLight = new DirectionalLight(0xffffff, 3);
+        this.dirLight.layers.mask = PRODUCT_LAYER_MASK;
+        this.dirLight.position.set(1, 1.75, 1);
+        this.dirLight.position.multiplyScalar(30);
+        this.dirLight.castShadow = true;
+
+        this.dirLight.shadow.mapSize.width = 2048;
+        this.dirLight.shadow.mapSize.height = 2048;
+
+        const d = 5;
+
+        this.dirLight.shadow.camera.left = - d;
+        this.dirLight.shadow.camera.right = d;
+        this.dirLight.shadow.camera.top = d;
+        this.dirLight.shadow.camera.bottom = - d;
+
+        this.dirLight.shadow.camera.far = 3500;
+        this.add(this.dirLight);
+    }
+
+    public SetColor(color: Color): void {
+        this.hemiLight.color = color;
+        this.dirLight.color = color;
+    }
+
+    public SetIntensity(intensity: number): void {
+        this.hemiLight.intensity = intensity * 2;
+        this.dirLight.intensity = intensity * 3;
+    }
+
+    public SetEnabled(enabled: boolean): void {
+        this.visible = enabled;
+    }
+}

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

@@ -0,0 +1,44 @@
+import { Color } from 'three';
+import DIVEAmbientLight from '../AmbientLight';
+
+jest.mock('three', () => {
+    return {
+        Color: jest.fn(function () {
+            return {};
+        }),
+        AmbientLight: jest.fn(function () {
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+    }
+});
+
+
+describe('dive/light/DIVEAmbientLight', () => {
+    it('should instantiate', () => {
+        const testLight = new DIVEAmbientLight();
+        expect(testLight).toBeDefined();
+    });
+
+    it('should set intensity', () => {
+        const testLight = new DIVEAmbientLight();
+        testLight.SetIntensity(1.0);
+        expect(testLight.intensity).toBe(1.0);
+    });
+
+    it('should set color', () => {
+        const testLight = new DIVEAmbientLight();
+        testLight.SetColor({ test: true } as unknown as Color);
+        expect(testLight.color).toEqual({ test: true });
+    });
+
+    it('should set enabled', () => {
+        const testLight = new DIVEAmbientLight();
+        testLight.SetEnabled(false);
+        expect(testLight.visible).toBe(false);
+    });
+});

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

@@ -0,0 +1,98 @@
+import DIVEPointLight from '../PointLight.ts';
+import DIVECommunication from '../../com/Communication.ts';
+import { Color } from 'three';
+
+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;
+        }),
+    }
+});
+
+jest.mock('../../com/Communication.ts', () => {
+    return {
+        get: jest.fn(() => {
+            return {
+                PerformAction: jest.fn(),
+            }
+        }),
+    }
+});
+
+describe('dive/light/DIVEPointLight', () => {
+    it('should instantiate', () => {
+        const testLight = new DIVEPointLight();
+        testLight.userData.id = 'something';
+        expect(testLight).toBeDefined();
+        expect(mockAdd).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set intensity', () => {
+        const testLight = new DIVEPointLight();
+        testLight.SetIntensity(1.0);
+        expect(testLight.intensity).toBe(1.0);
+        testLight.SetIntensity(0.6);
+        expect(testLight.intensity).toBe(0.6);
+    });
+
+    it('should set color', () => {
+        const testLight = new DIVEPointLight();
+        testLight.SetColor({ test: true } as unknown as Color);
+        expect(testLight.color).toEqual({ test: true });
+    });
+
+    it('should set enabled', () => {
+        const testLight = new DIVEPointLight();
+        testLight.SetEnabled(false);
+        expect(testLight.visible).toBe(false);
+    });
+
+    it('should onMove', () => {
+        const testLight = new DIVEPointLight();
+        testLight.userData.id = 'something';
+        expect(() => testLight.onMove()).not.toThrow();
+
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => testLight.onMove()).not.toThrow();
+    });
+});