Implement custom cursors for camera movement

xeokit · Nov 11, 2024 · 9933a51 · 9933a51
1 parent d9541dc
commit 9933a51
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 13 deletions.
diff --git a/src/viewer/scene/CameraControl/CameraControl.js b/src/viewer/scene/CameraControl/CameraControl.js
@@ -820,6 +820,13 @@ class CameraControl extends Component {
             new KeyboardPanRotateDollyHandler(this.scene, this._controllers, this._configs, this._states, this._updates)
         ];
 
+        this._cursors = {
+            dollyForward: "zoom-in",
+            dollyBackward: "zoom-out",
+            rotate: 'grabbing',
+            pan: 'move',
+        }
+
         // Applies scheduled updates to the Camera on each Scene "tick" event
 
         this._cameraUpdater = new CameraUpdater(this.scene, this._controllers, this._configs, this._states, this._updates);
@@ -1181,6 +1188,37 @@ class CameraControl extends Component {
         this._configs.pointerEnabled = !!value;
     }
 
+    /**
+     * Sets the cursor to be used when a particular action is being performed.
+     *
+     * Accepted actions are:
+     * 
+     * * "dollyForward" - when the camera is dollying in the forward direction
+     * * "dollyBackward" - when the camera is dollying in the backward direction
+     * * "pan" - when the camera is being panned
+     * * "rotate" - when the camera is being rotated
+     *
+     * @param {String} action
+     * @param {String} style
+     */
+    setCursorStyle(action, style) {
+        if (Object.prototype.hasOwnProperty.call(this._cursors, action)) {
+            this._cursors = { ...this._cursors, [action]: style };
+        }
+        else
+            console.warn(`Action '${action}' is not valid for cursor styles.`);
+    }
+
+    /**
+     * Gets the current style for a particular action.
+     *
+     * @param {String} action To get the style for
+     * @returns {String} style set on the cursor for action
+     */
+    getCursorStyle(action) {
+        return this._cursors[action] || null;
+    }
+
     _reset() {
         for (let i = 0, len = this._handlers.length; i < len; i++) {
             const handler = this._handlers[i];

diff --git a/src/viewer/scene/CameraControl/lib/CameraUpdater.js b/src/viewer/scene/CameraControl/lib/CameraUpdater.js
@@ -18,6 +18,7 @@ class CameraUpdater {
         const pickController = controllers.pickController;
         const pivotController = controllers.pivotController;
         const panController = controllers.panController;
+        const cameraControl = controllers.cameraControl;
 
         let countDown = SCALE_DOLLY_EACH_FRAME; // Decrements on each tick
         let dollyDistFactor = 1.0; // Calculated when countDown is zero
@@ -142,7 +143,7 @@ class CameraUpdater {
                 updates.rotateDeltaX *= configs.rotationInertia;
                 updates.rotateDeltaY *= configs.rotationInertia;
 
-                cursorType = "grabbing";
+                cursorType = cameraControl._cursors.rotate;
             }
 
             //----------------------------------------------------------------------------------------------------------
@@ -208,7 +209,7 @@ class CameraUpdater {
                     camera.pan(vec);
                 }
 
-                cursorType = "grabbing";
+                cursorType = cameraControl._cursors.pan;
             }
 
             updates.panDeltaX *= configs.panInertia;
@@ -222,9 +223,9 @@ class CameraUpdater {
             if (dollyDeltaForDist !== 0) {
 
                 if (dollyDeltaForDist < 0) {
-                    cursorType = "zoom-in";
+                    cursorType = cameraControl._cursors.dollyForward;
                 } else {
-                    cursorType = "zoom-out";
+                    cursorType = cameraControl._cursors.dollyBackward;
                 }
 
                 if (configs.firstPerson) {

diff --git a/src/viewer/scene/CameraControl/lib/handlers/KeyboardPanRotateDollyHandler.js b/src/viewer/scene/CameraControl/lib/handlers/KeyboardPanRotateDollyHandler.js
@@ -26,10 +26,6 @@ class KeyboardPanRotateDollyHandler {
                 return;
             }
             keyDownMap[keyCode] = true;
-
-            if (keyCode === input.KEY_SHIFT) {
-                canvas.style.cursor = "move";
-            }
         });
 
         this._onSceneKeyUp = input.on("keyup", (keyCode) => {
@@ -38,10 +34,6 @@ class KeyboardPanRotateDollyHandler {
             }
             keyDownMap[keyCode] = false;
 
-            if (keyCode === input.KEY_SHIFT) {
-                canvas.style.cursor = null;
-            }
-
             if (controllers.pivotController.getPivoting()) {
                 controllers.pivotController.endPivot()
             }

diff --git a/src/viewer/scene/CameraControl/lib/handlers/MousePanRotateDollyHandler.js b/src/viewer/scene/CameraControl/lib/handlers/MousePanRotateDollyHandler.js
@@ -78,7 +78,6 @@ class MousePanRotateDollyHandler {
         });
 
         function setMousedownState(pick = true) {
-            canvas.style.cursor = "move";
             setMousedownPositions();
             if (pick) {
                 setMousedownPick();

diff --git a/types/viewer/scene/CameraControl/CameraControl.d.ts b/types/viewer/scene/CameraControl/CameraControl.d.ts
@@ -526,6 +526,29 @@ export declare class CameraControl extends Component {
    */
   get pointerEnabled(): boolean;
 
+  /**
+   * Sets the cursor to be used when a particular action is being performed.
+   *
+   * Accepted actions are:
+   * 
+   * * "dollyForward" - when the camera is dollying in the forward direction
+   * * "dollyBackward" - when the camera is dollying in the backward direction
+   * * "pan" - when the camera is being panned
+   * * "rotate" - when the camera is being rotated
+   *
+   * @param {String} action
+   * @param {String} style
+   */
+  setCursorStyle(action: string, style: string): void;
+
+  /**
+     * Gets the current style for a particular action.
+     *
+     * @param {String} action To get the style for
+     * @returns {String} style set on the cursor for action
+     */
+  getCursorStyle(action: string): string | null;
+
   /**
    * Sets how much the {@link Camera} dollys each second with keyboard input.
    *