@novnc/novnc 1.3.0-g99cf540 → 1.3.0-gbfb6ac2

package/README.md

@@ -113,6 +113,11 @@ proxy.
   used to specify the location of a running VNC server:
 
     `./utils/novnc_proxy --vnc localhost:5901`
+    
+* If you don't need to expose the web server to public internet, you can
+  bind to localhost:
+  
+    `./utils/novnc_proxy --vnc localhost:5901 --listen localhost:6081`
 
 * Point your browser to the cut-and-paste URL that is output by the `novnc_proxy`
   script. Hit the Connect button, enter a password if the VNC server has one

package/core/decoders/zrle.js

@@ -0,0 +1,185 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2021 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ *
+ */
+
+import Inflate from "../inflator.js";
+
+const ZRLE_TILE_WIDTH = 64;
+const ZRLE_TILE_HEIGHT = 64;
+
+export default class ZRLEDecoder {
+    constructor() {
+        this._length = 0;
+        this._inflator = new Inflate();
+
+        this._pixelBuffer = new Uint8Array(ZRLE_TILE_WIDTH * ZRLE_TILE_HEIGHT * 4);
+        this._tileBuffer = new Uint8Array(ZRLE_TILE_WIDTH * ZRLE_TILE_HEIGHT * 4);
+    }
+
+    decodeRect(x, y, width, height, sock, display, depth) {
+        if (this._length === 0) {
+            if (sock.rQwait("ZLib data length", 4)) {
+                return false;
+            }
+            this._length = sock.rQshift32();
+        }
+        if (sock.rQwait("Zlib data", this._length)) {
+            return false;
+        }
+
+        const data = sock.rQshiftBytes(this._length);
+
+        this._inflator.setInput(data);
+
+        for (let ty = y; ty < y + height; ty += ZRLE_TILE_HEIGHT) {
+            let th = Math.min(ZRLE_TILE_HEIGHT, y + height - ty);
+
+            for (let tx = x; tx < x + width; tx += ZRLE_TILE_WIDTH) {
+                let tw = Math.min(ZRLE_TILE_WIDTH, x + width - tx);
+
+                const tileSize = tw * th;
+                const subencoding = this._inflator.inflate(1)[0];
+                if (subencoding === 0) {
+                    // raw data
+                    const data = this._readPixels(tileSize);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else if (subencoding === 1) {
+                    // solid
+                    const background = this._readPixels(1);
+                    display.fillRect(tx, ty, tw, th, [background[0], background[1], background[2]]);
+                } else if (subencoding >= 2 && subencoding <= 16) {
+                    const data = this._decodePaletteTile(subencoding, tileSize, tw, th);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else if (subencoding === 128) {
+                    const data = this._decodeRLETile(tileSize);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else if (subencoding >= 130 && subencoding <= 255) {
+                    const data = this._decodeRLEPaletteTile(subencoding - 128, tileSize);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else {
+                    throw new Error('Unknown subencoding: ' + subencoding);
+                }
+            }
+        }
+        this._length = 0;
+        return true;
+    }
+
+    _getBitsPerPixelInPalette(paletteSize) {
+        if (paletteSize <= 2) {
+            return 1;
+        } else if (paletteSize <= 4) {
+            return 2;
+        } else if (paletteSize <= 16) {
+            return 4;
+        }
+    }
+
+    _readPixels(pixels) {
+        let data = this._pixelBuffer;
+        const buffer = this._inflator.inflate(3*pixels);
+        for (let i = 0, j = 0; i < pixels*4; i += 4, j += 3) {
+            data[i]     = buffer[j];
+            data[i + 1] = buffer[j + 1];
+            data[i + 2] = buffer[j + 2];
+            data[i + 3] = 255;  // Add the Alpha
+        }
+        return data;
+    }
+
+    _decodePaletteTile(paletteSize, tileSize, tilew, tileh) {
+        const data = this._tileBuffer;
+        const palette = this._readPixels(paletteSize);
+        const bitsPerPixel = this._getBitsPerPixelInPalette(paletteSize);
+        const mask = (1 << bitsPerPixel) - 1;
+
+        let offset = 0;
+        let encoded = this._inflator.inflate(1)[0];
+
+        for (let y=0; y<tileh; y++) {
+            let shift = 8-bitsPerPixel;
+            for (let x=0; x<tilew; x++) {
+                if (shift<0) {
+                    shift=8-bitsPerPixel;
+                    encoded = this._inflator.inflate(1)[0];
+                }
+                let indexInPalette = (encoded>>shift) & mask;
+
+                data[offset] = palette[indexInPalette * 4];
+                data[offset + 1] = palette[indexInPalette * 4 + 1];
+                data[offset + 2] = palette[indexInPalette * 4 + 2];
+                data[offset + 3] = palette[indexInPalette * 4 + 3];
+                offset += 4;
+                shift-=bitsPerPixel;
+            }
+            if (shift<8-bitsPerPixel && y<tileh-1) {
+                encoded =  this._inflator.inflate(1)[0];
+            }
+        }
+        return data;
+    }
+
+    _decodeRLETile(tileSize) {
+        const data = this._tileBuffer;
+        let i = 0;
+        while (i < tileSize) {
+            const pixel = this._readPixels(1);
+            const length = this._readRLELength();
+            for (let j = 0; j < length; j++) {
+                data[i * 4] = pixel[0];
+                data[i * 4 + 1] = pixel[1];
+                data[i * 4 + 2] = pixel[2];
+                data[i * 4 + 3] = pixel[3];
+                i++;
+            }
+        }
+        return data;
+    }
+
+    _decodeRLEPaletteTile(paletteSize, tileSize) {
+        const data = this._tileBuffer;
+
+        // palette
+        const palette = this._readPixels(paletteSize);
+
+        let offset = 0;
+        while (offset < tileSize) {
+            let indexInPalette = this._inflator.inflate(1)[0];
+            let length = 1;
+            if (indexInPalette >= 128) {
+                indexInPalette -= 128;
+                length = this._readRLELength();
+            }
+            if (indexInPalette > paletteSize) {
+                throw new Error('Too big index in palette: ' + indexInPalette + ', palette size: ' + paletteSize);
+            }
+            if (offset + length > tileSize) {
+                throw new Error('Too big rle length in palette mode: ' + length + ', allowed length is: ' + (tileSize - offset));
+            }
+
+            for (let j = 0; j < length; j++) {
+                data[offset * 4] = palette[indexInPalette * 4];
+                data[offset * 4 + 1] = palette[indexInPalette * 4 + 1];
+                data[offset * 4 + 2] = palette[indexInPalette * 4 + 2];
+                data[offset * 4 + 3] = palette[indexInPalette * 4 + 3];
+                offset++;
+            }
+        }
+        return data;
+    }
+
+    _readRLELength() {
+        let length = 0;
+        let current = 0;
+        do {
+            current = this._inflator.inflate(1)[0];
+            length += current;
+        } while (current === 255);
+        return length + 1;
+    }
+}

package/core/rfb.js

@@ -32,6 +32,7 @@ import RREDecoder from "./decoders/rre.js";
 import HextileDecoder from "./decoders/hextile.js";
 import TightDecoder from "./decoders/tight.js";
 import TightPNGDecoder from "./decoders/tightpng.js";
+import ZRLEDecoder from "./decoders/zrle.js";
 
 // How many seconds to wait for a disconnect to finish
 const DISCONNECT_TIMEOUT = 3;
@@ -218,6 +219,7 @@ export default class RFB extends EventTargetMixin {
         this._decoders[encodings.encodingHextile] = new HextileDecoder();
         this._decoders[encodings.encodingTight] = new TightDecoder();
         this._decoders[encodings.encodingTightPNG] = new TightPNGDecoder();
+        this._decoders[encodings.encodingZRLE] = new ZRLEDecoder();
 
         // NB: nothing that needs explicit teardown should be done
         // before this point, since this can throw an exception
@@ -432,8 +434,8 @@ export default class RFB extends EventTargetMixin {
         }
     }
 
-    focus() {
-        this._canvas.focus();
+    focus(options) {
+        this._canvas.focus(options);
     }
 
     blur() {
@@ -609,7 +611,7 @@ export default class RFB extends EventTargetMixin {
             return;
         }
 
-        this.focus();
+        this.focus({ preventScroll: true });
     }
 
     _setDesktopName(name) {
@@ -1772,6 +1774,7 @@ export default class RFB extends EventTargetMixin {
         if (this._fbDepth == 24) {
             encs.push(encodings.encodingTight);
             encs.push(encodings.encodingTightPNG);
+            encs.push(encodings.encodingZRLE);
             encs.push(encodings.encodingHextile);
             encs.push(encodings.encodingRRE);
         }

package/docs/API.md

@@ -328,7 +328,14 @@ Keyboard events will be sent to the remote server after this point.
 
 ##### Syntax
 
-    RFB.focus( );
+    RFB.focus( [options] );
+
+###### Parameters
+
+**`options`** *Optional*
+  - A `object` providing options to control how the focus will be
+    performed. Please see [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)
+    for available options.
 
 #### RFB.blur()
 

package/lib/decoders/zrle.js

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _inflator = _interopRequireDefault(require("../inflator.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 ZRLE_TILE_WIDTH = 64;
+var ZRLE_TILE_HEIGHT = 64;
+
+var ZRLEDecoder = /*#__PURE__*/function () {
+  function ZRLEDecoder() {
+    _classCallCheck(this, ZRLEDecoder);
+
+    this._length = 0;
+    this._inflator = new _inflator["default"]();
+    this._pixelBuffer = new Uint8Array(ZRLE_TILE_WIDTH * ZRLE_TILE_HEIGHT * 4);
+    this._tileBuffer = new Uint8Array(ZRLE_TILE_WIDTH * ZRLE_TILE_HEIGHT * 4);
+  }
+
+  _createClass(ZRLEDecoder, [{
+    key: "decodeRect",
+    value: function decodeRect(x, y, width, height, sock, display, depth) {
+      if (this._length === 0) {
+        if (sock.rQwait("ZLib data length", 4)) {
+          return false;
+        }
+
+        this._length = sock.rQshift32();
+      }
+
+      if (sock.rQwait("Zlib data", this._length)) {
+        return false;
+      }
+
+      var data = sock.rQshiftBytes(this._length);
+
+      this._inflator.setInput(data);
+
+      for (var ty = y; ty < y + height; ty += ZRLE_TILE_HEIGHT) {
+        var th = Math.min(ZRLE_TILE_HEIGHT, y + height - ty);
+
+        for (var tx = x; tx < x + width; tx += ZRLE_TILE_WIDTH) {
+          var tw = Math.min(ZRLE_TILE_WIDTH, x + width - tx);
+          var tileSize = tw * th;
+
+          var subencoding = this._inflator.inflate(1)[0];
+
+          if (subencoding === 0) {
+            // raw data
+            var _data = this._readPixels(tileSize);
+
+            display.blitImage(tx, ty, tw, th, _data, 0, false);
+          } else if (subencoding === 1) {
+            // solid
+            var background = this._readPixels(1);
+
+            display.fillRect(tx, ty, tw, th, [background[0], background[1], background[2]]);
+          } else if (subencoding >= 2 && subencoding <= 16) {
+            var _data2 = this._decodePaletteTile(subencoding, tileSize, tw, th);
+
+            display.blitImage(tx, ty, tw, th, _data2, 0, false);
+          } else if (subencoding === 128) {
+            var _data3 = this._decodeRLETile(tileSize);
+
+            display.blitImage(tx, ty, tw, th, _data3, 0, false);
+          } else if (subencoding >= 130 && subencoding <= 255) {
+            var _data4 = this._decodeRLEPaletteTile(subencoding - 128, tileSize);
+
+            display.blitImage(tx, ty, tw, th, _data4, 0, false);
+          } else {
+            throw new Error('Unknown subencoding: ' + subencoding);
+          }
+        }
+      }
+
+      this._length = 0;
+      return true;
+    }
+  }, {
+    key: "_getBitsPerPixelInPalette",
+    value: function _getBitsPerPixelInPalette(paletteSize) {
+      if (paletteSize <= 2) {
+        return 1;
+      } else if (paletteSize <= 4) {
+        return 2;
+      } else if (paletteSize <= 16) {
+        return 4;
+      }
+    }
+  }, {
+    key: "_readPixels",
+    value: function _readPixels(pixels) {
+      var data = this._pixelBuffer;
+
+      var buffer = this._inflator.inflate(3 * pixels);
+
+      for (var i = 0, j = 0; i < pixels * 4; i += 4, j += 3) {
+        data[i] = buffer[j];
+        data[i + 1] = buffer[j + 1];
+        data[i + 2] = buffer[j + 2];
+        data[i + 3] = 255; // Add the Alpha
+      }
+
+      return data;
+    }
+  }, {
+    key: "_decodePaletteTile",
+    value: function _decodePaletteTile(paletteSize, tileSize, tilew, tileh) {
+      var data = this._tileBuffer;
+
+      var palette = this._readPixels(paletteSize);
+
+      var bitsPerPixel = this._getBitsPerPixelInPalette(paletteSize);
+
+      var mask = (1 << bitsPerPixel) - 1;
+      var offset = 0;
+
+      var encoded = this._inflator.inflate(1)[0];
+
+      for (var y = 0; y < tileh; y++) {
+        var shift = 8 - bitsPerPixel;
+
+        for (var x = 0; x < tilew; x++) {
+          if (shift < 0) {
+            shift = 8 - bitsPerPixel;
+            encoded = this._inflator.inflate(1)[0];
+          }
+
+          var indexInPalette = encoded >> shift & mask;
+          data[offset] = palette[indexInPalette * 4];
+          data[offset + 1] = palette[indexInPalette * 4 + 1];
+          data[offset + 2] = palette[indexInPalette * 4 + 2];
+          data[offset + 3] = palette[indexInPalette * 4 + 3];
+          offset += 4;
+          shift -= bitsPerPixel;
+        }
+
+        if (shift < 8 - bitsPerPixel && y < tileh - 1) {
+          encoded = this._inflator.inflate(1)[0];
+        }
+      }
+
+      return data;
+    }
+  }, {
+    key: "_decodeRLETile",
+    value: function _decodeRLETile(tileSize) {
+      var data = this._tileBuffer;
+      var i = 0;
+
+      while (i < tileSize) {
+        var pixel = this._readPixels(1);
+
+        var length = this._readRLELength();
+
+        for (var j = 0; j < length; j++) {
+          data[i * 4] = pixel[0];
+          data[i * 4 + 1] = pixel[1];
+          data[i * 4 + 2] = pixel[2];
+          data[i * 4 + 3] = pixel[3];
+          i++;
+        }
+      }
+
+      return data;
+    }
+  }, {
+    key: "_decodeRLEPaletteTile",
+    value: function _decodeRLEPaletteTile(paletteSize, tileSize) {
+      var data = this._tileBuffer; // palette
+
+      var palette = this._readPixels(paletteSize);
+
+      var offset = 0;
+
+      while (offset < tileSize) {
+        var indexInPalette = this._inflator.inflate(1)[0];
+
+        var length = 1;
+
+        if (indexInPalette >= 128) {
+          indexInPalette -= 128;
+          length = this._readRLELength();
+        }
+
+        if (indexInPalette > paletteSize) {
+          throw new Error('Too big index in palette: ' + indexInPalette + ', palette size: ' + paletteSize);
+        }
+
+        if (offset + length > tileSize) {
+          throw new Error('Too big rle length in palette mode: ' + length + ', allowed length is: ' + (tileSize - offset));
+        }
+
+        for (var j = 0; j < length; j++) {
+          data[offset * 4] = palette[indexInPalette * 4];
+          data[offset * 4 + 1] = palette[indexInPalette * 4 + 1];
+          data[offset * 4 + 2] = palette[indexInPalette * 4 + 2];
+          data[offset * 4 + 3] = palette[indexInPalette * 4 + 3];
+          offset++;
+        }
+      }
+
+      return data;
+    }
+  }, {
+    key: "_readRLELength",
+    value: function _readRLELength() {
+      var length = 0;
+      var current = 0;
+
+      do {
+        current = this._inflator.inflate(1)[0];
+        length += current;
+      } while (current === 255);
+
+      return length + 1;
+    }
+  }]);
+
+  return ZRLEDecoder;
+}();
+
+exports["default"] = ZRLEDecoder;

package/lib/rfb.js

@@ -55,6 +55,8 @@ var _tight = _interopRequireDefault(require("./decoders/tight.js"));
 
 var _tightpng = _interopRequireDefault(require("./decoders/tightpng.js"));
 
+var _zrle = _interopRequireDefault(require("./decoders/zrle.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -262,7 +264,8 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     _this._decoders[_encodings.encodings.encodingRRE] = new _rre["default"]();
     _this._decoders[_encodings.encodings.encodingHextile] = new _hextile["default"]();
     _this._decoders[_encodings.encodings.encodingTight] = new _tight["default"]();
-    _this._decoders[_encodings.encodings.encodingTightPNG] = new _tightpng["default"](); // NB: nothing that needs explicit teardown should be done
+    _this._decoders[_encodings.encodings.encodingTightPNG] = new _tightpng["default"]();
+    _this._decoders[_encodings.encodings.encodingZRLE] = new _zrle["default"](); // NB: nothing that needs explicit teardown should be done
     // before this point, since this can throw an exception
 
     try {
@@ -522,8 +525,8 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     }
   }, {
     key: "focus",
-    value: function focus() {
-      this._canvas.focus();
+    value: function focus(options) {
+      this._canvas.focus(options);
     }
   }, {
     key: "blur",
@@ -746,7 +749,9 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
         return;
       }
 
-      this.focus();
+      this.focus({
+        preventScroll: true
+      });
     }
   }, {
     key: "_setDesktopName",
@@ -2150,6 +2155,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
       if (this._fbDepth == 24) {
         encs.push(_encodings.encodings.encodingTight);
         encs.push(_encodings.encodings.encodingTightPNG);
+        encs.push(_encodings.encodings.encodingZRLE);
         encs.push(_encodings.encodings.encodingHextile);
         encs.push(_encodings.encodings.encodingRRE);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novnc/novnc",
-  "version": "1.3.0-g99cf540",
+  "version": "1.3.0-gbfb6ac2",
   "description": "An HTML5 VNC client",
   "browser": "lib/rfb",
   "directories": {