@novnc/novnc 1.2.0 → 1.3.0-g05baf14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.txt +0 -6
- package/README.md +16 -6
- package/core/decoders/copyrect.js +5 -0
- package/core/decoders/hextile.js +57 -3
- package/core/decoders/jpeg.js +141 -0
- package/core/decoders/raw.js +12 -2
- package/core/decoders/tight.js +24 -8
- package/core/decoders/zrle.js +185 -0
- package/core/display.js +21 -151
- package/core/encodings.js +4 -0
- package/core/input/domkeytable.js +25 -21
- package/core/input/keyboard.js +22 -127
- package/core/input/util.js +18 -35
- package/core/input/vkeys.js +0 -1
- package/core/input/xtscancodes.js +5 -3
- package/core/ra2.js +567 -0
- package/core/rfb.js +487 -171
- package/core/util/browser.js +0 -17
- package/core/util/cursor.js +5 -11
- package/core/util/events.js +0 -4
- package/core/util/md5.js +79 -0
- package/core/websock.js +76 -17
- package/docs/API.md +107 -6
- package/docs/LIBRARY.md +3 -7
- package/lib/base64.js +24 -38
- package/lib/decoders/copyrect.js +10 -12
- package/lib/decoders/hextile.js +71 -45
- package/lib/decoders/jpeg.js +149 -0
- package/lib/decoders/raw.js +18 -22
- package/lib/decoders/rre.js +7 -18
- package/lib/decoders/tight.js +46 -94
- package/lib/decoders/tightpng.js +14 -34
- package/lib/decoders/zrle.js +188 -0
- package/lib/deflator.js +13 -27
- package/lib/des.js +26 -39
- package/lib/display.js +103 -316
- package/lib/encodings.js +7 -8
- package/lib/inflator.js +10 -23
- package/lib/input/domkeytable.js +240 -208
- package/lib/input/fixedkeys.js +10 -5
- package/lib/input/gesturehandler.js +88 -155
- package/lib/input/keyboard.js +90 -239
- package/lib/input/keysym.js +16 -272
- package/lib/input/keysymdef.js +7 -9
- package/lib/input/util.js +69 -156
- package/lib/input/vkeys.js +2 -7
- package/lib/input/xtscancodes.js +10 -171
- package/lib/ra2.js +1035 -0
- package/lib/rfb.js +950 -1150
- package/lib/util/browser.js +25 -52
- package/lib/util/cursor.js +33 -82
- package/lib/util/element.js +3 -5
- package/lib/util/events.js +26 -35
- package/lib/util/eventtarget.js +8 -17
- package/lib/util/int.js +2 -3
- package/lib/util/logging.js +3 -21
- package/lib/util/md5.js +83 -0
- package/lib/util/strings.js +3 -5
- package/lib/vendor/pako/lib/utils/common.js +10 -19
- package/lib/vendor/pako/lib/zlib/adler32.js +4 -8
- package/lib/vendor/pako/lib/zlib/constants.js +4 -7
- package/lib/vendor/pako/lib/zlib/crc32.js +6 -13
- package/lib/vendor/pako/lib/zlib/deflate.js +304 -708
- package/lib/vendor/pako/lib/zlib/gzheader.js +2 -14
- package/lib/vendor/pako/lib/zlib/inffast.js +61 -177
- package/lib/vendor/pako/lib/zlib/inflate.js +421 -909
- package/lib/vendor/pako/lib/zlib/inftrees.js +66 -172
- package/lib/vendor/pako/lib/zlib/messages.js +3 -13
- package/lib/vendor/pako/lib/zlib/trees.js +250 -592
- package/lib/vendor/pako/lib/zlib/zstream.js +3 -19
- package/lib/websock.js +122 -112
- package/package.json +32 -40
- package/core/util/polyfill.js +0 -61
- package/lib/util/polyfill.js +0 -72
- package/lib/vendor/promise.js +0 -255
package/lib/display.js
CHANGED
|
@@ -1,73 +1,56 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
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); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
|
-
exports
|
|
9
|
-
|
|
6
|
+
exports["default"] = void 0;
|
|
10
7
|
var Log = _interopRequireWildcard(require("./util/logging.js"));
|
|
11
|
-
|
|
12
8
|
var _base = _interopRequireDefault(require("./base64.js"));
|
|
13
|
-
|
|
14
|
-
var _browser = require("./util/browser.js");
|
|
15
|
-
|
|
16
9
|
var _int = require("./util/int.js");
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
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; }
|
|
23
|
-
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
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); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
|
|
13
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
24
14
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
25
|
-
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
function
|
|
29
|
-
|
|
15
|
+
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, _toPropertyKey(descriptor.key), descriptor); } }
|
|
16
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
17
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
18
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
30
19
|
var Display = /*#__PURE__*/function () {
|
|
31
20
|
function Display(target) {
|
|
32
21
|
_classCallCheck(this, Display);
|
|
33
|
-
|
|
34
22
|
this._drawCtx = null;
|
|
35
23
|
this._renderQ = []; // queue drawing actions for in-oder rendering
|
|
24
|
+
this._flushing = false;
|
|
36
25
|
|
|
37
|
-
|
|
38
|
-
|
|
26
|
+
// the full frame buffer (logical canvas) size
|
|
39
27
|
this._fbWidth = 0;
|
|
40
28
|
this._fbHeight = 0;
|
|
41
29
|
this._prevDrawStyle = "";
|
|
42
|
-
|
|
43
|
-
this._tile16x16 = null;
|
|
44
|
-
this._tileX = 0;
|
|
45
|
-
this._tileY = 0;
|
|
46
|
-
Log.Debug(">> Display.constructor"); // The visible canvas
|
|
30
|
+
Log.Debug(">> Display.constructor");
|
|
47
31
|
|
|
32
|
+
// The visible canvas
|
|
48
33
|
this._target = target;
|
|
49
|
-
|
|
50
34
|
if (!this._target) {
|
|
51
35
|
throw new Error("Target must be set");
|
|
52
36
|
}
|
|
53
|
-
|
|
54
37
|
if (typeof this._target === 'string') {
|
|
55
38
|
throw new Error('target must be a DOM element');
|
|
56
39
|
}
|
|
57
|
-
|
|
58
40
|
if (!this._target.getContext) {
|
|
59
41
|
throw new Error("no getContext method");
|
|
60
42
|
}
|
|
43
|
+
this._targetCtx = this._target.getContext('2d');
|
|
61
44
|
|
|
62
|
-
|
|
63
|
-
|
|
45
|
+
// the visible canvas viewport (i.e. what actually gets seen)
|
|
64
46
|
this._viewportLoc = {
|
|
65
47
|
'x': 0,
|
|
66
48
|
'y': 0,
|
|
67
49
|
'w': this._target.width,
|
|
68
50
|
'h': this._target.height
|
|
69
|
-
};
|
|
51
|
+
};
|
|
70
52
|
|
|
53
|
+
// The hidden canvas, where we do the actual rendering
|
|
71
54
|
this._backbuffer = document.createElement('canvas');
|
|
72
55
|
this._drawCtx = this._backbuffer.getContext('2d');
|
|
73
56
|
this._damageBounds = {
|
|
@@ -76,66 +59,86 @@ var Display = /*#__PURE__*/function () {
|
|
|
76
59
|
right: this._backbuffer.width,
|
|
77
60
|
bottom: this._backbuffer.height
|
|
78
61
|
};
|
|
79
|
-
Log.Debug("User Agent: " + navigator.userAgent);
|
|
80
|
-
|
|
81
|
-
if (!('createImageData' in this._drawCtx)) {
|
|
82
|
-
throw new Error("Canvas does not support createImageData");
|
|
83
|
-
}
|
|
62
|
+
Log.Debug("User Agent: " + navigator.userAgent);
|
|
63
|
+
Log.Debug("<< Display.constructor");
|
|
84
64
|
|
|
85
|
-
|
|
86
|
-
Log.Debug("<< Display.constructor"); // ===== PROPERTIES =====
|
|
65
|
+
// ===== PROPERTIES =====
|
|
87
66
|
|
|
88
67
|
this._scale = 1.0;
|
|
89
|
-
this._clipViewport = false;
|
|
90
|
-
|
|
91
|
-
this.onflush = function () {}; // A flush request has finished
|
|
68
|
+
this._clipViewport = false;
|
|
92
69
|
|
|
93
|
-
|
|
70
|
+
// ===== EVENT HANDLERS =====
|
|
94
71
|
|
|
72
|
+
this.onflush = function () {}; // A flush request has finished
|
|
73
|
+
}
|
|
95
74
|
|
|
75
|
+
// ===== PROPERTIES =====
|
|
96
76
|
_createClass(Display, [{
|
|
97
|
-
key: "
|
|
77
|
+
key: "scale",
|
|
78
|
+
get: function get() {
|
|
79
|
+
return this._scale;
|
|
80
|
+
},
|
|
81
|
+
set: function set(scale) {
|
|
82
|
+
this._rescale(scale);
|
|
83
|
+
}
|
|
84
|
+
}, {
|
|
85
|
+
key: "clipViewport",
|
|
86
|
+
get: function get() {
|
|
87
|
+
return this._clipViewport;
|
|
88
|
+
},
|
|
89
|
+
set: function set(viewport) {
|
|
90
|
+
this._clipViewport = viewport;
|
|
91
|
+
// May need to readjust the viewport dimensions
|
|
92
|
+
var vp = this._viewportLoc;
|
|
93
|
+
this.viewportChangeSize(vp.w, vp.h);
|
|
94
|
+
this.viewportChangePos(0, 0);
|
|
95
|
+
}
|
|
96
|
+
}, {
|
|
97
|
+
key: "width",
|
|
98
|
+
get: function get() {
|
|
99
|
+
return this._fbWidth;
|
|
100
|
+
}
|
|
101
|
+
}, {
|
|
102
|
+
key: "height",
|
|
103
|
+
get: function get() {
|
|
104
|
+
return this._fbHeight;
|
|
105
|
+
}
|
|
106
|
+
|
|
98
107
|
// ===== PUBLIC METHODS =====
|
|
108
|
+
}, {
|
|
109
|
+
key: "viewportChangePos",
|
|
99
110
|
value: function viewportChangePos(deltaX, deltaY) {
|
|
100
111
|
var vp = this._viewportLoc;
|
|
101
112
|
deltaX = Math.floor(deltaX);
|
|
102
113
|
deltaY = Math.floor(deltaY);
|
|
103
|
-
|
|
104
114
|
if (!this._clipViewport) {
|
|
105
115
|
deltaX = -vp.w; // clamped later of out of bounds
|
|
106
|
-
|
|
107
116
|
deltaY = -vp.h;
|
|
108
117
|
}
|
|
109
|
-
|
|
110
118
|
var vx2 = vp.x + vp.w - 1;
|
|
111
|
-
var vy2 = vp.y + vp.h - 1;
|
|
119
|
+
var vy2 = vp.y + vp.h - 1;
|
|
120
|
+
|
|
121
|
+
// Position change
|
|
112
122
|
|
|
113
123
|
if (deltaX < 0 && vp.x + deltaX < 0) {
|
|
114
124
|
deltaX = -vp.x;
|
|
115
125
|
}
|
|
116
|
-
|
|
117
126
|
if (vx2 + deltaX >= this._fbWidth) {
|
|
118
127
|
deltaX -= vx2 + deltaX - this._fbWidth + 1;
|
|
119
128
|
}
|
|
120
|
-
|
|
121
129
|
if (vp.y + deltaY < 0) {
|
|
122
130
|
deltaY = -vp.y;
|
|
123
131
|
}
|
|
124
|
-
|
|
125
132
|
if (vy2 + deltaY >= this._fbHeight) {
|
|
126
133
|
deltaY -= vy2 + deltaY - this._fbHeight + 1;
|
|
127
134
|
}
|
|
128
|
-
|
|
129
135
|
if (deltaX === 0 && deltaY === 0) {
|
|
130
136
|
return;
|
|
131
137
|
}
|
|
132
|
-
|
|
133
138
|
Log.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
|
|
134
139
|
vp.x += deltaX;
|
|
135
140
|
vp.y += deltaY;
|
|
136
|
-
|
|
137
141
|
this._damage(vp.x, vp.y, vp.w, vp.h);
|
|
138
|
-
|
|
139
142
|
this.flip();
|
|
140
143
|
}
|
|
141
144
|
}, {
|
|
@@ -146,33 +149,28 @@ var Display = /*#__PURE__*/function () {
|
|
|
146
149
|
width = this._fbWidth;
|
|
147
150
|
height = this._fbHeight;
|
|
148
151
|
}
|
|
149
|
-
|
|
150
152
|
width = Math.floor(width);
|
|
151
153
|
height = Math.floor(height);
|
|
152
|
-
|
|
153
154
|
if (width > this._fbWidth) {
|
|
154
155
|
width = this._fbWidth;
|
|
155
156
|
}
|
|
156
|
-
|
|
157
157
|
if (height > this._fbHeight) {
|
|
158
158
|
height = this._fbHeight;
|
|
159
159
|
}
|
|
160
|
-
|
|
161
160
|
var vp = this._viewportLoc;
|
|
162
|
-
|
|
163
161
|
if (vp.w !== width || vp.h !== height) {
|
|
164
162
|
vp.w = width;
|
|
165
163
|
vp.h = height;
|
|
166
164
|
var canvas = this._target;
|
|
167
165
|
canvas.width = width;
|
|
168
|
-
canvas.height = height;
|
|
166
|
+
canvas.height = height;
|
|
169
167
|
|
|
168
|
+
// The position might need to be updated if we've grown
|
|
170
169
|
this.viewportChangePos(0, 0);
|
|
171
|
-
|
|
172
170
|
this._damage(vp.x, vp.y, vp.w, vp.h);
|
|
171
|
+
this.flip();
|
|
173
172
|
|
|
174
|
-
|
|
175
|
-
|
|
173
|
+
// Update the visible size of the target canvas
|
|
176
174
|
this._rescale(this._scale);
|
|
177
175
|
}
|
|
178
176
|
}
|
|
@@ -182,7 +180,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
182
180
|
if (this._scale === 0) {
|
|
183
181
|
return 0;
|
|
184
182
|
}
|
|
185
|
-
|
|
186
183
|
return (0, _int.toSigned32bit)(x / this._scale + this._viewportLoc.x);
|
|
187
184
|
}
|
|
188
185
|
}, {
|
|
@@ -191,7 +188,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
191
188
|
if (this._scale === 0) {
|
|
192
189
|
return 0;
|
|
193
190
|
}
|
|
194
|
-
|
|
195
191
|
return (0, _int.toSigned32bit)(y / this._scale + this._viewportLoc.y);
|
|
196
192
|
}
|
|
197
193
|
}, {
|
|
@@ -201,56 +197,65 @@ var Display = /*#__PURE__*/function () {
|
|
|
201
197
|
this._fbWidth = width;
|
|
202
198
|
this._fbHeight = height;
|
|
203
199
|
var canvas = this._backbuffer;
|
|
204
|
-
|
|
205
200
|
if (canvas.width !== width || canvas.height !== height) {
|
|
206
201
|
// We have to save the canvas data since changing the size will clear it
|
|
207
202
|
var saveImg = null;
|
|
208
|
-
|
|
209
203
|
if (canvas.width > 0 && canvas.height > 0) {
|
|
210
204
|
saveImg = this._drawCtx.getImageData(0, 0, canvas.width, canvas.height);
|
|
211
205
|
}
|
|
212
|
-
|
|
213
206
|
if (canvas.width !== width) {
|
|
214
207
|
canvas.width = width;
|
|
215
208
|
}
|
|
216
|
-
|
|
217
209
|
if (canvas.height !== height) {
|
|
218
210
|
canvas.height = height;
|
|
219
211
|
}
|
|
220
|
-
|
|
221
212
|
if (saveImg) {
|
|
222
213
|
this._drawCtx.putImageData(saveImg, 0, 0);
|
|
223
214
|
}
|
|
224
|
-
}
|
|
225
|
-
// and positioned
|
|
226
|
-
|
|
215
|
+
}
|
|
227
216
|
|
|
217
|
+
// Readjust the viewport as it may be incorrectly sized
|
|
218
|
+
// and positioned
|
|
228
219
|
var vp = this._viewportLoc;
|
|
229
220
|
this.viewportChangeSize(vp.w, vp.h);
|
|
230
221
|
this.viewportChangePos(0, 0);
|
|
231
|
-
}
|
|
222
|
+
}
|
|
223
|
+
}, {
|
|
224
|
+
key: "getImageData",
|
|
225
|
+
value: function getImageData() {
|
|
226
|
+
return this._drawCtx.getImageData(0, 0, this.width, this.height);
|
|
227
|
+
}
|
|
228
|
+
}, {
|
|
229
|
+
key: "toDataURL",
|
|
230
|
+
value: function toDataURL(type, encoderOptions) {
|
|
231
|
+
return this._backbuffer.toDataURL(type, encoderOptions);
|
|
232
|
+
}
|
|
233
|
+
}, {
|
|
234
|
+
key: "toBlob",
|
|
235
|
+
value: function toBlob(callback, type, quality) {
|
|
236
|
+
return this._backbuffer.toBlob(callback, type, quality);
|
|
237
|
+
}
|
|
232
238
|
|
|
239
|
+
// Track what parts of the visible canvas that need updating
|
|
233
240
|
}, {
|
|
234
241
|
key: "_damage",
|
|
235
242
|
value: function _damage(x, y, w, h) {
|
|
236
243
|
if (x < this._damageBounds.left) {
|
|
237
244
|
this._damageBounds.left = x;
|
|
238
245
|
}
|
|
239
|
-
|
|
240
246
|
if (y < this._damageBounds.top) {
|
|
241
247
|
this._damageBounds.top = y;
|
|
242
248
|
}
|
|
243
|
-
|
|
244
249
|
if (x + w > this._damageBounds.right) {
|
|
245
250
|
this._damageBounds.right = x + w;
|
|
246
251
|
}
|
|
247
|
-
|
|
248
252
|
if (y + h > this._damageBounds.bottom) {
|
|
249
253
|
this._damageBounds.bottom = y + h;
|
|
250
254
|
}
|
|
251
|
-
}
|
|
252
|
-
// rendering canvas
|
|
255
|
+
}
|
|
253
256
|
|
|
257
|
+
// Update the visible canvas with the contents of the
|
|
258
|
+
// rendering canvas
|
|
254
259
|
}, {
|
|
255
260
|
key: "flip",
|
|
256
261
|
value: function flip(fromQueue) {
|
|
@@ -265,34 +270,28 @@ var Display = /*#__PURE__*/function () {
|
|
|
265
270
|
var h = this._damageBounds.bottom - y;
|
|
266
271
|
var vx = x - this._viewportLoc.x;
|
|
267
272
|
var vy = y - this._viewportLoc.y;
|
|
268
|
-
|
|
269
273
|
if (vx < 0) {
|
|
270
274
|
w += vx;
|
|
271
275
|
x -= vx;
|
|
272
276
|
vx = 0;
|
|
273
277
|
}
|
|
274
|
-
|
|
275
278
|
if (vy < 0) {
|
|
276
279
|
h += vy;
|
|
277
280
|
y -= vy;
|
|
278
281
|
vy = 0;
|
|
279
282
|
}
|
|
280
|
-
|
|
281
283
|
if (vx + w > this._viewportLoc.w) {
|
|
282
284
|
w = this._viewportLoc.w - vx;
|
|
283
285
|
}
|
|
284
|
-
|
|
285
286
|
if (vy + h > this._viewportLoc.h) {
|
|
286
287
|
h = this._viewportLoc.h - vy;
|
|
287
288
|
}
|
|
288
|
-
|
|
289
289
|
if (w > 0 && h > 0) {
|
|
290
290
|
// FIXME: We may need to disable image smoothing here
|
|
291
291
|
// as well (see copyImage()), but we haven't
|
|
292
292
|
// noticed any problem yet.
|
|
293
293
|
this._targetCtx.drawImage(this._backbuffer, x, y, w, h, vx, vy, w, h);
|
|
294
294
|
}
|
|
295
|
-
|
|
296
295
|
this._damageBounds.left = this._damageBounds.top = 65535;
|
|
297
296
|
this._damageBounds.right = this._damageBounds.bottom = 0;
|
|
298
297
|
}
|
|
@@ -325,9 +324,7 @@ var Display = /*#__PURE__*/function () {
|
|
|
325
324
|
});
|
|
326
325
|
} else {
|
|
327
326
|
this._setFillColor(color);
|
|
328
|
-
|
|
329
327
|
this._drawCtx.fillRect(x, y, width, height);
|
|
330
|
-
|
|
331
328
|
this._damage(x, y, width, height);
|
|
332
329
|
}
|
|
333
330
|
}
|
|
@@ -356,9 +353,7 @@ var Display = /*#__PURE__*/function () {
|
|
|
356
353
|
this._drawCtx.webkitImageSmoothingEnabled = false;
|
|
357
354
|
this._drawCtx.msImageSmoothingEnabled = false;
|
|
358
355
|
this._drawCtx.imageSmoothingEnabled = false;
|
|
359
|
-
|
|
360
356
|
this._drawCtx.drawImage(this._backbuffer, oldX, oldY, w, h, newX, newY, w, h);
|
|
361
|
-
|
|
362
357
|
this._damage(newX, newY, w, h);
|
|
363
358
|
}
|
|
364
359
|
}
|
|
@@ -369,10 +364,8 @@ var Display = /*#__PURE__*/function () {
|
|
|
369
364
|
if (width === 0 || height === 0) {
|
|
370
365
|
return;
|
|
371
366
|
}
|
|
372
|
-
|
|
373
367
|
var img = new Image();
|
|
374
|
-
img.src = "data: " + mime + ";base64," + _base
|
|
375
|
-
|
|
368
|
+
img.src = "data: " + mime + ";base64," + _base["default"].encode(arr);
|
|
376
369
|
this._renderQPush({
|
|
377
370
|
'type': 'img',
|
|
378
371
|
'img': img,
|
|
@@ -381,61 +374,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
381
374
|
'width': width,
|
|
382
375
|
'height': height
|
|
383
376
|
});
|
|
384
|
-
} // start updating a tile
|
|
385
|
-
|
|
386
|
-
}, {
|
|
387
|
-
key: "startTile",
|
|
388
|
-
value: function startTile(x, y, width, height, color) {
|
|
389
|
-
this._tileX = x;
|
|
390
|
-
this._tileY = y;
|
|
391
|
-
|
|
392
|
-
if (width === 16 && height === 16) {
|
|
393
|
-
this._tile = this._tile16x16;
|
|
394
|
-
} else {
|
|
395
|
-
this._tile = this._drawCtx.createImageData(width, height);
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
var red = color[2];
|
|
399
|
-
var green = color[1];
|
|
400
|
-
var blue = color[0];
|
|
401
|
-
var data = this._tile.data;
|
|
402
|
-
|
|
403
|
-
for (var i = 0; i < width * height * 4; i += 4) {
|
|
404
|
-
data[i] = red;
|
|
405
|
-
data[i + 1] = green;
|
|
406
|
-
data[i + 2] = blue;
|
|
407
|
-
data[i + 3] = 255;
|
|
408
|
-
}
|
|
409
|
-
} // update sub-rectangle of the current tile
|
|
410
|
-
|
|
411
|
-
}, {
|
|
412
|
-
key: "subTile",
|
|
413
|
-
value: function subTile(x, y, w, h, color) {
|
|
414
|
-
var red = color[2];
|
|
415
|
-
var green = color[1];
|
|
416
|
-
var blue = color[0];
|
|
417
|
-
var xend = x + w;
|
|
418
|
-
var yend = y + h;
|
|
419
|
-
var data = this._tile.data;
|
|
420
|
-
var width = this._tile.width;
|
|
421
|
-
|
|
422
|
-
for (var j = y; j < yend; j++) {
|
|
423
|
-
for (var i = x; i < xend; i++) {
|
|
424
|
-
var p = (i + j * width) * 4;
|
|
425
|
-
data[p] = red;
|
|
426
|
-
data[p + 1] = green;
|
|
427
|
-
data[p + 2] = blue;
|
|
428
|
-
data[p + 3] = 255;
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
} // draw the current tile to the screen
|
|
432
|
-
|
|
433
|
-
}, {
|
|
434
|
-
key: "finishTile",
|
|
435
|
-
value: function finishTile() {
|
|
436
|
-
this._drawCtx.putImageData(this._tile, this._tileX, this._tileY);
|
|
437
|
-
|
|
438
|
-
this._damage(this._tileX, this._tileY, this._tile.width, this._tile.height);
|
|
439
377
|
}
|
|
440
378
|
}, {
|
|
441
379
|
key: "blitImage",
|
|
@@ -446,7 +384,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
446
384
|
// this probably isn't getting called *nearly* as much
|
|
447
385
|
var newArr = new Uint8Array(width * height * 4);
|
|
448
386
|
newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
|
|
449
|
-
|
|
450
387
|
this._renderQPush({
|
|
451
388
|
'type': 'blit',
|
|
452
389
|
'data': newArr,
|
|
@@ -456,94 +393,51 @@ var Display = /*#__PURE__*/function () {
|
|
|
456
393
|
'height': height
|
|
457
394
|
});
|
|
458
395
|
} else {
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
value: function blitRgbImage(x, y, width, height, arr, offset, fromQueue) {
|
|
465
|
-
if (this._renderQ.length !== 0 && !fromQueue) {
|
|
466
|
-
// NB(directxman12): it's technically more performant here to use preallocated arrays,
|
|
467
|
-
// but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
|
|
468
|
-
// this probably isn't getting called *nearly* as much
|
|
469
|
-
var newArr = new Uint8Array(width * height * 3);
|
|
470
|
-
newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
|
|
471
|
-
|
|
472
|
-
this._renderQPush({
|
|
473
|
-
'type': 'blitRgb',
|
|
474
|
-
'data': newArr,
|
|
475
|
-
'x': x,
|
|
476
|
-
'y': y,
|
|
477
|
-
'width': width,
|
|
478
|
-
'height': height
|
|
479
|
-
});
|
|
480
|
-
} else {
|
|
481
|
-
this._rgbImageData(x, y, width, height, arr, offset);
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
}, {
|
|
485
|
-
key: "blitRgbxImage",
|
|
486
|
-
value: function blitRgbxImage(x, y, width, height, arr, offset, fromQueue) {
|
|
487
|
-
if (this._renderQ.length !== 0 && !fromQueue) {
|
|
488
|
-
// NB(directxman12): it's technically more performant here to use preallocated arrays,
|
|
489
|
-
// but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
|
|
490
|
-
// this probably isn't getting called *nearly* as much
|
|
491
|
-
var newArr = new Uint8Array(width * height * 4);
|
|
492
|
-
newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
|
|
493
|
-
|
|
494
|
-
this._renderQPush({
|
|
495
|
-
'type': 'blitRgbx',
|
|
496
|
-
'data': newArr,
|
|
497
|
-
'x': x,
|
|
498
|
-
'y': y,
|
|
499
|
-
'width': width,
|
|
500
|
-
'height': height
|
|
501
|
-
});
|
|
502
|
-
} else {
|
|
503
|
-
this._rgbxImageData(x, y, width, height, arr, offset);
|
|
396
|
+
// NB(directxman12): arr must be an Type Array view
|
|
397
|
+
var data = new Uint8ClampedArray(arr.buffer, arr.byteOffset + offset, width * height * 4);
|
|
398
|
+
var img = new ImageData(data, width, height);
|
|
399
|
+
this._drawCtx.putImageData(img, x, y);
|
|
400
|
+
this._damage(x, y, width, height);
|
|
504
401
|
}
|
|
505
402
|
}
|
|
506
403
|
}, {
|
|
507
404
|
key: "drawImage",
|
|
508
405
|
value: function drawImage(img, x, y) {
|
|
509
406
|
this._drawCtx.drawImage(img, x, y);
|
|
510
|
-
|
|
511
407
|
this._damage(x, y, img.width, img.height);
|
|
512
408
|
}
|
|
513
409
|
}, {
|
|
514
410
|
key: "autoscale",
|
|
515
411
|
value: function autoscale(containerWidth, containerHeight) {
|
|
516
412
|
var scaleRatio;
|
|
517
|
-
|
|
518
413
|
if (containerWidth === 0 || containerHeight === 0) {
|
|
519
414
|
scaleRatio = 0;
|
|
520
415
|
} else {
|
|
521
416
|
var vp = this._viewportLoc;
|
|
522
417
|
var targetAspectRatio = containerWidth / containerHeight;
|
|
523
418
|
var fbAspectRatio = vp.w / vp.h;
|
|
524
|
-
|
|
525
419
|
if (fbAspectRatio >= targetAspectRatio) {
|
|
526
420
|
scaleRatio = containerWidth / vp.w;
|
|
527
421
|
} else {
|
|
528
422
|
scaleRatio = containerHeight / vp.h;
|
|
529
423
|
}
|
|
530
424
|
}
|
|
531
|
-
|
|
532
425
|
this._rescale(scaleRatio);
|
|
533
|
-
}
|
|
426
|
+
}
|
|
534
427
|
|
|
428
|
+
// ===== PRIVATE METHODS =====
|
|
535
429
|
}, {
|
|
536
430
|
key: "_rescale",
|
|
537
431
|
value: function _rescale(factor) {
|
|
538
432
|
this._scale = factor;
|
|
539
|
-
var vp = this._viewportLoc;
|
|
433
|
+
var vp = this._viewportLoc;
|
|
434
|
+
|
|
435
|
+
// NB(directxman12): If you set the width directly, or set the
|
|
540
436
|
// style width to a number, the canvas is cleared.
|
|
541
437
|
// However, if you set the style width to a string
|
|
542
438
|
// ('NNNpx'), the canvas is scaled without clearing.
|
|
543
|
-
|
|
544
439
|
var width = factor * vp.w + 'px';
|
|
545
440
|
var height = factor * vp.h + 'px';
|
|
546
|
-
|
|
547
441
|
if (this._target.style.width !== width || this._target.style.height !== height) {
|
|
548
442
|
this._target.style.width = width;
|
|
549
443
|
this._target.style.height = height;
|
|
@@ -552,71 +446,16 @@ var Display = /*#__PURE__*/function () {
|
|
|
552
446
|
}, {
|
|
553
447
|
key: "_setFillColor",
|
|
554
448
|
value: function _setFillColor(color) {
|
|
555
|
-
var newStyle = 'rgb(' + color[
|
|
556
|
-
|
|
449
|
+
var newStyle = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
|
|
557
450
|
if (newStyle !== this._prevDrawStyle) {
|
|
558
451
|
this._drawCtx.fillStyle = newStyle;
|
|
559
452
|
this._prevDrawStyle = newStyle;
|
|
560
453
|
}
|
|
561
454
|
}
|
|
562
|
-
}, {
|
|
563
|
-
key: "_rgbImageData",
|
|
564
|
-
value: function _rgbImageData(x, y, width, height, arr, offset) {
|
|
565
|
-
var img = this._drawCtx.createImageData(width, height);
|
|
566
|
-
|
|
567
|
-
var data = img.data;
|
|
568
|
-
|
|
569
|
-
for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
|
|
570
|
-
data[i] = arr[j];
|
|
571
|
-
data[i + 1] = arr[j + 1];
|
|
572
|
-
data[i + 2] = arr[j + 2];
|
|
573
|
-
data[i + 3] = 255; // Alpha
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
this._drawCtx.putImageData(img, x, y);
|
|
577
|
-
|
|
578
|
-
this._damage(x, y, img.width, img.height);
|
|
579
|
-
}
|
|
580
|
-
}, {
|
|
581
|
-
key: "_bgrxImageData",
|
|
582
|
-
value: function _bgrxImageData(x, y, width, height, arr, offset) {
|
|
583
|
-
var img = this._drawCtx.createImageData(width, height);
|
|
584
|
-
|
|
585
|
-
var data = img.data;
|
|
586
|
-
|
|
587
|
-
for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
|
|
588
|
-
data[i] = arr[j + 2];
|
|
589
|
-
data[i + 1] = arr[j + 1];
|
|
590
|
-
data[i + 2] = arr[j];
|
|
591
|
-
data[i + 3] = 255; // Alpha
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
this._drawCtx.putImageData(img, x, y);
|
|
595
|
-
|
|
596
|
-
this._damage(x, y, img.width, img.height);
|
|
597
|
-
}
|
|
598
|
-
}, {
|
|
599
|
-
key: "_rgbxImageData",
|
|
600
|
-
value: function _rgbxImageData(x, y, width, height, arr, offset) {
|
|
601
|
-
// NB(directxman12): arr must be an Type Array view
|
|
602
|
-
var img;
|
|
603
|
-
|
|
604
|
-
if (_browser.supportsImageMetadata) {
|
|
605
|
-
img = new ImageData(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4), width, height);
|
|
606
|
-
} else {
|
|
607
|
-
img = this._drawCtx.createImageData(width, height);
|
|
608
|
-
img.data.set(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4));
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
this._drawCtx.putImageData(img, x, y);
|
|
612
|
-
|
|
613
|
-
this._damage(x, y, img.width, img.height);
|
|
614
|
-
}
|
|
615
455
|
}, {
|
|
616
456
|
key: "_renderQPush",
|
|
617
457
|
value: function _renderQPush(action) {
|
|
618
458
|
this._renderQ.push(action);
|
|
619
|
-
|
|
620
459
|
if (this._renderQ.length === 1) {
|
|
621
460
|
// If this can be rendered immediately it will be, otherwise
|
|
622
461
|
// the scanner will wait for the relevant event
|
|
@@ -629,105 +468,53 @@ var Display = /*#__PURE__*/function () {
|
|
|
629
468
|
// "this" is the object that is ready, not the
|
|
630
469
|
// display object
|
|
631
470
|
this.removeEventListener('load', this._noVNCDisplay._resumeRenderQ);
|
|
632
|
-
|
|
633
471
|
this._noVNCDisplay._scanRenderQ();
|
|
634
472
|
}
|
|
635
473
|
}, {
|
|
636
474
|
key: "_scanRenderQ",
|
|
637
475
|
value: function _scanRenderQ() {
|
|
638
476
|
var ready = true;
|
|
639
|
-
|
|
640
477
|
while (ready && this._renderQ.length > 0) {
|
|
641
478
|
var a = this._renderQ[0];
|
|
642
|
-
|
|
643
479
|
switch (a.type) {
|
|
644
480
|
case 'flip':
|
|
645
481
|
this.flip(true);
|
|
646
482
|
break;
|
|
647
|
-
|
|
648
483
|
case 'copy':
|
|
649
484
|
this.copyImage(a.oldX, a.oldY, a.x, a.y, a.width, a.height, true);
|
|
650
485
|
break;
|
|
651
|
-
|
|
652
486
|
case 'fill':
|
|
653
487
|
this.fillRect(a.x, a.y, a.width, a.height, a.color, true);
|
|
654
488
|
break;
|
|
655
|
-
|
|
656
489
|
case 'blit':
|
|
657
490
|
this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true);
|
|
658
491
|
break;
|
|
659
|
-
|
|
660
|
-
case 'blitRgb':
|
|
661
|
-
this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0, true);
|
|
662
|
-
break;
|
|
663
|
-
|
|
664
|
-
case 'blitRgbx':
|
|
665
|
-
this.blitRgbxImage(a.x, a.y, a.width, a.height, a.data, 0, true);
|
|
666
|
-
break;
|
|
667
|
-
|
|
668
492
|
case 'img':
|
|
669
|
-
|
|
670
|
-
if (a.img.complete && a.img.width !== 0 && a.img.height !== 0) {
|
|
493
|
+
if (a.img.complete) {
|
|
671
494
|
if (a.img.width !== a.width || a.img.height !== a.height) {
|
|
672
495
|
Log.Error("Decoded image has incorrect dimensions. Got " + a.img.width + "x" + a.img.height + ". Expected " + a.width + "x" + a.height + ".");
|
|
673
496
|
return;
|
|
674
497
|
}
|
|
675
|
-
|
|
676
498
|
this.drawImage(a.img, a.x, a.y);
|
|
677
499
|
} else {
|
|
678
500
|
a.img._noVNCDisplay = this;
|
|
679
|
-
a.img.addEventListener('load', this._resumeRenderQ);
|
|
501
|
+
a.img.addEventListener('load', this._resumeRenderQ);
|
|
502
|
+
// We need to wait for this image to 'load'
|
|
680
503
|
// to keep things in-order
|
|
681
|
-
|
|
682
504
|
ready = false;
|
|
683
505
|
}
|
|
684
|
-
|
|
685
506
|
break;
|
|
686
507
|
}
|
|
687
|
-
|
|
688
508
|
if (ready) {
|
|
689
509
|
this._renderQ.shift();
|
|
690
510
|
}
|
|
691
511
|
}
|
|
692
|
-
|
|
693
512
|
if (this._renderQ.length === 0 && this._flushing) {
|
|
694
513
|
this._flushing = false;
|
|
695
514
|
this.onflush();
|
|
696
515
|
}
|
|
697
516
|
}
|
|
698
|
-
}, {
|
|
699
|
-
key: "scale",
|
|
700
|
-
get: function get() {
|
|
701
|
-
return this._scale;
|
|
702
|
-
},
|
|
703
|
-
set: function set(scale) {
|
|
704
|
-
this._rescale(scale);
|
|
705
|
-
}
|
|
706
|
-
}, {
|
|
707
|
-
key: "clipViewport",
|
|
708
|
-
get: function get() {
|
|
709
|
-
return this._clipViewport;
|
|
710
|
-
},
|
|
711
|
-
set: function set(viewport) {
|
|
712
|
-
this._clipViewport = viewport; // May need to readjust the viewport dimensions
|
|
713
|
-
|
|
714
|
-
var vp = this._viewportLoc;
|
|
715
|
-
this.viewportChangeSize(vp.w, vp.h);
|
|
716
|
-
this.viewportChangePos(0, 0);
|
|
717
|
-
}
|
|
718
|
-
}, {
|
|
719
|
-
key: "width",
|
|
720
|
-
get: function get() {
|
|
721
|
-
return this._fbWidth;
|
|
722
|
-
}
|
|
723
|
-
}, {
|
|
724
|
-
key: "height",
|
|
725
|
-
get: function get() {
|
|
726
|
-
return this._fbHeight;
|
|
727
|
-
}
|
|
728
517
|
}]);
|
|
729
|
-
|
|
730
518
|
return Display;
|
|
731
519
|
}();
|
|
732
|
-
|
|
733
|
-
exports.default = Display;
|
|
520
|
+
exports["default"] = Display;
|