Merge pull request #699 from CendioOssman/double
Display double buffering
This commit is contained in:
Samuel Mannehed
+184
-254
@@ -26,14 +26,6 @@
|
||||
this._fb_width = 0;
|
||||
this._fb_height = 0;
|
||||
|
||||
// the size limit of the viewport (start disabled)
|
||||
this._maxWidth = 0;
|
||||
this._maxHeight = 0;
|
||||
|
||||
// the visible "physical canvas" viewport
|
||||
this._viewportLoc = { 'x': 0, 'y': 0, 'w': 0, 'h': 0 };
|
||||
this._cleanRect = { 'x1': 0, 'y1': 0, 'x2': -1, 'y2': -1 };
|
||||
|
||||
this._prevDrawStyle = "";
|
||||
this._tile = null;
|
||||
this._tile16x16 = null;
|
||||
@@ -51,6 +43,7 @@
|
||||
|
||||
Util.Debug(">> Display.constructor");
|
||||
|
||||
// The visible canvas
|
||||
if (!this._target) {
|
||||
throw new Error("Target must be set");
|
||||
}
|
||||
@@ -63,9 +56,18 @@
|
||||
throw new Error("no getContext method");
|
||||
}
|
||||
|
||||
if (!this._drawCtx) {
|
||||
this._drawCtx = this._target.getContext('2d');
|
||||
}
|
||||
this._targetCtx = this._target.getContext('2d');
|
||||
|
||||
// the visible canvas viewport (i.e. what actually gets seen)
|
||||
this._viewportLoc = { 'x': 0, 'y': 0, 'w': this._target.width, 'h': this._target.height };
|
||||
|
||||
// The hidden canvas, where we do the actual rendering
|
||||
this._backbuffer = document.createElement('canvas');
|
||||
this._drawCtx = this._backbuffer.getContext('2d');
|
||||
|
||||
this._damageBounds = { left:0, top:0,
|
||||
right: this._backbuffer.width,
|
||||
bottom: this._backbuffer.height };
|
||||
|
||||
Util.Debug("User Agent: " + navigator.userAgent);
|
||||
if (Util.Engine.gecko) { Util.Debug("Browser: gecko " + Util.Engine.gecko); }
|
||||
@@ -145,189 +147,51 @@
|
||||
Util.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
|
||||
|
||||
vp.x += deltaX;
|
||||
vx2 += deltaX;
|
||||
vp.y += deltaY;
|
||||
vy2 += deltaY;
|
||||
|
||||
// Update the clean rectangle
|
||||
var cr = this._cleanRect;
|
||||
if (vp.x > cr.x1) {
|
||||
cr.x1 = vp.x;
|
||||
}
|
||||
if (vx2 < cr.x2) {
|
||||
cr.x2 = vx2;
|
||||
}
|
||||
if (vp.y > cr.y1) {
|
||||
cr.y1 = vp.y;
|
||||
}
|
||||
if (vy2 < cr.y2) {
|
||||
cr.y2 = vy2;
|
||||
}
|
||||
this._damage(vp.x, vp.y, vp.w, vp.h);
|
||||
|
||||
var x1, w;
|
||||
if (deltaX < 0) {
|
||||
// Shift viewport left, redraw left section
|
||||
x1 = 0;
|
||||
w = -deltaX;
|
||||
} else {
|
||||
// Shift viewport right, redraw right section
|
||||
x1 = vp.w - deltaX;
|
||||
w = deltaX;
|
||||
}
|
||||
|
||||
var y1, h;
|
||||
if (deltaY < 0) {
|
||||
// Shift viewport up, redraw top section
|
||||
y1 = 0;
|
||||
h = -deltaY;
|
||||
} else {
|
||||
// Shift viewport down, redraw bottom section
|
||||
y1 = vp.h - deltaY;
|
||||
h = deltaY;
|
||||
}
|
||||
|
||||
var saveStyle = this._drawCtx.fillStyle;
|
||||
var canvas = this._target;
|
||||
this._drawCtx.fillStyle = "rgb(255,255,255)";
|
||||
|
||||
// Due to this bug among others [1] we need to disable the image-smoothing to
|
||||
// avoid getting a blur effect when panning.
|
||||
//
|
||||
// 1. https://bugzilla.mozilla.org/show_bug.cgi?id=1194719
|
||||
//
|
||||
// We need to set these every time since all properties are reset
|
||||
// when the the size is changed
|
||||
if (this._drawCtx.mozImageSmoothingEnabled) {
|
||||
this._drawCtx.mozImageSmoothingEnabled = false;
|
||||
} else if (this._drawCtx.webkitImageSmoothingEnabled) {
|
||||
this._drawCtx.webkitImageSmoothingEnabled = false;
|
||||
} else if (this._drawCtx.msImageSmoothingEnabled) {
|
||||
this._drawCtx.msImageSmoothingEnabled = false;
|
||||
} else if (this._drawCtx.imageSmoothingEnabled) {
|
||||
this._drawCtx.imageSmoothingEnabled = false;
|
||||
}
|
||||
|
||||
// Copy the valid part of the viewport to the shifted location
|
||||
this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, -deltaX, -deltaY, vp.w, vp.h);
|
||||
|
||||
if (deltaX !== 0) {
|
||||
this._drawCtx.fillRect(x1, 0, w, vp.h);
|
||||
}
|
||||
if (deltaY !== 0) {
|
||||
this._drawCtx.fillRect(0, y1, vp.w, h);
|
||||
}
|
||||
this._drawCtx.fillStyle = saveStyle;
|
||||
this.flip();
|
||||
},
|
||||
|
||||
viewportChangeSize: function(width, height) {
|
||||
|
||||
if (typeof(width) === "undefined" || typeof(height) === "undefined") {
|
||||
if (!this._viewport ||
|
||||
typeof(width) === "undefined" ||
|
||||
typeof(height) === "undefined") {
|
||||
|
||||
Util.Debug("Setting viewport to full display region");
|
||||
width = this._fb_width;
|
||||
height = this._fb_height;
|
||||
}
|
||||
|
||||
if (width > this._fb_width) {
|
||||
width = this._fb_width;
|
||||
}
|
||||
if (height > this._fb_height) {
|
||||
height = this._fb_height;
|
||||
}
|
||||
|
||||
var vp = this._viewportLoc;
|
||||
if (vp.w !== width || vp.h !== height) {
|
||||
|
||||
if (this._viewport) {
|
||||
if (this._maxWidth !== 0 && width > this._maxWidth) {
|
||||
width = this._maxWidth;
|
||||
}
|
||||
if (this._maxHeight !== 0 && height > this._maxHeight) {
|
||||
height = this._maxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
var cr = this._cleanRect;
|
||||
|
||||
if (width < vp.w && cr.x2 > vp.x + width - 1) {
|
||||
cr.x2 = vp.x + width - 1;
|
||||
}
|
||||
if (height < vp.h && cr.y2 > vp.y + height - 1) {
|
||||
cr.y2 = vp.y + height - 1;
|
||||
}
|
||||
|
||||
vp.w = width;
|
||||
vp.h = height;
|
||||
|
||||
var canvas = this._target;
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
// We have to save the canvas data since changing the size will clear it
|
||||
var saveImg = null;
|
||||
if (vp.w > 0 && vp.h > 0 && canvas.width > 0 && canvas.height > 0) {
|
||||
var img_width = canvas.width < vp.w ? canvas.width : vp.w;
|
||||
var img_height = canvas.height < vp.h ? canvas.height : vp.h;
|
||||
saveImg = this._drawCtx.getImageData(0, 0, img_width, img_height);
|
||||
}
|
||||
// The position might need to be updated if we've grown
|
||||
this.viewportChangePos(0, 0);
|
||||
|
||||
if (canvas.width !== width) {
|
||||
canvas.width = width;
|
||||
canvas.style.width = width + 'px';
|
||||
}
|
||||
if (canvas.height !== height) {
|
||||
canvas.height = height;
|
||||
canvas.style.height = height + 'px';
|
||||
}
|
||||
this._damage(vp.x, vp.y, vp.w, vp.h);
|
||||
this.flip();
|
||||
|
||||
if (saveImg) {
|
||||
this._drawCtx.putImageData(saveImg, 0, 0);
|
||||
}
|
||||
}
|
||||
// Update the visible size of the target canvas
|
||||
this._rescale(this._scale);
|
||||
}
|
||||
},
|
||||
|
||||
// Return a map of clean and dirty areas of the viewport and reset the
|
||||
// tracking of clean and dirty areas
|
||||
//
|
||||
// Returns: { 'cleanBox': { 'x': x, 'y': y, 'w': w, 'h': h},
|
||||
// 'dirtyBoxes': [{ 'x': x, 'y': y, 'w': w, 'h': h }, ...] }
|
||||
getCleanDirtyReset: function () {
|
||||
var vp = this._viewportLoc;
|
||||
var cr = this._cleanRect;
|
||||
|
||||
var cleanBox = { 'x': cr.x1, 'y': cr.y1,
|
||||
'w': cr.x2 - cr.x1 + 1, 'h': cr.y2 - cr.y1 + 1 };
|
||||
|
||||
var dirtyBoxes = [];
|
||||
if (cr.x1 >= cr.x2 || cr.y1 >= cr.y2) {
|
||||
// Whole viewport is dirty
|
||||
dirtyBoxes.push({ 'x': vp.x, 'y': vp.y, 'w': vp.w, 'h': vp.h });
|
||||
} else {
|
||||
// Redraw dirty regions
|
||||
var vx2 = vp.x + vp.w - 1;
|
||||
var vy2 = vp.y + vp.h - 1;
|
||||
|
||||
if (vp.x < cr.x1) {
|
||||
// left side dirty region
|
||||
dirtyBoxes.push({'x': vp.x, 'y': vp.y,
|
||||
'w': cr.x1 - vp.x + 1, 'h': vp.h});
|
||||
}
|
||||
if (vx2 > cr.x2) {
|
||||
// right side dirty region
|
||||
dirtyBoxes.push({'x': cr.x2 + 1, 'y': vp.y,
|
||||
'w': vx2 - cr.x2, 'h': vp.h});
|
||||
}
|
||||
if(vp.y < cr.y1) {
|
||||
// top/middle dirty region
|
||||
dirtyBoxes.push({'x': cr.x1, 'y': vp.y,
|
||||
'w': cr.x2 - cr.x1 + 1, 'h': cr.y1 - vp.y});
|
||||
}
|
||||
if (vy2 > cr.y2) {
|
||||
// bottom/middle dirty region
|
||||
dirtyBoxes.push({'x': cr.x1, 'y': cr.y2 + 1,
|
||||
'w': cr.x2 - cr.x1 + 1, 'h': vy2 - cr.y2});
|
||||
}
|
||||
}
|
||||
|
||||
this._cleanRect = {'x1': vp.x, 'y1': vp.y,
|
||||
'x2': vp.x + vp.w - 1, 'y2': vp.y + vp.h - 1};
|
||||
|
||||
return {'cleanBox': cleanBox, 'dirtyBoxes': dirtyBoxes};
|
||||
},
|
||||
|
||||
absX: function (x) {
|
||||
return x + this._viewportLoc.x;
|
||||
},
|
||||
@@ -342,27 +206,109 @@
|
||||
this._fb_width = width;
|
||||
this._fb_height = height;
|
||||
|
||||
this._rescale(this._scale);
|
||||
var canvas = this._backbuffer;
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
|
||||
this.viewportChangeSize();
|
||||
// We have to save the canvas data since changing the size will clear it
|
||||
var saveImg = null;
|
||||
if (canvas.width > 0 && canvas.height > 0) {
|
||||
saveImg = this._drawCtx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
if (canvas.width !== width) {
|
||||
canvas.width = width;
|
||||
}
|
||||
if (canvas.height !== height) {
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
if (saveImg) {
|
||||
this._drawCtx.putImageData(saveImg, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Readjust the viewport as it may be incorrectly sized
|
||||
// and positioned
|
||||
var vp = this._viewportLoc;
|
||||
this.viewportChangeSize(vp.w, vp.h);
|
||||
this.viewportChangePos(0, 0);
|
||||
},
|
||||
|
||||
// Track what parts of the visible canvas that need updating
|
||||
_damage: function(x, y, w, h) {
|
||||
if (x < this._damageBounds.left) {
|
||||
this._damageBounds.left = x;
|
||||
}
|
||||
if (y < this._damageBounds.top) {
|
||||
this._damageBounds.top = y;
|
||||
}
|
||||
if ((x + w) > this._damageBounds.right) {
|
||||
this._damageBounds.right = x + w;
|
||||
}
|
||||
if ((y + h) > this._damageBounds.bottom) {
|
||||
this._damageBounds.bottom = y + h;
|
||||
}
|
||||
},
|
||||
|
||||
// Update the visible canvas with the contents of the
|
||||
// rendering canvas
|
||||
flip: function(from_queue) {
|
||||
if (this._renderQ.length !== 0 && !from_queue) {
|
||||
this._renderQ_push({
|
||||
'type': 'flip'
|
||||
});
|
||||
} else {
|
||||
var x, y, vx, vy, w, h;
|
||||
|
||||
x = this._damageBounds.left;
|
||||
y = this._damageBounds.top;
|
||||
w = this._damageBounds.right - x;
|
||||
h = this._damageBounds.bottom - y;
|
||||
|
||||
vx = x - this._viewportLoc.x;
|
||||
vy = y - this._viewportLoc.y;
|
||||
|
||||
if (vx < 0) {
|
||||
w += vx;
|
||||
x -= vx;
|
||||
vx = 0;
|
||||
}
|
||||
if (vy < 0) {
|
||||
h += vy;
|
||||
y -= vy;
|
||||
vy = 0;
|
||||
}
|
||||
|
||||
if ((vx + w) > this._viewportLoc.w) {
|
||||
w = this._viewportLoc.w - vx;
|
||||
}
|
||||
if ((vy + h) > this._viewportLoc.h) {
|
||||
h = this._viewportLoc.h - vy;
|
||||
}
|
||||
|
||||
if ((w > 0) && (h > 0)) {
|
||||
// FIXME: We may need to disable image smoothing here
|
||||
// as well (see copyImage()), but we haven't
|
||||
// noticed any problem yet.
|
||||
this._targetCtx.drawImage(this._backbuffer,
|
||||
x, y, w, h,
|
||||
vx, vy, w, h);
|
||||
}
|
||||
|
||||
this._damageBounds.left = this._damageBounds.top = 65535;
|
||||
this._damageBounds.right = this._damageBounds.bottom = 0;
|
||||
}
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
if (this._logo) {
|
||||
this.resize(this._logo.width, this._logo.height);
|
||||
this.blitStringImage(this._logo.data, 0, 0);
|
||||
this.imageRect(0, 0, this._logo.type, this._logo.data);
|
||||
} else {
|
||||
if (Util.Engine.trident === 6) {
|
||||
// NB(directxman12): there's a bug in IE10 where we can fail to actually
|
||||
// clear the canvas here because of the resize.
|
||||
// Clearing the current viewport first fixes the issue
|
||||
this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h);
|
||||
}
|
||||
this.resize(240, 20);
|
||||
this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h);
|
||||
this._drawCtx.clearRect(0, 0, this._fb_width, this._fb_height);
|
||||
}
|
||||
|
||||
this._renderQ = [];
|
||||
this.flip();
|
||||
},
|
||||
|
||||
pending: function() {
|
||||
@@ -389,7 +335,8 @@
|
||||
});
|
||||
} else {
|
||||
this._setFillColor(color);
|
||||
this._drawCtx.fillRect(x - this._viewportLoc.x, y - this._viewportLoc.y, width, height);
|
||||
this._drawCtx.fillRect(x, y, width, height);
|
||||
this._damage(x, y, width, height);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -405,12 +352,22 @@
|
||||
'height': h,
|
||||
});
|
||||
} else {
|
||||
var x1 = old_x - this._viewportLoc.x;
|
||||
var y1 = old_y - this._viewportLoc.y;
|
||||
var x2 = new_x - this._viewportLoc.x;
|
||||
var y2 = new_y - this._viewportLoc.y;
|
||||
// Due to this bug among others [1] we need to disable the image-smoothing to
|
||||
// avoid getting a blur effect when copying data.
|
||||
//
|
||||
// 1. https://bugzilla.mozilla.org/show_bug.cgi?id=1194719
|
||||
//
|
||||
// We need to set these every time since all properties are reset
|
||||
// when the the size is changed
|
||||
this._drawCtx.mozImageSmoothingEnabled = false;
|
||||
this._drawCtx.webkitImageSmoothingEnabled = false;
|
||||
this._drawCtx.msImageSmoothingEnabled = false;
|
||||
this._drawCtx.imageSmoothingEnabled = false;
|
||||
|
||||
this._drawCtx.drawImage(this._target, x1, y1, w, h, x2, y2, w, h);
|
||||
this._drawCtx.drawImage(this._backbuffer,
|
||||
old_x, old_y, w, h,
|
||||
new_x, new_y, w, h);
|
||||
this._damage(new_x, new_y, w, h);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -492,8 +449,9 @@
|
||||
// draw the current tile to the screen
|
||||
finishTile: function () {
|
||||
if (this._prefer_js) {
|
||||
this._drawCtx.putImageData(this._tile, this._tile_x - this._viewportLoc.x,
|
||||
this._tile_y - this._viewportLoc.y);
|
||||
this._drawCtx.putImageData(this._tile, this._tile_x, this._tile_y);
|
||||
this._damage(this._tile_x, this._tile_y,
|
||||
this._tile.width, this._tile.height);
|
||||
}
|
||||
// else: No-op -- already done by setSubTile
|
||||
},
|
||||
@@ -514,9 +472,9 @@
|
||||
'height': height,
|
||||
});
|
||||
} else if (this._true_color) {
|
||||
this._bgrxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
|
||||
this._bgrxImageData(x, y, width, height, arr, offset);
|
||||
} else {
|
||||
this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
|
||||
this._cmapImageData(x, y, width, height, arr, offset);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -536,10 +494,10 @@
|
||||
'height': height,
|
||||
});
|
||||
} else if (this._true_color) {
|
||||
this._rgbImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
|
||||
this._rgbImageData(x, y, width, height, arr, offset);
|
||||
} else {
|
||||
// probably wrong?
|
||||
this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
|
||||
this._cmapImageData(x, y, width, height, arr, offset);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -559,22 +517,13 @@
|
||||
'height': height,
|
||||
});
|
||||
} else {
|
||||
this._rgbxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
|
||||
this._rgbxImageData(x, y, width, height, arr, offset);
|
||||
}
|
||||
},
|
||||
|
||||
blitStringImage: function (str, x, y) {
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y);
|
||||
}.bind(this);
|
||||
img.src = str;
|
||||
return img; // for debugging purposes
|
||||
},
|
||||
|
||||
// wrap ctx.drawImage but relative to viewport
|
||||
drawImage: function (img, x, y) {
|
||||
this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y);
|
||||
this._drawCtx.drawImage(img, x, y);
|
||||
this._damage(x, y, img.width, img.height);
|
||||
},
|
||||
|
||||
changeCursor: function (pixels, mask, hotx, hoty, w, h) {
|
||||
@@ -600,36 +549,24 @@
|
||||
|
||||
clippingDisplay: function () {
|
||||
var vp = this._viewportLoc;
|
||||
|
||||
var fbClip = this._fb_width > vp.w || this._fb_height > vp.h;
|
||||
var limitedVp = this._maxWidth !== 0 && this._maxHeight !== 0;
|
||||
var clipping = false;
|
||||
|
||||
if (limitedVp) {
|
||||
clipping = vp.w > this._maxWidth || vp.h > this._maxHeight;
|
||||
}
|
||||
|
||||
return fbClip || (limitedVp && clipping);
|
||||
return this._fb_width > vp.w || this._fb_height > vp.h;
|
||||
},
|
||||
|
||||
// Overridden getters/setters
|
||||
get_context: function () {
|
||||
return this._drawCtx;
|
||||
},
|
||||
|
||||
set_scale: function (scale) {
|
||||
this._rescale(scale);
|
||||
},
|
||||
|
||||
set_width: function (w) {
|
||||
this._fb_width = w;
|
||||
},
|
||||
get_width: function () {
|
||||
return this._fb_width;
|
||||
set_viewport: function (viewport) {
|
||||
this._viewport = viewport;
|
||||
// May need to readjust the viewport dimensions
|
||||
var vp = this._viewportLoc;
|
||||
this.viewportChangeSize(vp.w, vp.h);
|
||||
this.viewportChangePos(0, 0);
|
||||
},
|
||||
|
||||
set_height: function (h) {
|
||||
this._fb_height = h;
|
||||
get_width: function () {
|
||||
return this._fb_width;
|
||||
},
|
||||
get_height: function () {
|
||||
return this._fb_height;
|
||||
@@ -674,21 +611,9 @@
|
||||
// Private Methods
|
||||
_rescale: function (factor) {
|
||||
this._scale = factor;
|
||||
|
||||
var w;
|
||||
var h;
|
||||
|
||||
if (this._viewport &&
|
||||
this._maxWidth !== 0 && this._maxHeight !== 0) {
|
||||
w = Math.min(this._fb_width, this._maxWidth);
|
||||
h = Math.min(this._fb_height, this._maxHeight);
|
||||
} else {
|
||||
w = this._fb_width;
|
||||
h = this._fb_height;
|
||||
}
|
||||
|
||||
this._target.style.width = Math.round(factor * w) + 'px';
|
||||
this._target.style.height = Math.round(factor * h) + 'px';
|
||||
var vp = this._viewportLoc;
|
||||
this._target.style.width = Math.round(factor * vp.w) + 'px';
|
||||
this._target.style.height = Math.round(factor * vp.h) + 'px';
|
||||
},
|
||||
|
||||
_setFillColor: function (color) {
|
||||
@@ -706,7 +631,7 @@
|
||||
}
|
||||
},
|
||||
|
||||
_rgbImageData: function (x, y, vx, vy, width, height, arr, offset) {
|
||||
_rgbImageData: function (x, y, width, height, arr, offset) {
|
||||
var img = this._drawCtx.createImageData(width, height);
|
||||
var data = img.data;
|
||||
for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
|
||||
@@ -715,10 +640,11 @@
|
||||
data[i + 2] = arr[j + 2];
|
||||
data[i + 3] = 255; // Alpha
|
||||
}
|
||||
this._drawCtx.putImageData(img, x - vx, y - vy);
|
||||
this._drawCtx.putImageData(img, x, y);
|
||||
this._damage(x, y, img.width, img.height);
|
||||
},
|
||||
|
||||
_bgrxImageData: function (x, y, vx, vy, width, height, arr, offset) {
|
||||
_bgrxImageData: function (x, y, width, height, arr, offset) {
|
||||
var img = this._drawCtx.createImageData(width, height);
|
||||
var data = img.data;
|
||||
for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
|
||||
@@ -727,10 +653,11 @@
|
||||
data[i + 2] = arr[j];
|
||||
data[i + 3] = 255; // Alpha
|
||||
}
|
||||
this._drawCtx.putImageData(img, x - vx, y - vy);
|
||||
this._drawCtx.putImageData(img, x, y);
|
||||
this._damage(x, y, img.width, img.height);
|
||||
},
|
||||
|
||||
_rgbxImageData: function (x, y, vx, vy, width, height, arr, offset) {
|
||||
_rgbxImageData: function (x, y, width, height, arr, offset) {
|
||||
// NB(directxman12): arr must be an Type Array view
|
||||
var img;
|
||||
if (SUPPORTS_IMAGEDATA_CONSTRUCTOR) {
|
||||
@@ -739,10 +666,11 @@
|
||||
img = this._drawCtx.createImageData(width, height);
|
||||
img.data.set(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4));
|
||||
}
|
||||
this._drawCtx.putImageData(img, x - vx, y - vy);
|
||||
this._drawCtx.putImageData(img, x, y);
|
||||
this._damage(x, y, img.width, img.height);
|
||||
},
|
||||
|
||||
_cmapImageData: function (x, y, vx, vy, width, height, arr, offset) {
|
||||
_cmapImageData: function (x, y, width, height, arr, offset) {
|
||||
var img = this._drawCtx.createImageData(width, height);
|
||||
var data = img.data;
|
||||
var cmap = this._colourMap;
|
||||
@@ -753,7 +681,8 @@
|
||||
data[i + 2] = bgr[0];
|
||||
data[i + 3] = 255; // Alpha
|
||||
}
|
||||
this._drawCtx.putImageData(img, x - vx, y - vy);
|
||||
this._drawCtx.putImageData(img, x, y);
|
||||
this._damage(x, y, img.width, img.height);
|
||||
},
|
||||
|
||||
_renderQ_push: function (action) {
|
||||
@@ -777,6 +706,9 @@
|
||||
while (ready && this._renderQ.length > 0) {
|
||||
var a = this._renderQ[0];
|
||||
switch (a.type) {
|
||||
case 'flip':
|
||||
this.flip(true);
|
||||
break;
|
||||
case 'copy':
|
||||
this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height, true);
|
||||
break;
|
||||
@@ -820,15 +752,13 @@
|
||||
Util.make_properties(Display, [
|
||||
['target', 'wo', 'dom'], // Canvas element for rendering
|
||||
['context', 'ro', 'raw'], // Canvas 2D context for rendering (read-only)
|
||||
['logo', 'rw', 'raw'], // Logo to display when cleared: {"width": w, "height": h, "data": data}
|
||||
['logo', 'rw', 'raw'], // Logo to display when cleared: {"width": w, "height": h, "type": mime-type, "data": data}
|
||||
['true_color', 'rw', 'bool'], // Use true-color pixel data
|
||||
['colourMap', 'rw', 'arr'], // Colour map array (when not true-color)
|
||||
['scale', 'rw', 'float'], // Display area scale factor 0.0 - 1.0
|
||||
['viewport', 'rw', 'bool'], // Use viewport clipping
|
||||
['width', 'rw', 'int'], // Display area width
|
||||
['height', 'rw', 'int'], // Display area height
|
||||
['maxWidth', 'rw', 'int'], // Viewport max width (0 if disabled)
|
||||
['maxHeight', 'rw', 'int'], // Viewport max height (0 if disabled)
|
||||
['width', 'ro', 'int'], // Display area width
|
||||
['height', 'ro', 'int'], // Display area height
|
||||
|
||||
['render_mode', 'ro', 'str'], // Canvas rendering mode (read-only)
|
||||
|
||||
|
||||
+7
-28
@@ -1118,7 +1118,7 @@
|
||||
|
||||
RFB.messages.pixelFormat(this._sock, this._fb_Bpp, this._fb_depth, this._true_color);
|
||||
RFB.messages.clientEncodings(this._sock, this._encodings, this._local_cursor, this._true_color);
|
||||
RFB.messages.fbUpdateRequests(this._sock, false, this._display.getCleanDirtyReset(), this._fb_width, this._fb_height);
|
||||
RFB.messages.fbUpdateRequest(this._sock, false, 0, 0, this._fb_width, this._fb_height);
|
||||
|
||||
this._timing.fbu_rt_start = (new Date()).getTime();
|
||||
this._timing.pixels = 0;
|
||||
@@ -1276,11 +1276,9 @@
|
||||
switch (msg_type) {
|
||||
case 0: // FramebufferUpdate
|
||||
var ret = this._framebufferUpdate();
|
||||
if (ret) {
|
||||
RFB.messages.fbUpdateRequests(this._sock,
|
||||
this._enabledContinuousUpdates,
|
||||
this._display.getCleanDirtyReset(),
|
||||
this._fb_width, this._fb_height);
|
||||
if (ret && !this._enabledContinuousUpdates) {
|
||||
RFB.messages.fbUpdateRequest(this._sock, true, 0, 0,
|
||||
this._fb_width, this._fb_height);
|
||||
}
|
||||
return ret;
|
||||
|
||||
@@ -1425,6 +1423,8 @@
|
||||
if (!ret) { return ret; } // need more data
|
||||
}
|
||||
|
||||
this._display.flip();
|
||||
|
||||
this._onFBUComplete(this,
|
||||
{'x': this._FBU.x, 'y': this._FBU.y,
|
||||
'width': this._FBU.width, 'height': this._FBU.height,
|
||||
@@ -1743,27 +1743,6 @@
|
||||
sock.flush();
|
||||
},
|
||||
|
||||
fbUpdateRequests: function (sock, onlyNonInc, cleanDirty, fb_width, fb_height) {
|
||||
var offsetIncrement = 0;
|
||||
|
||||
var cb = cleanDirty.cleanBox;
|
||||
var w, h;
|
||||
if (!onlyNonInc && (cb.w > 0 && cb.h > 0)) {
|
||||
w = typeof cb.w === "undefined" ? fb_width : cb.w;
|
||||
h = typeof cb.h === "undefined" ? fb_height : cb.h;
|
||||
// Request incremental for clean box
|
||||
RFB.messages.fbUpdateRequest(sock, 1, cb.x, cb.y, w, h);
|
||||
}
|
||||
|
||||
for (var i = 0; i < cleanDirty.dirtyBoxes.length; i++) {
|
||||
var db = cleanDirty.dirtyBoxes[i];
|
||||
// Force all (non-incremental) for dirty box
|
||||
w = typeof db.w === "undefined" ? fb_width : db.w;
|
||||
h = typeof db.h === "undefined" ? fb_height : db.h;
|
||||
RFB.messages.fbUpdateRequest(sock, 0, db.x, db.y, w, h);
|
||||
}
|
||||
},
|
||||
|
||||
fbUpdateRequest: function (sock, incremental, x, y, w, h) {
|
||||
var buff = sock._sQ;
|
||||
var offset = sock._sQlen;
|
||||
@@ -1772,7 +1751,7 @@
|
||||
if (typeof(y) === "undefined") { y = 0; }
|
||||
|
||||
buff[offset] = 3; // msg-type
|
||||
buff[offset + 1] = incremental;
|
||||
buff[offset + 1] = incremental ? 1 : 0;
|
||||
|
||||
buff[offset + 2] = (x >> 8) & 0xFF;
|
||||
buff[offset + 3] = x & 0xFF;
|
||||
|
||||
Reference in New Issue
Block a user