Provide fallback cursor method

Some browsers don't support custom cursors, and there are cases
where the browsers refuse to show the cursor. Handle both of these
cases by letting the browser render the cursor via a floating
canvas.

This allows us to support a local cursor at all times.

2 files changed, 166 insertions, 9 deletions

diff --git a/core/rfb.js b/core/rfb.js
index 741bf18..66db1a0 100644
--- a/core/rfb.js
+++ b/core/rfb.js
@@ -12,7 +12,6 @@
 
 import * as Log from './util/logging.js';
 import { decodeUTF8 } from './util/strings.js';
-import { supportsCursorURIs, isTouchDevice } from './util/browser.js';
 import EventTargetMixin from './util/eventtarget.js';
 import Display from "./display.js";
 import Keyboard from "./input/keyboard.js";
@@ -1277,8 +1276,7 @@ RFB.prototype = {
         encs.push(encodings.pseudoEncodingFence);
         encs.push(encodings.pseudoEncodingContinuousUpdates);
 
-        if (supportsCursorURIs() &&
-            !isTouchDevice && this._fb_depth == 24) {
+        if (this._fb_depth == 24) {
             encs.push(encodings.pseudoEncodingCursor);
         }
 
diff --git a/core/util/cursor.js b/core/util/cursor.js
index b7dcd5f..da72723 100644
--- a/core/util/cursor.js
+++ b/core/util/cursor.js
@@ -4,8 +4,36 @@
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
+import { supportsCursorURIs, isTouchDevice } from './browser.js';
+
+const useFallback = !supportsCursorURIs() || isTouchDevice;
+
 function Cursor(container) {
     this._target = null;
+
+    this._canvas = document.createElement('canvas');
+
+    if (useFallback) {
+        this._canvas.style.position = 'fixed';
+        this._canvas.style.zIndex = '65535';
+        this._canvas.style.pointerEvents = 'none';
+        // Can't use "display" because of Firefox bug #1445997
+        this._canvas.style.visibility = 'hidden';
+        document.body.appendChild(this._canvas);
+    }
+
+    this._position = { x: 0, y: 0 };
+    this._hotSpot = { x: 0, y: 0 };
+
+    this._eventHandlers = {
+        'mouseover': this._handleMouseOver.bind(this),
+        'mouseleave': this._handleMouseLeave.bind(this),
+        'mousemove': this._handleMouseMove.bind(this),
+        'mouseup': this._handleMouseUp.bind(this),
+        'touchstart': this._handleTouchStart.bind(this),
+        'touchmove': this._handleTouchMove.bind(this),
+        'touchend': this._handleTouchEnd.bind(this),
+    };
 }
 
 Cursor.prototype = {
@@ -16,10 +44,38 @@ Cursor.prototype = {
 
         this._target = target;
 
+        if (useFallback) {
+            // FIXME: These don't fire properly except for mouse
+            ///       movement in IE. We want to also capture element
+            //        movement, size changes, visibility, etc.
+            const options = { capture: true, passive: true };
+            this._target.addEventListener('mouseover', this._eventHandlers.mouseover, options);
+            this._target.addEventListener('mouseleave', this._eventHandlers.mouseleave, options);
+            this._target.addEventListener('mousemove', this._eventHandlers.mousemove, options);
+            this._target.addEventListener('mouseup', this._eventHandlers.mouseup, options);
+
+            // There is no "touchleave" so we monitor touchstart globally
+            window.addEventListener('touchstart', this._eventHandlers.touchstart, options);
+            this._target.addEventListener('touchmove', this._eventHandlers.touchmove, options);
+            this._target.addEventListener('touchend', this._eventHandlers.touchend, options);
+        }
+
         this.clear();
     },
 
     detach: function () {
+        if (useFallback) {
+            const options = { capture: true, passive: true };
+            this._target.removeEventListener('mouseover', this._eventHandlers.mouseover, options);
+            this._target.removeEventListener('mouseleave', this._eventHandlers.mouseleave, options);
+            this._target.removeEventListener('mousemove', this._eventHandlers.mousemove, options);
+            this._target.removeEventListener('mouseup', this._eventHandlers.mouseup, options);
+
+            window.removeEventListener('touchstart', this._eventHandlers.touchstart, options);
+            this._target.removeEventListener('touchmove', this._eventHandlers.touchmove, options);
+            this._target.removeEventListener('touchend', this._eventHandlers.touchend, options);
+        }
+
         this._target = null;
     },
 
@@ -42,11 +98,15 @@ Cursor.prototype = {
             }
         }
 
-        let canvas = document.createElement('canvas');
-        let ctx = canvas.getContext('2d');
+        this._position.x = this._position.x + this._hotSpot.x - hotx;
+        this._position.y = this._position.y + this._hotSpot.y - hoty;
+        this._hotSpot.x = hotx;
+        this._hotSpot.y = hoty;
+
+        let ctx = this._canvas.getContext('2d');
 
-        canvas.width = w;
-        canvas.height = h;
+        this._canvas.width = w;
+        this._canvas.height = h;
 
         let img;
         try {
@@ -59,12 +119,111 @@ Cursor.prototype = {
         ctx.clearRect(0, 0, w, h);
         ctx.putImageData(img, 0, 0);
 
-        let url = this._canvas.toDataURL();
-        this._target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
+        if (useFallback) {
+            this._updatePosition();
+        } else {
+            let url = this._canvas.toDataURL();
+            this._target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
+        }
     },
 
     clear: function () {
         this._target.style.cursor = 'none';
+        this._canvas.width = 0;
+        this._canvas.height = 0;
+        this._position.x = this._position.x + this._hotSpot.x;
+        this._position.y = this._position.y + this._hotSpot.y;
+        this._hotSpot.x = 0;
+        this._hotSpot.y = 0;
+    },
+
+    _handleMouseOver: function (event) {
+        // This event could be because we're entering the target, or
+        // moving around amongst its sub elements. Let the move handler
+        // sort things out.
+        this._handleMouseMove(event);
+    },
+
+    _handleMouseLeave: function (event) {
+        this._hideCursor();
+    },
+
+    _handleMouseMove: function (event) {
+        this._updateVisibility(event.target);
+
+        this._position.x = event.clientX - this._hotSpot.x;
+        this._position.y = event.clientY - this._hotSpot.y;
+
+        this._updatePosition();
+    },
+
+    _handleMouseUp: function (event) {
+        // We might get this event because of a drag operation that
+        // moved outside of the target. Check what's under the cursor
+        // now and adjust visibility based on that.
+        let target = document.elementFromPoint(event.clientX, event.clientY);
+        this._updateVisibility(target);
+    },
+
+    _handleTouchStart: function (event) {
+        // Just as for mouseover, we let the move handler deal with it
+        this._handleTouchMove(event);
+    },
+
+    _handleTouchMove: function (event) {
+        this._updateVisibility(event.target);
+
+        this._position.x = event.changedTouches[0].clientX - this._hotSpot.x;
+        this._position.y = event.changedTouches[0].clientY - this._hotSpot.y;
+
+        this._updatePosition();
+    },
+
+    _handleTouchEnd: function (event) {
+        // Same principle as for mouseup
+        let target = document.elementFromPoint(event.changedTouches[0].clientX,
+                                               event.changedTouches[0].clientY);
+        this._updateVisibility(target);
+    },
+
+    _showCursor: function () {
+        if (this._canvas.style.visibility === 'hidden')
+            this._canvas.style.visibility = '';
+    },
+
+    _hideCursor: function () {
+        if (this._canvas.style.visibility !== 'hidden')
+            this._canvas.style.visibility = 'hidden';
+    },
+
+    // Should we currently display the cursor?
+    // (i.e. are we over the target, or a child of the target without a
+    // different cursor set)
+    _shouldShowCursor: function (target) {
+        // Easy case
+        if (target === this._target)
+            return true;
+        // Other part of the DOM?
+        if (!this._target.contains(target))
+            return false;
+        // Has the child its own cursor?
+        // FIXME: How can we tell that a sub element has an
+        //        explicit "cursor: none;"?
+        if (window.getComputedStyle(target).cursor !== 'none')
+            return false;
+        return true;
+    },
+
+    _updateVisibility: function (target) {
+        if (this._shouldShowCursor(target))
+            this._showCursor();
+        else
+            this._hideCursor();
+    },
+
+    _updatePosition: function () {
+        this._canvas.style.left = this._position.x + "px";
+        this._canvas.style.top = this._position.y + "px";
     },
 };