@shopware-ag/dive 1.17.0 → 1.17.2

package/src/toolbox/select/__test__/SelectTool.test.ts

@@ -103,31 +103,37 @@ const mock_detach = jest.fn();
 jest.mock('three/examples/jsm/controls/TransformControls', () => {
     return {
         TransformControls: jest.fn(function () {
-            (this.addEventListener = (
-                type: string,
-                callback: (e: object) => void,
-            ) => {
-                callback({ value: false });
-                this.object = {};
-                callback({ value: false });
-                this.object = {
-                    onMove: 'hello',
-                };
-                callback({ value: false });
-                this.object = {
-                    onMove: jest.fn(),
-                };
-                callback({ value: false });
-            }),
-                (this.attach = mock_attach),
-                (this.detach = mock_detach),
-                (this.traverse = function (callback: (obj: object) => void) {
-                    callback(this);
-                });
+            this.isTransformControls = true;
+            this.addEventListener = jest.fn(
+                (type: string, callback: (e: object) => void) => {
+                    callback({ value: false });
+                    this.object = {};
+                    callback({ value: false });
+                    this.object = {
+                        onMove: 'hello',
+                    };
+                    callback({ value: false });
+                    this.object = {
+                        onMove: jest.fn(),
+                    };
+                    callback({ value: false });
+                },
+            );
+            this.attach = jest.fn((object) => {
+                this.object = object;
+            });
+            this.detach = jest.fn(() => {
+                this.object = null;
+            });
+            this.traverse = function (callback: (obj: object) => void) {
+                callback(this);
+            };
             this.setMode = jest.fn();
             this.getRaycaster = jest.fn().mockReturnValue({
                 layers: {
                     mask: 0,
+                    disableAll: jest.fn(),
+                    enableAll: jest.fn(),
                 },
             });
             this.layers = {
@@ -169,8 +175,7 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
 
     it('should execute onClick without hit', () => {
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        selectTool['_gizmo'].object = {} as unknown as Object3D &
-            DIVESelectable;
+        selectTool.AttachGizmo({} as unknown as DIVESelectable);
         expect(() =>
             selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent),
         ).not.toThrow();
@@ -213,11 +218,11 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
             },
         ]);
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        selectTool['_gizmo'].object = {
+        selectTool.AttachGizmo({
             visible: true,
             isSelectable: true,
             uuid: 'test0',
-        } as unknown as Object3D & DIVESelectable;
+        } as unknown as Object3D & DIVESelectable);
         expect(() =>
             selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent),
         ).not.toThrow();
@@ -241,10 +246,10 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
             },
         ]);
         const selectTool = new DIVESelectTool(mockScene, mockController);
-        selectTool['_gizmo'].object = {
+        selectTool.AttachGizmo({
             isSelectable: true,
             uuid: 'test1',
-        } as unknown as Object3D & DIVESelectable;
+        } as unknown as Object3D & DIVESelectable);
         expect(() =>
             selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent),
         ).not.toThrow();

package/src/toolbox/transform/TransformTool.ts

@@ -4,6 +4,7 @@ import type DIVEOrbitControls from '../../controls/OrbitControls.ts';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
 import { type DIVEMovable } from '../../interface/Movable.ts';
 import { implementsInterface } from '../../helper/isInterface/implementsInterface.ts';
