@novnc/novnc 1.0.0 → 1.2.0

package/lib/util/browser.js

@@ -0,0 +1,131 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMac = isMac;
+exports.isWindows = isWindows;
+exports.isIOS = isIOS;
+exports.isSafari = isSafari;
+exports.isIE = isIE;
+exports.isEdge = isEdge;
+exports.isFirefox = isFirefox;
+exports.hasScrollbarGutter = exports.supportsImageMetadata = exports.supportsCursorURIs = exports.dragThreshold = exports.isTouchDevice = void 0;
+
+var Log = _interopRequireWildcard(require("./logging.js"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * noVNC: HTML5 VNC client
+ * 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
+ */
+// Touch detection
+var isTouchDevice = 'ontouchstart' in document.documentElement || // requried for Chrome debugger
+document.ontouchstart !== undefined || // required for MS Surface
+navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+exports.isTouchDevice = isTouchDevice;
+window.addEventListener('touchstart', function onFirstTouch() {
+  exports.isTouchDevice = isTouchDevice = true;
+  window.removeEventListener('touchstart', onFirstTouch, false);
+}, false); // The goal is to find a certain physical width, the devicePixelRatio
+// brings us a bit closer but is not optimal.
+
+var dragThreshold = 10 * (window.devicePixelRatio || 1);
+exports.dragThreshold = dragThreshold;
+var _supportsCursorURIs = false;
+
+try {
+  var 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);
+}
+
+var supportsCursorURIs = _supportsCursorURIs;
+exports.supportsCursorURIs = supportsCursorURIs;
+var _supportsImageMetadata = false;
+
+try {
+  new ImageData(new Uint8ClampedArray(4), 1, 1);
+  _supportsImageMetadata = true;
+} catch (ex) {// ignore failure
+}
+
+var supportsImageMetadata = _supportsImageMetadata;
+exports.supportsImageMetadata = supportsImageMetadata;
+var _hasScrollbarGutter = true;
+
+try {
+  // Create invisible container
+  var 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
+
+  var 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
+
+  var scrollbarWidth = container.offsetWidth - child.offsetWidth; // Clean up
+
+  container.parentNode.removeChild(container);
+  _hasScrollbarGutter = scrollbarWidth != 0;
+} catch (exc) {
+  Log.Error("Scrollbar test exception: " + exc);
+}
+
+var hasScrollbarGutter = _hasScrollbarGutter;
+/*
+ * 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.
+ */
+
+exports.hasScrollbarGutter = hasScrollbarGutter;
+
+function isMac() {
+  return navigator && !!/mac/i.exec(navigator.platform);
+}
+
+function isWindows() {
+  return navigator && !!/win/i.exec(navigator.platform);
+}
+
+function isIOS() {
+  return navigator && (!!/ipad/i.exec(navigator.platform) || !!/iphone/i.exec(navigator.platform) || !!/ipod/i.exec(navigator.platform));
+}
+
+function isSafari() {
+  return navigator && navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1;
+}
+
+function isIE() {
+  return navigator && !!/trident/i.exec(navigator.userAgent);
+}
+
+function isEdge() {
+  return navigator && !!/edge/i.exec(navigator.userAgent);
+}
+
+function isFirefox() {
+  return navigator && !!/firefox/i.exec(navigator.userAgent);
+}

package/lib/util/cursor.js

@@ -0,0 +1,314 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _browser = require("./browser.js");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var useFallback = !_browser.supportsCursorURIs || _browser.isTouchDevice;
+
+var Cursor = /*#__PURE__*/function () {
+  function Cursor() {
+    _classCallCheck(this, Cursor);
+
+    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)
+    };
+  }
+
+  _createClass(Cursor, [{
+    key: "attach",
+    value: function 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.
+
+        var 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();
+    }
+  }, {
+    key: "detach",
+    value: function detach() {
+      if (!this._target) {
+        return;
+      }
+
+      if (useFallback) {
+        var 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;
+    }
+  }, {
+    key: "change",
+    value: function 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;
+
+      var ctx = this._canvas.getContext('2d');
+
+      this._canvas.width = w;
+      this._canvas.height = h;
+      var 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 {
+        var url = this._canvas.toDataURL();
+
+        this._target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
+      }
+    }
+  }, {
+    key: "clear",
+    value: function 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
+
+  }, {
+    key: "move",
+    value: function 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();
+
+      var target = document.elementFromPoint(clientX, clientY);
+
+      this._updateVisibility(target);
+    }
+  }, {
+    key: "_handleMouseOver",
+    value: function _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);
+    }
+  }, {
+    key: "_handleMouseLeave",
+    value: function _handleMouseLeave(event) {
+      // Check if we should show the cursor on the element we are leaving to
+      this._updateVisibility(event.relatedTarget);
+    }
+  }, {
+    key: "_handleMouseMove",
+    value: function _handleMouseMove(event) {
+      this._updateVisibility(event.target);
+
+      this._position.x = event.clientX - this._hotSpot.x;
+      this._position.y = event.clientY - this._hotSpot.y;
+
+      this._updatePosition();
+    }
+  }, {
+    key: "_handleMouseUp",
+    value: function _handleMouseUp(event) {
+      var _this = this;
+
+      // 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.
+      var 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(function () {
+          // 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);
+      }
+    }
+  }, {
+    key: "_showCursor",
+    value: function _showCursor() {
+      if (this._canvas.style.visibility === 'hidden') {
+        this._canvas.style.visibility = '';
+      }
+    }
+  }, {
+    key: "_hideCursor",
+    value: function _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)
+
+  }, {
+    key: "_shouldShowCursor",
+    value: function _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;
+    }
+  }, {
+    key: "_updateVisibility",
+    value: function _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();
+      }
+    }
+  }, {
+    key: "_updatePosition",
+    value: function _updatePosition() {
+      this._canvas.style.left = this._position.x + "px";
+      this._canvas.style.top = this._position.y + "px";
+    }
+  }, {
+    key: "_captureIsActive",
+    value: function _captureIsActive() {
+      return document.captureElement && document.documentElement.contains(document.captureElement);
+    }
+  }]);
+
+  return Cursor;
+}();
+
+exports.default = Cursor;

