@shopware-ag/dive 1.16.0 → 1.16.2

package/src/dive.ts

@@ -1,15 +1,25 @@
-import { DIVERenderer, DIVERendererDefaultSettings, DIVERendererSettings } from "./renderer/Renderer.ts";
-import { DIVEScene } from "./scene/Scene.ts";
-import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings, DIVEPerspectiveCameraSettings } from "./camera/PerspectiveCamera.ts";
-import DIVEOrbitControls, { DIVEOrbitControlsDefaultSettings, DIVEOrbitControlsSettings } from "./controls/OrbitControls.ts";
-import DIVEToolbox from "./toolbox/Toolbox.ts";
-import { DIVECommunication } from "./com/Communication.ts";
-import { DIVEAnimationSystem } from "./animation/AnimationSystem.ts";
-import DIVEAxisCamera from "./axiscamera/AxisCamera.ts";
-import { getObjectDelta } from "./helper/getObjectDelta/getObjectDelta.ts";
-
-import { generateUUID } from "three/src/math/MathUtils";
-import { DIVEInfo } from "./info/Info.ts";
+import {
+    DIVERenderer,
+    DIVERendererDefaultSettings,
+    DIVERendererSettings,
+} from './renderer/Renderer.ts';
+import { DIVEScene } from './scene/Scene.ts';
+import DIVEPerspectiveCamera, {
+    DIVEPerspectiveCameraDefaultSettings,
+    DIVEPerspectiveCameraSettings,
+} from './camera/PerspectiveCamera.ts';
+import DIVEOrbitControls, {
+    DIVEOrbitControlsDefaultSettings,
+    DIVEOrbitControlsSettings,
+} from './controls/OrbitControls.ts';
+import DIVEToolbox from './toolbox/Toolbox.ts';
+import { DIVECommunication } from './com/Communication.ts';
+import { DIVEAnimationSystem } from './animation/AnimationSystem.ts';
+import DIVEAxisCamera from './axiscamera/AxisCamera.ts';
+import { getObjectDelta } from './helper/getObjectDelta/getObjectDelta.ts';
+
+import { generateUUID } from 'three/src/math/MathUtils';
+import { DIVEInfo } from './info/Info.ts';
 import pkgjson from '../package.json';
 
 export type DIVESettings = {
@@ -18,7 +28,7 @@ export type DIVESettings = {
     renderer: Partial<DIVERendererSettings>;
     perspectiveCamera: Partial<DIVEPerspectiveCameraSettings>;
     orbitControls: Partial<DIVEOrbitControlsSettings>;
-}
+};
 
 export const DIVEDefaultSettings: DIVESettings = {
     autoResize: true,
@@ -26,7 +36,7 @@ export const DIVEDefaultSettings: DIVESettings = {
     renderer: DIVERendererDefaultSettings,
     perspectiveCamera: DIVEPerspectiveCameraDefaultSettings,
     orbitControls: DIVEOrbitControlsDefaultSettings,
-}
+};
 
 /**
  * #### DIVE
@@ -86,7 +96,10 @@ export default class DIVE {
                 id: modelid,
             });
 
-            const transform = dive.Communication.PerformAction('COMPUTE_ENCOMPASSING_VIEW', {});
+            const transform = dive.Communication.PerformAction(
+                'COMPUTE_ENCOMPASSING_VIEW',
+                {},
+            );
 
             dive.Communication.PerformAction('SET_CAMERA_TRANSFORM', {
                 position: transform.position,
@@ -153,19 +166,33 @@ export default class DIVE {
         const settingsDelta = getObjectDelta(this._settings, settings);
 
         // apply renderer settings (we have to rebuild the renderer to apply the settings)
-        if (settingsDelta.renderer) this.renderer = new DIVERenderer(this._settings.renderer);
+        if (settingsDelta.renderer)
+            this.renderer = new DIVERenderer(this._settings.renderer);
 
         // apply perspective camera settings
         if (settingsDelta.perspectiveCamera) {
-            if (settingsDelta.perspectiveCamera.fov !== undefined) this.perspectiveCamera.fov = settingsDelta.perspectiveCamera.fov;
-            if (settingsDelta.perspectiveCamera.near !== undefined) this.perspectiveCamera.near = settingsDelta.perspectiveCamera.near;
-            if (settingsDelta.perspectiveCamera.far !== undefined) this.perspectiveCamera.far = settingsDelta.perspectiveCamera.far;
-            this.perspectiveCamera.OnResize(this.renderer.domElement.width, this.renderer.domElement.height);
+            if (settingsDelta.perspectiveCamera.fov !== undefined)
+                this.perspectiveCamera.fov =
+                    settingsDelta.perspectiveCamera.fov;
+            if (settingsDelta.perspectiveCamera.near !== undefined)
+                this.perspectiveCamera.near =
+                    settingsDelta.perspectiveCamera.near;
+            if (settingsDelta.perspectiveCamera.far !== undefined)
+                this.perspectiveCamera.far =
+                    settingsDelta.perspectiveCamera.far;
+            this.perspectiveCamera.OnResize(
+                this.renderer.domElement.width,
+                this.renderer.domElement.height,
+            );
         }
         // apply orbit controls settings
         if (settingsDelta.orbitControls) {
-            if (settingsDelta.orbitControls.enableDamping !== undefined) this.orbitControls.enableDamping = settingsDelta.orbitControls.enableDamping;
-            if (settingsDelta.orbitControls.dampingFactor !== undefined) this.orbitControls.dampingFactor = settingsDelta.orbitControls.dampingFactor;
+            if (settingsDelta.orbitControls.enableDamping !== undefined)
+                this.orbitControls.enableDamping =
+                    settingsDelta.orbitControls.enableDamping;
+            if (settingsDelta.orbitControls.dampingFactor !== undefined)
+                this.orbitControls.dampingFactor =
+                    settingsDelta.orbitControls.dampingFactor;
         }
 
         if (settingsDelta.autoResize !== this._settings.autoResize) {
@@ -177,7 +204,11 @@ export default class DIVE {
         }
 
         if (settingsDelta.displayAxes) {
-            this.axisCamera = new DIVEAxisCamera(this.renderer, this.scene, this.orbitControls);
+            this.axisCamera = new DIVEAxisCamera(
+                this.renderer,
+                this.scene,
+                this.orbitControls,
+            );
         } else {
             this.axisCamera?.Dispose();
             this.axisCamera = null;
@@ -187,7 +218,10 @@ export default class DIVE {
     }
 
     constructor(settings?: Partial<DIVESettings>) {
-        this._settings = { ...DIVEDefaultSettings, ...(settings !== undefined ? settings : {}) };
+        this._settings = {
+            ...DIVEDefaultSettings,
+            ...(settings !== undefined ? settings : {}),
+        };
 
         this._resizeObserverId = '';
         this._width = 0;
@@ -196,19 +230,34 @@ export default class DIVE {
         // initialize functional components
         this.renderer = new DIVERenderer(this._settings.renderer);
         this.scene = new DIVEScene();
-        this.perspectiveCamera = new DIVEPerspectiveCamera(this._settings.perspectiveCamera);
+        this.perspectiveCamera = new DIVEPerspectiveCamera(
+            this._settings.perspectiveCamera,
+        );
 
         // initialize animation system
         this.animationSystem = new DIVEAnimationSystem(this.renderer);
 
-        this.orbitControls = new DIVEOrbitControls(this.perspectiveCamera, this.renderer, this.animationSystem, this._settings.orbitControls);
+        this.orbitControls = new DIVEOrbitControls(
+            this.perspectiveCamera,
+            this.renderer,
+            this.animationSystem,
+            this._settings.orbitControls,
+        );
         this.toolbox = new DIVEToolbox(this.scene, this.orbitControls);
-        this.communication = new DIVECommunication(this.renderer, this.scene, this.orbitControls, this.toolbox);
-
+        this.communication = new DIVECommunication(
+            this.renderer,
+            this.scene,
+            this.orbitControls,
+            this.toolbox,
+        );
 
         // initialize axis camera
         if (this._settings.displayAxes) {
-            this.axisCamera = new DIVEAxisCamera(this.renderer, this.scene, this.orbitControls);
+            this.axisCamera = new DIVEAxisCamera(
+                this.renderer,
+                this.scene,
+                this.orbitControls,
+            );
         } else {
             this.axisCamera = null;
         }
@@ -226,7 +275,7 @@ export default class DIVE {
             PrintScene: () => {
                 console.log(this.scene);
             },
-        }
+        };
 
         console.log(`DIVE ${pkgjson.version} initialized`);
     }
@@ -257,7 +306,8 @@ export default class DIVE {
             if (!canvasWrapper) return;
 
             const { clientWidth, clientHeight } = canvasWrapper;
-            if (clientWidth === this._width && clientHeight === this._height) return;
+            if (clientWidth === this._width && clientHeight === this._height)
+                return;
 
             this.OnResize(clientWidth, clientHeight);
 
@@ -271,13 +321,9 @@ export default class DIVE {
     }
 }
 
-export {
-    DIVE,
-    DIVECommunication,
-}
+export { DIVE, DIVECommunication };
 
 export * from './math/index.ts';
 
 export type * from './com/actions/index.ts';
 export type * from './com/types';
-

package/src/gizmo/Gizmo.ts

@@ -1,12 +1,12 @@
-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";
+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 DIVEGizmoMode = 'translate' | 'rotate' | 'scale';
 
 export type DIVEGizmoAxis = 'x' | 'y' | 'z';
 
@@ -41,7 +41,7 @@ export class DIVEGizmo extends Object3D {
 
     constructor(controller: DIVEOrbitControls) {
         super();
-        this.name = "DIVEGizmo";
+        this.name = 'DIVEGizmo';
 
         controller.addEventListener('change', () => {
             const size = controller.getDistance() / 2.5;
@@ -63,7 +63,7 @@ export class DIVEGizmo extends Object3D {
         this._object = null;
     }
 
-    public attach(object: (Object3D & DIVESelectable)): this {
+    public attach(object: Object3D & DIVESelectable): this {
         this._object = object;
         this.assemble();
         return this;
@@ -75,12 +75,20 @@ export class DIVEGizmo extends Object3D {
         return this;
     }
 
-    public onHover(mode: DIVEGizmoMode, axis: DIVEGizmoAxis, value: boolean): void {
+    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 {
+    public onChange(
+        position?: Vector3,
+        rotation?: Euler,
+        scale?: Vector3,
+    ): void {
         if (this.object === null) return;
 
         if (position) {
@@ -127,4 +135,4 @@ export class DIVEGizmo extends Object3D {
         // add plane for raycasting properly while dragging
         this.add(this._gizmoPlane);
     }
-}
+}

package/src/gizmo/handles/AxisHandle.ts

@@ -1,11 +1,22 @@
-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 {
+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;
 
@@ -22,27 +33,39 @@ export class DIVEAxisHandle extends Object3D implements DIVEHoverable, DIVEDragg
     }
     public set highlight(highlight: boolean) {
         this._highlight = highlight;
-        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+        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();
+        return new Vector3(0, 0, 1)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
     public get rightVector(): Vector3 {
-        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+        return new Vector3(1, 0, 0)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
     public get upVector(): Vector3 {
-        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+        return new Vector3(0, 1, 0)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
-    constructor(axis: 'x' | 'y' | 'z', length: number, direction: Vector3, color: ColorRepresentation) {
+    constructor(
+        axis: 'x' | 'y' | 'z',
+        length: number,
+        direction: Vector3,
+        color: ColorRepresentation,
+    ) {
         super();
 
-        this.name = "DIVEAxisHandle";
+        this.name = 'DIVEAxisHandle';
         this.axis = axis;
 
         this._color.set(color);
@@ -82,8 +105,8 @@ export class DIVEAxisHandle extends Object3D implements DIVEHoverable, DIVEDragg
         colliderMesh.translateY(length / 2);
         this.add(colliderMesh);
 
-        this.rotateX(direction.y * -Math.PI / 2);
-        this.rotateY(direction.x * Math.PI / 2);
+        this.rotateX((direction.y * -Math.PI) / 2);
+        this.rotateY((direction.x * Math.PI) / 2);
     }
 
     public reset(): void {
@@ -121,4 +144,4 @@ export class DIVEAxisHandle extends Object3D implements DIVEHoverable, DIVEDragg
             this.parent.onHandleDragEnd(this);
         }
     }
-}
+}

package/src/gizmo/handles/RadialHandle.ts

@@ -1,11 +1,22 @@
-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 {
+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;
 
@@ -22,27 +33,40 @@ export class DIVERadialHandle extends Object3D implements DIVEHoverable, DIVEDra
     }
     public set highlight(highlight: boolean) {
         this._highlight = highlight;
-        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+        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();
+        return new Vector3(0, 0, 1)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
     public get rightVector(): Vector3 {
-        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+        return new Vector3(1, 0, 0)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
     public get upVector(): Vector3 {
-        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+        return new Vector3(0, 1, 0)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
-    constructor(axis: 'x' | 'y' | 'z', radius: number, arc: number, direction: Vector3, color: ColorRepresentation) {
+    constructor(
+        axis: 'x' | 'y' | 'z',
+        radius: number,
+        arc: number,
+        direction: Vector3,
+        color: ColorRepresentation,
+    ) {
         super();
 
-        this.name = "DIVERadialHandle";
+        this.name = 'DIVERadialHandle';
         this.axis = axis;
 
         this._color.set(color);
@@ -116,4 +140,4 @@ export class DIVERadialHandle extends Object3D implements DIVEHoverable, DIVEDra
             this.parent.onHandleDragEnd(this);
         }
     }
-}
+}

package/src/gizmo/handles/ScaleHandle.ts

@@ -1,11 +1,23 @@
-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 {
+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;
 
@@ -22,7 +34,8 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
     }
     public set highlight(highlight: boolean) {
         this._highlight = highlight;
-        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+        this._lineMaterial.color =
+            this._highlight || this._hovered ? this._colorHover : this._color;
     }
 
     private _lineMaterial: MeshBasicMaterial;
@@ -31,21 +44,33 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
     private _boxSize: number;
 
     public get forwardVector(): Vector3 {
-        return new Vector3(0, 0, 1).applyQuaternion(this.quaternion).normalize();
+        return new Vector3(0, 0, 1)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
     public get rightVector(): Vector3 {
-        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+        return new Vector3(1, 0, 0)
+            .applyQuaternion(this.quaternion)
+            .normalize();
     }
 
     public get upVector(): Vector3 {
-        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+        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) {
+    constructor(
+        axis: 'x' | 'y' | 'z',
+        length: number,
+        direction: Vector3,
+        color: ColorRepresentation,
+        boxSize: number = 0.05,
+    ) {
         super();
 
-        this.name = "DIVEScaleHandle";
+        this.name = 'DIVEScaleHandle';
         this.axis = axis;
 
         this._color.set(color);
@@ -56,7 +81,12 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
         this._boxSize = boxSize;
 
         // create line
-        const lineGeo = new CylinderGeometry(0.01, 0.01, length - boxSize / 2, 13);
+        const lineGeo = new CylinderGeometry(
+            0.01,
+            0.01,
+            length - boxSize / 2,
+            13,
+        );
         this._lineMaterial = new MeshBasicMaterial({
             color: color,
             depthTest: false,
@@ -78,12 +108,17 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
         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._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 collider = new CylinderGeometry(
+            0.1,
+            0.1,
+            length + boxSize / 2,
+            3,
+        );
         const colliderMaterial = new MeshBasicMaterial({
             color: 0xff00ff,
             transparent: true,
@@ -99,8 +134,8 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
         colliderMesh.translateY(length / 2);
         this.add(colliderMesh);
 
-        this.rotateX(direction.y * -Math.PI / 2);
-        this.rotateY(direction.x * Math.PI / 2);
+        this.rotateX((direction.y * -Math.PI) / 2);
+        this.rotateY((direction.x * Math.PI) / 2);
     }
 
     public reset(): void {
@@ -111,10 +146,12 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
         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
-                )
+                .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
+                ),
         );
     }
 
@@ -149,4 +186,4 @@ export class DIVEScaleHandle extends Object3D implements DIVEHoverable, DIVEDrag
             this.parent.onAxisDragEnd(this);
         }
     }
-}
+}

package/src/gizmo/plane/GizmoPlane.ts

@@ -1,6 +1,6 @@
-import { Mesh, MeshBasicMaterial, Object3D, PlaneGeometry } from "three";
-import { UI_LAYER_MASK } from "../../constant/VisibilityLayerMask";
-import { DIVEGizmoAxis, DIVEGizmoMode } from "../Gizmo";
+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;
@@ -18,7 +18,7 @@ export class DIVEGizmoPlane extends Object3D {
 
     constructor() {
         super();
-        this.name = "DIVEGizmoPlane";
+        this.name = 'DIVEGizmoPlane';
 
         const material = new MeshBasicMaterial({
             transparent: true,
@@ -80,6 +80,5 @@ export class DIVEGizmoPlane extends Object3D {
                     break;
             }
         }
-
     }
-}
+}