@shopware-ag/dive 1.5.0 → 1.6.0

package/src/renderer/__test__/Renderer.test.ts

@@ -1,6 +1,6 @@
-import DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
-import DIVEScene from '../../scene/Scene';
-import DIVERenderer, { DIVERendererDefaultSettings } from '../Renderer';
+import type DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
+import type DIVEScene from '../../scene/Scene';
+import { DIVERenderer, DIVERendererDefaultSettings } from '../Renderer';
 
 /**
  * @jest-environment jsdom
@@ -20,6 +20,7 @@ jest.mock('three', () => {
                     position: 'absolute',
                 },
             };
+            this.dispose = jest.fn();
             this.debug = {
                 checkShaderErrors: true,
             };
@@ -43,12 +44,20 @@ let renderer: DIVERenderer;
 describe('dive/renderer/DIVERenderer', () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        renderer = new DIVERenderer(DIVERendererDefaultSettings);
+        renderer = new DIVERenderer();
     });
 
     it('should instantiate', () => {
         expect(renderer).toBeDefined();
-        renderer = new DIVERenderer();
+    });
+
+    it('should instantiate with settings parameter', () => {
+        renderer = new DIVERenderer(DIVERendererDefaultSettings);
+        expect(renderer).toBeDefined();
+    });
+
+    it('should dispose', () => {
+        renderer.Dispose();
     });
 
     it('should start render', () => {

package/src/scene/Scene.ts

@@ -1,5 +1,5 @@
-import { Color, ColorRepresentation, Object3D, Scene } from 'three';
-import { COMModel, COMEntity } from '../com/types';
+import { Color, Scene, type Box3, type ColorRepresentation, type Object3D } from 'three';
+import { type COMModel, type COMEntity } from '../com/types';
 import DIVERoot from './root/Root';
 
 /**
@@ -19,6 +19,8 @@ export default class DIVEScene extends Scene {
     constructor() {
         super();
 
+        this.background = new Color(0xffffff);
+
         this.root = new DIVERoot();
         this.add(this.root);
     }
@@ -27,6 +29,10 @@ export default class DIVEScene extends Scene {
         this.background = new Color(color);
     }
 
+    public ComputeSceneBB(): Box3 {
+        return this.Root.ComputeSceneBB();
+    }
+
     public GetSceneObject(object: Partial<COMEntity>): Object3D | undefined {
         return this.Root.GetSceneObject(object);
     }

package/src/scene/__test__/Scene.test.ts

@@ -17,6 +17,7 @@ jest.mock('../root/Root', () => {
         this.PlaceOnFloor = mock_PlaceOnFloor;
         this.GetSceneObject = mock_GetSceneObject;
         this.removeFromParent = jest.fn();
+        this.ComputeSceneBB = jest.fn();
         return this;
     });
 });
@@ -38,6 +39,11 @@ describe('dive/scene/DIVEScene', () => {
         expect((scene.background as Color).getHex()).toBe(0x123456);
     });
 
+    it('should ComputeSceneBB', () => {
+        const scene = new DIVEScene();
+        expect(() => scene.ComputeSceneBB()).not.toThrow();
+    });
+
     it('should add object', () => {
         const scene = new DIVEScene();
         scene.AddSceneObject({} as COMEntity);

package/src/scene/root/Root.ts

@@ -1,4 +1,4 @@
-import { Object3D } from "three";
+import { Box3, Object3D } from "three";
 import DIVELightRoot from "./lightroot/LightRoot.ts";
 import DIVEModelRoot from "./modelroot/ModelRoot.ts";
 import { COMLight, COMModel, COMEntity } from "../../com/types.ts";
@@ -39,6 +39,16 @@ export default class DIVERoot extends Object3D {
         this.add(this.grid);
     }
 
+    public ComputeSceneBB(): Box3 {
+        const bb = new Box3();
+        this.modelRoot.traverse((object: Object3D) => {
+            if ('isObject3D' in object) {
+                bb.expandByObject(object);
+            }
+        });
+        return bb;
+    }
+
     public GetSceneObject(object: Partial<COMEntity>): Object3D | undefined {
         switch (object.entityType) {
             case "pov": {

package/src/scene/root/__test__/Root.test.ts

@@ -1,5 +1,6 @@
-import { COMLight, COMModel, COMPov } from '../../../com';
 import DIVERoot from '../Root';
+import { type Vector3, type Object3D } from 'three';
+import { type COMLight, type COMModel, type COMPov } from '../../../com';
 
 const mock_UpdateLight = jest.fn();
 const mock_UpdateModel = jest.fn();
@@ -9,6 +10,62 @@ const mock_DeleteLight = jest.fn();
 const mock_DeleteModel = jest.fn();
 const mock_PlaceOnFloor = jest.fn();
 
+jest.mock('three', () => {
+    return {
+        Box3: jest.fn(() => {
+            return {
+                expandByObject: jest.fn(),
+                setFromObject: jest.fn(),
+                applyMatrix4: jest.fn(),
+                union: jest.fn(),
+                isEmpty: jest.fn(),
+                getCenter: jest.fn(),
+                getSize: jest.fn(),
+                getBoundingSphere: jest.fn(),
+            };
+        }),
+        Object3D: jest.fn(function () {
+            this.clear = jest.fn();
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            }
+            this.add = jest.fn();
+            this.userData = {};
+            this.rotation = {
+                x: 0,
+                y: 0,
+                z: 0,
+                setFromVector3: jest.fn(),
+            };
+            this.scale = {
+                x: 1,
+                y: 1,
+                z: 1,
+                set: jest.fn(),
+            };
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.traverse = jest.fn((callback) => {
+                callback(this.children[0])
+            });
+            return this;
+        }),
+    }
+});
+
 jest.mock('../../../primitive/floor/Floor', () => {
     return jest.fn(function () {
         this.isObject3D = true;
@@ -52,6 +109,9 @@ jest.mock('../modelroot/ModelRoot', () => {
         this.PlaceOnFloor = mock_PlaceOnFloor;
         this.GetModel = mock_GetModel;
         this.removeFromParent = jest.fn();
+        this.traverse = jest.fn((callback: (object: Object3D) => void) => {
+            callback(this);
+        });
         return this;
     });
 });
@@ -64,7 +124,7 @@ describe('DIVE/scene/root/DIVERoot', () => {
     it('should instantiate', () => {
         const root = new DIVERoot();
         expect(root).toBeDefined();
-        expect(root.children).toHaveLength(4);
+        expect(root.add).toHaveBeenCalledTimes(4);
     });
 
     it('should have Floor', () => {
@@ -77,6 +137,12 @@ describe('DIVE/scene/root/DIVERoot', () => {
         expect(root.Grid).toBeDefined();
     });
 
+    it('should ComputeSceneBB', () => {
+        const root = new DIVERoot();
+        const bb = root.ComputeSceneBB();
+        expect(bb).toBeDefined();
+    });
+
     it('should add object', () => {
         const root = new DIVERoot();
         root.AddSceneObject({ entityType: 'light' } as COMLight);

package/src/toolbox/BaseTool.ts

@@ -13,7 +13,7 @@ export type DraggableEvent = {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-export default abstract class DIVEBaseTool {
+export abstract class DIVEBaseTool {
     readonly POINTER_DRAG_THRESHOLD: number = 0.001;
 
     public name: string;

package/src/toolbox/Toolbox.ts

@@ -1,7 +1,9 @@
-import DIVEOrbitControls from "../controls/OrbitControls.ts";
-import DIVEScene from "../scene/Scene.ts";
-import DIVEBaseTool from "./BaseTool.ts";
-import 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';
 
 /**
  * A Toolbox to activate and deactivate tools to use with the pointer.
@@ -12,51 +14,51 @@ import DIVESelectTool from "./select/SelectTool.ts";
 export default class DIVEToolbox {
     public static readonly DefaultTool = 'select';
 
-    private activeTool: DIVEBaseTool;
+    private _scene: DIVEScene;
+    private _controller: DIVEOrbitControls;
 
-    private selectTool: DIVESelectTool;
+    private _activeTool: DIVEBaseTool | null;
 
-    private removeListenersCallback: () => void = () => { };
+    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);
+        }
+        return this._selectTool;
+    }
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
-        this.selectTool = new DIVESelectTool(scene, controller);
+        this._scene = scene;
+        this._controller = controller;
 
-        const pointerMove = this.onPointerMove.bind(this);
-        const pointerDown = this.onPointerDown.bind(this);
-        const pointerUp = this.onPointerUp.bind(this);
-        const wheel = this.onWheel.bind(this);
-
-        controller.domElement.addEventListener('pointermove', pointerMove);
-        controller.domElement.addEventListener('pointerdown', pointerDown);
-        controller.domElement.addEventListener('pointerup', pointerUp);
-        controller.domElement.addEventListener('wheel', wheel);
-
-        this.removeListenersCallback = () => {
-            controller.domElement.removeEventListener('pointermove', pointerMove);
-            controller.domElement.removeEventListener('pointerdown', pointerDown);
-            controller.domElement.removeEventListener('pointerup', pointerUp);
-            controller.domElement.removeEventListener('wheel', wheel);
-        };
+        // toolset
+        this._selectTool = null;
 
         // default tool
-        this.activeTool = this.selectTool;
-        this.activeTool.Activate();
+        this._activeTool = null;
     }
 
-    public dispose(): void {
-        this.removeListenersCallback();
+    public Dispose(): void {
+        this.removeEventListeners();
     }
 
-    public GetActiveTool(): DIVEBaseTool {
-        return this.activeTool;
+    public GetActiveTool(): DIVEBaseTool | null {
+        return this._activeTool;
     }
 
-    public UseTool(tool: string): void {
-        this.activeTool.Deactivate();
+    public UseTool(tool: ToolType): void {
+        this._activeTool?.Deactivate();
         switch (tool) {
             case "select": {
+                this.addEventListeners();
                 this.selectTool.Activate();
-                this.activeTool = this.selectTool;
+                this._activeTool = this.selectTool;
+                break;
+            }
+            case "none": {
+                this.removeEventListeners();
+                this._activeTool = null;
                 break;
             }
             default: {
@@ -74,18 +76,32 @@ export default class DIVEToolbox {
     }
 
     public onPointerMove(e: PointerEvent): void {
-        this.activeTool.onPointerMove(e);
+        this._activeTool?.onPointerMove(e);
     }
 
     public onPointerDown(e: PointerEvent): void {
-        this.activeTool.onPointerDown(e);
+        this._activeTool?.onPointerDown(e);
     }
 
     public onPointerUp(e: PointerEvent): void {
-        this.activeTool.onPointerUp(e);
+        this._activeTool?.onPointerUp(e);
     }
 
     public onWheel(e: WheelEvent): void {
-        this.activeTool.onWheel(e);
+        this._activeTool?.onWheel(e);
+    }
+
+    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));
+    }
+
+    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));
     }
 }

package/src/toolbox/__test__/BaseTool.test.ts

@@ -1,11 +1,10 @@
 
+import { DIVEBaseTool } from '../BaseTool';
+import type DIVEOrbitControls from '../../controls/OrbitControls';
+import type DIVEScene from '../../scene/Scene';
 import { type Object3D, type Vector3 } from 'three';
-import DIVEOrbitControls from '../../controls/OrbitControls';
-import DIVEScene from '../../scene/Scene';
-import DIVEBaseTool from '../BaseTool';
-import DIVEToolbox from '../Toolbox';
 import { type DIVEHoverable } from '../../interface/Hoverable';
-import { DIVEDraggable } from '../../interface/Draggable';
+import { type DIVEDraggable } from '../../interface/Draggable';
 
 /**
  * @jest-environment jsdom
@@ -47,8 +46,18 @@ describe('dive/toolbox/DIVEBaseTool', () => {
     });
 
     it('should instantiate', () => {
-        const toolBox = new abstractWrapper(mockScene, mockController);
-        expect(toolBox).toBeDefined();
+        const baseTool = new abstractWrapper(mockScene, mockController);
+        expect(baseTool).toBeDefined();
+    });
+
+    it('should Activate', () => {
+        const baseTool = new abstractWrapper(mockScene, mockController);
+        expect(() => baseTool.Activate()).not.toThrow();
+    });
+
+    it('should Deactivate', () => {
+        const baseTool = new abstractWrapper(mockScene, mockController);
+        expect(() => baseTool.Deactivate()).not.toThrow();
     });
 
     it('should raycast', () => {
@@ -63,7 +72,24 @@ describe('dive/toolbox/DIVEBaseTool', () => {
         expect(toolBox['_pointerAnyDown']).toBeDefined();
         expect(toolBox['_pointerAnyDown']).toBe(false);
 
+        toolBox['_pointerPrimaryDown'] = false;
+        toolBox['_pointerMiddleDown'] = false;
+        toolBox['_pointerSecondaryDown'] = false;
+        expect(toolBox['_pointerAnyDown']).toBe(false);
+
         toolBox['_pointerPrimaryDown'] = true;
+        toolBox['_pointerMiddleDown'] = false;
+        toolBox['_pointerSecondaryDown'] = false;
+        expect(toolBox['_pointerAnyDown']).toBe(true);
+
+        toolBox['_pointerPrimaryDown'] = false;
+        toolBox['_pointerMiddleDown'] = true;
+        toolBox['_pointerSecondaryDown'] = false;
+        expect(toolBox['_pointerAnyDown']).toBe(true);
+
+        toolBox['_pointerPrimaryDown'] = false;
+        toolBox['_pointerMiddleDown'] = false;
+        toolBox['_pointerSecondaryDown'] = true;
         expect(toolBox['_pointerAnyDown']).toBe(true);
     });
 
@@ -388,8 +414,18 @@ describe('dive/toolbox/DIVEBaseTool', () => {
         expect(() => toolBox.onDrag({} as PointerEvent)).not.toThrow();
     });
 
+    it('should execute onCLick correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onClick({} as PointerEvent)).not.toThrow();
+    });
+
     it('should execute onDragEnd correctly', () => {
         const toolBox = new abstractWrapper(mockScene, mockController);
         expect(() => toolBox.onDragEnd({} as PointerEvent)).not.toThrow();
     });
+
+    it('should execute onWheel correctly', () => {
+        const toolBox = new abstractWrapper(mockScene, mockController);
+        expect(() => toolBox.onWheel({} as WheelEvent)).not.toThrow();
+    });
 });

package/src/toolbox/__test__/Toolbox.test.ts

@@ -1,6 +1,6 @@
-import DIVEOrbitControls from '../../controls/OrbitControls';
-import DIVEScene from '../../scene/Scene';
-import DIVEToolbox from '../Toolbox';
+import DIVEToolbox, { type ToolType } from '../Toolbox';
+import type DIVEOrbitControls from '../../controls/OrbitControls';
+import type DIVEScene from '../../scene/Scene';
 
 /**
  * @jest-environment jsdom
@@ -21,27 +21,20 @@ const mock_Canvas = {
     offsetTop: 0,
 };
 
-const mock_Activate = jest.fn();
-const mock_Deactivate = jest.fn();
-const mock_onPointerDown = jest.fn();
-const mock_onPointerMove = jest.fn();
-const mock_onPointerUp = jest.fn();
-const mock_onWheel = jest.fn();
-const mock_SetGizmoMode = jest.fn();
-const mock_SetGizmoVisibility = jest.fn();
-
 jest.mock('../select/SelectTool.ts', () => {
-    return jest.fn(function () {
-        this.Activate = mock_Activate;
-        this.Deactivate = mock_Deactivate;
-        this.onPointerDown = mock_onPointerDown;
-        this.onPointerMove = mock_onPointerMove;
-        this.onPointerUp = mock_onPointerUp;
-        this.onWheel = mock_onWheel;
-        this.SetGizmoMode = mock_SetGizmoMode;
-        this.SetGizmoVisibility = mock_SetGizmoVisibility;
-        return this;
-    });
+    return {
+        DIVESelectTool: jest.fn(function () {
+            this.Activate = jest.fn();
+            this.Deactivate = jest.fn();
+            this.onPointerDown = jest.fn();
+            this.onPointerMove = jest.fn();
+            this.onPointerUp = jest.fn();
+            this.onWheel = jest.fn();
+            this.SetGizmoMode = jest.fn();
+            this.SetGizmoVisibility = jest.fn();
+            return this;
+        })
+    }
 });
 
 const mockController = {
@@ -58,52 +51,56 @@ describe('dive/toolbox/DIVEToolBox', () => {
     it('should instantiate', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
         expect(toolBox).toBeDefined();
-        expect(mock_Activate).toHaveBeenCalledTimes(1);
-        expect(mock_addEventListener).toHaveBeenCalled();
     });
 
     it('should dispose', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.dispose();
+        toolBox.Dispose();
         expect(mock_removeEventListener).toHaveBeenCalled();
     });
 
     it('should throw with incorrect tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        expect(() => toolBox.UseTool('not a real tool')).toThrow();
-        expect(mock_Deactivate).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.UseTool('not a real tool' as unknown as ToolType)).toThrow();
+    });
+
+    it('should use no tool', () => {
+        const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.UseTool('none')).not.toThrow();
     });
 
     it('should use select tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        expect(mock_Activate).toHaveBeenCalledTimes(1);
-        toolBox.UseTool(DIVEToolbox.DefaultTool);
-        expect(mock_Deactivate).toHaveBeenCalledTimes(1);
-        expect(mock_Activate).toHaveBeenCalledTimes(2);
+        expect(() => toolBox.UseTool(DIVEToolbox.DefaultTool)).not.toThrow();
     });
 
     it('should execute pointer down event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onPointerDown({ type: 'pointerdown' } as PointerEvent);
-        expect(mock_onPointerDown).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onPointerDown({ type: 'pointerdown' } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onPointerDown({ type: 'pointerdown' } as PointerEvent)).not.toThrow();
     });
 
     it('should execute pointer move event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onPointerMove({ type: 'pointermove' } as PointerEvent);
-        expect(mock_onPointerMove).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onPointerMove({ type: 'pointermove' } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onPointerMove({ type: 'pointermove' } as PointerEvent)).not.toThrow();
     });
 
     it('should execute pointer up event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent);
-        expect(mock_onPointerUp).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onPointerUp({ type: 'pointerup' } as PointerEvent)).not.toThrow();
     });
 
     it('should execute wheel event on tool', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.onWheel({ type: 'wheel' } as WheelEvent);
-        expect(mock_onWheel).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.onWheel({ type: 'wheel' } as WheelEvent)).not.toThrow();
+        expect(() => toolBox.UseTool('select')).not.toThrow();
+        expect(() => toolBox.onWheel({ type: 'wheel' } as WheelEvent)).not.toThrow();
     });
 
     it('should get active tool', () => {
@@ -113,13 +110,11 @@ describe('dive/toolbox/DIVEToolBox', () => {
 
     it('should set gizmo mode', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.SetGizmoMode('translate');
-        expect(mock_SetGizmoMode).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.SetGizmoMode('translate')).not.toThrow();
     });
 
     it('should set gizmo active', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
-        toolBox.SetGizmoVisibility(true);
-        expect(mock_SetGizmoVisibility).toHaveBeenCalledTimes(1);
+        expect(() => toolBox.SetGizmoVisibility(true)).not.toThrow();
     });
 });

package/src/toolbox/select/SelectTool.ts

@@ -1,9 +1,14 @@
-import { Object3D } from "three";
-import { DIVESelectable, isSelectable } from "../../interface/Selectable.ts";
+import { type Object3D } from "three";
 import DIVEScene from "../../scene/Scene.ts";
-import { DIVEMoveable } from "../../interface/Moveable.ts";
-import DIVEOrbitControls from "../../controls/OrbitControls.ts";
 import DIVETransformTool from "../transform/TransformTool.ts";
+import type DIVEOrbitControls from "../../controls/OrbitControls.ts";
+import { type DIVESelectable, findSelectableInterface } from "../../interface/Selectable.ts";
+import { type DIVEMoveable } from "../../interface/Moveable.ts";
+import { type DIVEBaseTool } from "../BaseTool.ts";
+
+export const isSelectTool = (tool: DIVEBaseTool): tool is DIVESelectTool => {
+    return (tool as DIVESelectTool).isSelectTool !== undefined;
+}
 
 export interface DIVEObjectEventMap {
     select: object
@@ -17,7 +22,8 @@ export interface DIVEObjectEventMap {
  * @module
  */
 
