@shopware-ag/dive 1.1.2 → 1.3.0

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;
+            }
+        }
+
+    }
+}

package/src/gizmo/rotate/RotateGizmo.ts

@@ -0,0 +1,95 @@
+import { Euler, Object3D, Vector3 } from "three";
+import { AxesColorBlue, AxesColorGreen, AxesColorRed } from "../../constant/AxisHelperColors";
+import DIVEOrbitControls from "../../controls/OrbitControls";
+import { DIVERadialHandle } from "../handles/RadialHandle";
+import { DIVEGizmo, DIVEGizmoAxis } from "../Gizmo";
+import { DraggableEvent } from "../../toolbox/BaseTool";
+import { DIVEMath } from "../../math";
+
+export class DIVERotateGizmo extends Object3D {
+    public children: DIVERadialHandle[];
+
+    private _controller: DIVEOrbitControls;
+
+    private _startRot: Euler | null;
+
+    constructor(controller: DIVEOrbitControls) {
+        super();
+
+        this.name = "DIVERotateGizmo";
+
+        this.children = [];
+
+        this._startRot = null;
+
+        this._controller = controller;
+
+        this.add(new DIVERadialHandle('x', 1, Math.PI / 2, new Vector3(1, 0, 0), AxesColorRed));
+        this.add(new DIVERadialHandle('y', 1, -Math.PI / 2, new Vector3(0, 1, 0), AxesColorGreen));
+        this.add(new DIVERadialHandle('z', 1, Math.PI / 2, new Vector3(0, 0, 1), AxesColorBlue));
+    }
+
+    public reset(): void {
+        this.children.forEach((child) => {
+            child.reset();
+        });
+    }
+
+    private handleHighlight(axis: DIVEGizmoAxis, value: boolean, dragged: boolean): void {
+        // Set highlight state for all handles.
+        this.children.forEach((child) => {
+            if (dragged) {
+                // Dragging has priority when it comes to highlighting.
+                child.highlight = child.axis === axis && dragged;
+            } else {
+                // If nothing is dragged, decide on hovered state.
+                child.highlight = child.axis === axis && value;
+            }
+        });
+    }
+
+    public onHandleHover(handle: DIVERadialHandle, value: boolean): void {
+        // If _startRot is set, it means there is a drag operation in progress.
+        // While dragging, we don't want to change the hover state.
+        if (this._startRot) return;
+
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+        (this.parent.parent as DIVEGizmo).onHover('rotate', handle.axis, value);
+
+        this.handleHighlight(handle.axis, value, false);
+    }
+
+    public onHandleDragStart(handle: DIVERadialHandle): void {
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+
+        const object = (this.parent.parent as DIVEGizmo).object;
+        if (!object) return;
+
+        this._startRot = object.rotation.clone();
+        this.handleHighlight(handle.axis, true, true);
+    }
+
+    public onHandleDrag(handle: DIVERadialHandle, e: DraggableEvent): void {
+        if (!this._startRot) return;
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+        if (!('onChange' in this.parent.parent)) return;
+
+        const currentVector = e.dragCurrent.clone().sub(this.parent.parent.position).normalize();
+        const startVector = e.dragStart.clone().sub(this.parent.parent.position).normalize();
+        const signedAngle = DIVEMath.signedAngleTo(startVector, currentVector, handle.forwardVector);
+        const euler = new Euler(
+            this._startRot.x + handle.forwardVector.x * signedAngle,
+            this._startRot.y + handle.forwardVector.y * signedAngle,
+            this._startRot.z + handle.forwardVector.z * signedAngle,
+        );
+        (this.parent.parent as DIVEGizmo).onChange(undefined, euler);
+    }
+
+    public onHandleDragEnd(handle: DIVERadialHandle): void {
+        this._startRot = null;
+        this.handleHighlight(handle.axis, false, false);
+    }
+}

package/src/gizmo/scale/ScaleGizmo.ts

