@shopware-ag/dive 1.19.1-beta.0 → 1.19.1-beta.2

package/src/gizmo/handles/AxisHandle.ts

@@ -1,153 +0,0 @@
-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 set debug(value: boolean) {
-        this._colliderMesh.visible = value;
-    }
-
-    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;
-
-    private _colliderMesh: Mesh;
-
-    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 colliderGeo = new CylinderGeometry(0.1, 0.1, length, 3);
-        const colliderMaterial = new MeshBasicMaterial({
-            color: 0xff00ff,
-            transparent: true,
-            opacity: 0.15,
-            depthTest: false,
-            depthWrite: false,
-        });
-        this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
-        this._colliderMesh.visible = false;
-        this._colliderMesh.layers.mask = UI_LAYER_MASK;
-        this._colliderMesh.renderOrder = Infinity;
-        this._colliderMesh.rotateX(Math.PI / 2);
-        this._colliderMesh.translateY(length / 2);
-        this.add(this._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

@@ -1,149 +0,0 @@
-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 set debug(value: boolean) {
-        this._colliderMesh.visible = value;
-    }
-
-    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;
-
-    private _colliderMesh: Mesh;
-
-    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 colliderGeo = new TorusGeometry(radius, 0.1, 3, 48, arc);
-        const colliderMaterial = new MeshBasicMaterial({
-            color: 0xff00ff,
-            transparent: true,
-            opacity: 0.15,
-            depthTest: false,
-            depthWrite: false,
-        });
-        this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
-        this._colliderMesh.visible = false;
-        this._colliderMesh.layers.mask = UI_LAYER_MASK;
-        this._colliderMesh.renderOrder = Infinity;
-
-        this.add(this._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

@@ -1,195 +0,0 @@
-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 set debug(value: boolean) {
-        this._colliderMesh.visible = value;
-    }
-
-    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 _colliderMesh: Mesh;
-
-    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 colliderGeo = 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,
-        });
-        this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
-        this._colliderMesh.visible = false;
-        this._colliderMesh.layers.mask = UI_LAYER_MASK;
-        this._colliderMesh.renderOrder = Infinity;
-        this._colliderMesh.rotateX(Math.PI / 2);
-        this._colliderMesh.translateY(length / 2);
-        this.add(this._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

@@ -1,84 +0,0 @@
-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;
-            }
-        }
-    }
-}