@novnc/novnc 1.0.0 → 1.2.0

package/core/util/browser.js

@@ -1,15 +1,17 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
+ *
+ * Browser feature support detection
  */
 
 import * as Log from './logging.js';
 
 // Touch detection
-export var isTouchDevice = ('ontouchstart' in document.documentElement) ||
+export let isTouchDevice = ('ontouchstart' in document.documentElement) ||
                                  // requried for Chrome debugger
                                  (document.ontouchstart !== undefined) ||
                                  // required for MS Surface
@@ -20,40 +22,72 @@ window.addEventListener('touchstart', function onFirstTouch() {
     window.removeEventListener('touchstart', onFirstTouch, false);
 }, false);
 
-var _cursor_uris_supported = null;
-
-export function supportsCursorURIs () {
-    if (_cursor_uris_supported === null) {
-        try {
-            var target = document.createElement('canvas');
-            target.style.cursor = 'url("data:image/x-icon;base64,AAACAAEACAgAAAIAAgA4AQAAFgAAACgAAAAIAAAAEAAAAAEAIAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAA==") 2 2, default';
-
-            if (target.style.cursor) {
-                Log.Info("Data URI scheme cursor supported");
-                _cursor_uris_supported = true;
-            } else {
-                Log.Warn("Data URI scheme cursor not supported");
-                _cursor_uris_supported = false;
-            }
-        } catch (exc) {
-            Log.Error("Data URI scheme cursor test exception: " + exc);
-            _cursor_uris_supported = false;
-        }
+
+// The goal is to find a certain physical width, the devicePixelRatio
+// brings us a bit closer but is not optimal.
+export let dragThreshold = 10 * (window.devicePixelRatio || 1);
+
+let _supportsCursorURIs = false;
+
+try {
+    const target = document.createElement('canvas');
+    target.style.cursor = 'url("data:image/x-icon;base64,AAACAAEACAgAAAIAAgA4AQAAFgAAACgAAAAIAAAAEAAAAAEAIAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAA==") 2 2, default';
+
+    if (target.style.cursor.indexOf("url") === 0) {
+        Log.Info("Data URI scheme cursor supported");
+        _supportsCursorURIs = true;
+    } else {
+        Log.Warn("Data URI scheme cursor not supported");
     }
+} catch (exc) {
+    Log.Error("Data URI scheme cursor test exception: " + exc);
+}
 
-    return _cursor_uris_supported;
-};
+export const supportsCursorURIs = _supportsCursorURIs;
 
-export function isMac() {
-    return navigator && !!(/mac/i).exec(navigator.platform);
+let _supportsImageMetadata = false;
+try {
+    new ImageData(new Uint8ClampedArray(4), 1, 1);
+    _supportsImageMetadata = true;
+} catch (ex) {
+    // ignore failure
 }
+export const supportsImageMetadata = _supportsImageMetadata;
 
-export function isIE() {
-    return navigator && !!(/trident/i).exec(navigator.userAgent);
+let _hasScrollbarGutter = true;
+try {
+    // Create invisible container
+    const container = document.createElement('div');
+    container.style.visibility = 'hidden';
+    container.style.overflow = 'scroll'; // forcing scrollbars
+    document.body.appendChild(container);
+
+    // Create a div and place it in the container
+    const child = document.createElement('div');
+    container.appendChild(child);
+
+    // Calculate the difference between the container's full width
+    // and the child's width - the difference is the scrollbars
+    const scrollbarWidth = (container.offsetWidth - child.offsetWidth);
+
+    // Clean up
+    container.parentNode.removeChild(container);
+
+    _hasScrollbarGutter = scrollbarWidth != 0;
+} catch (exc) {
+    Log.Error("Scrollbar test exception: " + exc);
 }
+export const hasScrollbarGutter = _hasScrollbarGutter;
 
-export function isEdge() {
-    return navigator && !!(/edge/i).exec(navigator.userAgent);
+/*
+ * The functions for detection of platforms and browsers below are exported
+ * but the use of these should be minimized as much as possible.
+ *
+ * It's better to use feature detection than platform detection.
+ */
+
+export function isMac() {
+    return navigator && !!(/mac/i).exec(navigator.platform);
 }
 
 export function isWindows() {
@@ -67,3 +101,20 @@ export function isIOS() {
             !!(/ipod/i).exec(navigator.platform));
 }
 
+export function isSafari() {
+    return navigator && (navigator.userAgent.indexOf('Safari') !== -1 &&
+                         navigator.userAgent.indexOf('Chrome') === -1);
+}
+
+export function isIE() {
+    return navigator && !!(/trident/i).exec(navigator.userAgent);
+}
+
+export function isEdge() {
+    return navigator && !!(/edge/i).exec(navigator.userAgent);
+}
+
+export function isFirefox() {
+    return navigator && !!(/firefox/i).exec(navigator.userAgent);
+}
+

package/core/util/cursor.js

@@ -0,0 +1,253 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2019 The noVNC Authors
+ * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
+ */
+
+import { supportsCursorURIs, isTouchDevice } from './browser.js';
+
+const useFallback = !supportsCursorURIs || isTouchDevice;
+
+export default class Cursor {
+    constructor() {
+        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';
+        }
+
+        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),
+        };
+    }
+
+    attach(target) {
+        if (this._target) {
+            this.detach();
+        }
+
+        this._target = target;
+
+        if (useFallback) {
+            document.body.appendChild(this._canvas);
+
+            // 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);
+        }
+
+        this.clear();
+    }
+
+    detach() {
+        if (!this._target) {
+            return;
+        }
+
+        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);
+
+            document.body.removeChild(this._canvas);
+        }
+
+        this._target = null;
+    }
+
+    change(rgba, hotx, hoty, w, h) {
+        if ((w === 0) || (h === 0)) {
+            this.clear();
+            return;
+        }
+
+        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');
+
+        this._canvas.width = w;
+        this._canvas.height = h;
+
+        let img;
+        try {
+            // IE doesn't support this
+            img = new ImageData(new Uint8ClampedArray(rgba), w, h);
+        } catch (ex) {
+            img = ctx.createImageData(w, h);
+            img.data.set(new Uint8ClampedArray(rgba));
+        }
+        ctx.clearRect(0, 0, w, h);
+        ctx.putImageData(img, 0, 0);
+
+        if (useFallback) {
+            this._updatePosition();
+        } else {
+            let url = this._canvas.toDataURL();
+            this._target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
+        }
+    }
+
+    clear() {
+        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;
+    }
+
+    // Mouse events might be emulated, this allows
+    // moving the cursor in such cases
+    move(clientX, clientY) {
+        if (!useFallback) {
+            return;
+        }
+        // clientX/clientY are relative the _visual viewport_,
+        // but our position is relative the _layout viewport_,
+        // so try to compensate when we can
+        if (window.visualViewport) {
+            this._position.x = clientX + window.visualViewport.offsetLeft;
+            this._position.y = clientY + window.visualViewport.offsetTop;
+        } else {
+            this._position.x = clientX;
+            this._position.y = clientY;
+        }
+        this._updatePosition();
+        let target = document.elementFromPoint(clientX, clientY);
+        this._updateVisibility(target);
+    }
+
+    _handleMouseOver(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(event) {
+        // Check if we should show the cursor on the element we are leaving to
+        this._updateVisibility(event.relatedTarget);
+    }
+
+    _handleMouseMove(event) {
+        this._updateVisibility(event.target);
+
+        this._position.x = event.clientX - this._hotSpot.x;
+        this._position.y = event.clientY - this._hotSpot.y;
+
+        this._updatePosition();
+    }
+
+    _handleMouseUp(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);
+
+        // Captures end with a mouseup but we can't know the event order of
+        // mouseup vs releaseCapture.
+        //
+        // In the cases when releaseCapture comes first, the code above is
+        // enough.
+        //
+        // In the cases when the mouseup comes first, we need wait for the
+        // browser to flush all events and then check again if the cursor
+        // should be visible.
+        if (this._captureIsActive()) {
+            window.setTimeout(() => {
+                // We might have detached at this point
+                if (!this._target) {
+                    return;
+                }
+                // Refresh the target from elementFromPoint since queued events
+                // might have altered the DOM
+                target = document.elementFromPoint(event.clientX,
+                                                   event.clientY);
+                this._updateVisibility(target);
+            }, 0);
+        }
+    }
+
+    _showCursor() {
+        if (this._canvas.style.visibility === 'hidden') {
+            this._canvas.style.visibility = '';
+        }
+    }
+
+    _hideCursor() {
+        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(target) {
+        if (!target) {
+            return false;
+        }
+        // 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(target) {
+        // When the cursor target has capture we want to show the cursor.
+        // So, if a capture is active - look at the captured element instead.
+        if (this._captureIsActive()) {
+            target = document.captureElement;
+        }
+        if (this._shouldShowCursor(target)) {
+            this._showCursor();
+        } else {
+            this._hideCursor();
+        }
+    }
+
+    _updatePosition() {
+        this._canvas.style.left = this._position.x + "px";
+        this._canvas.style.top = this._position.y + "px";
+    }
+
+    _captureIsActive() {
+        return document.captureElement &&
+            document.documentElement.contains(document.captureElement);
+    }
+}