@@ -0,0 +1,97 @@
+import { Object3D, Vector3 } from "three";
+import { AxesColorBlue, AxesColorGreen, AxesColorRed } from "../../constant/AxisHelperColors";
+import { DIVEHoverable } from "../../interface/Hoverable";
+import DIVEOrbitControls from "../../controls/OrbitControls";
+import { DIVEScaleHandle } from "../handles/ScaleHandle";
+import { DraggableEvent } from "../../toolbox/BaseTool";
+import { DIVEGizmoAxis, DIVEGizmo } from "../Gizmo";
+
+export class DIVEScaleGizmo extends Object3D implements DIVEHoverable {
+    readonly isHoverable: true = true;
+
+    public children: DIVEScaleHandle[];
+
+    private _controller: DIVEOrbitControls;
+
+    private _startScale: Vector3 | null;
+
+    constructor(controller: DIVEOrbitControls) {
+        super();
+
+        this.name = "DIVEScaleGizmo";
+
+        this.children = [];
+
+        this._startScale = null;
+
+        this._controller = controller;
+
+        this.add(new DIVEScaleHandle('x', 1, new Vector3(1, 0, 0), AxesColorRed));
+        this.add(new DIVEScaleHandle('y', 1, new Vector3(0, 1, 0), AxesColorGreen));
+        this.add(new DIVEScaleHandle('z', 1, new Vector3(0, 0, 1), AxesColorBlue));
+    }
+
+    public reset(): void {
+        this.children.forEach((child) => {
+            child.reset();
+        });
+    }
+
+    public update(scale: Vector3): void {
+        this.children.forEach((child) => {
+            child.update(scale);
+        });
+    }
+
+    private handleHighlight(axis: DIVEGizmoAxis, value: boolean, dragged: boolean): void {
+        // Set highlight state for all handles.
+        this.children.forEach((child) => {
+            if (dragged) {
+                // Dragging has priority when it comes to highlighting.
+                child.highlight = child.axis === axis && dragged;
+            } else {
+                // If nothing is dragged, decide on hovered state.
+                child.highlight = child.axis === axis && value;
+            }
+        });
+    }
+
+    public onHoverAxis(handle: DIVEScaleHandle, value: boolean): void {
+        // If _startScale is set, it means there is a drag operation in progress.
+        // While dragging, we don't want to change the hover state.
+        if (this._startScale) return;
+
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+        (this.parent.parent as DIVEGizmo).onHover('translate', handle.axis, value);
+
+        this.handleHighlight(handle.axis, value, false);
+    }
+
+    public onAxisDragStart(handle: DIVEScaleHandle): void {
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+
+        const object = (this.parent.parent as DIVEGizmo).object;
+        if (!object) return;
+
+        this._startScale = object.scale.clone();
+        this.handleHighlight(handle.axis, true, true);
+    }
+
+    public onAxisDrag(axis: DIVEScaleHandle, e: DraggableEvent): void {
+        if (!this._startScale) return;
+
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+        if (!('onChange' in this.parent.parent)) return;
+
+        const delta = e.dragDelta.clone().projectOnVector(axis.forwardVector);
+        (this.parent.parent as DIVEGizmo).onChange(undefined, undefined, this._startScale.clone().add(delta));
+    }
+
+    public onAxisDragEnd(handle: DIVEScaleHandle): void {
+        this._startScale = null;
+        this.handleHighlight(handle.axis, false, false);
+    }
+}

package/src/gizmo/translate/TranslateGizmo.ts

