@shopware-ag/dive 1.1.2 → 1.3.0

package/src/com/Communication.ts

@@ -7,6 +7,7 @@ import DIVEMediaCreator from "../mediacreator/MediaCreator.ts";
 import DIVEOrbitControls from "../controls/OrbitControls.ts";
 import { DIVESelectable } from "../interface/Selectable.ts";
 import DIVESelectTool from "../toolbox/select/SelectTool.ts";
+import type DIVEModel from "../model/Model.ts";
 
 type EventListener<Action extends keyof Actions> = (payload: Actions[Action]['PAYLOAD']) => void;
 
@@ -103,6 +104,10 @@ export default class DIVECommunication {
                 returnValue = this.setBackground(payload as Actions['SET_BACKGROUND']['PAYLOAD']);
                 break;
             }
+            case 'DROP_IT': {
+                returnValue = this.dropIt(payload as Actions['DROP_IT']['PAYLOAD']);
+                break;
+            }
             case 'PLACE_ON_FLOOR': {
                 returnValue = this.placeOnFloor(payload as Actions['PLACE_ON_FLOOR']['PAYLOAD']);
                 break;
@@ -205,12 +210,15 @@ export default class DIVECommunication {
     }
 
     private getObjects(payload: Actions['GET_OBJECTS']['PAYLOAD']): Actions['GET_OBJECTS']['RETURN'] {
+        if (payload.ids.length === 0) return [];
+
+        const objects: COMEntity[] = [];
         this.registered.forEach((object) => {
-            if (payload.ids && payload.ids.length > 0 && !payload.ids.includes(object.id)) return;
-            payload.map.set(object.id, object);
+            if (!payload.ids.includes(object.id)) return;
+            objects.push(object);
         });
 
-        return payload.map;
+        return objects;
     }
 
     private addObject(payload: Actions['ADD_OBJECT']['PAYLOAD']): Actions['ADD_OBJECT']['RETURN'] {
@@ -275,6 +283,16 @@ export default class DIVECommunication {
         return true;
     }
 
+    private dropIt(payload: Actions['DROP_IT']['PAYLOAD']): Actions['DROP_IT']['RETURN'] {
+        const object = this.registered.get(payload.id);
+        if (!object) return false;
+
+        const model = this.scene.GetSceneObject(object) as DIVEModel;
+        model.DropIt();
+
+        return true;
+    }
+
     private placeOnFloor(payload: Actions['PLACE_ON_FLOOR']['PAYLOAD']): Actions['PLACE_ON_FLOOR']['RETURN'] {
         if (!this.registered.get(payload.id)) return false;
 

package/src/com/__test__/Communication.test.ts

@@ -289,6 +289,47 @@ describe('dive/communication/DIVECommunication', () => {
         expect(successSet).toBe(true);
     });
 
+    it('should perform action DROP_IT with existing model', () => {
+        const payload = {
+            entityType: "model",
+            id: "model",
+            position: { x: 0, y: 0, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 0.01, y: 0.01, z: 0.01 },
+
+            uri: "https://threejs.org/examples/models/gltf/LittlestTokyo.glb",
+        } as COMModel;
+
+        testCom.PerformAction('ADD_OBJECT', payload);
+
+        const placeSpy = jest.spyOn(mockScene, 'GetSceneObject').mockReturnValue({
+            DropIt: jest.fn(),
+        } as unknown as Object3D);
+
+        const successPlace = testCom.PerformAction('DROP_IT', payload);
+        expect(successPlace).toBe(true);
+        expect(placeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should perform action DROP_IT without existing model', () => {
+        const payload = {
+            entityType: "model",
+            id: "model",
+            position: { x: 0, y: 0, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 0.01, y: 0.01, z: 0.01 },
+
+            uri: "https://threejs.org/examples/models/gltf/LittlestTokyo.glb",
+        };
+        const placeSpy = jest.spyOn(mockScene, 'GetSceneObject').mockReturnValue({
+            DropIt: jest.fn(),
+        } as unknown as Object3D);
+
+        const successPlace = testCom.PerformAction('DROP_IT', payload);
+        expect(successPlace).toBe(false);
+        expect(placeSpy).toHaveBeenCalledTimes(0);
+    });
+
     it('should perform action PLACE_ON_FLOOR with existing model', () => {
         const payload = {
             entityType: "model",
@@ -469,13 +510,10 @@ describe('dive/communication/DIVECommunication', () => {
         } as COMPov;
         testCom.PerformAction('ADD_OBJECT', mock1);
 
-        let map = new Map([['test0', mock0], ['test1', mock1]]);
-
-        const successWithoutIds = testCom.PerformAction('GET_OBJECTS', { map });
-        expect(successWithoutIds).toStrictEqual(map);
+        const successWithoutIds = testCom.PerformAction('GET_OBJECTS', { ids: [] });
+        expect(Array.from(successWithoutIds.values())).toStrictEqual([]);
 
-        map = new Map();
-        const successWithIds = testCom.PerformAction('GET_OBJECTS', { map, ids: ['test1'] });
+        const successWithIds = testCom.PerformAction('GET_OBJECTS', { ids: ['test1'] });
         expect(Array.from(successWithIds.values())).toStrictEqual([{ entityType: "pov", id: "test1", position: { x: 0, y: 0, z: 0 }, target: { x: 0, y: 0, z: 0 } }]);
     });
 

package/src/com/actions/index.ts

@@ -17,6 +17,7 @@ import GENERATE_MEDIA from "./media/generatemedia.ts";
 import GET_ALL_SCENE_DATA from "./scene/getallscenedata.ts";
 import SELECT_OBJECT from "./object/selectobject.ts";
 import GET_CAMERA_TRANSFORM from "./camera/getcameratransform.ts";
+import DROP_IT from "./object/model/dropit.ts";
 
 export type Actions = {
     GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA,
@@ -27,6 +28,7 @@ export type Actions = {
     DELETE_OBJECT: DELETE_OBJECT,
     SELECT_OBJECT: SELECT_OBJECT,
     SET_BACKGROUND: SET_BACKGROUND,
+    DROP_IT: DROP_IT,
     PLACE_ON_FLOOR: PLACE_ON_FLOOR,
     SET_CAMERA_TRANSFORM: SET_CAMERA_TRANSFORM,
     GET_CAMERA_TRANSFORM: GET_CAMERA_TRANSFORM,

package/src/com/actions/object/getobjects.ts

@@ -1,6 +1,6 @@
 import { COMEntity } from "../../types.ts";
 
 export default interface GET_OBJECTS {
-    'PAYLOAD': { map: Map<string, COMEntity>, ids?: string[] },
-    'RETURN': Map<string, COMEntity>,
+    'PAYLOAD': { ids: string[] },
+    'RETURN': COMEntity[],
 };

package/src/com/actions/object/model/dropit.ts

@@ -0,0 +1,4 @@
+export default interface DROP_IT {
+    'PAYLOAD': { id: string },
+    'RETURN': boolean,
+};

package/src/dive.ts

@@ -163,6 +163,13 @@ export default class DIVE {
 
         // whene everything is done, start the renderer
         this.renderer.StartRenderer(this.scene, this.perspectiveCamera);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).DIVE = {
+            PrintScene: () => {
+                console.log(this.scene);
+            },
+        }
     }
 
     // methods

package/src/gizmo/Gizmo.ts

@@ -0,0 +1,130 @@
+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 DIVEGizmoAxis = 'x' | 'y' | 'z';
+
+export class DIVEGizmo extends Object3D {
+    private _mode: DIVEGizmoMode;
+    public get mode(): DIVEGizmoMode {
+        return this._mode;
+    }
+    public set mode(value: DIVEGizmoMode) {
+        this._mode = value;
+        this.assemble();
+    }
+
+    private _gizmoNode: Object3D;
+    public get gizmoNode(): Object3D {
+        return this._gizmoNode;
+    }
+    private _translateGizmo: DIVETranslateGizmo;
+    private _rotateGizmo: DIVERotateGizmo;
+    private _scaleGizmo: DIVEScaleGizmo;
+
+    private _gizmoPlane: DIVEGizmoPlane;
+    public get gizmoPlane(): DIVEGizmoPlane {
+        return this._gizmoPlane;
+    }
+
+    // attachment stuff
+    private _object: (Object3D & DIVESelectable) | null;
+    public get object(): (Object3D & DIVESelectable) | null {
+        return this._object;
+    }
+
+    constructor(controller: DIVEOrbitControls) {
+        super();
+        this.name = "DIVEGizmo";
+
+        controller.addEventListener('change', () => {
+            const size = controller.getDistance() / 2.5;
+            this.scale.set(size, size, size);
+        });
+
+        this._mode = 'translate';
+
+        this._gizmoNode = new Object3D();
+        this.add(this._gizmoNode);
+
+        this._translateGizmo = new DIVETranslateGizmo(controller);
+        this._rotateGizmo = new DIVERotateGizmo(controller);
+        this._scaleGizmo = new DIVEScaleGizmo(controller);
+
+        this._gizmoPlane = new DIVEGizmoPlane();
+        this._gizmoPlane.visible = false;
+
+        this._object = null;
+    }
+
+    public attach(object: (Object3D & DIVESelectable)): this {
+        this._object = object;
+        this.assemble();
+        return this;
+    }
+
+    public detach(): this {
+        this._object = null;
+        this.assemble();
+        return this;
+    }
+
+    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 {
+        if (this.object === null) return;
+
+        if (position) {
+            this.position.copy(position);
+            this.object.position.copy(position);
+        }
+
+        if (rotation) {
+            this.object.rotation.copy(rotation);
+        }
+
+        if (scale) {
+            this.object.scale.copy(scale);
+            this._scaleGizmo.update(scale);
+        }
+    }
+
+    private assemble(): void {
+        // clear all children
+        this._gizmoNode.clear();
+        this._gizmoPlane.clear();
+
+        // reset all gizmos
+        this._translateGizmo.reset();
+        this._rotateGizmo.reset();
+        this._scaleGizmo.reset();
+
+        // check for object
+        if (this.object === null) return;
+
+        // add gizmos
+        if (this._mode === 'translate') {
+            this._gizmoNode.add(this._translateGizmo);
+        }
+
+        if (this._mode === 'rotate') {
+            this._gizmoNode.add(this._rotateGizmo);
+        }
+
+        if (this._mode === 'scale') {
+            this._gizmoNode.add(this._scaleGizmo);
+        }
+
+        // add plane for raycasting properly while dragging
+        this.add(this._gizmoPlane);
+    }
+}

package/src/gizmo/handles/AxisHandle.ts

@@ -0,0 +1,124 @@
+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;
+
+    public parent: DIVETranslateGizmo | null = null;
+
+    public axis: 'x' | 'y' | 'z';
+
+    private _color: Color = new Color(0xff00ff);
+    private _colorHover: Color;
+    private _hovered: boolean;
+    private _highlight: boolean;
+    public get highlight(): boolean {
+        return this._highlight;
+    }
+    public set highlight(highlight: boolean) {
+        this._highlight = highlight;
+        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();
+    }
+
+    public get rightVector(): Vector3 {
+        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get upVector(): Vector3 {
+        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    constructor(axis: 'x' | 'y' | 'z', length: number, direction: Vector3, color: ColorRepresentation) {
+        super();
+
+        this.name = "DIVEAxisHandle";
+        this.axis = axis;
+
+        this._color.set(color);
+        this._colorHover = this._color.clone().multiplyScalar(2);
+
+        this._highlight = false;
+        this._hovered = false;
+
+        // create line
+        const lineGeo = new CylinderGeometry(0.01, 0.01, length, 13);
+        this._lineMaterial = new MeshBasicMaterial({
+            color: color,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const lineMesh = new Mesh(lineGeo, this._lineMaterial);
+        lineMesh.layers.mask = UI_LAYER_MASK;
+        lineMesh.renderOrder = Infinity;
+        lineMesh.rotateX(Math.PI / 2);
+        lineMesh.translateY(length / 2);
+        this.add(lineMesh);
+
+        // create collider
+        const collider = new CylinderGeometry(0.1, 0.1, length, 3);
+        const colliderMaterial = new MeshBasicMaterial({
+            color: 0xff00ff,
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const colliderMesh = new Mesh(collider, colliderMaterial);
+        colliderMesh.visible = false;
+        colliderMesh.layers.mask = UI_LAYER_MASK;
+        colliderMesh.renderOrder = Infinity;
+        colliderMesh.rotateX(Math.PI / 2);
+        colliderMesh.translateY(length / 2);
+        this.add(colliderMesh);
+
+        this.rotateX(direction.y * -Math.PI / 2);
+        this.rotateY(direction.x * Math.PI / 2);
+    }
+
+    public reset(): void {
+        this._lineMaterial.color = this._color;
+    }
+
+    public onPointerEnter(): void {
+        this._hovered = true;
+        if (this.parent) {
+            this.parent.onHandleHover(this, true);
+        }
+    }
+
+    public onPointerLeave(): void {
+        this._hovered = false;
+        if (this.parent) {
+            this.parent.onHandleHover(this, false);
+        }
+    }
+
+    public onDragStart(): void {
+        if (this.parent) {
+            this.parent.onHandleDragStart(this);
+        }
+    }
+
+    public onDrag(e: DraggableEvent): void {
+        if (this.parent) {
+            this.parent.onHandleDrag(this, e);
+        }
+    }
+
+    public onDragEnd(): void {
+        if (this.parent) {
+            this.parent.onHandleDragEnd(this);
+        }
+    }
+}

package/src/gizmo/handles/RadialHandle.ts

@@ -0,0 +1,119 @@
+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;
+
+    public parent: DIVERotateGizmo | null = null;
+
+    public axis: 'x' | 'y' | 'z';
+
+    private _color: Color = new Color(0xff00ff);
+    private _colorHover: Color;
+    private _hovered: boolean;
+    private _highlight: boolean;
+    public get highlight(): boolean {
+        return this._highlight;
+    }
+    public set highlight(highlight: boolean) {
+        this._highlight = highlight;
+        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();
+    }
+
+    public get rightVector(): Vector3 {
+        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get upVector(): Vector3 {
+        return new Vector3(0, 1, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    constructor(axis: 'x' | 'y' | 'z', radius: number, arc: number, direction: Vector3, color: ColorRepresentation) {
+        super();
+
+        this.name = "DIVERadialHandle";
+        this.axis = axis;
+
+        this._color.set(color);
+        this._colorHover = this._color.clone().multiplyScalar(2);
+        this._hovered = false;
+        this._highlight = false;
+
+        // create line
+        const lineGeo = new TorusGeometry(radius, 0.01, 13, 48, arc);
+        this._lineMaterial = new MeshBasicMaterial({
+            color: color,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const lineMesh = new Mesh(lineGeo, this._lineMaterial);
+        lineMesh.layers.mask = UI_LAYER_MASK;
+        lineMesh.renderOrder = Infinity;
+        this.add(lineMesh);
+
+        // create collider
+        const collider = new TorusGeometry(radius, 0.1, 3, 48, arc);
+        const colliderMaterial = new MeshBasicMaterial({
+            color: 0xff00ff,
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const colliderMesh = new Mesh(collider, colliderMaterial);
+        colliderMesh.visible = false;
+        colliderMesh.layers.mask = UI_LAYER_MASK;
+        colliderMesh.renderOrder = Infinity;
+
+        this.add(colliderMesh);
+
+        this.lookAt(direction);
+    }
+
+    public reset(): void {
+        this._lineMaterial.color = this._color;
+    }
+
+    public onPointerEnter(): void {
+        this._hovered = true;
+        if (this.parent) {
+            this.parent.onHandleHover(this, true);
+        }
+    }
+
+    public onPointerLeave(): void {
+        this._hovered = false;
+        if (this.parent) {
+            this.parent.onHandleHover(this, false);
+        }
+    }
+
+    public onDragStart(): void {
+        if (this.parent) {
+            this.parent.onHandleDragStart(this);
+        }
+    }
+
+    public onDrag(e: DraggableEvent): void {
+        if (this.parent) {
+            this.parent.onHandleDrag(this, e);
+        }
+    }
+
+    public onDragEnd(): void {
+        if (this.parent) {
+            this.parent.onHandleDragEnd(this);
+        }
+    }
+}

package/src/gizmo/handles/ScaleHandle.ts

@@ -0,0 +1,152 @@
+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;
+
+    public parent: DIVEScaleGizmo | null = null;
+
+    public axis: 'x' | 'y' | 'z';
+
+    private _color: Color = new Color(0xff00ff);
+    private _colorHover: Color;
+    private _hovered: boolean;
+    private _highlight: boolean;
+    public get highlight(): boolean {
+        return this._highlight;
+    }
+    public set highlight(highlight: boolean) {
+        this._highlight = highlight;
+        this._lineMaterial.color = this._highlight || this._hovered ? this._colorHover : this._color;
+    }
+
+    private _lineMaterial: MeshBasicMaterial;
+
+    private _box: Mesh;
+    private _boxSize: number;
+
+    public get forwardVector(): Vector3 {
+        return new Vector3(0, 0, 1).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get rightVector(): Vector3 {
+        return new Vector3(1, 0, 0).applyQuaternion(this.quaternion).normalize();
+    }
+
+    public get upVector(): Vector3 {
+        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) {
+        super();
+
+        this.name = "DIVEScaleHandle";
+        this.axis = axis;
+
+        this._color.set(color);
+        this._colorHover = this._color.clone().multiplyScalar(2);
+        this._hovered = false;
+        this._highlight = false;
+
+        this._boxSize = boxSize;
+
+        // create line
+        const lineGeo = new CylinderGeometry(0.01, 0.01, length - boxSize / 2, 13);
+        this._lineMaterial = new MeshBasicMaterial({
+            color: color,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const lineMesh = new Mesh(lineGeo, this._lineMaterial);
+        lineMesh.layers.mask = UI_LAYER_MASK;
+        lineMesh.renderOrder = Infinity;
+        lineMesh.rotateX(Math.PI / 2);
+        lineMesh.translateY(length / 2 - boxSize / 4);
+        this.add(lineMesh);
+
+        // create box
+        this._box = new Mesh(
+            new BoxGeometry(boxSize, boxSize, boxSize),
+            this._lineMaterial,
+        );
+        this._box.layers.mask = UI_LAYER_MASK;
+        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.add(this._box);
+
+        // create collider
+        const collider = new CylinderGeometry(0.1, 0.1, length + boxSize / 2, 3);
+        const colliderMaterial = new MeshBasicMaterial({
+            color: 0xff00ff,
+            transparent: true,
+            opacity: 0.15,
+            depthTest: false,
+            depthWrite: false,
+        });
+        const colliderMesh = new Mesh(collider, colliderMaterial);
+        colliderMesh.visible = false;
+        colliderMesh.layers.mask = UI_LAYER_MASK;
+        colliderMesh.renderOrder = Infinity;
+        colliderMesh.rotateX(Math.PI / 2);
+        colliderMesh.translateY(length / 2);
+        this.add(colliderMesh);
+
+        this.rotateX(direction.y * -Math.PI / 2);
+        this.rotateY(direction.x * Math.PI / 2);
+    }
+
+    public reset(): void {
+        this._lineMaterial.color = this._color;
+    }
+
+    public update(scale: Vector3): void {
+        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
+                )
+        );
+    }
+
+    public onPointerEnter(): void {
+        this._hovered = true;
+        if (this.parent) {
+            this.parent.onHoverAxis(this, true);
+        }
+    }
+
+    public onPointerLeave(): void {
+        this._hovered = false;
+        if (this.parent) {
+            this.parent.onHoverAxis(this, false);
+        }
+    }
+
+    public onDragStart(): void {
+        if (this.parent) {
+            this.parent.onAxisDragStart(this);
+        }
+    }
+
+    public onDrag(e: DraggableEvent): void {
+        if (this.parent) {
+            this.parent.onAxisDrag(this, e);
+        }
+    }
+
+    public onDragEnd(): void {
+        if (this.parent) {
+            this.parent.onAxisDragEnd(this);
+        }
+    }
+}