package/core/util/element.js

@@ -0,0 +1,32 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2020 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+/*
+ * HTML element utility functions
+ */
+
+export function clientToElement(x, y, elem) {
+    const bounds = elem.getBoundingClientRect();
+    let pos = { x: 0, y: 0 };
+    // Clip to target bounds
+    if (x < bounds.left) {
+        pos.x = 0;
+    } else if (x >= bounds.right) {
+        pos.x = bounds.width - 1;
+    } else {
+        pos.x = x - bounds.left;
+    }
+    if (y < bounds.top) {
+        pos.y = 0;
+    } else if (y >= bounds.bottom) {
+        pos.y = bounds.height - 1;
+    } else {
+        pos.y = y - bounds.top;
+    }
+    return pos;
+}

package/core/util/events.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
+ * Copyright (C) 2018 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -10,27 +10,32 @@
  * Cross-browser event and position routines
  */
 
-export function getPointerEvent (e) {
+export function getPointerEvent(e) {
     return e.changedTouches ? e.changedTouches[0] : e.touches ? e.touches[0] : e;
-};
+}
 
-export function stopEvent (e) {
+export function stopEvent(e) {
     e.stopPropagation();
     e.preventDefault();
-};
+}
 
 // Emulate Element.setCapture() when not supported
-var _captureRecursion = false;
-var _captureElem = null;
+let _captureRecursion = false;
+let _elementForUnflushedEvents = null;
+document.captureElement = null;
 function _captureProxy(e) {
     // Recursion protection as we'll see our own event
     if (_captureRecursion) return;
 
     // Clone the event as we cannot dispatch an already dispatched event
-    var newEv = new e.constructor(e.type, e);
+    const newEv = new e.constructor(e.type, e);
 
     _captureRecursion = true;
-    _captureElem.dispatchEvent(newEv);
+    if (document.captureElement) {
+        document.captureElement.dispatchEvent(newEv);
+    } else {
+        _elementForUnflushedEvents.dispatchEvent(newEv);
+    }
     _captureRecursion = false;
 
     // Avoid double events
@@ -45,94 +50,93 @@ function _captureProxy(e) {
     if (e.type === "mouseup") {
         releaseCapture();
     }
-};
+}
 
 // Follow cursor style of target element
