@shopware-ag/dive 1.1.2 → 1.3.0

package/src/model/Model.ts

@@ -1,9 +1,10 @@
-import { Box3, Object3D, Vector3, Vector3Like } from 'three';
+import { Box3, type Mesh, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
 import { DIVESelectable } from '../interface/Selectable';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { DIVEMoveable } from '../interface/Moveable';
 import DIVECommunication from '../com/Communication';
 import type { GLTF, TransformControls } from 'three/examples/jsm/Addons.js';
+import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
 
 /**
  * A basic model class.
@@ -66,6 +67,39 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
     }
 
+    public DropIt(): void {
+        if (!this.parent) {
+            console.warn('DIVEModel: DropIt() called on a model that is not in the scene.', this);
+            return;
+        }
+
+        // calculate the bottom center of the bounding box
+        const bottomY = this.boundingBox.min.y * this.scale.y;
+        const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new Vector3()).multiply(this.scale));
+        bbBottomCenter.y = bottomY + this.position.y;
+
+        // set up raycaster and raycast all scene objects (product layer)
+        const raycaster = new Raycaster(bbBottomCenter, new Vector3(0, -1, 0));
+        raycaster.layers.mask = PRODUCT_LAYER_MASK;
+        const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
+
+        // if we hit something, move the model to the top on the hit object's bounding box
+        if (intersections.length > 0) {
+            const mesh = intersections[0].object as Mesh;
+            mesh.geometry.computeBoundingBox();
+            const meshBB = mesh.geometry.boundingBox!;
+            const worldPos = mesh.localToWorld(meshBB.max.clone());
+
+            const oldPos = this.position.clone();
+            const newPos = this.position.clone().setY(worldPos.y).add(new Vector3(0, bottomY, 0));
+            this.position.copy(newPos);
+
+            // if the position changed, update the object in communication
+            if (this.position.y === oldPos.y) return;
+            DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+        }
+    }
+
     public onMove(): void {
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
     }

package/src/model/__test__/Model.test.ts

@@ -1,11 +1,49 @@
 import Model from '../Model';
 import DIVECommunication from '../../com/Communication';
 import { GLTF } from 'three/examples/jsm/Addons';
+import DIVEScene from '../../scene/Scene';
+import { Vector3, Box3, Mesh } from 'three';
+
+const intersectObjectsMock = jest.fn();
 
 jest.mock('three', () => {
     return {
         Vector3: jest.fn(function (x: number, y: number, z: number) {
-            return { x, y, z };
+            this.x = x;
+            this.y = y;
+            this.z = z;
+            this.copy = (vec3: Vector3) => {
+                this.x = vec3.x;
+                this.y = vec3.y;
+                this.z = vec3.z;
+                return this;
+            };
+            this.set = (x: number, y: number, z: number) => {
+                this.x = x;
+                this.y = y;
+                this.z = z;
+                return this;
+            };
+            this.multiply = (vec3: Vector3) => {
+                this.x *= vec3.x;
+                this.y *= vec3.y;
+                this.z *= vec3.z;
+                return this;
+            };
+            this.clone = () => {
+                return new Vector3(this.x, this.y, this.z);
+            };
+            this.setY = (y: number) => {
+                this.y = y;
+                return this;
+            }
+            this.add = (vec3: Vector3) => {
+                this.x += vec3.x;
+                this.y += vec3.y;
+                this.z += vec3.z;
+                return this;
+            };
+            return this;
         }),
         Object3D: jest.fn(function () {
             this.clear = jest.fn();
@@ -31,12 +69,7 @@ jest.mock('three', () => {
                 },
             }];
             this.userData = {};
-            this.position = {
-                x: 0,
-                y: 0,
-                z: 0,
-                set: jest.fn(),
-            };
+            this.position = new Vector3();
             this.rotation = {
                 x: 0,
                 y: 0,
@@ -49,11 +82,46 @@ jest.mock('three', () => {
                 z: 1,
                 set: jest.fn(),
             };
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.mesh = new Mesh();
             return this;
         }),
         Box3: jest.fn(function () {
-            this.min = { x: 0, y: 0, z: 0 };
+            this.min = new Vector3(Infinity, Infinity, Infinity);
+            this.max = new Vector3(-Infinity, -Infinity, -Infinity);
+            this.getCenter = jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            });
             this.expandByObject = jest.fn();
+
+            return this;
+        }),
+        Raycaster: jest.fn(function () {
+            this.intersectObjects = intersectObjectsMock;
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+        Mesh: jest.fn(function () {
+            this.geometry = {
+                computeBoundingBox: jest.fn(),
+                boundingBox: new Box3(),
+            };
+            this.material = {};
+            this.castShadow = true;
+            this.receiveShadow = true;
+            this.layers = {
+                mask: 0,
+            };
+            this.updateWorldMatrix = jest.fn();
+            this.traverse = jest.fn();
+            this.removeFromParent = jest.fn();
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
             return this;
         }),
     }
@@ -151,6 +219,71 @@ describe('dive/model/DIVEModel', () => {
         expect(() => model.PlaceOnFloor()).not.toThrow();
     });
 
+    it('should drop it', () => {
+        const comMock = {
+            PerformAction: jest.fn(),
+        } as unknown as DIVECommunication;
+        jest.spyOn(DIVECommunication, 'get').mockReturnValue(comMock);
+
+        const size = {
+            x: 1,
+            y: 1,
+            z: 1,
+        };
+
+        const model = new Model();
+        model.userData.id = 'something';
+        model.position.set(0, 4, 0);
+        model['boundingBox'] = {
+            min: new Vector3(-size.x / 2, -size.y / 2, -size.z / 2),
+            max: new Vector3(size.x / 2, size.y / 2, size.z / 2),
+            getCenter: jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            }),
+        } as unknown as Box3;
+
+
+        const hitObject = new Mesh();
+        hitObject.geometry.boundingBox = new Box3();
+        hitObject.geometry.boundingBox.max = new Vector3(0, 2, 0);
+        intersectObjectsMock.mockReturnValue([{
+            object: hitObject,
+
+        }]);
+
+        const scene = {
+            parent: null,
+            Root: {
+                children: [
+                    model,
+                ],
+            },
+        } as unknown as DIVEScene;
+        scene.Root.parent = scene;
+
+        // test when parent is not set
+        console.warn = jest.fn();
+        expect(() => model.DropIt()).not.toThrow();
+        expect(console.warn).toHaveBeenCalledTimes(1);
+
+        model.parent = scene.Root;
+
+        expect(() => model.DropIt()).not.toThrow();
+        expect(model.position.y).toBe(1.5);
+        expect(comMock.PerformAction).toHaveBeenCalledTimes(1);
+
+        expect(() => model.DropIt()).not.toThrow();
+        expect(comMock.PerformAction).toHaveBeenCalledTimes(1);
+
+        // reset for PerformAction to be called again
+        model.position.y = 2;
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => model.DropIt()).not.toThrow();
+        expect(comMock.PerformAction).toHaveBeenCalledTimes(1);
+
+
+    });
+
     it('should onMove', () => {
         const model = new Model();
         model.userData.id = 'something';

package/src/scene/root/lightroot/LightRoot.ts

@@ -2,8 +2,9 @@ import { Color, Object3D } from "three";
 import { type COMLight } from "../../../com/types.ts";
 import DIVEAmbientLight from "../../../light/AmbientLight.ts";
 import DIVEPointLight from "../../../light/PointLight.ts";
-import type { DIVEMoveable } from "../../../interface/Moveable.ts";
 import DIVESceneLight from "../../../light/SceneLight.ts";
+import { type TransformControls } from "three/examples/jsm/Addons";
+import type DIVEScene from "../../Scene.ts";
 
 /**
  * A basic scene node to hold all lights.
@@ -76,10 +77,23 @@ export default class DIVELightRoot extends Object3D {
             return;
         }
 
-        if ('isMoveable' in sceneObject) {
-            (sceneObject as unknown as DIVEMoveable).gizmo?.detach();
+        // _______________________________________________________
+        // this is only neccessary due to using the old TransformControls instead of the new DIVEGizmo
+        const findScene = (object: Object3D): DIVEScene => {
+            if (object.parent !== null) {
+                return findScene(object.parent);
+            };
+            return object as DIVEScene;
         }
 
+        const scene = findScene(sceneObject);
+        scene.children.find((object) => {
+            if ('isTransformControls' in object) {
+                (object as TransformControls).detach();
+            }
+        });
+        // _______________________________________________________
+
         this.remove(sceneObject);
     }
 }

package/src/scene/root/lightroot/__test__/LightRoot.test.ts

@@ -2,6 +2,7 @@ import { TransformControls } from 'three/examples/jsm/Addons';
 import { COMLight } from '../../../../com';
 import { DIVEMoveable } from '../../../../interface/Moveable';
 import DIVELightRoot from '../LightRoot';
+import type DIVEScene from '../../../Scene';
 
 const mock_SetPosition = jest.fn();
 const mock_SetIntensity = jest.fn();
@@ -115,6 +116,17 @@ describe('dive/scene/root/lightroot/DIVELightRoot', () => {
 
     it('should delete light', () => {
         const lightRoot = new DIVELightRoot();
+
+        const sceneParent = {
+            parent: null,
+            children: [
+                {
+                    isTransformControls: true,
+                    detach: jest.fn(),
+                }
+            ],
+        }
+        lightRoot.parent = sceneParent as unknown as DIVEScene;
         expect(() => lightRoot.DeleteLight({ id: undefined })).not.toThrow();
 
         expect(() => lightRoot.DeleteLight({ id: 'test_id' })).not.toThrow();
@@ -128,9 +140,6 @@ describe('dive/scene/root/lightroot/DIVELightRoot', () => {
 
         lightRoot.UpdateLight({ id: 'test_id', type: 'point', position: { x: 1, y: 2, z: 3 }, intensity: 0.5, color: 0x123456 });
         (lightRoot.children[0] as unknown as DIVEMoveable).isMoveable = true;
-        (lightRoot.children[0] as unknown as DIVEMoveable).gizmo = {
-            detach: jest.fn(),
-        } as unknown as TransformControls;
         expect(() => lightRoot.DeleteLight({ id: 'test_id' })).not.toThrow();
         expect(lightRoot.children).toHaveLength(0);
     });

package/src/scene/root/modelroot/ModelRoot.ts

@@ -3,7 +3,8 @@ import { COMModel } from "../../../com/types.ts";
 import Model from "../../../model/Model.ts";
 import DIVELoadingManager from "../../../loadingmanager/LoadingManager.ts";
 import DIVECommunication from "../../../com/Communication.ts";
-import type { DIVEMoveable } from "../../../interface/Moveable.ts";
+import { type TransformControls } from "three/examples/jsm/Addons";
+import type DIVEScene from "../../Scene.ts";
 
 /**
  * A basic scene node to hold all models.
@@ -65,10 +66,23 @@ export default class DIVEModelRoot extends Object3D {
             return;
         }
 
-        if ('isMoveable' in sceneObject) {
-            (sceneObject as unknown as DIVEMoveable).gizmo?.detach();
+        // _______________________________________________________
+        // this is only neccessary due to using the old TransformControls instead of the new DIVEGizmo
+        const findScene = (object: Object3D): DIVEScene => {
+            if (object.parent !== null) {
+                return findScene(object.parent);
+            };
+            return object as DIVEScene;
         }
 
+        const scene = findScene(sceneObject);
+        scene.children.find((object) => {
+            if ('isTransformControls' in object) {
+                (object as TransformControls).detach();
+            }
+        });
+        // _______________________________________________________
+
         this.remove(sceneObject);
     }
 

package/src/scene/root/modelroot/__test__/ModelRoot.test.ts

@@ -1,7 +1,7 @@
 import DIVEModelRoot from '../ModelRoot';
 import DIVECommunication from '../../../../com/Communication';
-import { TransformControls } from 'three/examples/jsm/Addons';
 import { DIVEMoveable } from '../../../../interface/Moveable';
+import type DIVEScene from '../../../Scene';
 
 const mock_LoadGLTF = jest.fn().mockResolvedValue({});
 const mock_SetPosition = jest.fn();
@@ -154,6 +154,18 @@ describe('dive/scene/root/modelroot/DIVEModelRoot', () => {
 
     it('should delete model', async () => {
         const modelRoot = new DIVEModelRoot();
+
+        const sceneParent = {
+            parent: null,
+            children: [
+                {
+                    isTransformControls: true,
+                    detach: jest.fn(),
+                }
+            ],
+        }
+        modelRoot.parent = sceneParent as unknown as DIVEScene;
+
         expect(() => modelRoot.DeleteModel({ id: undefined })).not.toThrow();
         expect(consoleWarnSpy).toHaveBeenCalled();
         consoleWarnSpy.mockClear();
@@ -168,19 +180,6 @@ describe('dive/scene/root/modelroot/DIVEModelRoot', () => {
         })).not.toThrow();
         (modelRoot.children[0] as unknown as DIVEMoveable).isMoveable = true;
         expect(() => modelRoot.DeleteModel({ id: 'test_id' })).not.toThrow();
-
-        await expect(() => modelRoot.UpdateModel({
-            id: 'test_id',
-            uri: 'not a real uri',
-            position: { x: 1, y: 2, z: 3 },
-            rotation: { x: 1, y: 2, z: 3 },
-            scale: { x: 1, y: 2, z: 3 },
-        })).not.toThrow();
-        (modelRoot.children[0] as unknown as DIVEMoveable).isMoveable = true;
-        (modelRoot.children[0] as unknown as DIVEMoveable).gizmo = {
-            detach: jest.fn(),
-        } as unknown as TransformControls;
-        expect(() => modelRoot.DeleteModel({ id: 'test_id' })).not.toThrow();
         expect(modelRoot.children).toHaveLength(0);
     });
 });

package/src/toolbox/BaseTool.ts

@@ -1,18 +1,268 @@
+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 { DIVEDraggable, findDraggableInterface } from "../interface/Draggable";
+import { DIVEHoverable, findHoverableInterface } from "../interface/Hoverable";
+
+export type DraggableEvent = {
+    dragStart: Vector3;
+    dragCurrent: Vector3;
+    dragEnd: Vector3;
+    dragDelta: Vector3;
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export default abstract class DIVEBaseTool {
-    protected name: string;
+    readonly POINTER_DRAG_THRESHOLD: number = 0.001;
+
+    public name: string;
+
+    protected _canvas: HTMLElement;
+    protected _scene: DIVEScene;
+    protected _controller: DIVEOrbitControls;
+
+    // general pointer members
+    protected _pointer: Vector2;
+
+    protected get _pointerAnyDown(): boolean {
+        return this._pointerPrimaryDown
+            || this._pointerMiddleDown
+            || this._pointerSecondaryDown;
+    };
+    protected _pointerPrimaryDown: boolean;
+    protected _pointerMiddleDown: boolean;
+    protected _pointerSecondaryDown: boolean;
+    protected _lastPointerDown: Vector2;
+    protected _lastPointerUp: Vector2;
+
+    // raycast members
+    protected _raycaster: Raycaster;
+    protected _intersects: Intersection[];
 
-    protected constructor() {
+    // hovering members
+    protected _hovered: (Object3D & DIVEHoverable) | null;
+
+    // dragging members
+    protected _dragging: boolean;
+    protected _dragStart: Vector3;
+    protected _dragCurrent: Vector3;
+    protected _dragEnd: Vector3;
+    protected _dragDelta: Vector3;
+    protected _draggable: DIVEDraggable | null;
+    protected _dragRaycastOnObjects: Object3D[] | null;
+
+    protected constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         this.name = "BaseTool";
+
+        this._canvas = controller.domElement;
+        this._scene = scene;
+        this._controller = controller;
+
+        this._pointer = new Vector2();
+
+        this._pointerPrimaryDown = false;
+        this._pointerMiddleDown = false;
+        this._pointerSecondaryDown = false;
+
+        this._lastPointerDown = new Vector2();
+        this._lastPointerUp = new Vector2();
+
+        this._raycaster = new Raycaster();
+        this._raycaster.layers.mask = PRODUCT_LAYER_MASK | UI_LAYER_MASK;
+        this._intersects = [];
+
+        this._hovered = null;
+
+        this._dragging = false;
+        this._dragStart = new Vector3();
+        this._dragCurrent = new Vector3();
+        this._dragEnd = new Vector3();
+        this._dragDelta = new Vector3();
+        this._draggable = null;
+        this._dragRaycastOnObjects = null;
     }
 
     public Activate(): void { }
 
     public Deactivate(): void { }
 
-    public onPointerDown(e: PointerEvent): void { }
+    public onPointerDown(e: PointerEvent): void {
+        switch (e.button) {
+            case 0:
+                this._pointerPrimaryDown = true;
+                break;
+            case 1:
+                this._pointerMiddleDown = true;
+                break;
+            case 2:
+                this._pointerSecondaryDown = true;
+                break;
+        }
+
+        this._lastPointerDown.copy(this._pointer);
+
+        this._draggable = findDraggableInterface(this._intersects[0]?.object) || null;
+    }
+
+    public onDragStart(e: PointerEvent): void {
+        if (!this._draggable) return;
+
+        if (this._dragRaycastOnObjects !== null) {
+            this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+        }
+
+        if (this._intersects.length === 0) return;
+
+        this._dragStart.copy(this._intersects[0].point.clone());
+        this._dragCurrent.copy(this._intersects[0].point.clone());
+        this._dragEnd.copy(this._dragStart.clone());
+        this._dragDelta.set(0, 0, 0);
+
+        if (this._draggable && this._draggable.onDragStart) {
+            this._draggable.onDragStart({
+                dragStart: this._dragStart,
+                dragCurrent: this._dragCurrent,
+                dragEnd: this._dragEnd,
+                dragDelta: this._dragDelta,
+            });
+
+            this._dragging = true;
+            this._controller.enabled = false;
+        }
+    }
+
+    public onPointerMove(e: PointerEvent): void {
+        // update pointer
+        this._pointer.x = (e.offsetX / this._canvas.clientWidth) * 2 - 1;
+        this._pointer.y = -(e.offsetY / this._canvas.clientHeight) * 2 + 1;
+
+        // set raycaster
+        this._raycaster.setFromCamera(this._pointer, this._controller.object);
 
-    public onPointerUp(e: PointerEvent): void { }
+        // refresh intersects
+        this._intersects = this.raycast(this._scene.children);
+
+        // handle hover
+        const hoverable = findHoverableInterface(this._intersects[0]?.object);
+        if (this._intersects[0] && hoverable) {
+            if (!this._hovered) {
+                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]);
+                this._hovered = hoverable;
+                return;
+            }
+
+            if (hoverable.onPointerOver) hoverable.onPointerOver(this._intersects[0]);
+            this._hovered = hoverable;
+
+        } else {
+            if (this._hovered) {
+                if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
+            }
+
+            this._hovered = null;
+        }
+
+        // handle drag
+        if (this._pointerAnyDown) {
+            if (!this._dragging) {
+                this.onDragStart(e);
+            }
+
+            this.onDrag(e);
+        }
+    }
+
+    public onDrag(e: PointerEvent): void {
+        if (this._dragRaycastOnObjects !== null) {
+            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());
+
+        if (this._draggable && this._draggable.onDrag) {
+            this._draggable.onDrag({
+                dragStart: this._dragStart,
+                dragCurrent: this._dragCurrent,
+                dragEnd: this._dragEnd,
+                dragDelta: this._dragDelta,
+            });
+        }
+    }
+
+    public onPointerUp(e: PointerEvent): void {
+        if (this.pointerWasDragged() || this._dragging) {
+            if (this._draggable) {
+                this.onDragEnd(e);
+            }
+        } else {
+            this.onClick(e);
+        }
+
+        switch (e.button) {
+            case 0:
+                this._pointerPrimaryDown = false;
+                break;
+            case 1:
+                this._pointerMiddleDown = false;
+                break;
+            case 2:
+                this._pointerSecondaryDown = false;
+                break;
+        }
+
+        this._lastPointerUp.copy(this._pointer);
+    }
+
+    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());
+        }
+
+        if (this._draggable && this._draggable.onDragEnd) {
+            this._draggable.onDragEnd({
+                dragStart: this._dragStart,
+                dragCurrent: this._dragCurrent,
+                dragEnd: this._dragEnd,
+                dragDelta: this._dragDelta,
+            });
+        }
+
+        this._draggable = null;
+        this._dragging = false;
+
+        this._dragStart.set(0, 0, 0);
+        this._dragCurrent.set(0, 0, 0);
+        this._dragEnd.set(0, 0, 0);
+        this._dragDelta.set(0, 0, 0);
+
+        this._controller.enabled = true;
+    }
 
     public onWheel(e: WheelEvent): void { }
+
+    protected raycast(objects?: Object3D[]): Intersection[] {
+        if (objects !== undefined) return this._raycaster.intersectObjects(objects, true);
+        return this._raycaster.intersectObjects(this._scene.children, true);
+    }
+
+    private pointerWasDragged(): boolean {
+        return this._lastPointerDown.distanceTo(this._pointer) > this.POINTER_DRAG_THRESHOLD;
+    }
 }

package/src/toolbox/Toolbox.ts

@@ -21,11 +21,13 @@ export default class DIVEToolbox {
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         this.selectTool = new DIVESelectTool(scene, controller);
 
+        controller.domElement.addEventListener('pointermove', this.onPointerMove.bind(this));
         controller.domElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
         controller.domElement.addEventListener('pointerup', this.onPointerUp.bind(this));
         controller.domElement.addEventListener('wheel', this.onWheel.bind(this));
 
         this.removeListenersCallback = () => {
+            controller.domElement.removeEventListener('pointermove', this.onPointerMove.bind(this));
             controller.domElement.removeEventListener('pointerdown', this.onPointerDown.bind(this));
             controller.domElement.removeEventListener('pointerup', this.onPointerUp.bind(this));
             controller.domElement.removeEventListener('wheel', this.onWheel.bind(this));
@@ -62,6 +64,10 @@ export default class DIVEToolbox {
         this.selectTool.SetGizmoMode(mode);
     }
 
+    public onPointerMove(e: PointerEvent): void {
+        this.activeTool.onPointerMove(e);
+    }
+
     public onPointerDown(e: PointerEvent): void {
         this.activeTool.onPointerDown(e);
     }