@shopware-ag/dive 1.16.0 → 1.16.2

package/src/toolbox/BaseTool.ts

@@ -1,17 +1,20 @@
-import { Intersection, Object3D, Raycaster, Vector2, Vector3 } from "three";
-import { PRODUCT_LAYER_MASK, UI_LAYER_MASK } from "../constant/VisibilityLayerMask";
-import { DIVEScene } from "../scene/Scene";
-import DIVEOrbitControls from "../controls/OrbitControls";
-import { type DIVEDraggable } from "../interface/Draggable";
-import { type DIVEHoverable } from "../interface/Hoverable";
-import { findInterface } from "../helper/findInterface/findInterface";
+import { Intersection, Object3D, Raycaster, Vector2, Vector3 } from 'three';
+import {
+    PRODUCT_LAYER_MASK,
+    UI_LAYER_MASK,
+} from '../constant/VisibilityLayerMask';
+import { DIVEScene } from '../scene/Scene';
+import DIVEOrbitControls from '../controls/OrbitControls';
+import { type DIVEDraggable } from '../interface/Draggable';
+import { type DIVEHoverable } from '../interface/Hoverable';
+import { findInterface } from '../helper/findInterface/findInterface';
 
 export type DraggableEvent = {
     dragStart: Vector3;
     dragCurrent: Vector3;
     dragEnd: Vector3;
     dragDelta: Vector3;
-}
+};
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export abstract class DIVEBaseTool {
@@ -27,10 +30,12 @@ export abstract class DIVEBaseTool {
     protected _pointer: Vector2;
 
     protected get _pointerAnyDown(): boolean {
-        return this._pointerPrimaryDown
-            || this._pointerMiddleDown
-            || this._pointerSecondaryDown;
-    };
+        return (
+            this._pointerPrimaryDown ||
+            this._pointerMiddleDown ||
+            this._pointerSecondaryDown
+        );
+    }
     protected _pointerPrimaryDown: boolean;
     protected _pointerMiddleDown: boolean;
     protected _pointerSecondaryDown: boolean;
@@ -54,7 +59,7 @@ export abstract class DIVEBaseTool {
     protected _dragRaycastOnObjects: Object3D[] | null;
 
     protected constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
-        this.name = "BaseTool";
+        this.name = 'BaseTool';
 
         this._canvas = controller.domElement;
         this._scene = scene;
@@ -84,9 +89,9 @@ export abstract class DIVEBaseTool {
         this._dragRaycastOnObjects = null;
     }
 
-    public Activate(): void { }
+    public Activate(): void {}
 
-    public Deactivate(): void { }
+    public Deactivate(): void {}
 
     public onPointerDown(e: PointerEvent): void {
         switch (e.button) {
@@ -103,14 +108,21 @@ export abstract class DIVEBaseTool {
 
         this._lastPointerDown.copy(this._pointer);
 
-        this._draggable = findInterface<DIVEDraggable>(this._intersects[0]?.object, 'isDraggable') || null;
+        this._draggable =
+            findInterface<DIVEDraggable>(
+                this._intersects[0]?.object,
+                'isDraggable',
+            ) || null;
     }
 
     public onDragStart(e: PointerEvent): void {
         if (!this._draggable) return;
 
         if (this._dragRaycastOnObjects !== null) {
-            this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+            this._intersects = this._raycaster.intersectObjects(
+                this._dragRaycastOnObjects,
+                true,
+            );
         }
 
         if (this._intersects.length === 0) return;
@@ -145,27 +157,34 @@ export abstract class DIVEBaseTool {
         this._intersects = this.raycast(this._scene.children);
 
         // handle hover
-        const hoverable = findInterface<DIVEHoverable>(this._intersects[0]?.object, 'isHoverable');
+        const hoverable = findInterface<DIVEHoverable>(
+            this._intersects[0]?.object,
+            'isHoverable',
+        );
         if (this._intersects[0] && hoverable) {
             if (!this._hovered) {
-                if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
+                if (hoverable.onPointerEnter)
+                    hoverable.onPointerEnter(this._intersects[0]);
                 this._hovered = hoverable;
                 return;
             }
 
             if (this._hovered.uuid !== hoverable.uuid) {
-                if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
-                if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
+                if (this._hovered.onPointerLeave)
+                    this._hovered.onPointerLeave();
+                if (hoverable.onPointerEnter)
+                    hoverable.onPointerEnter(this._intersects[0]);
                 this._hovered = hoverable;
                 return;
             }
 
-            if (hoverable.onPointerOver) hoverable.onPointerOver(this._intersects[0]);
+            if (hoverable.onPointerOver)
+                hoverable.onPointerOver(this._intersects[0]);
             this._hovered = hoverable;
-
         } else {
             if (this._hovered) {
-                if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
+                if (this._hovered.onPointerLeave)
+                    this._hovered.onPointerLeave();
             }
 
             this._hovered = null;
@@ -183,14 +202,20 @@ export abstract class DIVEBaseTool {
 
     public onDrag(e: PointerEvent): void {
         if (this._dragRaycastOnObjects !== null) {
-            this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+            this._intersects = this._raycaster.intersectObjects(
+                this._dragRaycastOnObjects,
+                true,
+            );
         }
         const intersect = this._intersects[0];
         if (!intersect) return;
 
         this._dragCurrent.copy(intersect.point.clone());
         this._dragEnd.copy(intersect.point.clone());
-        this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
+        this._dragDelta.subVectors(
+            this._dragCurrent.clone(),
+            this._dragStart.clone(),
+        );
 
         if (this._draggable && this._draggable.onDrag) {
             this._draggable.onDrag({
@@ -226,14 +251,17 @@ export abstract class DIVEBaseTool {
         this._lastPointerUp.copy(this._pointer);
     }
 
-    public onClick(e: PointerEvent): void { }
+    public onClick(e: PointerEvent): void {}
 
     public onDragEnd(e: PointerEvent): void {
         const intersect = this._intersects[0];
         if (intersect) {
             this._dragEnd.copy(intersect.point.clone());
             this._dragCurrent.copy(intersect.point.clone());
-            this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
+            this._dragDelta.subVectors(
+                this._dragCurrent.clone(),
+                this._dragStart.clone(),
+            );
         }
 
         if (this._draggable && this._draggable.onDragEnd) {
@@ -256,14 +284,22 @@ export abstract class DIVEBaseTool {
         this._controller.enabled = true;
     }
 
-    public onWheel(e: WheelEvent): void { }
+    public onWheel(e: WheelEvent): void {}
 
     protected raycast(objects?: Object3D[]): Intersection[] {
-        if (objects !== undefined) return this._raycaster.intersectObjects(objects, true).filter(i => i.object.visible);
-        return this._raycaster.intersectObjects(this._scene.children, true).filter(i => i.object.visible);
+        if (objects !== undefined)
+            return this._raycaster
+                .intersectObjects(objects, true)
+                .filter((i) => i.object.visible);
+        return this._raycaster
+            .intersectObjects(this._scene.children, true)
+            .filter((i) => i.object.visible);
     }
 
     private pointerWasDragged(): boolean {
-        return this._lastPointerDown.distanceTo(this._pointer) > this.POINTER_DRAG_THRESHOLD;
+        return (
+            this._lastPointerDown.distanceTo(this._pointer) >
+            this.POINTER_DRAG_THRESHOLD
+        );
     }
-}
+}

package/src/toolbox/Toolbox.ts

@@ -1,7 +1,7 @@
-import type DIVEOrbitControls from "../controls/OrbitControls.ts";
-import type { DIVEScene } from "../scene/Scene.ts";
-import { type DIVEBaseTool } from "./BaseTool.ts";
-import { type DIVESelectTool } from "./select/SelectTool.ts";
+import type DIVEOrbitControls from '../controls/OrbitControls.ts';
+import type { DIVEScene } from '../scene/Scene.ts';
+import { type DIVEBaseTool } from './BaseTool.ts';
+import { type DIVESelectTool } from './select/SelectTool.ts';
 
 export type ToolType = 'select' | 'none';
 
@@ -22,8 +22,12 @@ export default class DIVEToolbox {
     private _selectTool: DIVESelectTool | null;
     public get selectTool(): DIVESelectTool {
         if (!this._selectTool) {
-            const DIVESelectTool = require('./select/SelectTool.ts').DIVESelectTool as typeof import('./select/SelectTool.ts').DIVESelectTool;
-            this._selectTool = new DIVESelectTool(this._scene, this._controller);
+            const DIVESelectTool = require('./select/SelectTool.ts')
+                .DIVESelectTool as typeof import('./select/SelectTool.ts').DIVESelectTool;
+            this._selectTool = new DIVESelectTool(
+                this._scene,
+                this._controller,
+            );
         }
         return this._selectTool;
     }
@@ -50,13 +54,13 @@ export default class DIVEToolbox {
     public UseTool(tool: ToolType): void {
         this._activeTool?.Deactivate();
         switch (tool) {
-            case "select": {
+            case 'select': {
                 this.addEventListeners();
                 this.selectTool.Activate();
                 this._activeTool = this.selectTool;
                 break;
             }
-            case "none": {
+            case 'none': {
                 this.removeEventListeners();
                 this._activeTool = null;
                 break;
@@ -92,16 +96,32 @@ export default class DIVEToolbox {
     }
 
     private addEventListeners(): void {
-        this._controller.domElement.addEventListener('pointermove', (e) => this.onPointerMove(e));
-        this._controller.domElement.addEventListener('pointerdown', (e) => this.onPointerDown(e));
-        this._controller.domElement.addEventListener('pointerup', (e) => this.onPointerUp(e));
-        this._controller.domElement.addEventListener('wheel', (e) => this.onWheel(e));
+        this._controller.domElement.addEventListener('pointermove', (e) =>
+            this.onPointerMove(e),
+        );
+        this._controller.domElement.addEventListener('pointerdown', (e) =>
+            this.onPointerDown(e),
+        );
+        this._controller.domElement.addEventListener('pointerup', (e) =>
+            this.onPointerUp(e),
+        );
+        this._controller.domElement.addEventListener('wheel', (e) =>
+            this.onWheel(e),
+        );
     }
 
     private removeEventListeners(): void {
-        this._controller.domElement.removeEventListener('pointermove', (e) => this.onPointerMove(e));
-        this._controller.domElement.removeEventListener('pointerdown', (e) => this.onPointerDown(e));
-        this._controller.domElement.removeEventListener('pointerup', (e) => this.onPointerUp(e));
-        this._controller.domElement.removeEventListener('wheel', (e) => this.onWheel(e));
+        this._controller.domElement.removeEventListener('pointermove', (e) =>
+            this.onPointerMove(e),
+        );
+        this._controller.domElement.removeEventListener('pointerdown', (e) =>
+            this.onPointerDown(e),
+        );
+        this._controller.domElement.removeEventListener('pointerup', (e) =>
+            this.onPointerUp(e),
+        );
+        this._controller.domElement.removeEventListener('wheel', (e) =>
+            this.onWheel(e),
+        );
     }
-}
+}