core/util/cursor.js

   1 /*
   2  * noVNC: HTML5 VNC client
   3  * Copyright (C) 2019 The noVNC Authors
   4  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
   5  */
   6
   7 import { supportsCursorURIs, isTouchDevice } from './browser.js';
   8
   9 const useFallback = !supportsCursorURIs || isTouchDevice;
  10
  11 export default class Cursor {
  12     constructor() {
  13         this._target = null;
  14
  15         this._canvas = document.createElement('canvas');
  16
  17         if (useFallback) {
  18             this._canvas.style.position = 'fixed';
  19             this._canvas.style.zIndex = '65535';
  20             this._canvas.style.pointerEvents = 'none';
  21             // Can't use "display" because of Firefox bug #1445997
  22             this._canvas.style.visibility = 'hidden';
  23             document.body.appendChild(this._canvas);
  24         }
  25
  26         this._position = { x: 0, y: 0 };
  27         this._hotSpot = { x: 0, y: 0 };
  28
  29         this._eventHandlers = {
  30             'mouseover': this._handleMouseOver.bind(this),
  31             'mouseleave': this._handleMouseLeave.bind(this),
  32             'mousemove': this._handleMouseMove.bind(this),
  33             'mouseup': this._handleMouseUp.bind(this),
  34             'touchstart': this._handleTouchStart.bind(this),
  35             'touchmove': this._handleTouchMove.bind(this),
  36             'touchend': this._handleTouchEnd.bind(this),
  37         };
  38     }
  39
  40     attach(target) {
  41         if (this._target) {
  42             this.detach();
  43         }
  44
  45         this._target = target;
  46
  47         if (useFallback) {
  48             // FIXME: These don't fire properly except for mouse
  49             ///       movement in IE. We want to also capture element
  50             //        movement, size changes, visibility, etc.
  51             const options = { capture: true, passive: true };
  52             this._target.addEventListener('mouseover', this._eventHandlers.mouseover, options);
  53             this._target.addEventListener('mouseleave', this._eventHandlers.mouseleave, options);
  54             this._target.addEventListener('mousemove', this._eventHandlers.mousemove, options);
  55             this._target.addEventListener('mouseup', this._eventHandlers.mouseup, options);
  56
  57             // There is no "touchleave" so we monitor touchstart globally
  58             window.addEventListener('touchstart', this._eventHandlers.touchstart, options);
  59             this._target.addEventListener('touchmove', this._eventHandlers.touchmove, options);
  60             this._target.addEventListener('touchend', this._eventHandlers.touchend, options);
  61         }
  62
  63         this.clear();
  64     }
  65
  66     detach() {
  67         if (!this._target) {
  68             return;
  69         }
  70
  71         if (useFallback) {
  72             const options = { capture: true, passive: true };
  73             this._target.removeEventListener('mouseover', this._eventHandlers.mouseover, options);
  74             this._target.removeEventListener('mouseleave', this._eventHandlers.mouseleave, options);
  75             this._target.removeEventListener('mousemove', this._eventHandlers.mousemove, options);
  76             this._target.removeEventListener('mouseup', this._eventHandlers.mouseup, options);
  77
  78             window.removeEventListener('touchstart', this._eventHandlers.touchstart, options);
  79             this._target.removeEventListener('touchmove', this._eventHandlers.touchmove, options);
  80             this._target.removeEventListener('touchend', this._eventHandlers.touchend, options);
  81         }
  82
  83         this._target = null;
  84     }
  85
  86     change(rgba, hotx, hoty, w, h) {
  87         if ((w === 0) || (h === 0)) {
  88             this.clear();
  89             return;
  90         }
  91
  92         this._position.x = this._position.x + this._hotSpot.x - hotx;
  93         this._position.y = this._position.y + this._hotSpot.y - hoty;
  94         this._hotSpot.x = hotx;
  95         this._hotSpot.y = hoty;
  96
  97         let ctx = this._canvas.getContext('2d');
  98
  99         this._canvas.width = w;
 100         this._canvas.height = h;
 101
 102         let img;
 103         try {
 104             // IE doesn't support this
 105             img = new ImageData(new Uint8ClampedArray(rgba), w, h);
 106         } catch (ex) {
 107             img = ctx.createImageData(w, h);
 108             img.data.set(new Uint8ClampedArray(rgba));
 109         }
 110         ctx.clearRect(0, 0, w, h);
 111         ctx.putImageData(img, 0, 0);
 112
 113         if (useFallback) {
 114             this._updatePosition();
 115         } else {
 116             let url = this._canvas.toDataURL();
 117             this._target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
 118         }
 119     }
 120
 121     clear() {
 122         this._target.style.cursor = 'none';
 123         this._canvas.width = 0;
 124         this._canvas.height = 0;
 125         this._position.x = this._position.x + this._hotSpot.x;
 126         this._position.y = this._position.y + this._hotSpot.y;
 127         this._hotSpot.x = 0;
 128         this._hotSpot.y = 0;
 129     }
 130
 131     _handleMouseOver(event) {
 132         // This event could be because we're entering the target, or
 133         // moving around amongst its sub elements. Let the move handler
 134         // sort things out.
 135         this._handleMouseMove(event);
 136     }
 137
 138     _handleMouseLeave(event) {
 139         // Check if we should show the cursor on the element we are leaving to
 140         this._updateVisibility(event.relatedTarget);
 141     }
 142
 143     _handleMouseMove(event) {
 144         this._updateVisibility(event.target);
 145
 146         this._position.x = event.clientX - this._hotSpot.x;
 147         this._position.y = event.clientY - this._hotSpot.y;
 148
 149         this._updatePosition();
 150     }
 151
 152     _handleMouseUp(event) {
 153         // We might get this event because of a drag operation that
 154         // moved outside of the target. Check what's under the cursor
 155         // now and adjust visibility based on that.
 156         let target = document.elementFromPoint(event.clientX, event.clientY);
 157         this._updateVisibility(target);
 158
 159         // Captures end with a mouseup but we can't know the event order of
 160         // mouseup vs releaseCapture.
 161         //
 162         // In the cases when releaseCapture comes first, the code above is
 163         // enough.
 164         //
 165         // In the cases when the mouseup comes first, we need wait for the
 166         // browser to flush all events and then check again if the cursor
 167         // should be visible.
 168         if (this._captureIsActive()) {
 169             window.setTimeout(() => {
 170                 // Refresh the target from elementFromPoint since queued events
 171                 // might have altered the DOM
 172                 target = document.elementFromPoint(event.clientX,
 173                                                    event.clientY);
 174                 this._updateVisibility(target);
 175             }, 0);
 176         }
 177     }
 178
 179     _handleTouchStart(event) {
 180         // Just as for mouseover, we let the move handler deal with it
 181         this._handleTouchMove(event);
 182     }
 183
 184     _handleTouchMove(event) {
 185         this._updateVisibility(event.target);
 186
 187         this._position.x = event.changedTouches[0].clientX - this._hotSpot.x;
 188         this._position.y = event.changedTouches[0].clientY - this._hotSpot.y;
 189
 190         this._updatePosition();
 191     }
 192
 193     _handleTouchEnd(event) {
 194         // Same principle as for mouseup
 195         let target = document.elementFromPoint(event.changedTouches[0].clientX,
 196                                                event.changedTouches[0].clientY);
 197         this._updateVisibility(target);
 198     }
 199
 200     _showCursor() {
 201         if (this._canvas.style.visibility === 'hidden') {
 202             this._canvas.style.visibility = '';
 203         }
 204     }
 205
 206     _hideCursor() {
 207         if (this._canvas.style.visibility !== 'hidden') {
 208             this._canvas.style.visibility = 'hidden';
 209         }
 210     }
 211
 212     // Should we currently display the cursor?
 213     // (i.e. are we over the target, or a child of the target without a
 214     // different cursor set)
 215     _shouldShowCursor(target) {
 216         if (!target) {
 217             return false;
 218         }
 219         // Easy case
 220         if (target === this._target) {
 221             return true;
 222         }
 223         // Other part of the DOM?
 224         if (!this._target.contains(target)) {
 225             return false;
 226         }
 227         // Has the child its own cursor?
 228         // FIXME: How can we tell that a sub element has an
 229         //        explicit "cursor: none;"?
 230         if (window.getComputedStyle(target).cursor !== 'none') {
 231             return false;
 232         }
 233         return true;
 234     }
 235
 236     _updateVisibility(target) {
 237         // When the cursor target has capture we want to show the cursor.
 238         // So, if a capture is active - look at the captured element instead.
 239         if (this._captureIsActive()) {
 240             target = document.captureElement;
 241         }
 242         if (this._shouldShowCursor(target)) {
 243             this._showCursor();
 244         } else {
 245             this._hideCursor();
 246         }
 247     }
 248
 249     _updatePosition() {
 250         this._canvas.style.left = this._position.x + "px";
 251         this._canvas.style.top = this._position.y + "px";
 252     }
 253
 254     _captureIsActive() {
 255         return document.captureElement &&
 256             document.documentElement.contains(document.captureElement);
 257     }
 258 }