@@ -0,0 +1,88 @@
+import { Object3D, Vector3 } from "three";
+import { AxesColorBlue, AxesColorGreen, AxesColorRed } from "../../constant/AxisHelperColors";
+import DIVEOrbitControls from "../../controls/OrbitControls";
+import { DIVEAxisHandle } from "../handles/AxisHandle";
+import { DIVEGizmo, DIVEGizmoAxis } from "../Gizmo";
+import { DraggableEvent } from "../../toolbox/BaseTool";
+
+export class DIVETranslateGizmo extends Object3D {
+    private _controller: DIVEOrbitControls;
+
+    public children: DIVEAxisHandle[];
+
+    private _startPos: Vector3 | null;
+
+    constructor(controller: DIVEOrbitControls) {
+        super();
+
+        this.name = "DIVETranslateGizmo";
+
+        this.children = [];
+
+        this._startPos = null;
+
+        this._controller = controller;
+
+        this.add(new DIVEAxisHandle('x', 1, new Vector3(1, 0, 0), AxesColorRed));
+        this.add(new DIVEAxisHandle('y', 1, new Vector3(0, 1, 0), AxesColorGreen));
+        this.add(new DIVEAxisHandle('z', 1, new Vector3(0, 0, 1), AxesColorBlue));
+    }
+
+    public reset(): void {
+        this.children.forEach((child) => {
+            child.reset();
+        });
+    }
+
+    private handleHighlight(axis: DIVEGizmoAxis, value: boolean, dragged: boolean): void {
+        // Set highlight state for all handles.
+        this.children.forEach((child) => {
+            if (dragged) {
+                // Dragging has priority when it comes to highlighting.
+                child.highlight = child.axis === axis && dragged;
+            } else {
+                // If nothing is dragged, decide on hovered state.
+                child.highlight = child.axis === axis && value;
+            }
+        });
+    }
+
+    public onHandleHover(handle: DIVEAxisHandle, value: boolean): void {
+        // If _startPos is set, it means there is a drag operation in progress.
+        // While dragging, we don't want to change the hover state.
+        if (this._startPos) return;
+
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+        (this.parent.parent as DIVEGizmo).onHover('translate', handle.axis, value);
+
+        this.handleHighlight(handle.axis, value, false);
+    }
+
+    public onHandleDragStart(handle: DIVEAxisHandle): void {
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+
+        const object = (this.parent.parent as DIVEGizmo).object;
+        if (!object) return;
+
+        this._startPos = object.position.clone();
+        this.handleHighlight(handle.axis, true, true);
+    }
+
+    public onHandleDrag(handle: DIVEAxisHandle, e: DraggableEvent): void {
+        if (!this._startPos) return;
+
+        if (!this.parent) return;
+        if (!this.parent.parent) return;
+        if (!('onChange' in this.parent.parent)) return;
+
+        const delta = e.dragDelta.clone().projectOnVector(handle.forwardVector);
+        (this.parent.parent as DIVEGizmo).onChange(this._startPos.clone().add(delta));
+    }
+
+    public onHandleDragEnd(handle: DIVEAxisHandle): void {
+        this._startPos = null;
+        this.handleHighlight(handle.axis, false, false);
+    }
+}

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

@@ -0,0 +1,40 @@
+import type { Object3D } from 'three';
+import { findSceneRecursive } from '../findSceneRecursive.ts';
+
+describe('dive/helper/findSceneRecursive', () => {
+    it('should find itself if parent is not set', () => {
+        const obj = {} as Object3D;
+
+        const found = findSceneRecursive(obj);
+
+        expect(found).toStrictEqual(obj);
+    });
+
+    it('should find itself if it has no parent', () => {
+        const obj = {
+            parent: null,
+        } as Object3D;
+
+        const found = findSceneRecursive(obj);
+
+        expect(found).toStrictEqual(obj);
+    });
+
+    it('should find itself if it has no parent', () => {
+        const scene = {
+            parent: null,
+        } as Object3D;
+
+        const objparent = {
+            parent: scene,
+        } as Object3D;
+
+        const obj = {
+            parent: objparent,
+        } as Object3D;
+
+        const found = findSceneRecursive(obj);
+
+        expect(found).toStrictEqual(scene);
+    });
+});

package/src/helper/findSceneRecursive/findSceneRecursive.ts

@@ -0,0 +1,16 @@
+import type { Object3D } from 'three';
+import type DIVEScene from '../../scene/Scene';
+
+/**
+ * Find the scene object of an object.
+ *
+ * @param object - The object to find the scene of.
+ * @returns The scene object.
+ */
+
+export const findSceneRecursive = (object: Object3D): DIVEScene => {
+    if (object.parent) {
+        return findSceneRecursive(object.parent);
+    }
+    return object as DIVEScene;
+}

package/src/interface/Draggable.ts

