@shopware-ag/dive 1.2.0 → 1.3.0

package/src/__test__/DIVE.test.ts

@@ -160,6 +160,8 @@ describe('dive/DIVE', () => {
     it('should instantiate', () => {
         const dive = new DIVE();
         expect(dive).toBeDefined();
+        expect((window as any).DIVE.PrintScene).toBeDefined();
+        expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 
     it('should instantiate with settings', () => {

package/src/com/Communication.ts

@@ -210,12 +210,15 @@ export default class DIVECommunication {
     }
 
     private getObjects(payload: Actions['GET_OBJECTS']['PAYLOAD']): Actions['GET_OBJECTS']['RETURN'] {
+        if (payload.ids.length === 0) return [];
+
+        const objects: COMEntity[] = [];
         this.registered.forEach((object) => {
-            if (payload.ids && payload.ids.length > 0 && !payload.ids.includes(object.id)) return;
-            payload.map.set(object.id, object);
+            if (!payload.ids.includes(object.id)) return;
+            objects.push(object);
         });
 
-        return payload.map;
+        return objects;
     }
 
     private addObject(payload: Actions['ADD_OBJECT']['PAYLOAD']): Actions['ADD_OBJECT']['RETURN'] {

package/src/com/__test__/Communication.test.ts

@@ -510,13 +510,10 @@ describe('dive/communication/DIVECommunication', () => {
         } as COMPov;
         testCom.PerformAction('ADD_OBJECT', mock1);
 
-        let map = new Map([['test0', mock0], ['test1', mock1]]);
+        const successWithoutIds = testCom.PerformAction('GET_OBJECTS', { ids: [] });
+        expect(Array.from(successWithoutIds.values())).toStrictEqual([]);
 
-        const successWithoutIds = testCom.PerformAction('GET_OBJECTS', { map });
-        expect(successWithoutIds).toStrictEqual(map);
-
-        map = new Map();
-        const successWithIds = testCom.PerformAction('GET_OBJECTS', { map, ids: ['test1'] });
+        const successWithIds = testCom.PerformAction('GET_OBJECTS', { ids: ['test1'] });
         expect(Array.from(successWithIds.values())).toStrictEqual([{ entityType: "pov", id: "test1", position: { x: 0, y: 0, z: 0 }, target: { x: 0, y: 0, z: 0 } }]);
     });
 

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

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

package/src/dive.ts

@@ -163,6 +163,13 @@ export default class DIVE {
 
         // whene everything is done, start the renderer
         this.renderer.StartRenderer(this.scene, this.perspectiveCamera);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).DIVE = {
+            PrintScene: () => {
+                console.log(this.scene);
+            },
+        }
     }
 
     // methods

package/src/gizmo/Gizmo.ts

@@ -0,0 +1,130 @@
+import { Euler, Object3D, Vector3 } from "three";
+import { DIVERotateGizmo } from "./rotate/RotateGizmo";
+import { DIVETranslateGizmo } from "./translate/TranslateGizmo";
+import DIVEOrbitControls from "../controls/OrbitControls";
+import { DIVEScaleGizmo } from "./scale/ScaleGizmo";
+import { DIVEGizmoPlane as DIVEGizmoPlane } from "./plane/GizmoPlane";
+import { DIVESelectable } from "../interface/Selectable";
+
+export type DIVEGizmoMode = ('translate' | 'rotate' | 'scale');
+
+export type DIVEGizmoAxis = 'x' | 'y' | 'z';
+
+export class DIVEGizmo extends Object3D {
+    private _mode: DIVEGizmoMode;
+    public get mode(): DIVEGizmoMode {
+        return this._mode;
+    }
+    public set mode(value: DIVEGizmoMode) {
+        this._mode = value;
+        this.assemble();
+    }
+
+    private _gizmoNode: Object3D;
+    public get gizmoNode(): Object3D {
+        return this._gizmoNode;
+    }
+    private _translateGizmo: DIVETranslateGizmo;
+    private _rotateGizmo: DIVERotateGizmo;
+    private _scaleGizmo: DIVEScaleGizmo;
+
+    private _gizmoPlane: DIVEGizmoPlane;
+    public get gizmoPlane(): DIVEGizmoPlane {
+        return this._gizmoPlane;
+    }
+
+    // attachment stuff
+    private _object: (Object3D & DIVESelectable) | null;
+    public get object(): (Object3D & DIVESelectable) | null {
+        return this._object;
+    }
+
+    constructor(controller: DIVEOrbitControls) {
+        super();
+        this.name = "DIVEGizmo";
+
+        controller.addEventListener('change', () => {
+            const size = controller.getDistance() / 2.5;
+            this.scale.set(size, size, size);
+        });
+
+        this._mode = 'translate';
+
+        this._gizmoNode = new Object3D();
+        this.add(this._gizmoNode);
+
+        this._translateGizmo = new DIVETranslateGizmo(controller);
+        this._rotateGizmo = new DIVERotateGizmo(controller);
+        this._scaleGizmo = new DIVEScaleGizmo(controller);
+
+        this._gizmoPlane = new DIVEGizmoPlane();
+        this._gizmoPlane.visible = false;
+
+        this._object = null;
+    }
+
+    public attach(object: (Object3D & DIVESelectable)): this {
+        this._object = object;
+        this.assemble();
+        return this;
+    }
+
+    public detach(): this {
+        this._object = null;
+        this.assemble();
+        return this;
+    }
+
+    public onHover(mode: DIVEGizmoMode, axis: DIVEGizmoAxis, value: boolean): void {
+        if (!value) return;
+        this._gizmoPlane.assemble(mode, axis);
+    }
+
+    public onChange(position?: Vector3, rotation?: Euler, scale?: Vector3): void {
+        if (this.object === null) return;
+
+        if (position) {
+            this.position.copy(position);
+            this.object.position.copy(position);
+        }
+
+        if (rotation) {
+            this.object.rotation.copy(rotation);
+        }
+
+        if (scale) {
+            this.object.scale.copy(scale);
+            this._scaleGizmo.update(scale);
+        }
+    }
+
+    private assemble(): void {
+        // clear all children
+        this._gizmoNode.clear();
+        this._gizmoPlane.clear();
+
+        // reset all gizmos
+        this._translateGizmo.reset();
+        this._rotateGizmo.reset();
+        this._scaleGizmo.reset();
+
+        // check for object
+        if (this.object === null) return;
+
+        // add gizmos
+        if (this._mode === 'translate') {
+            this._gizmoNode.add(this._translateGizmo);
+        }
+
+        if (this._mode === 'rotate') {
+            this._gizmoNode.add(this._rotateGizmo);
+        }
+
+        if (this._mode === 'scale') {
+            this._gizmoNode.add(this._scaleGizmo);
+        }
+
+        // add plane for raycasting properly while dragging
+        this.add(this._gizmoPlane);
+    }
+}

package/src/gizmo/handles/AxisHandle.ts

@@ -0,0 +1,124 @@
+import { Color, ColorRepresentation, CylinderGeometry, Mesh, MeshBasicMaterial, Object3D, Vector3 } from "three";
+import { UI_LAYER_MASK } from "../../constant/VisibilityLayerMask";
+import { DIVEHoverable } from "../../interface/Hoverable";
+import { DIVETranslateGizmo } from "../translate/TranslateGizmo";
+import { DIVEDraggable } from "../../interface/Draggable";
+import { DraggableEvent } from "../../toolbox/BaseTool";
+
+export class DIVEAxisHandle extends Object3D implements DIVEHoverable, DIVEDraggable {
+    readonly isHoverable: true = true;
+    readonly isDraggable: true = true;
+
+    public parent: DIVETranslateGizmo | null = null;
+
+    public axis: 'x' | 'y' | 'z';
+
+    private _color: Color = new Color(0xff00ff);
+    private _colorHover: Color;
+    private _hovered: boolean;
+    private _highlight: boolean;
+    public get highlight(): boolean {
+        return this._highlight;
+    }
+    public set highlight(highlight: boolean) {
+        this._highlight = highlight;
+        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+    }
+
+    private _lineMaterial: MeshBasicMaterial;
+
+    public get forwardVector(): Vector3 {
+        return new Vector3(0, 0, 1).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get rightVector(): Vector3 {
+        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get upVector(): Vector3 {
+        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    constructor(axis: 'x' | 'y' | 'z', length: number, direction: Vector3, color: ColorRepresentation) {
+        super();
+
+        this.name = "DIVEAxisHandle";
+        this.axis = axis;
+
+        this._color.set(color);
+        this._colorHover = this._color.clone().multiplyScalar(2);
+
+        this._highlight = false;
+        this._hovered = false;
+
+        // create line
+        const lineGeo = new CylinderGeometry(0.01, 0.01, length, 13);
+        this._lineMaterial = new MeshBasicMaterial({
+            color: color,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const lineMesh = new Mesh(lineGeo, this._lineMaterial);
+        lineMesh.layers.mask = UI_LAYER_MASK;
+        lineMesh.renderOrder = Infinity;
+        lineMesh.rotateX(Math.PI / 2);
+        lineMesh.translateY(length / 2);
+        this.add(lineMesh);
+
+        // create collider
+        const collider = new CylinderGeometry(0.1, 0.1, length, 3);
+        const colliderMaterial = new MeshBasicMaterial({
+            color: 0xff00ff,
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const colliderMesh = new Mesh(collider, colliderMaterial);
+        colliderMesh.visible = false;
+        colliderMesh.layers.mask = UI_LAYER_MASK;
+        colliderMesh.renderOrder = Infinity;
+        colliderMesh.rotateX(Math.PI / 2);
+        colliderMesh.translateY(length / 2);
+        this.add(colliderMesh);
+
+        this.rotateX(direction.y * -Math.PI / 2);
+        this.rotateY(direction.x * Math.PI / 2);
+    }
+
+    public reset(): void {
+        this._lineMaterial.color = this._color;
+    }
+
+    public onPointerEnter(): void {
+        this._hovered = true;
+        if (this.parent) {
+            this.parent.onHandleHover(this, true);
+        }
+    }
+
+    public onPointerLeave(): void {
+        this._hovered = false;
+        if (this.parent) {
+            this.parent.onHandleHover(this, false);
+        }
+    }
+
+    public onDragStart(): void {
+        if (this.parent) {
+            this.parent.onHandleDragStart(this);
+        }
+    }
+
+    public onDrag(e: DraggableEvent): void {
+        if (this.parent) {
+            this.parent.onHandleDrag(this, e);
+        }
+    }
+
+    public onDragEnd(): void {
+        if (this.parent) {
+            this.parent.onHandleDragEnd(this);
+        }
+    }
+}

package/src/gizmo/handles/RadialHandle.ts

@@ -0,0 +1,119 @@
+import { Color, ColorRepresentation, Mesh, MeshBasicMaterial, Object3D, TorusGeometry, Vector3 } from "three";
+import { UI_LAYER_MASK } from "../../constant/VisibilityLayerMask";
+import { DIVEHoverable } from "../../interface/Hoverable";
+import { DraggableEvent } from "../../toolbox/BaseTool";
+import { DIVERotateGizmo } from "../rotate/RotateGizmo";
+import { DIVEDraggable } from "../../interface/Draggable";
+
+export class DIVERadialHandle extends Object3D implements DIVEHoverable, DIVEDraggable {
+    readonly isHoverable: true = true;
+    readonly isDraggable: true = true;
+
+    public parent: DIVERotateGizmo | null = null;
+
+    public axis: 'x' | 'y' | 'z';
+
+    private _color: Color = new Color(0xff00ff);
+    private _colorHover: Color;
+    private _hovered: boolean;
+    private _highlight: boolean;
+    public get highlight(): boolean {
+        return this._highlight;
+    }
+    public set highlight(highlight: boolean) {
+        this._highlight = highlight;
+        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+    }
+
+    private _lineMaterial: MeshBasicMaterial;
+
+    public get forwardVector(): Vector3 {
+        return new Vector3(0, 0, 1).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get rightVector(): Vector3 {
+        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get upVector(): Vector3 {
+        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    constructor(axis: 'x' | 'y' | 'z', radius: number, arc: number, direction: Vector3, color: ColorRepresentation) {
+        super();
+
+        this.name = "DIVERadialHandle";
+        this.axis = axis;
+
+        this._color.set(color);
+        this._colorHover = this._color.clone().multiplyScalar(2);
+        this._hovered = false;
+        this._highlight = false;
+
+        // create line
+        const lineGeo = new TorusGeometry(radius, 0.01, 13, 48, arc);
+        this._lineMaterial = new MeshBasicMaterial({
+            color: color,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const lineMesh = new Mesh(lineGeo, this._lineMaterial);
+        lineMesh.layers.mask = UI_LAYER_MASK;
+        lineMesh.renderOrder = Infinity;
+        this.add(lineMesh);
+
+        // create collider
+        const collider = new TorusGeometry(radius, 0.1, 3, 48, arc);
+        const colliderMaterial = new MeshBasicMaterial({
+            color: 0xff00ff,
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const colliderMesh = new Mesh(collider, colliderMaterial);
+        colliderMesh.visible = false;
+        colliderMesh.layers.mask = UI_LAYER_MASK;
+        colliderMesh.renderOrder = Infinity;
+
+        this.add(colliderMesh);
+
+        this.lookAt(direction);
+    }
+
+    public reset(): void {
+        this._lineMaterial.color = this._color;
+    }
+
+    public onPointerEnter(): void {
+        this._hovered = true;
+        if (this.parent) {
+            this.parent.onHandleHover(this, true);
+        }
+    }
+
+    public onPointerLeave(): void {
+        this._hovered = false;
+        if (this.parent) {
+            this.parent.onHandleHover(this, false);
+        }
+    }
+
+    public onDragStart(): void {
+        if (this.parent) {
+            this.parent.onHandleDragStart(this);
+        }
+    }
+
+    public onDrag(e: DraggableEvent): void {
+        if (this.parent) {
+            this.parent.onHandleDrag(this, e);
+        }
+    }
+
+    public onDragEnd(): void {
+        if (this.parent) {
+            this.parent.onHandleDragEnd(this);
+        }
+    }
+}

package/src/gizmo/handles/ScaleHandle.ts

@@ -0,0 +1,152 @@
+import { BoxGeometry, Color, ColorRepresentation, CylinderGeometry, Mesh, MeshBasicMaterial, Object3D, Vector3 } from "three";
+import { UI_LAYER_MASK } from "../../constant/VisibilityLayerMask";
+import { DIVEHoverable } from "../../interface/Hoverable";
+import { DIVEScaleGizmo } from "../scale/ScaleGizmo";
+import { DIVEDraggable } from "../../interface/Draggable";
+import { DraggableEvent } from "../../toolbox/BaseTool";
+
+export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDraggable {
+    readonly isHoverable: true = true;
+    readonly isDraggable: true = true;
+
+    public parent: DIVEScaleGizmo | null = null;
+
+    public axis: 'x' | 'y' | 'z';
+
+    private _color: Color = new Color(0xff00ff);
+    private _colorHover: Color;
+    private _hovered: boolean;
+    private _highlight: boolean;
+    public get highlight(): boolean {
+        return this._highlight;
+    }
+    public set highlight(highlight: boolean) {
+        this._highlight = highlight;
+        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+    }
+
+    private _lineMaterial: MeshBasicMaterial;
+
+    private _box: Mesh;
+    private _boxSize: number;
+
+    public get forwardVector(): Vector3 {
+        return new Vector3(0, 0, 1).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get rightVector(): Vector3 {
+        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get upVector(): Vector3 {
+        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    constructor(axis: 'x' | 'y' | 'z', length: number, direction: Vector3, color: ColorRepresentation, boxSize: number = 0.05) {
+        super();
+
+        this.name = "DIVEScaleHandle";
+        this.axis = axis;
+
+        this._color.set(color);
+        this._colorHover = this._color.clone().multiplyScalar(2);
+        this._hovered = false;
+        this._highlight = false;
+
+        this._boxSize = boxSize;
+
+        // create line
+        const lineGeo = new CylinderGeometry(0.01, 0.01, length - boxSize / 2, 13);
+        this._lineMaterial = new MeshBasicMaterial({
+            color: color,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const lineMesh = new Mesh(lineGeo, this._lineMaterial);
+        lineMesh.layers.mask = UI_LAYER_MASK;
+        lineMesh.renderOrder = Infinity;
+        lineMesh.rotateX(Math.PI / 2);
+        lineMesh.translateY(length / 2 - boxSize / 4);
+        this.add(lineMesh);
+
+        // create box
+        this._box = new Mesh(
+            new BoxGeometry(boxSize, boxSize, boxSize),
+            this._lineMaterial,
+        );
+        this._box.layers.mask = UI_LAYER_MASK;
+        this._box.renderOrder = Infinity;
+        this._box.rotateX(Math.PI / 2);
+        this._box.translateY(length - boxSize / 2);
+        this._box.rotateZ(direction.x * Math.PI / 2);
+        this._box.rotateX(direction.z * Math.PI / 2);
+        this.add(this._box);
+
+        // create collider
+        const collider = new CylinderGeometry(0.1, 0.1, length + boxSize / 2, 3);
+        const colliderMaterial = new MeshBasicMaterial({
+            color: 0xff00ff,
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const colliderMesh = new Mesh(collider, colliderMaterial);
+        colliderMesh.visible = false;
+        colliderMesh.layers.mask = UI_LAYER_MASK;
+        colliderMesh.renderOrder = Infinity;
+        colliderMesh.rotateX(Math.PI / 2);
+        colliderMesh.translateY(length / 2);
+        this.add(colliderMesh);
+
+        this.rotateX(direction.y * -Math.PI / 2);
+        this.rotateY(direction.x * Math.PI / 2);
+    }
+
+    public reset(): void {
+        this._lineMaterial.color = this._color;
+    }
+
+    public update(scale: Vector3): void {
+        this._box.scale.copy(
+            new Vector3(1, 1, 1) // identity scale ...
+                .sub(this.forwardVector) // subtracted the forward vector ...
+                .add( // to then add ...
+                    scale.clone() // the scale ...
+                        .multiply(this.forwardVector) // that is scaled by the forward vector again to get the forward vector as the only direction
+                )
+        );
+    }
+
+    public onPointerEnter(): void {
+        this._hovered = true;
+        if (this.parent) {
+            this.parent.onHoverAxis(this, true);
+        }
+    }
+
+    public onPointerLeave(): void {
+        this._hovered = false;
+        if (this.parent) {
+            this.parent.onHoverAxis(this, false);
+        }
+    }
+
+    public onDragStart(): void {
+        if (this.parent) {
+            this.parent.onAxisDragStart(this);
+        }
+    }
+
+    public onDrag(e: DraggableEvent): void {
+        if (this.parent) {
+            this.parent.onAxisDrag(this, e);
+        }
+    }
+
+    public onDragEnd(): void {
+        if (this.parent) {
+            this.parent.onAxisDragEnd(this);
+        }
+    }
+}

package/src/gizmo/plane/GizmoPlane.ts

@@ -0,0 +1,85 @@
+import { Mesh, MeshBasicMaterial, Object3D, PlaneGeometry } from "three";
+import { UI_LAYER_MASK } from "../../constant/VisibilityLayerMask";
+import { DIVEGizmoAxis, DIVEGizmoMode } from "../Gizmo";
+
+export class DIVEGizmoPlane extends Object3D {
+    private _meshX: Mesh;
+    public get XPlane(): Mesh {
+        return this._meshX;
+    }
+    private _meshY: Mesh;
+    public get YPlane(): Mesh {
+        return this._meshY;
+    }
+    private _meshZ: Mesh;
+    public get ZPlane(): Mesh {
+        return this._meshZ;
+    }
+
+    constructor() {
+        super();
+        this.name = "DIVEGizmoPlane";
+
+        const material = new MeshBasicMaterial({
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+            side: 2,
+        });
+
+        const geoX = new PlaneGeometry(100, 100, 2, 2);
+        const matX = material.clone();
+        matX.color.set(0xff0000);
+        this._meshX = new Mesh(geoX, matX);
+        this._meshX.layers.mask = UI_LAYER_MASK;
+        this._meshX.rotateY(Math.PI / 2);
+
+        const geoY = new PlaneGeometry(100, 100, 2, 2);
+        const matY = material.clone();
+        matY.color.set(0x00ff00);
+        this._meshY = new Mesh(geoY, matY);
+        this._meshY.layers.mask = UI_LAYER_MASK;
+        this._meshY.rotateX(-Math.PI / 2);
+
+        const geoZ = new PlaneGeometry(100, 100, 2, 2);
+        const matZ = material.clone();
+        matZ.color.set(0x0000ff);
+        this._meshZ = new Mesh(geoZ, matZ);
+        this._meshZ.layers.mask = UI_LAYER_MASK;
+    }
+
+    public assemble(mode: DIVEGizmoMode, axis: DIVEGizmoAxis): void {
+        this.clear();
+
+        if (mode === 'translate' || mode === 'scale') {
+            switch (axis) {
+                case 'x':
+                    this.add(this._meshY);
+                    this.add(this._meshZ);
+                    break;
+                case 'y':
+                    this.add(this._meshX);
+                    this.add(this._meshZ);
+                    break;
+                case 'z':
+                    this.add(this._meshX);
+                    this.add(this._meshY);
+                    break;
+            }
+        } else if (mode === 'rotate') {
+            switch (axis) {
+                case 'x':
+                    this.add(this._meshX);
+                    break;
+                case 'y':
+                    this.add(this._meshY);
+                    break;
+                case 'z':
+                    this.add(this._meshZ);
+                    break;
+            }
+        }
+
+    }
+}