@novnc/novnc 1.2.0 → 1.3.0-g0ef7582
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 +1 -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 +6 -11
- package/lib/decoders/hextile.js +68 -44
- package/lib/decoders/jpeg.js +146 -0
- package/lib/decoders/raw.js +14 -21
- package/lib/decoders/rre.js +3 -17
- package/lib/decoders/tight.js +43 -93
- package/lib/decoders/tightpng.js +11 -33
- package/lib/decoders/zrle.js +185 -0
- package/lib/deflator.js +9 -26
- package/lib/des.js +22 -38
- package/lib/display.js +100 -315
- package/lib/encodings.js +7 -8
- package/lib/inflator.js +6 -22
- package/lib/input/domkeytable.js +240 -208
- package/lib/input/fixedkeys.js +10 -5
- package/lib/input/gesturehandler.js +84 -154
- package/lib/input/keyboard.js +87 -238
- 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 +1033 -0
- package/lib/rfb.js +947 -1149
- package/lib/util/browser.js +25 -52
- package/lib/util/cursor.js +25 -81
- package/lib/util/element.js +3 -5
- package/lib/util/events.js +26 -35
- package/lib/util/eventtarget.js +4 -16
- 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 +119 -111
- package/package.json +2 -10
- 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,54 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
4
|
-
|
|
3
|
+
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); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
|
-
exports
|
|
9
|
-
|
|
7
|
+
exports["default"] = void 0;
|
|
10
8
|
var Log = _interopRequireWildcard(require("./util/logging.js"));
|
|
11
|
-
|
|
12
9
|
var _base = _interopRequireDefault(require("./base64.js"));
|
|
13
|
-
|
|
14
|
-
var _browser = require("./util/browser.js");
|
|
15
|
-
|
|
16
10
|
var _int = require("./util/int.js");
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
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
|
-
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
24
14
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
25
|
-
|
|
26
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, descriptor.key, descriptor); } }
|
|
27
|
-
|
|
28
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
29
|
-
|
|
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; }
|
|
30
17
|
var Display = /*#__PURE__*/function () {
|
|
31
18
|
function Display(target) {
|
|
32
19
|
_classCallCheck(this, Display);
|
|
33
|
-
|
|
34
20
|
this._drawCtx = null;
|
|
35
21
|
this._renderQ = []; // queue drawing actions for in-oder rendering
|
|
22
|
+
this._flushing = false;
|
|
36
23
|
|
|
37
|
-
|
|
38
|
-
|
|
24
|
+
// the full frame buffer (logical canvas) size
|
|
39
25
|
this._fbWidth = 0;
|
|
40
26
|
this._fbHeight = 0;
|
|
41
27
|
this._prevDrawStyle = "";
|
|
42
|
-
|
|
43
|
-
this._tile16x16 = null;
|
|
44
|
-
this._tileX = 0;
|
|
45
|
-
this._tileY = 0;
|
|
46
|
-
Log.Debug(">> Display.constructor"); // The visible canvas
|
|
28
|
+
Log.Debug(">> Display.constructor");
|
|
47
29
|
|
|
30
|
+
// The visible canvas
|
|
48
31
|
this._target = target;
|
|
49
|
-
|
|
50
32
|
if (!this._target) {
|
|
51
33
|
throw new Error("Target must be set");
|
|
52
34
|
}
|
|
53
|
-
|
|
54
35
|
if (typeof this._target === 'string') {
|
|
55
36
|
throw new Error('target must be a DOM element');
|
|
56
37
|
}
|
|
57
|
-
|
|
58
38
|
if (!this._target.getContext) {
|
|
59
39
|
throw new Error("no getContext method");
|
|
60
40
|
}
|
|
41
|
+
this._targetCtx = this._target.getContext('2d');
|
|
61
42
|
|
|
62
|
-
|
|
63
|
-
|
|
43
|
+
// the visible canvas viewport (i.e. what actually gets seen)
|
|
64
44
|
this._viewportLoc = {
|
|
65
45
|
'x': 0,
|
|
66
46
|
'y': 0,
|
|
67
47
|
'w': this._target.width,
|
|
68
48
|
'h': this._target.height
|
|
69
|
-
};
|
|
49
|
+
};
|
|
70
50
|
|
|
51
|
+
// The hidden canvas, where we do the actual rendering
|
|
71
52
|
this._backbuffer = document.createElement('canvas');
|
|
72
53
|
this._drawCtx = this._backbuffer.getContext('2d');
|
|
73
54
|
this._damageBounds = {
|
|
@@ -76,66 +57,86 @@ var Display = /*#__PURE__*/function () {
|
|
|
76
57
|
right: this._backbuffer.width,
|
|
77
58
|
bottom: this._backbuffer.height
|
|
78
59
|
};
|
|
79
|
-
Log.Debug("User Agent: " + navigator.userAgent);
|
|
80
|
-
|
|
81
|
-
if (!('createImageData' in this._drawCtx)) {
|
|
82
|
-
throw new Error("Canvas does not support createImageData");
|
|
83
|
-
}
|
|
60
|
+
Log.Debug("User Agent: " + navigator.userAgent);
|
|
61
|
+
Log.Debug("<< Display.constructor");
|
|
84
62
|
|
|
85
|
-
|
|
86
|
-
Log.Debug("<< Display.constructor"); // ===== PROPERTIES =====
|
|
63
|
+
// ===== PROPERTIES =====
|
|
87
64
|
|
|
88
65
|
this._scale = 1.0;
|
|
89
|
-
this._clipViewport = false;
|
|
90
|
-
|
|
91
|
-
this.onflush = function () {}; // A flush request has finished
|
|
66
|
+
this._clipViewport = false;
|
|
92
67
|
|
|
93
|
-
|
|
68
|
+
// ===== EVENT HANDLERS =====
|
|
94
69
|
|
|
70
|
+
this.onflush = function () {}; // A flush request has finished
|
|
71
|
+
}
|
|
95
72
|
|
|
73
|
+
// ===== PROPERTIES =====
|
|
96
74
|
_createClass(Display, [{
|
|
97
|
-
key: "
|
|
75
|
+
key: "scale",
|
|
76
|
+
get: function get() {
|
|
77
|
+
return this._scale;
|
|
78
|
+
},
|
|
79
|
+
set: function set(scale) {
|
|
80
|
+
this._rescale(scale);
|
|
81
|
+
}
|
|
82
|
+
}, {
|
|
83
|
+
key: "clipViewport",
|
|
84
|
+
get: function get() {
|
|
85
|
+
return this._clipViewport;
|
|
86
|
+
},
|
|
87
|
+
set: function set(viewport) {
|
|
88
|
+
this._clipViewport = viewport;
|
|
89
|
+
// May need to readjust the viewport dimensions
|
|
90
|
+
var vp = this._viewportLoc;
|
|
91
|
+
this.viewportChangeSize(vp.w, vp.h);
|
|
92
|
+
this.viewportChangePos(0, 0);
|
|
93
|
+
}
|
|
94
|
+
}, {
|
|
95
|
+
key: "width",
|
|
96
|
+
get: function get() {
|
|
97
|
+
return this._fbWidth;
|
|
98
|
+
}
|
|
99
|
+
}, {
|
|
100
|
+
key: "height",
|
|
101
|
+
get: function get() {
|
|
102
|
+
return this._fbHeight;
|
|
103
|
+
}
|
|
104
|
+
|
|
98
105
|
// ===== PUBLIC METHODS =====
|
|
106
|
+
}, {
|
|
107
|
+
key: "viewportChangePos",
|
|
99
108
|
value: function viewportChangePos(deltaX, deltaY) {
|
|
100
109
|
var vp = this._viewportLoc;
|
|
101
110
|
deltaX = Math.floor(deltaX);
|
|
102
111
|
deltaY = Math.floor(deltaY);
|
|
103
|
-
|
|
104
112
|
if (!this._clipViewport) {
|
|
105
113
|
deltaX = -vp.w; // clamped later of out of bounds
|
|
106
|
-
|
|
107
114
|
deltaY = -vp.h;
|
|
108
115
|
}
|
|
109
|
-
|
|
110
116
|
var vx2 = vp.x + vp.w - 1;
|
|
111
|
-
var vy2 = vp.y + vp.h - 1;
|
|
117
|
+
var vy2 = vp.y + vp.h - 1;
|
|
118
|
+
|
|
119
|
+
// Position change
|
|
112
120
|
|
|
113
121
|
if (deltaX < 0 && vp.x + deltaX < 0) {
|
|
114
122
|
deltaX = -vp.x;
|
|
115
123
|
}
|
|
116
|
-
|
|
117
124
|
if (vx2 + deltaX >= this._fbWidth) {
|
|
118
125
|
deltaX -= vx2 + deltaX - this._fbWidth + 1;
|
|
119
126
|
}
|
|
120
|
-
|
|
121
127
|
if (vp.y + deltaY < 0) {
|
|
122
128
|
deltaY = -vp.y;
|
|
123
129
|
}
|
|
124
|
-
|
|
125
130
|
if (vy2 + deltaY >= this._fbHeight) {
|
|
126
131
|
deltaY -= vy2 + deltaY - this._fbHeight + 1;
|
|
127
132
|
}
|
|
128
|
-
|
|
129
133
|
if (deltaX === 0 && deltaY === 0) {
|
|
130
134
|
return;
|
|
131
135
|
}
|
|
132
|
-
|
|
133
136
|
Log.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
|
|
134
137
|
vp.x += deltaX;
|
|
135
138
|
vp.y += deltaY;
|
|
136
|
-
|
|
137
139
|
this._damage(vp.x, vp.y, vp.w, vp.h);
|
|
138
|
-
|
|
139
140
|
this.flip();
|
|
140
141
|
}
|
|
141
142
|
}, {
|
|
@@ -146,33 +147,28 @@ var Display = /*#__PURE__*/function () {
|
|
|
146
147
|
width = this._fbWidth;
|
|
147
148
|
height = this._fbHeight;
|
|
148
149
|
}
|
|
149
|
-
|
|
150
150
|
width = Math.floor(width);
|
|
151
151
|
height = Math.floor(height);
|
|
152
|
-
|
|
153
152
|
if (width > this._fbWidth) {
|
|
154
153
|
width = this._fbWidth;
|
|
155
154
|
}
|
|
156
|
-
|
|
157
155
|
if (height > this._fbHeight) {
|
|
158
156
|
height = this._fbHeight;
|
|
159
157
|
}
|
|
160
|
-
|
|
161
158
|
var vp = this._viewportLoc;
|
|
162
|
-
|
|
163
159
|
if (vp.w !== width || vp.h !== height) {
|
|
164
160
|
vp.w = width;
|
|
165
161
|
vp.h = height;
|
|
166
162
|
var canvas = this._target;
|
|
167
163
|
canvas.width = width;
|
|
168
|
-
canvas.height = height;
|
|
164
|
+
canvas.height = height;
|
|
169
165
|
|
|
166
|
+
// The position might need to be updated if we've grown
|
|
170
167
|
this.viewportChangePos(0, 0);
|
|
171
|
-
|
|
172
168
|
this._damage(vp.x, vp.y, vp.w, vp.h);
|
|
169
|
+
this.flip();
|
|
173
170
|
|
|
174
|
-
|
|
175
|
-
|
|
171
|
+
// Update the visible size of the target canvas
|
|
176
172
|
this._rescale(this._scale);
|
|
177
173
|
}
|
|
178
174
|
}
|
|
@@ -182,7 +178,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
182
178
|
if (this._scale === 0) {
|
|
183
179
|
return 0;
|
|
184
180
|
}
|
|
185
|
-
|
|
186
181
|
return (0, _int.toSigned32bit)(x / this._scale + this._viewportLoc.x);
|
|
187
182
|
}
|
|
188
183
|
}, {
|
|
@@ -191,7 +186,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
191
186
|
if (this._scale === 0) {
|
|
192
187
|
return 0;
|
|
193
188
|
}
|
|
194
|
-
|
|
195
189
|
return (0, _int.toSigned32bit)(y / this._scale + this._viewportLoc.y);
|
|
196
190
|
}
|
|
197
191
|
}, {
|
|
@@ -201,56 +195,65 @@ var Display = /*#__PURE__*/function () {
|
|
|
201
195
|
this._fbWidth = width;
|
|
202
196
|
this._fbHeight = height;
|
|
203
197
|
var canvas = this._backbuffer;
|
|
204
|
-
|
|
205
198
|
if (canvas.width !== width || canvas.height !== height) {
|
|
206
199
|
// We have to save the canvas data since changing the size will clear it
|
|
207
200
|
var saveImg = null;
|
|
208
|
-
|
|
209
201
|
if (canvas.width > 0 && canvas.height > 0) {
|
|
210
202
|
saveImg = this._drawCtx.getImageData(0, 0, canvas.width, canvas.height);
|
|
211
203
|
}
|
|
212
|
-
|
|
213
204
|
if (canvas.width !== width) {
|
|
214
205
|
canvas.width = width;
|
|
215
206
|
}
|
|
216
|
-
|
|
217
207
|
if (canvas.height !== height) {
|
|
218
208
|
canvas.height = height;
|
|
219
209
|
}
|
|
220
|
-
|
|
221
210
|
if (saveImg) {
|
|
222
211
|
this._drawCtx.putImageData(saveImg, 0, 0);
|
|
223
212
|
}
|
|
224
|
-
}
|
|
225
|
-
// and positioned
|
|
226
|
-
|
|
213
|
+
}
|
|
227
214
|
|
|
215
|
+
// Readjust the viewport as it may be incorrectly sized
|
|
216
|
+
// and positioned
|
|
228
217
|
var vp = this._viewportLoc;
|
|
229
218
|
this.viewportChangeSize(vp.w, vp.h);
|
|
230
219
|
this.viewportChangePos(0, 0);
|
|
231
|
-
}
|
|
220
|
+
}
|
|
221
|
+
}, {
|
|
222
|
+
key: "getImageData",
|
|
223
|
+
value: function getImageData() {
|
|
224
|
+
return this._drawCtx.getImageData(0, 0, this.width, this.height);
|
|
225
|
+
}
|
|
226
|
+
}, {
|
|
227
|
+
key: "toDataURL",
|
|
228
|
+
value: function toDataURL(type, encoderOptions) {
|
|
229
|
+
return this._backbuffer.toDataURL(type, encoderOptions);
|
|
230
|
+
}
|
|
231
|
+
}, {
|
|
232
|
+
key: "toBlob",
|
|
233
|
+
value: function toBlob(callback, type, quality) {
|
|
234
|
+
return this._backbuffer.toBlob(callback, type, quality);
|
|
235
|
+
}
|
|
232
236
|
|
|
237
|
+
// Track what parts of the visible canvas that need updating
|
|
233
238
|
}, {
|
|
234
239
|
key: "_damage",
|
|
235
240
|
value: function _damage(x, y, w, h) {
|
|
236
241
|
if (x < this._damageBounds.left) {
|
|
237
242
|
this._damageBounds.left = x;
|
|
238
243
|
}
|
|
239
|
-
|
|
240
244
|
if (y < this._damageBounds.top) {
|
|
241
245
|
this._damageBounds.top = y;
|
|
242
246
|
}
|
|
243
|
-
|
|
244
247
|
if (x + w > this._damageBounds.right) {
|
|
245
248
|
this._damageBounds.right = x + w;
|
|
246
249
|
}
|
|
247
|
-
|
|
248
250
|
if (y + h > this._damageBounds.bottom) {
|
|
249
251
|
this._damageBounds.bottom = y + h;
|
|
250
252
|
}
|
|
251
|
-
}
|
|
252
|
-
// rendering canvas
|
|
253
|
+
}
|
|
253
254
|
|
|
255
|
+
// Update the visible canvas with the contents of the
|
|
256
|
+
// rendering canvas
|
|
254
257
|
}, {
|
|
255
258
|
key: "flip",
|
|
256
259
|
value: function flip(fromQueue) {
|
|
@@ -265,34 +268,28 @@ var Display = /*#__PURE__*/function () {
|
|
|
265
268
|
var h = this._damageBounds.bottom - y;
|
|
266
269
|
var vx = x - this._viewportLoc.x;
|
|
267
270
|
var vy = y - this._viewportLoc.y;
|
|
268
|
-
|
|
269
271
|
if (vx < 0) {
|
|
270
272
|
w += vx;
|
|
271
273
|
x -= vx;
|
|
272
274
|
vx = 0;
|
|
273
275
|
}
|
|
274
|
-
|
|
275
276
|
if (vy < 0) {
|
|
276
277
|
h += vy;
|
|
277
278
|
y -= vy;
|
|
278
279
|
vy = 0;
|
|
279
280
|
}
|
|
280
|
-
|
|
281
281
|
if (vx + w > this._viewportLoc.w) {
|
|
282
282
|
w = this._viewportLoc.w - vx;
|
|
283
283
|
}
|
|
284
|
-
|
|
285
284
|
if (vy + h > this._viewportLoc.h) {
|
|
286
285
|
h = this._viewportLoc.h - vy;
|
|
287
286
|
}
|
|
288
|
-
|
|
289
287
|
if (w > 0 && h > 0) {
|
|
290
288
|
// FIXME: We may need to disable image smoothing here
|
|
291
289
|
// as well (see copyImage()), but we haven't
|
|
292
290
|
// noticed any problem yet.
|
|
293
291
|
this._targetCtx.drawImage(this._backbuffer, x, y, w, h, vx, vy, w, h);
|
|
294
292
|
}
|
|
295
|
-
|
|
296
293
|
this._damageBounds.left = this._damageBounds.top = 65535;
|
|
297
294
|
this._damageBounds.right = this._damageBounds.bottom = 0;
|
|
298
295
|
}
|
|
@@ -325,9 +322,7 @@ var Display = /*#__PURE__*/function () {
|
|
|
325
322
|
});
|
|
326
323
|
} else {
|
|
327
324
|
this._setFillColor(color);
|
|
328
|
-
|
|
329
325
|
this._drawCtx.fillRect(x, y, width, height);
|
|
330
|
-
|
|
331
326
|
this._damage(x, y, width, height);
|
|
332
327
|
}
|
|
333
328
|
}
|
|
@@ -356,9 +351,7 @@ var Display = /*#__PURE__*/function () {
|
|
|
356
351
|
this._drawCtx.webkitImageSmoothingEnabled = false;
|
|
357
352
|
this._drawCtx.msImageSmoothingEnabled = false;
|
|
358
353
|
this._drawCtx.imageSmoothingEnabled = false;
|
|
359
|
-
|
|
360
354
|
this._drawCtx.drawImage(this._backbuffer, oldX, oldY, w, h, newX, newY, w, h);
|
|
361
|
-
|
|
362
355
|
this._damage(newX, newY, w, h);
|
|
363
356
|
}
|
|
364
357
|
}
|
|
@@ -369,10 +362,8 @@ var Display = /*#__PURE__*/function () {
|
|
|
369
362
|
if (width === 0 || height === 0) {
|
|
370
363
|
return;
|
|
371
364
|
}
|
|
372
|
-
|
|
373
365
|
var img = new Image();
|
|
374
|
-
img.src = "data: " + mime + ";base64," + _base
|
|
375
|
-
|
|
366
|
+
img.src = "data: " + mime + ";base64," + _base["default"].encode(arr);
|
|
376
367
|
this._renderQPush({
|
|
377
368
|
'type': 'img',
|
|
378
369
|
'img': img,
|
|
@@ -381,61 +372,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
381
372
|
'width': width,
|
|
382
373
|
'height': height
|
|
383
374
|
});
|
|
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
375
|
}
|
|
440
376
|
}, {
|
|
441
377
|
key: "blitImage",
|
|
@@ -446,7 +382,6 @@ var Display = /*#__PURE__*/function () {
|
|
|
446
382
|
// this probably isn't getting called *nearly* as much
|
|
447
383
|
var newArr = new Uint8Array(width * height * 4);
|
|
448
384
|
newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
|
|
449
|
-
|
|
450
385
|
this._renderQPush({
|
|
451
386
|
'type': 'blit',
|
|
452
387
|
'data': newArr,
|
|
@@ -456,94 +391,51 @@ var Display = /*#__PURE__*/function () {
|
|
|
456
391
|
'height': height
|
|
457
392
|
});
|
|
458
393
|
} 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);
|
|
394
|
+
// NB(directxman12): arr must be an Type Array view
|
|
395
|
+
var data = new Uint8ClampedArray(arr.buffer, arr.byteOffset + offset, width * height * 4);
|
|
396
|
+
var img = new ImageData(data, width, height);
|
|
397
|
+
this._drawCtx.putImageData(img, x, y);
|
|
398
|
+
this._damage(x, y, width, height);
|
|
504
399
|
}
|
|
505
400
|
}
|
|
506
401
|
}, {
|
|
507
402
|
key: "drawImage",
|
|
508
403
|
value: function drawImage(img, x, y) {
|
|
509
404
|
this._drawCtx.drawImage(img, x, y);
|
|
510
|
-
|
|
511
405
|
this._damage(x, y, img.width, img.height);
|
|
512
406
|
}
|
|
513
407
|
}, {
|
|
514
408
|
key: "autoscale",
|
|
515
409
|
value: function autoscale(containerWidth, containerHeight) {
|
|
516
410
|
var scaleRatio;
|
|
517
|
-
|
|
518
411
|
if (containerWidth === 0 || containerHeight === 0) {
|
|
519
412
|
scaleRatio = 0;
|
|
520
413
|
} else {
|
|
521
414
|
var vp = this._viewportLoc;
|
|
522
415
|
var targetAspectRatio = containerWidth / containerHeight;
|
|
523
416
|
var fbAspectRatio = vp.w / vp.h;
|
|
524
|
-
|
|
525
417
|
if (fbAspectRatio >= targetAspectRatio) {
|
|
526
418
|
scaleRatio = containerWidth / vp.w;
|
|
527
419
|
} else {
|
|
528
420
|
scaleRatio = containerHeight / vp.h;
|
|
529
421
|
}
|
|
530
422
|
}
|
|
531
|
-
|
|
532
423
|
this._rescale(scaleRatio);
|
|
533
|
-
}
|
|
424
|
+
}
|
|
534
425
|
|
|
426
|
+
// ===== PRIVATE METHODS =====
|
|
535
427
|
}, {
|
|
536
428
|
key: "_rescale",
|
|
537
429
|
value: function _rescale(factor) {
|
|
538
430
|
this._scale = factor;
|
|
539
|
-
var vp = this._viewportLoc;
|
|
431
|
+
var vp = this._viewportLoc;
|
|
432
|
+
|
|
433
|
+
// NB(directxman12): If you set the width directly, or set the
|
|
540
434
|
// style width to a number, the canvas is cleared.
|
|
541
435
|
// However, if you set the style width to a string
|
|
542
436
|
// ('NNNpx'), the canvas is scaled without clearing.
|
|
543
|
-
|
|
544
437
|
var width = factor * vp.w + 'px';
|
|
545
438
|
var height = factor * vp.h + 'px';
|
|
546
|
-
|
|
547
439
|
if (this._target.style.width !== width || this._target.style.height !== height) {
|
|
548
440
|
this._target.style.width = width;
|
|
549
441
|
this._target.style.height = height;
|
|
@@ -552,71 +444,16 @@ var Display = /*#__PURE__*/function () {
|
|
|
552
444
|
}, {
|
|
553
445
|
key: "_setFillColor",
|
|
554
446
|
value: function _setFillColor(color) {
|
|
555
|
-
var newStyle = 'rgb(' + color[
|
|
556
|
-
|
|
447
|
+
var newStyle = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
|
|
557
448
|
if (newStyle !== this._prevDrawStyle) {
|
|
558
449
|
this._drawCtx.fillStyle = newStyle;
|
|
559
450
|
this._prevDrawStyle = newStyle;
|
|
560
451
|
}
|
|
561
452
|
}
|
|
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
453
|
}, {
|
|
616
454
|
key: "_renderQPush",
|
|
617
455
|
value: function _renderQPush(action) {
|
|
618
456
|
this._renderQ.push(action);
|
|
619
|
-
|
|
620
457
|
if (this._renderQ.length === 1) {
|
|
621
458
|
// If this can be rendered immediately it will be, otherwise
|
|
622
459
|
// the scanner will wait for the relevant event
|
|
@@ -629,105 +466,53 @@ var Display = /*#__PURE__*/function () {
|
|
|
629
466
|
// "this" is the object that is ready, not the
|
|
630
467
|
// display object
|
|
631
468
|
this.removeEventListener('load', this._noVNCDisplay._resumeRenderQ);
|
|
632
|
-
|
|
633
469
|
this._noVNCDisplay._scanRenderQ();
|
|
634
470
|
}
|
|
635
471
|
}, {
|
|
636
472
|
key: "_scanRenderQ",
|
|
637
473
|
value: function _scanRenderQ() {
|
|
638
474
|
var ready = true;
|
|
639
|
-
|
|
640
475
|
while (ready && this._renderQ.length > 0) {
|
|
641
476
|
var a = this._renderQ[0];
|
|
642
|
-
|
|
643
477
|
switch (a.type) {
|
|
644
478
|
case 'flip':
|
|
645
479
|
this.flip(true);
|
|
646
480
|
break;
|
|
647
|
-
|
|
648
481
|
case 'copy':
|
|
649
482
|
this.copyImage(a.oldX, a.oldY, a.x, a.y, a.width, a.height, true);
|
|
650
483
|
break;
|
|
651
|
-
|
|
652
484
|
case 'fill':
|
|
653
485
|
this.fillRect(a.x, a.y, a.width, a.height, a.color, true);
|
|
654
486
|
break;
|
|
655
|
-
|
|
656
487
|
case 'blit':
|
|
657
488
|
this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true);
|
|
658
489
|
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
490
|
case 'img':
|
|
669
|
-
|
|
670
|
-
if (a.img.complete && a.img.width !== 0 && a.img.height !== 0) {
|
|
491
|
+
if (a.img.complete) {
|
|
671
492
|
if (a.img.width !== a.width || a.img.height !== a.height) {
|
|
672
493
|
Log.Error("Decoded image has incorrect dimensions. Got " + a.img.width + "x" + a.img.height + ". Expected " + a.width + "x" + a.height + ".");
|
|
673
494
|
return;
|
|
674
495
|
}
|
|
675
|
-
|
|
676
496
|
this.drawImage(a.img, a.x, a.y);
|
|
677
497
|
} else {
|
|
678
498
|
a.img._noVNCDisplay = this;
|
|
679
|
-
a.img.addEventListener('load', this._resumeRenderQ);
|
|
499
|
+
a.img.addEventListener('load', this._resumeRenderQ);
|
|
500
|
+
// We need to wait for this image to 'load'
|
|
680
501
|
// to keep things in-order
|
|
681
|
-
|
|
682
502
|
ready = false;
|
|
683
503
|
}
|
|
684
|
-
|
|
685
504
|
break;
|
|
686
505
|
}
|
|
687
|
-
|
|
688
506
|
if (ready) {
|
|
689
507
|
this._renderQ.shift();
|
|
690
508
|
}
|
|
691
509
|
}
|
|
692
|
-
|
|
693
510
|
if (this._renderQ.length === 0 && this._flushing) {
|
|
694
511
|
this._flushing = false;
|
|
695
512
|
this.onflush();
|
|
696
513
|
}
|
|
697
514
|
}
|
|
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
515
|
}]);
|
|
729
|
-
|
|
730
516
|
return Display;
|
|
731
517
|
}();
|
|
732
|
-
|
|
733
|
-
exports.default = Display;
|
|
518
|
+
exports["default"] = Display;
|