-function _captureElemChanged() {
-    var captureElem = document.getElementById("noVNC_mouse_capture_elem");
-    captureElem.style.cursor = window.getComputedStyle(_captureElem).cursor;
-};
-var _captureObserver = new MutationObserver(_captureElemChanged);
+function _capturedElemChanged() {
+    const proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+    proxyElem.style.cursor = window.getComputedStyle(document.captureElement).cursor;
+}
 
-var _captureIndex = 0;
+const _captureObserver = new MutationObserver(_capturedElemChanged);
 
-export function setCapture (elem) {
-    if (elem.setCapture) {
+export function setCapture(target) {
+    if (target.setCapture) {
 
-        elem.setCapture();
+        target.setCapture();
+        document.captureElement = target;
 
         // IE releases capture on 'click' events which might not trigger
-        elem.addEventListener('mouseup', releaseCapture);
+        target.addEventListener('mouseup', releaseCapture);
 
     } else {
         // Release any existing capture in case this method is
         // called multiple times without coordination
         releaseCapture();
 
-        var captureElem = document.getElementById("noVNC_mouse_capture_elem");
+        let proxyElem = document.getElementById("noVNC_mouse_capture_elem");
 
-        if (captureElem === null) {
-            captureElem = document.createElement("div");
-            captureElem.id = "noVNC_mouse_capture_elem";
-            captureElem.style.position = "fixed";
-            captureElem.style.top = "0px";
-            captureElem.style.left = "0px";
-            captureElem.style.width = "100%";
-            captureElem.style.height = "100%";
-            captureElem.style.zIndex = 10000;
-            captureElem.style.display = "none";
-            document.body.appendChild(captureElem);
+        if (proxyElem === null) {
+            proxyElem = document.createElement("div");
+            proxyElem.id = "noVNC_mouse_capture_elem";
+            proxyElem.style.position = "fixed";
+            proxyElem.style.top = "0px";
+            proxyElem.style.left = "0px";
+            proxyElem.style.width = "100%";
+            proxyElem.style.height = "100%";
+            proxyElem.style.zIndex = 10000;
+            proxyElem.style.display = "none";
+            document.body.appendChild(proxyElem);
 
             // This is to make sure callers don't get confused by having
             // our blocking element as the target
-            captureElem.addEventListener('contextmenu', _captureProxy);
+            proxyElem.addEventListener('contextmenu', _captureProxy);
 
-            captureElem.addEventListener('mousemove', _captureProxy);
-            captureElem.addEventListener('mouseup', _captureProxy);
+            proxyElem.addEventListener('mousemove', _captureProxy);
+            proxyElem.addEventListener('mouseup', _captureProxy);
         }
 
-        _captureElem = elem;
-        _captureIndex++;
+        document.captureElement = target;
 
         // Track cursor and get initial cursor
-        _captureObserver.observe(elem, {attributes:true});
-        _captureElemChanged();
+        _captureObserver.observe(target, {attributes: true});
+        _capturedElemChanged();
 
-        captureElem.style.display = "";
+        proxyElem.style.display = "";
 
         // We listen to events on window in order to keep tracking if it
         // happens to leave the viewport
         window.addEventListener('mousemove', _captureProxy);
         window.addEventListener('mouseup', _captureProxy);
     }
-};
+}
 
-export function releaseCapture () {
+export function releaseCapture() {
     if (document.releaseCapture) {
 
         document.releaseCapture();
+        document.captureElement = null;
 
     } else {
-        if (!_captureElem) {
+        if (!document.captureElement) {
             return;
         }
 
-        // There might be events already queued, so we need to wait for
-        // them to flush. E.g. contextmenu in Microsoft Edge
-        window.setTimeout(function(expected) {
-            // Only clear it if it's the expected grab (i.e. no one
-            // else has initiated a new grab)
-            if (_captureIndex === expected) {
-                _captureElem = null;
-            }
-        }, 0, _captureIndex);
+        // There might be events already queued. The event proxy needs
+        // access to the captured element for these queued events.
+        // E.g. contextmenu (right-click) in Microsoft Edge
+        //
+        // Before removing the capturedElem pointer we save it to a
+        // temporary variable that the unflushed events can use.
+        _elementForUnflushedEvents = document.captureElement;
+        document.captureElement = null;
 
         _captureObserver.disconnect();
 
-        var captureElem = document.getElementById("noVNC_mouse_capture_elem");
-        captureElem.style.display = "none";
+        const proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+        proxyElem.style.display = "none";
 
         window.removeEventListener('mousemove', _captureProxy);
         window.removeEventListener('mouseup', _captureProxy);
     }
-};
+}