@@ -0,0 +1,34 @@
+/**
+ * Interface for objects that can be hovered in the scene.
+ *
+ * @module
+ */
+
+import { type Object3D } from "three";
+import { type DraggableEvent } from "../toolbox/BaseTool";
+
+export interface DIVEDraggable {
+    isDraggable: true;
+    onDragStart?: (e: DraggableEvent) => void;
+    onDrag?: (e: DraggableEvent) => void;
+    onDragEnd?: (e: DraggableEvent) => void;
+}
+
+export const isDraggable = (object: Object3D): object is Object3D & DIVEDraggable => {
+    return 'isDraggable' in object;
+};
+
+export const findDraggableInterface = (child: Object3D): (Object3D & DIVEDraggable) | undefined => {
+    if (child === undefined) return undefined;
+
+    if (child.parent === null) {
+        // in this case it is the scene itself
+        return undefined;
+    }
+
+    if (isDraggable(child)) {
+        return child as (Object3D & DIVEDraggable);
+    }
+
+    return findDraggableInterface(child.parent);
+}

package/src/interface/Hoverable.ts

@@ -0,0 +1,33 @@
+/**
+ * Interface for objects that can be hovered in the scene.
+ *
+ * @module
+ */
+
+import { type Object3D, type Intersection } from "three";
+
+export interface DIVEHoverable {
+    isHoverable: true;
+    onPointerEnter?: (i: Intersection) => void;
+    onPointerOver?: (i: Intersection) => void;
+    onPointerLeave?: () => void;
+}
+
+export const isHoverable = (object: Object3D): object is Object3D & DIVEHoverable => {
+    return 'isHoverable' in object;
+};
+
+export const findHoverableInterface = (child: Object3D): (Object3D & DIVEHoverable) | undefined => {
+    if (child === undefined) return undefined;
+
+    if (child.parent === null) {
+        // in this case it is the scene itself
+        return undefined;
+    }
+
+    if (isHoverable(child)) {
+        return child as (Object3D & DIVEHoverable);
+    }
+
+    return findHoverableInterface(child.parent);
+}

package/src/interface/Moveable.ts

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

package/src/interface/Selectable.ts

@@ -4,8 +4,14 @@
  * @module
  */
 
+import { Object3D } from "three";
+
 export interface DIVESelectable {
     isSelectable: true;
     onSelect?: () => void;
     onDeselect?: () => void;
+}
+
+export function isSelectable(object: Object3D): object is Object3D & DIVESelectable {
+    return 'isSelectable' in object;
 }

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

@@ -1,7 +1,10 @@
+import { type Object3D } from 'three';
 import * as Moveable_DEF from '../Moveable';
 import * as Rotatable_DEF from '../Rotatable';
 import * as Scalable_DEF from '../Scalable';
 import * as Selectable_DEF from '../Selectable';