-export default class DIVESelectTool extends DIVETransformTool {
+export class DIVESelectTool extends DIVETransformTool {
+    readonly isSelectTool: boolean = true;
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         super(scene, controller);
@@ -39,10 +45,6 @@ export default class DIVESelectTool extends DIVETransformTool {
         this.DetachGizmo();
     }
 
-    public DetachGizmo(): void {
-        this._gizmo.detach();
-    }
-
     public AttachGizmo(selectable: DIVESelectable): void {
         if ('isMoveable' in selectable) {
             const movable = selectable as (Object3D & DIVESelectable & DIVEMoveable);
@@ -51,11 +53,15 @@ export default class DIVESelectTool extends DIVETransformTool {
         }
     }
 
+    public DetachGizmo(): void {
+        this._gizmo.detach();
+    }
+
     public onClick(e: PointerEvent): void {
         super.onClick(e);
 
-        const first = this._raycaster.intersectObjects(this._scene.Root.children, true).filter((intersect) => intersect.object.visible )[0];
-        const selectable = this.findSelectableInterface(first?.object);
+        const first = this._raycaster.intersectObjects(this._scene.Root.children, true).filter((intersect) => intersect.object.visible)[0];
+        const selectable = findSelectableInterface(first?.object);
 
         // if nothing is hit
         if (!first || !selectable) {
@@ -77,21 +83,4 @@ export default class DIVESelectTool extends DIVETransformTool {
         // select clicked object
         this.Select(selectable);
     }
-
-    private findSelectableInterface(child: Object3D): (Object3D & DIVESelectable) | undefined {
-        if (child === undefined) return undefined;
-
-        if (child.parent === null) {
-            // in this case it is the scene itself
-            return undefined;
-        }
-
-        if (isSelectable(child)) {
-            // in this case it is the Selectable
-            return child;
-        }
-
-        // search recursively in parent
-        return this.findSelectableInterface(child.parent);
-    }
 }