+import { DIVEGizmo } from '../../gizmo/Gizmo.ts';
 
 export const isTransformTool = (
     tool: DIVEBaseTool,
@@ -26,60 +27,13 @@ export interface DIVEObjectEventMap {
 export default class DIVETransformTool extends DIVEBaseTool {
     readonly isTransformTool: boolean = true;
 
-    protected _gizmo: TransformControls;
+    protected _gizmo: TransformControls | DIVEGizmo;
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         super(scene, controller);
         this.name = 'DIVETransformTool';
 
-        this._gizmo = new TransformControls(
-            this._controller.object,
-            this._controller.domElement,
-        );
-        this._gizmo.mode = 'translate';
-
-        // happens when pointerDown event is called on gizmo
-        this._gizmo.addEventListener('mouseDown', () => {
-            controller.enabled = false;
-
-            if (
-                !implementsInterface<DIVEMovable>(
-                    this._gizmo.object,
-                    'isMovable',
-                )
-            )
-                return;
-            if (!this._gizmo.object.onMoveStart) return;
-            this._gizmo.object.onMoveStart();
-        });
-
-        // happens when pointerMove event is called on gizmo
-        this._gizmo.addEventListener('objectChange', () => {
-            if (
-                !implementsInterface<DIVEMovable>(
-                    this._gizmo.object,
-                    'isMovable',
-                )
-            )
-                return;
-            if (!this._gizmo.object.onMove) return;
-            this._gizmo.object.onMove();
-        });
-
-        // happens when pointerUp event is called on gizmo
-        this._gizmo.addEventListener('mouseUp', () => {
-            controller.enabled = true;
-
-            if (
-                !implementsInterface<DIVEMovable>(
-                    this._gizmo.object,
-                    'isMovable',
-                )
-            )
-                return;
-            if (!this._gizmo.object.onMoveEnd) return;
-            this._gizmo.object.onMoveEnd();
-        });
+        this._gizmo = this.initGizmo();
 
         this._scene.add(this._gizmo);
     }
@@ -94,20 +48,74 @@ export default class DIVETransformTool extends DIVEBaseTool {
         const contains = this._scene.children.includes(this._gizmo);
         if (active && !contains) {
             this._scene.add(this._gizmo);
+            if ('isTransformControls' in this._gizmo) {
+                (this._gizmo as TransformControls)
+                    .getRaycaster()
+                    .layers.enableAll();
+            }
         } else if (!active && contains) {
             this._scene.remove(this._gizmo);
+            if ('isTransformControls' in this._gizmo) {
+                (this._gizmo as TransformControls)
+                    .getRaycaster()
+                    .layers.disableAll();
+            }
         }
     }
 
+    // only used for optimizing pointer events with DIVEGizmo
     // public onPointerDown(e: PointerEvent): void {
     //     super.onPointerDown(e);
 
-    //     // if (this._hovered) {
-    //     //     this._dragRaycastOnObjects = this._gizmo.gizmoPlane.children;
-    //     // }
+    //     if (this._hovered) {
+    //         this._dragRaycastOnObjects = (
+    //             this._gizmo as DIVEGizmo
+    //         ).gizmoPlane?.children;
+    //     }
     // }
 
+    // only used for optimizing pointer events with DIVEGizmo
     // protected raycast(): Intersection[] {
-    //     return super.raycast(this._gizmo.gizmoNode.children);
+    //     return super.raycast((this._gizmo as DIVEGizmo).gizmoNode.children);
     // }
+
+    private initGizmo(): TransformControls | DIVEGizmo {
+        const g = new TransformControls(
+            // this._controller,
+            this._controller.object,
+            this._controller.domElement,
+        );
+        // g.debug = true;
+        g.mode = 'translate';
+
+        // happens when pointerDown event is called on gizmo
+        g.addEventListener('mouseDown', () => {
+            this._controller.enabled = false;
+
+            if (!implementsInterface<DIVEMovable>(g.object, 'isMovable'))
+                return;
+            if (!g.object.onMoveStart) return;
+            g.object.onMoveStart();
+        });
+
+        // happens when pointerMove event is called on gizmo
+        g.addEventListener('objectChange', () => {
+            if (!implementsInterface<DIVEMovable>(g.object, 'isMovable'))
+                return;
+            if (!g.object.onMove) return;
+            g.object.onMove();
+        });
+
+        // happens when pointerUp event is called on gizmo
+        g.addEventListener('mouseUp', () => {
+            this._controller.enabled = true;
+
+            if (!implementsInterface<DIVEMovable>(g.object, 'isMovable'))
+                return;
+            if (!g.object.onMoveEnd) return;
+            g.object.onMoveEnd();
+        });
+
+        return g;
+    }
 }

package/src/toolbox/transform/__test__/TransformTool.test.ts

@@ -102,35 +102,37 @@ const mock_detach = jest.fn();
 jest.mock('three/examples/jsm/controls/TransformControls', () => {
     return {
         TransformControls: jest.fn(function () {
-            (this.addEventListener = (
-                type: string,
-                callback: (e: object) => void,
-            ) => {
-                this.object = null;
-                callback({ value: false });
-                this.object = {};
-                callback({ value: false });
-                this.object = {
-                    isMovable: true,
-                };
-                callback({ value: false });
-                this.object = {
-                    isMovable: true,
-                    onMove: jest.fn(),
-                    onMoveStart: jest.fn(),
-                    onMoveEnd: jest.fn(),
-                };
-                callback({ value: false });
-            }),
-                (this.attach = mock_attach),
-                (this.detach = mock_detach),
-                (this.traverse = function (callback: (obj: object) => void) {
-                    callback(this);
-                });
+            this.isTransformControls = true;
+            this.addEventListener = jest.fn(
+                (type: string, callback: (e: object) => void) => {
+                    this.object = null;
+                    callback({ value: false });
+                    this.object = {};
+                    callback({ value: false });
+                    this.object = {
+                        isMovable: true,
+                    };
+                    callback({ value: false });
+                    this.object = {
+                        isMovable: true,
+                        onMove: jest.fn(),
+                        onMoveStart: jest.fn(),
+                        onMoveEnd: jest.fn(),
+                    };
+                    callback({ value: false });
+                },
+            );
+            this.attach = mock_attach;
+            this.detach = mock_detach;
+            this.traverse = jest.fn((callback: (obj: object) => void) => {
+                callback(this);
+            });
             this.setMode = jest.fn();
             this.getRaycaster = jest.fn().mockReturnValue({
                 layers: {
                     mask: 0,
+                    disableAll: jest.fn(),
+                    enableAll: jest.fn(),
                 },
             });
             this.layers = {