]>
Commit | Line | Data |
---|---|---|
c4164bda JM |
1 | /* |
2 | * noVNC: HTML5 VNC client | |
d58f8b51 | 3 | * Copyright (C) 2012 Joel Martin |
fdedbafb | 4 | * Copyright (C) 2015 Samuel Mannehed for Cendio AB |
1d728ace | 5 | * Licensed under MPL 2.0 (see LICENSE.txt) |
c4164bda JM |
6 | * |
7 | * See README.md for usage and integration instructions. | |
8 | */ | |
c4164bda | 9 | |
1e13775b | 10 | /*jslint browser: true, white: false */ |
d3796c14 | 11 | /*global Util, Base64, changeCursor */ |
c4164bda | 12 | |
1e13775b | 13 | var Display; |
ff36b127 | 14 | |
1e13775b SR |
15 | (function () { |
16 | "use strict"; | |
e2e7c224 | 17 | |
d1800d09 SR |
18 | var SUPPORTS_IMAGEDATA_CONSTRUCTOR = false; |
19 | try { | |
20 | new ImageData(new Uint8ClampedArray(1), 1, 1); | |
21 | SUPPORTS_IMAGEDATA_CONSTRUCTOR = true; | |
22 | } catch (ex) { | |
23 | // ignore failure | |
24 | } | |
25 | ||
1e13775b SR |
26 | Display = function (defaults) { |
27 | this._drawCtx = null; | |
28 | this._c_forceCanvas = false; | |
8db09746 | 29 | |
1e13775b | 30 | this._renderQ = []; // queue drawing actions for in-oder rendering |
3b20e7a9 | 31 | |
1e13775b SR |
32 | // the full frame buffer (logical canvas) size |
33 | this._fb_width = 0; | |
34 | this._fb_height = 0; | |
58b4c536 | 35 | |
fdedbafb | 36 | // the size limit of the viewport (start disabled) |
37 | this._maxWidth = 0; | |
38 | this._maxHeight = 0; | |
39 | ||
1e13775b SR |
40 | // the visible "physical canvas" viewport |
41 | this._viewportLoc = { 'x': 0, 'y': 0, 'w': 0, 'h': 0 }; | |
42 | this._cleanRect = { 'x1': 0, 'y1': 0, 'x2': -1, 'y2': -1 }; | |
58b4c536 | 43 | |
1e13775b SR |
44 | this._prevDrawStyle = ""; |
45 | this._tile = null; | |
46 | this._tile16x16 = null; | |
47 | this._tile_x = 0; | |
48 | this._tile_y = 0; | |
f272267b | 49 | |
1e13775b SR |
50 | Util.set_defaults(this, defaults, { |
51 | 'true_color': true, | |
52 | 'colourMap': [], | |
53 | 'scale': 1.0, | |
54 | 'viewport': false, | |
55 | 'render_mode': '' | |
56 | }); | |
f272267b | 57 | |
1e13775b | 58 | Util.Debug(">> Display.constructor"); |
f272267b | 59 | |
1e13775b SR |
60 | if (!this._target) { |
61 | throw new Error("Target must be set"); | |
62 | } | |
8db09746 | 63 | |
1e13775b SR |
64 | if (typeof this._target === 'string') { |
65 | throw new Error('target must be a DOM element'); | |
66 | } | |
8db09746 | 67 | |
1e13775b SR |
68 | if (!this._target.getContext) { |
69 | throw new Error("no getContext method"); | |
70 | } | |
8db09746 | 71 | |
1e13775b SR |
72 | if (!this._drawCtx) { |
73 | this._drawCtx = this._target.getContext('2d'); | |
74 | } | |
d93d3e09 | 75 | |
1e13775b SR |
76 | Util.Debug("User Agent: " + navigator.userAgent); |
77 | if (Util.Engine.gecko) { Util.Debug("Browser: gecko " + Util.Engine.gecko); } | |
78 | if (Util.Engine.webkit) { Util.Debug("Browser: webkit " + Util.Engine.webkit); } | |
79 | if (Util.Engine.trident) { Util.Debug("Browser: trident " + Util.Engine.trident); } | |
80 | if (Util.Engine.presto) { Util.Debug("Browser: presto " + Util.Engine.presto); } | |
d93d3e09 | 81 | |
1e13775b | 82 | this.clear(); |
8db09746 | 83 | |
1e13775b SR |
84 | // Check canvas features |
85 | if ('createImageData' in this._drawCtx) { | |
86 | this._render_mode = 'canvas rendering'; | |
87 | } else { | |
88 | throw new Error("Canvas does not support createImageData"); | |
89 | } | |
005d9ee9 | 90 | |
1e13775b SR |
91 | if (this._prefer_js === null) { |
92 | Util.Info("Prefering javascript operations"); | |
93 | this._prefer_js = true; | |
94 | } | |
d93d3e09 | 95 | |
1e13775b | 96 | // Determine browser support for setting the cursor via data URI scheme |
58ded70d SR |
97 | if (this._cursor_uri || this._cursor_uri === null || |
98 | this._cursor_uri === undefined) { | |
8ce27ddb | 99 | this._cursor_uri = Util.browserSupportsCursorURIs(); |
1e13775b | 100 | } |
cdb55d26 | 101 | |
1e13775b SR |
102 | Util.Debug("<< Display.constructor"); |
103 | }; | |
490d471c | 104 | |
1e13775b SR |
105 | Display.prototype = { |
106 | // Public methods | |
636be753 | 107 | viewportChangePos: function (deltaX, deltaY) { |
1e13775b | 108 | var vp = this._viewportLoc; |
a8255821 | 109 | deltaX = Math.floor(deltaX); |
110 | deltaY = Math.floor(deltaY); | |
1e13775b SR |
111 | |
112 | if (!this._viewport) { | |
1e13775b SR |
113 | deltaX = -vp.w; // clamped later of out of bounds |
114 | deltaY = -vp.h; | |
8db09746 | 115 | } |
54e7cbdf | 116 | |
1e13775b SR |
117 | var vx2 = vp.x + vp.w - 1; |
118 | var vy2 = vp.y + vp.h - 1; | |
54e7cbdf | 119 | |
1e13775b | 120 | // Position change |
54e7cbdf | 121 | |
1e13775b SR |
122 | if (deltaX < 0 && vp.x + deltaX < 0) { |
123 | deltaX = -vp.x; | |
124 | } | |
125 | if (vx2 + deltaX >= this._fb_width) { | |
126 | deltaX -= vx2 + deltaX - this._fb_width + 1; | |
127 | } | |
54e7cbdf | 128 | |
1e13775b SR |
129 | if (vp.y + deltaY < 0) { |
130 | deltaY = -vp.y; | |
131 | } | |
132 | if (vy2 + deltaY >= this._fb_height) { | |
133 | deltaY -= (vy2 + deltaY - this._fb_height + 1); | |
134 | } | |
54e7cbdf | 135 | |
1e13775b SR |
136 | if (deltaX === 0 && deltaY === 0) { |
137 | return; | |
138 | } | |
139 | Util.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY); | |
140 | ||
141 | vp.x += deltaX; | |
142 | vx2 += deltaX; | |
143 | vp.y += deltaY; | |
144 | vy2 += deltaY; | |
145 | ||
146 | // Update the clean rectangle | |
636be753 | 147 | var cr = this._cleanRect; |
1e13775b SR |
148 | if (vp.x > cr.x1) { |
149 | cr.x1 = vp.x; | |
150 | } | |
151 | if (vx2 < cr.x2) { | |
152 | cr.x2 = vx2; | |
153 | } | |
154 | if (vp.y > cr.y1) { | |
155 | cr.y1 = vp.y; | |
156 | } | |
157 | if (vy2 < cr.y2) { | |
158 | cr.y2 = vy2; | |
159 | } | |
160 | ||
161 | var x1, w; | |
162 | if (deltaX < 0) { | |
163 | // Shift viewport left, redraw left section | |
164 | x1 = 0; | |
165 | w = -deltaX; | |
166 | } else { | |
167 | // Shift viewport right, redraw right section | |
168 | x1 = vp.w - deltaX; | |
169 | w = deltaX; | |
170 | } | |
171 | ||
172 | var y1, h; | |
173 | if (deltaY < 0) { | |
174 | // Shift viewport up, redraw top section | |
175 | y1 = 0; | |
176 | h = -deltaY; | |
177 | } else { | |
178 | // Shift viewport down, redraw bottom section | |
179 | y1 = vp.h - deltaY; | |
180 | h = deltaY; | |
181 | } | |
182 | ||
1e13775b | 183 | var saveStyle = this._drawCtx.fillStyle; |
636be753 | 184 | var canvas = this._target; |
1e13775b | 185 | this._drawCtx.fillStyle = "rgb(255,255,255)"; |
a8255821 | 186 | |
187 | // Due to this bug among others [1] we need to disable the image-smoothing to | |
188 | // avoid getting a blur effect when panning. | |
189 | // | |
190 | // 1. https://bugzilla.mozilla.org/show_bug.cgi?id=1194719 | |
191 | // | |
192 | // We need to set these every time since all properties are reset | |
193 | // when the the size is changed | |
194 | if (this._drawCtx.mozImageSmoothingEnabled) { | |
195 | this._drawCtx.mozImageSmoothingEnabled = false; | |
196 | } else if (this._drawCtx.webkitImageSmoothingEnabled) { | |
197 | this._drawCtx.webkitImageSmoothingEnabled = false; | |
198 | } else if (this._drawCtx.msImageSmoothingEnabled) { | |
199 | this._drawCtx.msImageSmoothingEnabled = false; | |
200 | } else if (this._drawCtx.imageSmoothingEnabled) { | |
201 | this._drawCtx.imageSmoothingEnabled = false; | |
202 | } | |
203 | ||
204 | // Copy the valid part of the viewport to the shifted location | |
205 | this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, -deltaX, -deltaY, vp.w, vp.h); | |
206 | ||
1e13775b | 207 | if (deltaX !== 0) { |
1e13775b SR |
208 | this._drawCtx.fillRect(x1, 0, w, vp.h); |
209 | } | |
210 | if (deltaY !== 0) { | |
1e13775b SR |
211 | this._drawCtx.fillRect(0, y1, vp.w, h); |
212 | } | |
213 | this._drawCtx.fillStyle = saveStyle; | |
214 | }, | |
215 | ||
636be753 | 216 | viewportChangeSize: function(width, height) { |
217 | ||
fdedbafb | 218 | if (typeof(width) === "undefined" || typeof(height) === "undefined") { |
636be753 | 219 | |
220 | Util.Debug("Setting viewport to full display region"); | |
221 | width = this._fb_width; | |
222 | height = this._fb_height; | |
223 | } | |
224 | ||
225 | var vp = this._viewportLoc; | |
226 | if (vp.w !== width || vp.h !== height) { | |
227 | ||
fdedbafb | 228 | if (this._viewport) { |
229 | if (this._maxWidth !== 0 && width > this._maxWidth) { | |
230 | width = this._maxWidth; | |
231 | } | |
232 | if (this._maxHeight !== 0 && height > this._maxHeight) { | |
233 | height = this._maxHeight; | |
234 | } | |
235 | } | |
236 | ||
636be753 | 237 | var cr = this._cleanRect; |
238 | ||
239 | if (width < vp.w && cr.x2 > vp.x + width - 1) { | |
240 | cr.x2 = vp.x + width - 1; | |
241 | } | |
636be753 | 242 | if (height < vp.h && cr.y2 > vp.y + height - 1) { |
243 | cr.y2 = vp.y + height - 1; | |
244 | } | |
245 | ||
fdedbafb | 246 | vp.w = width; |
247 | vp.h = height; | |
636be753 | 248 | |
636be753 | 249 | var canvas = this._target; |
fdedbafb | 250 | if (canvas.width !== width || canvas.height !== height) { |
251 | ||
252 | // We have to save the canvas data since changing the size will clear it | |
253 | var saveImg = null; | |
254 | if (vp.w > 0 && vp.h > 0 && canvas.width > 0 && canvas.height > 0) { | |
255 | var img_width = canvas.width < vp.w ? canvas.width : vp.w; | |
256 | var img_height = canvas.height < vp.h ? canvas.height : vp.h; | |
257 | saveImg = this._drawCtx.getImageData(0, 0, img_width, img_height); | |
258 | } | |
259 | ||
6e296bfa | 260 | if (canvas.width !== width) { |
261 | canvas.width = width; | |
fdedbafb | 262 | canvas.style.width = width + 'px'; |
263 | } | |
6e296bfa | 264 | if (canvas.height !== height) { |
265 | canvas.height = height; | |
266 | canvas.style.height = height + 'px'; | |
267 | } | |
636be753 | 268 | |
fdedbafb | 269 | if (saveImg) { |
270 | this._drawCtx.putImageData(saveImg, 0, 0); | |
271 | } | |
636be753 | 272 | } |
273 | } | |
274 | }, | |
275 | ||
1e13775b SR |
276 | // Return a map of clean and dirty areas of the viewport and reset the |
277 | // tracking of clean and dirty areas | |
278 | // | |
279 | // Returns: { 'cleanBox': { 'x': x, 'y': y, 'w': w, 'h': h}, | |
280 | // 'dirtyBoxes': [{ 'x': x, 'y': y, 'w': w, 'h': h }, ...] } | |
281 | getCleanDirtyReset: function () { | |
282 | var vp = this._viewportLoc; | |
283 | var cr = this._cleanRect; | |
284 | ||
285 | var cleanBox = { 'x': cr.x1, 'y': cr.y1, | |
286 | 'w': cr.x2 - cr.x1 + 1, 'h': cr.y2 - cr.y1 + 1 }; | |
287 | ||
288 | var dirtyBoxes = []; | |
289 | if (cr.x1 >= cr.x2 || cr.y1 >= cr.y2) { | |
290 | // Whole viewport is dirty | |
291 | dirtyBoxes.push({ 'x': vp.x, 'y': vp.y, 'w': vp.w, 'h': vp.h }); | |
292 | } else { | |
293 | // Redraw dirty regions | |
294 | var vx2 = vp.x + vp.w - 1; | |
295 | var vy2 = vp.y + vp.h - 1; | |
296 | ||
297 | if (vp.x < cr.x1) { | |
298 | // left side dirty region | |
299 | dirtyBoxes.push({'x': vp.x, 'y': vp.y, | |
300 | 'w': cr.x1 - vp.x + 1, 'h': vp.h}); | |
301 | } | |
302 | if (vx2 > cr.x2) { | |
303 | // right side dirty region | |
304 | dirtyBoxes.push({'x': cr.x2 + 1, 'y': vp.y, | |
305 | 'w': vx2 - cr.x2, 'h': vp.h}); | |
306 | } | |
307 | if(vp.y < cr.y1) { | |
308 | // top/middle dirty region | |
309 | dirtyBoxes.push({'x': cr.x1, 'y': vp.y, | |
310 | 'w': cr.x2 - cr.x1 + 1, 'h': cr.y1 - vp.y}); | |
311 | } | |
312 | if (vy2 > cr.y2) { | |
313 | // bottom/middle dirty region | |
314 | dirtyBoxes.push({'x': cr.x1, 'y': cr.y2 + 1, | |
315 | 'w': cr.x2 - cr.x1 + 1, 'h': vy2 - cr.y2}); | |
316 | } | |
317 | } | |
318 | ||
319 | this._cleanRect = {'x1': vp.x, 'y1': vp.y, | |
320 | 'x2': vp.x + vp.w - 1, 'y2': vp.y + vp.h - 1}; | |
321 | ||
322 | return {'cleanBox': cleanBox, 'dirtyBoxes': dirtyBoxes}; | |
323 | }, | |
324 | ||
325 | absX: function (x) { | |
326 | return x + this._viewportLoc.x; | |
327 | }, | |
328 | ||
329 | absY: function (y) { | |
330 | return y + this._viewportLoc.y; | |
331 | }, | |
332 | ||
333 | resize: function (width, height) { | |
334 | this._prevDrawStyle = ""; | |
335 | ||
336 | this._fb_width = width; | |
337 | this._fb_height = height; | |
338 | ||
339 | this._rescale(this._scale); | |
340 | ||
636be753 | 341 | this.viewportChangeSize(); |
1e13775b SR |
342 | }, |
343 | ||
344 | clear: function () { | |
345 | if (this._logo) { | |
346 | this.resize(this._logo.width, this._logo.height); | |
347 | this.blitStringImage(this._logo.data, 0, 0); | |
348 | } else { | |
0b0b0433 SR |
349 | if (Util.Engine.trident === 6) { |
350 | // NB(directxman12): there's a bug in IE10 where we can fail to actually | |
351 | // clear the canvas here because of the resize. | |
352 | // Clearing the current viewport first fixes the issue | |
353 | this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h); | |
354 | } | |
795fca23 | 355 | this.resize(240, 20); |
1e13775b SR |
356 | this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h); |
357 | } | |
358 | ||
359 | this._renderQ = []; | |
360 | }, | |
361 | ||
f00193e0 SR |
362 | fillRect: function (x, y, width, height, color, from_queue) { |
363 | if (this._renderQ.length !== 0 && !from_queue) { | |
364 | this.renderQ_push({ | |
365 | 'type': 'fill', | |
366 | 'x': x, | |
367 | 'y': y, | |
368 | 'width': width, | |
369 | 'height': height, | |
370 | 'color': color | |
371 | }); | |
372 | } else { | |
373 | this._setFillColor(color); | |
374 | this._drawCtx.fillRect(x - this._viewportLoc.x, y - this._viewportLoc.y, width, height); | |
375 | } | |
376 | }, | |
377 | ||
378 | copyImage: function (old_x, old_y, new_x, new_y, w, h, from_queue) { | |
379 | if (this._renderQ.length !== 0 && !from_queue) { | |
380 | this.renderQ_push({ | |
381 | 'type': 'copy', | |
382 | 'old_x': old_x, | |
383 | 'old_y': old_y, | |
384 | 'x': new_x, | |
385 | 'y': new_y, | |
386 | 'width': w, | |
387 | 'height': h, | |
388 | }); | |
389 | } else { | |
390 | var x1 = old_x - this._viewportLoc.x; | |
391 | var y1 = old_y - this._viewportLoc.y; | |
392 | var x2 = new_x - this._viewportLoc.x; | |
393 | var y2 = new_y - this._viewportLoc.y; | |
1e13775b | 394 | |
f00193e0 SR |
395 | this._drawCtx.drawImage(this._target, x1, y1, w, h, x2, y2, w, h); |
396 | } | |
1e13775b SR |
397 | }, |
398 | ||
399 | // start updating a tile | |
400 | startTile: function (x, y, width, height, color) { | |
401 | this._tile_x = x; | |
402 | this._tile_y = y; | |
403 | if (width === 16 && height === 16) { | |
404 | this._tile = this._tile16x16; | |
405 | } else { | |
406 | this._tile = this._drawCtx.createImageData(width, height); | |
407 | } | |
408 | ||
409 | if (this._prefer_js) { | |
410 | var bgr; | |
411 | if (this._true_color) { | |
412 | bgr = color; | |
34d8b844 | 413 | } else { |
1e13775b | 414 | bgr = this._colourMap[color[0]]; |
34d8b844 | 415 | } |
1e13775b SR |
416 | var red = bgr[2]; |
417 | var green = bgr[1]; | |
418 | var blue = bgr[0]; | |
419 | ||
420 | var data = this._tile.data; | |
421 | for (var i = 0; i < width * height * 4; i += 4) { | |
422 | data[i] = red; | |
423 | data[i + 1] = green; | |
424 | data[i + 2] = blue; | |
425 | data[i + 3] = 255; | |
426 | } | |
427 | } else { | |
f00193e0 | 428 | this.fillRect(x, y, width, height, color, true); |
1e13775b SR |
429 | } |
430 | }, | |
431 | ||
432 | // update sub-rectangle of the current tile | |
433 | subTile: function (x, y, w, h, color) { | |
434 | if (this._prefer_js) { | |
435 | var bgr; | |
436 | if (this._true_color) { | |
437 | bgr = color; | |
438 | } else { | |
439 | bgr = this._colourMap[color[0]]; | |
440 | } | |
441 | var red = bgr[2]; | |
442 | var green = bgr[1]; | |
443 | var blue = bgr[0]; | |
444 | var xend = x + w; | |
445 | var yend = y + h; | |
446 | ||
447 | var data = this._tile.data; | |
448 | var width = this._tile.width; | |
449 | for (var j = y; j < yend; j++) { | |
450 | for (var i = x; i < xend; i++) { | |
451 | var p = (i + (j * width)) * 4; | |
452 | data[p] = red; | |
453 | data[p + 1] = green; | |
454 | data[p + 2] = blue; | |
455 | data[p + 3] = 255; | |
456 | } | |
457 | } | |
458 | } else { | |
f00193e0 | 459 | this.fillRect(this._tile_x + x, this._tile_y + y, w, h, color, true); |
1e13775b SR |
460 | } |
461 | }, | |
34d8b844 | 462 | |
1e13775b SR |
463 | // draw the current tile to the screen |
464 | finishTile: function () { | |
465 | if (this._prefer_js) { | |
466 | this._drawCtx.putImageData(this._tile, this._tile_x - this._viewportLoc.x, | |
467 | this._tile_y - this._viewportLoc.y); | |
468 | } | |
469 | // else: No-op -- already done by setSubTile | |
470 | }, | |
bc28395a | 471 | |
f00193e0 SR |
472 | blitImage: function (x, y, width, height, arr, offset, from_queue) { |
473 | if (this._renderQ.length !== 0 && !from_queue) { | |
7bc383e8 SR |
474 | // NB(directxman12): it's technically more performant here to use preallocated arrays, |
475 | // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue, | |
476 | // this probably isn't getting called *nearly* as much | |
477 | var new_arr = new Uint8Array(width * height * 4); | |
478 | new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length)); | |
f00193e0 SR |
479 | this.renderQ_push({ |
480 | 'type': 'blit', | |
7bc383e8 | 481 | 'data': new_arr, |
f00193e0 SR |
482 | 'x': x, |
483 | 'y': y, | |
484 | 'width': width, | |
485 | 'height': height, | |
486 | }); | |
487 | } else if (this._true_color) { | |
1e13775b SR |
488 | this._bgrxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset); |
489 | } else { | |
490 | this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset); | |
491 | } | |
492 | }, | |
2c2b492c | 493 | |
f00193e0 SR |
494 | blitRgbImage: function (x, y , width, height, arr, offset, from_queue) { |
495 | if (this._renderQ.length !== 0 && !from_queue) { | |
7bc383e8 SR |
496 | // NB(directxman12): it's technically more performant here to use preallocated arrays, |
497 | // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue, | |
498 | // this probably isn't getting called *nearly* as much | |
499 | var new_arr = new Uint8Array(width * height * 4); | |
500 | new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length)); | |
f00193e0 SR |
501 | this.renderQ_push({ |
502 | 'type': 'blitRgb', | |
7bc383e8 | 503 | 'data': new_arr, |
f00193e0 SR |
504 | 'x': x, |
505 | 'y': y, | |
506 | 'width': width, | |
507 | 'height': height, | |
508 | }); | |
509 | } else if (this._true_color) { | |
1e13775b SR |
510 | this._rgbImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset); |
511 | } else { | |
512 | // probably wrong? | |
513 | this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset); | |
514 | } | |
515 | }, | |
516 | ||
f00193e0 SR |
517 | blitRgbxImage: function (x, y, width, height, arr, offset, from_queue) { |
518 | if (this._renderQ.length !== 0 && !from_queue) { | |
7bc383e8 | 519 | // NB(directxman12): it's technically more performant here to use preallocated arrays, |
f00193e0 SR |
520 | // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue, |
521 | // this probably isn't getting called *nearly* as much | |
522 | var new_arr = new Uint8Array(width * height * 4); | |
523 | new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length)); | |
524 | this.renderQ_push({ | |
525 | 'type': 'blitRgbx', | |
526 | 'data': new_arr, | |
527 | 'x': x, | |
528 | 'y': y, | |
529 | 'width': width, | |
530 | 'height': height, | |
531 | }); | |
532 | } else { | |
533 | this._rgbxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset); | |
534 | } | |
d1800d09 SR |
535 | }, |
536 | ||
1e13775b SR |
537 | blitStringImage: function (str, x, y) { |
538 | var img = new Image(); | |
539 | img.onload = function () { | |
540 | this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y); | |
541 | }.bind(this); | |
542 | img.src = str; | |
543 | return img; // for debugging purposes | |
544 | }, | |
545 | ||
546 | // wrap ctx.drawImage but relative to viewport | |
547 | drawImage: function (img, x, y) { | |
548 | this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y); | |
549 | }, | |
550 | ||
551 | renderQ_push: function (action) { | |
552 | this._renderQ.push(action); | |
553 | if (this._renderQ.length === 1) { | |
554 | // If this can be rendered immediately it will be, otherwise | |
555 | // the scanner will start polling the queue (every | |
556 | // requestAnimationFrame interval) | |
557 | this._scan_renderQ(); | |
558 | } | |
559 | }, | |
9a23006e | 560 | |
1e13775b SR |
561 | changeCursor: function (pixels, mask, hotx, hoty, w, h) { |
562 | if (this._cursor_uri === false) { | |
563 | Util.Warn("changeCursor called but no cursor data URI support"); | |
564 | return; | |
565 | } | |
d3796c14 | 566 | |
1e13775b SR |
567 | if (this._true_color) { |
568 | Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h); | |
569 | } else { | |
570 | Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h, this._colourMap); | |
571 | } | |
572 | }, | |
573 | ||
574 | defaultCursor: function () { | |
575 | this._target.style.cursor = "default"; | |
576 | }, | |
577 | ||
b804b3e4 | 578 | disableLocalCursor: function () { |
579 | this._target.style.cursor = "none"; | |
580 | }, | |
581 | ||
fdedbafb | 582 | clippingDisplay: function () { |
583 | var vp = this._viewportLoc; | |
584 | ||
585 | var fbClip = this._fb_width > vp.w || this._fb_height > vp.h; | |
586 | var limitedVp = this._maxWidth !== 0 && this._maxHeight !== 0; | |
587 | var clipping = false; | |
588 | ||
589 | if (limitedVp) { | |
590 | clipping = vp.w > this._maxWidth || vp.h > this._maxHeight; | |
591 | } | |
592 | ||
593 | return fbClip || (limitedVp && clipping); | |
636be753 | 594 | }, |
595 | ||
1e13775b SR |
596 | // Overridden getters/setters |
597 | get_context: function () { | |
598 | return this._drawCtx; | |
599 | }, | |
600 | ||
601 | set_scale: function (scale) { | |
602 | this._rescale(scale); | |
603 | }, | |
604 | ||
605 | set_width: function (w) { | |
636be753 | 606 | this._fb_width = w; |
1e13775b SR |
607 | }, |
608 | get_width: function () { | |
609 | return this._fb_width; | |
610 | }, | |
611 | ||
612 | set_height: function (h) { | |
636be753 | 613 | this._fb_height = h; |
1e13775b SR |
614 | }, |
615 | get_height: function () { | |
616 | return this._fb_height; | |
617 | }, | |
618 | ||
72747869 SR |
619 | autoscale: function (containerWidth, containerHeight, downscaleOnly) { |
620 | var targetAspectRatio = containerWidth / containerHeight; | |
621 | var fbAspectRatio = this._fb_width / this._fb_height; | |
9a23006e | 622 | |
72747869 SR |
623 | var scaleRatio; |
624 | if (fbAspectRatio >= targetAspectRatio) { | |
625 | scaleRatio = containerWidth / this._fb_width; | |
626 | } else { | |
627 | scaleRatio = containerHeight / this._fb_height; | |
1e13775b | 628 | } |
9a23006e | 629 | |
72747869 SR |
630 | var targetW, targetH; |
631 | if (scaleRatio > 1.0 && downscaleOnly) { | |
632 | targetW = this._fb_width; | |
633 | targetH = this._fb_height; | |
634 | scaleRatio = 1.0; | |
635 | } else if (fbAspectRatio >= targetAspectRatio) { | |
636 | targetW = containerWidth; | |
637 | targetH = Math.round(containerWidth / fbAspectRatio); | |
638 | } else { | |
639 | targetW = Math.round(containerHeight * fbAspectRatio); | |
640 | targetH = containerHeight; | |
1e13775b | 641 | } |
9a23006e | 642 | |
72747869 SR |
643 | // NB(directxman12): If you set the width directly, or set the |
644 | // style width to a number, the canvas is cleared. | |
645 | // However, if you set the style width to a string | |
646 | // ('NNNpx'), the canvas is scaled without clearing. | |
647 | this._target.style.width = targetW + 'px'; | |
648 | this._target.style.height = targetH + 'px'; | |
649 | ||
650 | this._scale = scaleRatio; | |
651 | ||
652 | return scaleRatio; // so that the mouse, etc scale can be set | |
653 | }, | |
1e13775b | 654 | |
72747869 SR |
655 | // Private Methods |
656 | _rescale: function (factor) { | |
1e13775b | 657 | this._scale = factor; |
72747869 | 658 | |
fdedbafb | 659 | var w; |
660 | var h; | |
661 | ||
662 | if (this._viewport && | |
663 | this._maxWidth !== 0 && this._maxHeight !== 0) { | |
664 | w = Math.min(this._fb_width, this._maxWidth); | |
665 | h = Math.min(this._fb_height, this._maxHeight); | |
666 | } else { | |
667 | w = this._fb_width; | |
668 | h = this._fb_height; | |
669 | } | |
670 | ||
671 | this._target.style.width = Math.round(factor * w) + 'px'; | |
672 | this._target.style.height = Math.round(factor * h) + 'px'; | |
1e13775b | 673 | }, |
67b4e987 | 674 | |
1e13775b SR |
675 | _setFillColor: function (color) { |
676 | var bgr; | |
677 | if (this._true_color) { | |
678 | bgr = color; | |
9a23006e | 679 | } else { |
a369a80c | 680 | bgr = this._colourMap[color]; |
1e13775b SR |
681 | } |
682 | ||
683 | var newStyle = 'rgb(' + bgr[2] + ',' + bgr[1] + ',' + bgr[0] + ')'; | |
684 | if (newStyle !== this._prevDrawStyle) { | |
685 | this._drawCtx.fillStyle = newStyle; | |
686 | this._prevDrawStyle = newStyle; | |
687 | } | |
688 | }, | |
689 | ||
690 | _rgbImageData: function (x, y, vx, vy, width, height, arr, offset) { | |
691 | var img = this._drawCtx.createImageData(width, height); | |
692 | var data = img.data; | |
693 | for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 3) { | |
694 | data[i] = arr[j]; | |
695 | data[i + 1] = arr[j + 1]; | |
696 | data[i + 2] = arr[j + 2]; | |
697 | data[i + 3] = 255; // Alpha | |
698 | } | |
699 | this._drawCtx.putImageData(img, x - vx, y - vy); | |
700 | }, | |
701 | ||
702 | _bgrxImageData: function (x, y, vx, vy, width, height, arr, offset) { | |
703 | var img = this._drawCtx.createImageData(width, height); | |
704 | var data = img.data; | |
705 | for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 4) { | |
706 | data[i] = arr[j + 2]; | |
707 | data[i + 1] = arr[j + 1]; | |
708 | data[i + 2] = arr[j]; | |
709 | data[i + 3] = 255; // Alpha | |
710 | } | |
711 | this._drawCtx.putImageData(img, x - vx, y - vy); | |
712 | }, | |
713 | ||
d1800d09 SR |
714 | _rgbxImageData: function (x, y, vx, vy, width, height, arr, offset) { |
715 | // NB(directxman12): arr must be an Type Array view | |
d1800d09 SR |
716 | var img; |
717 | if (SUPPORTS_IMAGEDATA_CONSTRUCTOR) { | |
f00193e0 | 718 | img = new ImageData(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4), width, height); |
d1800d09 SR |
719 | } else { |
720 | img = this._drawCtx.createImageData(width, height); | |
f00193e0 | 721 | img.data.set(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4)); |
d1800d09 SR |
722 | } |
723 | this._drawCtx.putImageData(img, x - vx, y - vy); | |
724 | }, | |
725 | ||
1e13775b SR |
726 | _cmapImageData: function (x, y, vx, vy, width, height, arr, offset) { |
727 | var img = this._drawCtx.createImageData(width, height); | |
728 | var data = img.data; | |
729 | var cmap = this._colourMap; | |
730 | for (var i = 0, j = offset; i < width * height * 4; i += 4, j++) { | |
731 | var bgr = cmap[arr[j]]; | |
732 | data[i] = bgr[2]; | |
733 | data[i + 1] = bgr[1]; | |
734 | data[i + 2] = bgr[0]; | |
735 | data[i + 3] = 255; // Alpha | |
736 | } | |
737 | this._drawCtx.putImageData(img, x - vx, y - vy); | |
738 | }, | |
739 | ||
740 | _scan_renderQ: function () { | |
741 | var ready = true; | |
742 | while (ready && this._renderQ.length > 0) { | |
743 | var a = this._renderQ[0]; | |
744 | switch (a.type) { | |
745 | case 'copy': | |
f00193e0 | 746 | this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height, true); |
1e13775b SR |
747 | break; |
748 | case 'fill': | |
f00193e0 | 749 | this.fillRect(a.x, a.y, a.width, a.height, a.color, true); |
1e13775b SR |
750 | break; |
751 | case 'blit': | |
f00193e0 | 752 | this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true); |
1e13775b SR |
753 | break; |
754 | case 'blitRgb': | |
f00193e0 | 755 | this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0, true); |
1e13775b | 756 | break; |
d1800d09 | 757 | case 'blitRgbx': |
f00193e0 | 758 | this.blitRgbxImage(a.x, a.y, a.width, a.height, a.data, 0, true); |
1e13775b SR |
759 | break; |
760 | case 'img': | |
761 | if (a.img.complete) { | |
762 | this.drawImage(a.img, a.x, a.y); | |
763 | } else { | |
764 | // We need to wait for this image to 'load' | |
765 | // to keep things in-order | |
766 | ready = false; | |
767 | } | |
768 | break; | |
769 | } | |
770 | ||
771 | if (ready) { | |
772 | this._renderQ.shift(); | |
773 | } | |
774 | } | |
775 | ||
776 | if (this._renderQ.length > 0) { | |
777 | requestAnimFrame(this._scan_renderQ.bind(this)); | |
778 | } | |
779 | }, | |
780 | }; | |
781 | ||
782 | Util.make_properties(Display, [ | |
783 | ['target', 'wo', 'dom'], // Canvas element for rendering | |
784 | ['context', 'ro', 'raw'], // Canvas 2D context for rendering (read-only) | |
785 | ['logo', 'rw', 'raw'], // Logo to display when cleared: {"width": w, "height": h, "data": data} | |
786 | ['true_color', 'rw', 'bool'], // Use true-color pixel data | |
787 | ['colourMap', 'rw', 'arr'], // Colour map array (when not true-color) | |
788 | ['scale', 'rw', 'float'], // Display area scale factor 0.0 - 1.0 | |
fdedbafb | 789 | ['viewport', 'rw', 'bool'], // Use viewport clipping |
1e13775b SR |
790 | ['width', 'rw', 'int'], // Display area width |
791 | ['height', 'rw', 'int'], // Display area height | |
fdedbafb | 792 | ['maxWidth', 'rw', 'int'], // Viewport max width (0 if disabled) |
793 | ['maxHeight', 'rw', 'int'], // Viewport max height (0 if disabled) | |
1e13775b SR |
794 | |
795 | ['render_mode', 'ro', 'str'], // Canvas rendering mode (read-only) | |
796 | ||
797 | ['prefer_js', 'rw', 'str'], // Prefer Javascript over canvas methods | |
798 | ['cursor_uri', 'rw', 'raw'] // Can we render cursor using data URI | |
799 | ]); | |
800 | ||
801 | // Class Methods | |
802 | Display.changeCursor = function (target, pixels, mask, hotx, hoty, w0, h0, cmap) { | |
803 | var w = w0; | |
804 | var h = h0; | |
805 | if (h < w) { | |
806 | h = w; // increase h to make it square | |
807 | } else { | |
808 | w = h; // increase w to make it square | |
809 | } | |
810 | ||
811 | var cur = []; | |
812 | ||
813 | // Push multi-byte little-endian values | |
814 | cur.push16le = function (num) { | |
815 | this.push(num & 0xFF, (num >> 8) & 0xFF); | |
816 | }; | |
817 | cur.push32le = function (num) { | |
818 | this.push(num & 0xFF, | |
819 | (num >> 8) & 0xFF, | |
820 | (num >> 16) & 0xFF, | |
821 | (num >> 24) & 0xFF); | |
822 | }; | |
823 | ||
824 | var IHDRsz = 40; | |
825 | var RGBsz = w * h * 4; | |
826 | var XORsz = Math.ceil((w * h) / 8.0); | |
827 | var ANDsz = Math.ceil((w * h) / 8.0); | |
828 | ||
829 | cur.push16le(0); // 0: Reserved | |
830 | cur.push16le(2); // 2: .CUR type | |
831 | cur.push16le(1); // 4: Number of images, 1 for non-animated ico | |
832 | ||
833 | // Cursor #1 header (ICONDIRENTRY) | |
834 | cur.push(w); // 6: width | |
835 | cur.push(h); // 7: height | |
836 | cur.push(0); // 8: colors, 0 -> true-color | |
837 | cur.push(0); // 9: reserved | |
838 | cur.push16le(hotx); // 10: hotspot x coordinate | |
839 | cur.push16le(hoty); // 12: hotspot y coordinate | |
840 | cur.push32le(IHDRsz + RGBsz + XORsz + ANDsz); | |
841 | // 14: cursor data byte size | |
842 | cur.push32le(22); // 18: offset of cursor data in the file | |
843 | ||
844 | // Cursor #1 InfoHeader (ICONIMAGE/BITMAPINFO) | |
845 | cur.push32le(IHDRsz); // 22: InfoHeader size | |
846 | cur.push32le(w); // 26: Cursor width | |
847 | cur.push32le(h * 2); // 30: XOR+AND height | |
848 | cur.push16le(1); // 34: number of planes | |
849 | cur.push16le(32); // 36: bits per pixel | |
850 | cur.push32le(0); // 38: Type of compression | |
851 | ||
852 | cur.push32le(XORsz + ANDsz); | |
853 | // 42: Size of Image | |
854 | cur.push32le(0); // 46: reserved | |
855 | cur.push32le(0); // 50: reserved | |
856 | cur.push32le(0); // 54: reserved | |
857 | cur.push32le(0); // 58: reserved | |
858 | ||
859 | // 62: color data (RGBQUAD icColors[]) | |
860 | var y, x; | |
861 | for (y = h - 1; y >= 0; y--) { | |
862 | for (x = 0; x < w; x++) { | |
863 | if (x >= w0 || y >= h0) { | |
864 | cur.push(0); // blue | |
865 | cur.push(0); // green | |
866 | cur.push(0); // red | |
867 | cur.push(0); // alpha | |
6f4cbb3f | 868 | } else { |
1e13775b SR |
869 | var idx = y * Math.ceil(w0 / 8) + Math.floor(x / 8); |
870 | var alpha = (mask[idx] << (x % 8)) & 0x80 ? 255 : 0; | |
871 | if (cmap) { | |
872 | idx = (w0 * y) + x; | |
873 | var rgb = cmap[pixels[idx]]; | |
874 | cur.push(rgb[2]); // blue | |
875 | cur.push(rgb[1]); // green | |
876 | cur.push(rgb[0]); // red | |
877 | cur.push(alpha); // alpha | |
ec31f82e SR |
878 | } else { |
879 | idx = ((w0 * y) + x) * 4; | |
880 | cur.push(pixels[idx + 2]); // blue | |
881 | cur.push(pixels[idx + 1]); // green | |
882 | cur.push(pixels[idx]); // red | |
883 | cur.push(alpha); // alpha | |
1e13775b | 884 | } |
6f4cbb3f | 885 | } |
2c2b492c JM |
886 | } |
887 | } | |
2c2b492c | 888 | |
1e13775b SR |
889 | // XOR/bitmask data (BYTE icXOR[]) |
890 | // (ignored, just needs to be the right size) | |
891 | for (y = 0; y < h; y++) { | |
892 | for (x = 0; x < Math.ceil(w / 8); x++) { | |
893 | cur.push(0); | |
894 | } | |
9a23006e | 895 | } |
9a23006e | 896 | |
1e13775b SR |
897 | // AND/bitmask data (BYTE icAND[]) |
898 | // (ignored, just needs to be the right size) | |
899 | for (y = 0; y < h; y++) { | |
900 | for (x = 0; x < Math.ceil(w / 8); x++) { | |
901 | cur.push(0); | |
902 | } | |
2c2b492c | 903 | } |
2c2b492c | 904 | |
1e13775b SR |
905 | var url = 'data:image/x-icon;base64,' + Base64.encode(cur); |
906 | target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default'; | |
907 | }; | |
908 | })(); |