+import * as Draggable_DEF from '../Draggable';
+import * as Hoverable_DEF from '../Hoverable';
 
 describe('interfaces', () => {
     it('should be defined', () => {
@@ -9,5 +12,58 @@ describe('interfaces', () => {
         expect(Rotatable_DEF).toBeDefined();
         expect(Scalable_DEF).toBeDefined();
         expect(Selectable_DEF).toBeDefined();
+        expect(Draggable_DEF).toBeDefined();
+        expect(Hoverable_DEF).toBeDefined();
+    });
+
+    it('should identify Selectable', () => {
+        const Selectable = { isSelectable: true };
+        expect(Selectable_DEF.isSelectable(Selectable as unknown as Object3D)).toBe(true);
+    });
+
+    it('should identify Draggable', () => {
+        const Draggable = { isDraggable: true };
+        expect(Draggable_DEF.isDraggable(Draggable as unknown as Object3D)).toBe(true);
+    });
+
+    it('should find Draggable', () => {
+        let Draggable = {
+            isDraggable: true,
+        } as unknown as Object3D & Draggable_DEF.DIVEDraggable;
+        expect(Draggable_DEF.findDraggableInterface(Draggable as unknown as Object3D)).toBe(Draggable);
+
+        let parent = {
+            isDraggable: true,
+        }
+        Draggable = {
+            parent: parent,
+        } as unknown as Object3D & Draggable_DEF.DIVEDraggable;
+        expect(Draggable_DEF.findDraggableInterface(Draggable as unknown as Object3D)).toBe(parent);
+
+        Draggable = { isDraggable: true, parent: null } as unknown as Object3D & Draggable_DEF.DIVEDraggable;
+        expect(Draggable_DEF.findDraggableInterface(Draggable as unknown as Object3D)).toBe(undefined);
+    });
+
+    it('should identify Hoverable', () => {
+        const Hoverable = { isHoverable: true };
+        expect(Hoverable_DEF.isHoverable(Hoverable as unknown as Object3D)).toBe(true);
+    });
+
+    it('should find Hoverable', () => {
+        let Hoverable = {
+            isHoverable: true,
+        } as unknown as Object3D & Hoverable_DEF.DIVEHoverable;
+        expect(Hoverable_DEF.findHoverableInterface(Hoverable as unknown as Object3D)).toBe(Hoverable);
+
+        let parent = {
+            isHoverable: true,
+        }
+        Hoverable = {
+            parent: parent,
+        } as unknown as Object3D & Hoverable_DEF.DIVEHoverable;
+        expect(Hoverable_DEF.findHoverableInterface(Hoverable as unknown as Object3D)).toBe(parent);
+
+        Hoverable = { isHoverable: true, parent: null } as unknown as Object3D & Hoverable_DEF.DIVEHoverable;
+        expect(Hoverable_DEF.findHoverableInterface(Hoverable as unknown as Object3D)).toBe(undefined);
     });
 });

package/src/math/index.ts

@@ -1,6 +1,7 @@
 import ceilExp from "./ceil/ceilExp.ts";
 import floorExp from "./floor/floorExp.ts";
 import roundExp from "./round/roundExp.ts";
+import signedAngleTo from "./signedAngleTo/signedAngleTo.ts";
 import toFixedExp from "./toFixed/toFixedExp.ts";
 import truncateExp from "./truncate/truncateExp.ts";
 
@@ -10,10 +11,12 @@ export const DIVEMath: {
     roundExp: typeof roundExp;
     toFixedExp: typeof toFixedExp;
     truncateExp: typeof truncateExp;
+    signedAngleTo: typeof signedAngleTo;
 } = {
     ceilExp,
     floorExp,
     roundExp,
     toFixedExp,
     truncateExp,
+    signedAngleTo,
 }

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

@@ -0,0 +1,14 @@
+import { Vector3 } from 'three';
+import signedAngleTo from '../signedAngleTo';
+
+describe('dive/math/signedAngleTo', () => {
+    it('should signedAngleTo', () => {
+        const planeNormal = new Vector3(0, 0, 1);
+        const a = new Vector3(1, 0, 0);
+        expect(signedAngleTo(a, new Vector3(1, 0, 0), planeNormal)).toBe(0);
+        expect(signedAngleTo(a, new Vector3(0, 1, 0), planeNormal)).toBe(Math.PI / 2);
+        expect(signedAngleTo(a, new Vector3(-1, 0, 0), planeNormal)).toBe(Math.PI);
+        expect(signedAngleTo(a, new Vector3(0, -1, 0), planeNormal)).toBe(-Math.PI / 2);
+        expect(signedAngleTo(a, planeNormal, planeNormal)).toBe(0);
+    });
+});

package/src/math/signedAngleTo/signedAngleTo.ts

@@ -0,0 +1,13 @@
+import { Vector3 } from "three";
+
+/**
+ * Calculate the signed angle between two vectors. Only works when the vectors are on the same plane.
+ * @param vecB Start Vector
+ * @param vecA Target Vector
+ * @param planeNormal The vector's plane normal
+ * @returns Signed angle in radians
+ */
+
+export default function signedAngleTo(vecA: Vector3, vecB: Vector3, planeNormal: Vector3): number {
+    return Math.atan2(vecA.clone().cross(vecB).dot(planeNormal), vecB.clone().dot(vecA));
+}