package/lib/util/element.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clientToElement = clientToElement;
+
+/*
+ * 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
+ */
+function clientToElement(x, y, elem) {
+  var bounds = elem.getBoundingClientRect();
+  var 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/lib/util/events.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPointerEvent = getPointerEvent;
+exports.stopEvent = stopEvent;
+exports.setCapture = setCapture;
+exports.releaseCapture = releaseCapture;
+
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2018 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+/*
+ * Cross-browser event and position routines
+ */
+function getPointerEvent(e) {
+  return e.changedTouches ? e.changedTouches[0] : e.touches ? e.touches[0] : e;
+}
+
+function stopEvent(e) {
+  e.stopPropagation();
+  e.preventDefault();
+} // Emulate Element.setCapture() when not supported
+
+
+var _captureRecursion = false;
+var _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);
+  _captureRecursion = true;
+
+  if (document.captureElement) {
+    document.captureElement.dispatchEvent(newEv);
+  } else {
+    _elementForUnflushedEvents.dispatchEvent(newEv);
+  }
+
+  _captureRecursion = false; // Avoid double events
+
+  e.stopPropagation(); // Respect the wishes of the redirected event handlers
+
+  if (newEv.defaultPrevented) {
+    e.preventDefault();
+  } // Implicitly release the capture on button release
+
+
+  if (e.type === "mouseup") {
+    releaseCapture();
+  }
+} // Follow cursor style of target element
+
+
+function _capturedElemChanged() {
+  var proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+  proxyElem.style.cursor = window.getComputedStyle(document.captureElement).cursor;
+}
+
+var _captureObserver = new MutationObserver(_capturedElemChanged);
+
+function setCapture(target) {
+  if (target.setCapture) {
+    target.setCapture();
+    document.captureElement = target; // IE releases capture on 'click' events which might not trigger
+
+    target.addEventListener('mouseup', releaseCapture);
+  } else {
+    // Release any existing capture in case this method is
+    // called multiple times without coordination
+    releaseCapture();
+    var proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+
+    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
+
+      proxyElem.addEventListener('contextmenu', _captureProxy);
+      proxyElem.addEventListener('mousemove', _captureProxy);
+      proxyElem.addEventListener('mouseup', _captureProxy);
+    }
+
+    document.captureElement = target; // Track cursor and get initial cursor
+
+    _captureObserver.observe(target, {
+      attributes: true
+    });
+
+    _capturedElemChanged();
+
+    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);
+  }
+}
+
+function releaseCapture() {
+  if (document.releaseCapture) {
+    document.releaseCapture();
+    document.captureElement = null;
+  } else {
+    if (!document.captureElement) {
+      return;
+    } // 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 proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+    proxyElem.style.display = "none";
+    window.removeEventListener('mousemove', _captureProxy);
+    window.removeEventListener('mouseup', _captureProxy);
+  }
+}

package/lib/util/eventtarget.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2019 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+var EventTargetMixin = /*#__PURE__*/function () {
+  function EventTargetMixin() {
+    _classCallCheck(this, EventTargetMixin);
+
+    this._listeners = new Map();
+  }
+
+  _createClass(EventTargetMixin, [{
+    key: "addEventListener",
+    value: function addEventListener(type, callback) {
+      if (!this._listeners.has(type)) {
+        this._listeners.set(type, new Set());
+      }
+
+      this._listeners.get(type).add(callback);
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(type, callback) {
+      if (this._listeners.has(type)) {
+        this._listeners.get(type).delete(callback);
+      }
+    }
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent(event) {
+      var _this = this;
+
+      if (!this._listeners.has(event.type)) {
+        return true;
+      }
+
+      this._listeners.get(event.type).forEach(function (callback) {
+        return callback.call(_this, event);
+      });
+
+      return !event.defaultPrevented;
+    }
+  }]);
+
+  return EventTargetMixin;
+}();
+
+exports.default = EventTargetMixin;