From 5d570207f78f1c0eec6ae78d37484f1da8a68dbd Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Sun, 31 May 2020 22:57:45 +0200 Subject: [PATCH] Standardize on camelCase in Display --- core/display.js | 132 +++++++++++++++++++++--------------------- tests/test.display.js | 90 ++++++++++++++-------------- 2 files changed, 111 insertions(+), 111 deletions(-) diff --git a/core/display.js b/core/display.js index 4007ea7..7b7f536 100644 --- a/core/display.js +++ b/core/display.js @@ -18,14 +18,14 @@ export default class Display { this._flushing = false; // the full frame buffer (logical canvas) size - this._fb_width = 0; - this._fb_height = 0; + this._fbWidth = 0; + this._fbHeight = 0; this._prevDrawStyle = ""; this._tile = null; this._tile16x16 = null; - this._tile_x = 0; - this._tile_y = 0; + this._tileX = 0; + this._tileY = 0; Log.Debug(">> Display.constructor"); @@ -94,11 +94,11 @@ export default class Display { } get width() { - return this._fb_width; + return this._fbWidth; } get height() { - return this._fb_height; + return this._fbHeight; } // ===== PUBLIC METHODS ===== @@ -121,15 +121,15 @@ export default class Display { if (deltaX < 0 && vp.x + deltaX < 0) { deltaX = -vp.x; } - if (vx2 + deltaX >= this._fb_width) { - deltaX -= vx2 + deltaX - this._fb_width + 1; + if (vx2 + deltaX >= this._fbWidth) { + deltaX -= vx2 + deltaX - this._fbWidth + 1; } if (vp.y + deltaY < 0) { deltaY = -vp.y; } - if (vy2 + deltaY >= this._fb_height) { - deltaY -= (vy2 + deltaY - this._fb_height + 1); + if (vy2 + deltaY >= this._fbHeight) { + deltaY -= (vy2 + deltaY - this._fbHeight + 1); } if (deltaX === 0 && deltaY === 0) { @@ -152,18 +152,18 @@ export default class Display { typeof(height) === "undefined") { Log.Debug("Setting viewport to full display region"); - width = this._fb_width; - height = this._fb_height; + width = this._fbWidth; + height = this._fbHeight; } width = Math.floor(width); height = Math.floor(height); - if (width > this._fb_width) { - width = this._fb_width; + if (width > this._fbWidth) { + width = this._fbWidth; } - if (height > this._fb_height) { - height = this._fb_height; + if (height > this._fbHeight) { + height = this._fbHeight; } const vp = this._viewportLoc; @@ -203,8 +203,8 @@ export default class Display { resize(width, height) { this._prevDrawStyle = ""; - this._fb_width = width; - this._fb_height = height; + this._fbWidth = width; + this._fbHeight = height; const canvas = this._backbuffer; if (canvas.width !== width || canvas.height !== height) { @@ -252,9 +252,9 @@ export default class Display { // Update the visible canvas with the contents of the // rendering canvas - flip(from_queue) { - if (this._renderQ.length !== 0 && !from_queue) { - this._renderQ_push({ + flip(fromQueue) { + if (this._renderQ.length !== 0 && !fromQueue) { + this._renderQPush({ 'type': 'flip' }); } else { @@ -310,9 +310,9 @@ export default class Display { } } - fillRect(x, y, width, height, color, from_queue) { - if (this._renderQ.length !== 0 && !from_queue) { - this._renderQ_push({ + fillRect(x, y, width, height, color, fromQueue) { + if (this._renderQ.length !== 0 && !fromQueue) { + this._renderQPush({ 'type': 'fill', 'x': x, 'y': y, @@ -327,14 +327,14 @@ export default class Display { } } - copyImage(old_x, old_y, new_x, new_y, w, h, from_queue) { - if (this._renderQ.length !== 0 && !from_queue) { - this._renderQ_push({ + copyImage(oldX, oldY, newX, newY, w, h, fromQueue) { + if (this._renderQ.length !== 0 && !fromQueue) { + this._renderQPush({ 'type': 'copy', - 'old_x': old_x, - 'old_y': old_y, - 'x': new_x, - 'y': new_y, + 'oldX': oldX, + 'oldY': oldY, + 'x': newX, + 'y': newY, 'width': w, 'height': h, }); @@ -352,9 +352,9 @@ export default class Display { this._drawCtx.imageSmoothingEnabled = false; 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); + oldX, oldY, w, h, + newX, newY, w, h); + this._damage(newX, newY, w, h); } } @@ -367,7 +367,7 @@ export default class Display { const img = new Image(); img.src = "data: " + mime + ";base64," + Base64.encode(arr); - this._renderQ_push({ + this._renderQPush({ 'type': 'img', 'img': img, 'x': x, @@ -379,8 +379,8 @@ export default class Display { // start updating a tile startTile(x, y, width, height, color) { - this._tile_x = x; - this._tile_y = y; + this._tileX = x; + this._tileY = y; if (width === 16 && height === 16) { this._tile = this._tile16x16; } else { @@ -423,21 +423,21 @@ export default class Display { // draw the current tile to the screen finishTile() { - this._drawCtx.putImageData(this._tile, this._tile_x, this._tile_y); - this._damage(this._tile_x, this._tile_y, + this._drawCtx.putImageData(this._tile, this._tileX, this._tileY); + this._damage(this._tileX, this._tileY, this._tile.width, this._tile.height); } - blitImage(x, y, width, height, arr, offset, from_queue) { - if (this._renderQ.length !== 0 && !from_queue) { + blitImage(x, y, width, height, arr, offset, fromQueue) { + if (this._renderQ.length !== 0 && !fromQueue) { // NB(directxman12): it's technically more performant here to use preallocated arrays, // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue, // this probably isn't getting called *nearly* as much - const new_arr = new Uint8Array(width * height * 4); - new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length)); - this._renderQ_push({ + const newArr = new Uint8Array(width * height * 4); + newArr.set(new Uint8Array(arr.buffer, 0, newArr.length)); + this._renderQPush({ 'type': 'blit', - 'data': new_arr, + 'data': newArr, 'x': x, 'y': y, 'width': width, @@ -448,16 +448,16 @@ export default class Display { } } - blitRgbImage(x, y, width, height, arr, offset, from_queue) { - if (this._renderQ.length !== 0 && !from_queue) { + blitRgbImage(x, y, width, height, arr, offset, fromQueue) { + if (this._renderQ.length !== 0 && !fromQueue) { // NB(directxman12): it's technically more performant here to use preallocated arrays, // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue, // this probably isn't getting called *nearly* as much - const new_arr = new Uint8Array(width * height * 3); - new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length)); - this._renderQ_push({ + const newArr = new Uint8Array(width * height * 3); + newArr.set(new Uint8Array(arr.buffer, 0, newArr.length)); + this._renderQPush({ 'type': 'blitRgb', - 'data': new_arr, + 'data': newArr, 'x': x, 'y': y, 'width': width, @@ -468,16 +468,16 @@ export default class Display { } } - blitRgbxImage(x, y, width, height, arr, offset, from_queue) { - if (this._renderQ.length !== 0 && !from_queue) { + blitRgbxImage(x, y, width, height, arr, offset, fromQueue) { + if (this._renderQ.length !== 0 && !fromQueue) { // NB(directxman12): it's technically more performant here to use preallocated arrays, // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue, // this probably isn't getting called *nearly* as much - const new_arr = new Uint8Array(width * height * 4); - new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length)); - this._renderQ_push({ + const newArr = new Uint8Array(width * height * 4); + newArr.set(new Uint8Array(arr.buffer, 0, newArr.length)); + this._renderQPush({ 'type': 'blitRgbx', - 'data': new_arr, + 'data': newArr, 'x': x, 'y': y, 'width': width, @@ -582,23 +582,23 @@ export default class Display { this._damage(x, y, img.width, img.height); } - _renderQ_push(action) { + _renderQPush(action) { this._renderQ.push(action); if (this._renderQ.length === 1) { // If this can be rendered immediately it will be, otherwise // the scanner will wait for the relevant event - this._scan_renderQ(); + this._scanRenderQ(); } } - _resume_renderQ() { + _resumeRenderQ() { // "this" is the object that is ready, not the // display object - this.removeEventListener('load', this._noVNC_display._resume_renderQ); - this._noVNC_display._scan_renderQ(); + this.removeEventListener('load', this._noVNCDisplay._resumeRenderQ); + this._noVNCDisplay._scanRenderQ(); } - _scan_renderQ() { + _scanRenderQ() { let ready = true; while (ready && this._renderQ.length > 0) { const a = this._renderQ[0]; @@ -607,7 +607,7 @@ export default class Display { this.flip(true); break; case 'copy': - this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height, true); + this.copyImage(a.oldX, a.oldY, a.x, a.y, a.width, a.height, true); break; case 'fill': this.fillRect(a.x, a.y, a.width, a.height, a.color, true); @@ -632,8 +632,8 @@ export default class Display { } this.drawImage(a.img, a.x, a.y); } else { - a.img._noVNC_display = this; - a.img.addEventListener('load', this._resume_renderQ); + a.img._noVNCDisplay = this; + a.img.addEventListener('load', this._resumeRenderQ); // We need to wait for this image to 'load' // to keep things in-order ready = false; diff --git a/tests/test.display.js b/tests/test.display.js index 8775b3c..a853778 100644 --- a/tests/test.display.js +++ b/tests/test.display.js @@ -4,28 +4,28 @@ import Base64 from '../core/base64.js'; import Display from '../core/display.js'; describe('Display/Canvas Helper', function () { - const checked_data = new Uint8Array([ + const checkedData = new Uint8Array([ 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255 ]); - const basic_data = new Uint8Array([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]); + const basicData = new Uint8Array([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]); - function make_image_canvas(input_data) { + function makeImageCanvas(inputData) { const canvas = document.createElement('canvas'); canvas.width = 4; canvas.height = 4; const ctx = canvas.getContext('2d'); const data = ctx.createImageData(4, 4); - for (let i = 0; i < checked_data.length; i++) { data.data[i] = input_data[i]; } + for (let i = 0; i < checkedData.length; i++) { data.data[i] = inputData[i]; } ctx.putImageData(data, 0, 0); return canvas; } - function make_image_png(input_data) { - const canvas = make_image_canvas(input_data); + function makeImagePng(inputData) { + const canvas = makeImageCanvas(inputData); const url = canvas.toDataURL(); const data = url.split(",")[1]; return Base64.decode(data); @@ -44,11 +44,11 @@ describe('Display/Canvas Helper', function () { it('should take viewport location into consideration when drawing images', function () { display.resize(4, 4); display.viewportChangeSize(2, 2); - display.drawImage(make_image_canvas(basic_data), 1, 1); + display.drawImage(makeImageCanvas(basicData), 1, 1); display.flip(); const expected = new Uint8Array(16); - for (let i = 0; i < 8; i++) { expected[i] = basic_data[i]; } + for (let i = 0; i < 8; i++) { expected[i] = basicData[i]; } for (let i = 8; i < 16; i++) { expected[i] = 0; } expect(display).to.have.displayed(expected); }); @@ -123,8 +123,8 @@ describe('Display/Canvas Helper', function () { it('should change the size of the logical canvas', function () { display.resize(5, 7); - expect(display._fb_width).to.equal(5); - expect(display._fb_height).to.equal(7); + expect(display._fbWidth).to.equal(5); + expect(display._fbHeight).to.equal(7); }); it('should keep the framebuffer data', function () { @@ -275,7 +275,7 @@ describe('Display/Canvas Helper', function () { display.flip(); display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); const expected = []; - for (let i = 0; i < 4 * display._fb_width * display._fb_height; i += 4) { + for (let i = 0; i < 4 * display._fbWidth * display._fbHeight; i += 4) { expected[i] = 0xff; expected[i+1] = expected[i+2] = 0; expected[i+3] = 0xff; @@ -288,7 +288,7 @@ describe('Display/Canvas Helper', function () { display.fillRect(0, 0, 2, 2, [0xff, 0, 0]); display.fillRect(2, 2, 2, 2, [0xff, 0, 0]); display.flip(); - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); }); it('should support copying an portion of the canvas via #copyImage', function () { @@ -296,14 +296,14 @@ describe('Display/Canvas Helper', function () { display.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]); display.copyImage(0, 0, 2, 2, 2, 2); display.flip(); - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); }); it('should support drawing images via #imageRect', function (done) { - display.imageRect(0, 0, 4, 4, "image/png", make_image_png(checked_data)); + display.imageRect(0, 0, 4, 4, "image/png", makeImagePng(checkedData)); display.flip(); display.onflush = () => { - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); done(); }; display.flush(); @@ -315,12 +315,12 @@ describe('Display/Canvas Helper', function () { display.subTile(2, 2, 2, 2, [0xff, 0, 0]); display.finishTile(); display.flip(); - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); }); // We have a special cache for 16x16 tiles that we need to test it('should support drawing a 16x16 tile', function () { - const large_checked_data = new Uint8Array(16*16*4); + const largeCheckedData = new Uint8Array(16*16*4); display.resize(16, 16); for (let y = 0;y < 16;y++) { @@ -328,11 +328,11 @@ describe('Display/Canvas Helper', function () { let pixel; if ((x < 4) && (y < 4)) { // NB: of course IE11 doesn't support #slice on ArrayBufferViews... - pixel = Array.prototype.slice.call(checked_data, (y*4+x)*4, (y*4+x+1)*4); + pixel = Array.prototype.slice.call(checkedData, (y*4+x)*4, (y*4+x+1)*4); } else { pixel = [0, 0xff, 0, 255]; } - large_checked_data.set(pixel, (y*16+x)*4); + largeCheckedData.set(pixel, (y*16+x)*4); } } @@ -341,39 +341,39 @@ describe('Display/Canvas Helper', function () { display.subTile(2, 2, 2, 2, [0xff, 0, 0]); display.finishTile(); display.flip(); - expect(display).to.have.displayed(large_checked_data); + expect(display).to.have.displayed(largeCheckedData); }); it('should support drawing BGRX blit images with true color via #blitImage', function () { const data = []; for (let i = 0; i < 16; i++) { - data[i * 4] = checked_data[i * 4 + 2]; - data[i * 4 + 1] = checked_data[i * 4 + 1]; - data[i * 4 + 2] = checked_data[i * 4]; - data[i * 4 + 3] = checked_data[i * 4 + 3]; + data[i * 4] = checkedData[i * 4 + 2]; + data[i * 4 + 1] = checkedData[i * 4 + 1]; + data[i * 4 + 2] = checkedData[i * 4]; + data[i * 4 + 3] = checkedData[i * 4 + 3]; } display.blitImage(0, 0, 4, 4, data, 0); display.flip(); - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); }); it('should support drawing RGB blit images with true color via #blitRgbImage', function () { const data = []; for (let i = 0; i < 16; i++) { - data[i * 3] = checked_data[i * 4]; - data[i * 3 + 1] = checked_data[i * 4 + 1]; - data[i * 3 + 2] = checked_data[i * 4 + 2]; + data[i * 3] = checkedData[i * 4]; + data[i * 3 + 1] = checkedData[i * 4 + 1]; + data[i * 3 + 2] = checkedData[i * 4 + 2]; } display.blitRgbImage(0, 0, 4, 4, data, 0); display.flip(); - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); }); it('should support drawing an image object via #drawImage', function () { - const img = make_image_canvas(checked_data); + const img = makeImageCanvas(checkedData); display.drawImage(img, 0, 0); display.flip(); - expect(display).to.have.displayed(checked_data); + expect(display).to.have.displayed(checkedData); }); }); @@ -382,18 +382,18 @@ describe('Display/Canvas Helper', function () { beforeEach(function () { display = new Display(document.createElement('canvas')); display.resize(4, 4); - sinon.spy(display, '_scan_renderQ'); + sinon.spy(display, '_scanRenderQ'); }); it('should try to process an item when it is pushed on, if nothing else is on the queue', function () { - display._renderQ_push({ type: 'noop' }); // does nothing - expect(display._scan_renderQ).to.have.been.calledOnce; + display._renderQPush({ type: 'noop' }); // does nothing + expect(display._scanRenderQ).to.have.been.calledOnce; }); it('should not try to process an item when it is pushed on if we are waiting for other items', function () { display._renderQ.length = 2; - display._renderQ_push({ type: 'noop' }); - expect(display._scan_renderQ).to.not.have.been.called; + display._renderQPush({ type: 'noop' }); + expect(display._scanRenderQ).to.not.have.been.called; }); it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () { @@ -403,13 +403,13 @@ describe('Display/Canvas Helper', function () { display.drawImage = sinon.spy(); display.fillRect = sinon.spy(); - display._scan_renderQ(); + display._scanRenderQ(); expect(display.drawImage).to.not.have.been.called; expect(display.fillRect).to.not.have.been.called; expect(img.addEventListener).to.have.been.calledOnce; display._renderQ[0].img.complete = true; - display._scan_renderQ(); + display._scanRenderQ(); expect(display.drawImage).to.have.been.calledOnce; expect(display.fillRect).to.have.been.calledOnce; expect(img.addEventListener).to.have.been.calledOnce; @@ -422,7 +422,7 @@ describe('Display/Canvas Helper', function () { display.drawImage = sinon.spy(); display.fillRect = sinon.spy(); - display._scan_renderQ(); + display._scanRenderQ(); expect(display.drawImage).to.not.have.been.called; expect(display.fillRect).to.not.have.been.called; expect(img.addEventListener).to.have.been.calledOnce; @@ -430,7 +430,7 @@ describe('Display/Canvas Helper', function () { display._renderQ[0].img.complete = true; display._renderQ[0].img.width = 4; display._renderQ[0].img.height = 4; - display._scan_renderQ(); + display._scanRenderQ(); expect(display.drawImage).to.have.been.calledOnce; expect(display.fillRect).to.have.been.calledOnce; expect(img.addEventListener).to.have.been.calledOnce; @@ -446,35 +446,35 @@ describe('Display/Canvas Helper', function () { it('should draw a blit image on type "blit"', function () { display.blitImage = sinon.spy(); - display._renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] }); + display._renderQPush({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] }); expect(display.blitImage).to.have.been.calledOnce; expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0); }); it('should draw a blit RGB image on type "blitRgb"', function () { display.blitRgbImage = sinon.spy(); - display._renderQ_push({ type: 'blitRgb', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] }); + display._renderQPush({ type: 'blitRgb', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] }); expect(display.blitRgbImage).to.have.been.calledOnce; expect(display.blitRgbImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0); }); it('should copy a region on type "copy"', function () { display.copyImage = sinon.spy(); - display._renderQ_push({ type: 'copy', x: 3, y: 4, width: 5, height: 6, old_x: 7, old_y: 8 }); + display._renderQPush({ type: 'copy', x: 3, y: 4, width: 5, height: 6, oldX: 7, oldY: 8 }); expect(display.copyImage).to.have.been.calledOnce; expect(display.copyImage).to.have.been.calledWith(7, 8, 3, 4, 5, 6); }); it('should fill a rect with a given color on type "fill"', function () { display.fillRect = sinon.spy(); - display._renderQ_push({ type: 'fill', x: 3, y: 4, width: 5, height: 6, color: [7, 8, 9]}); + display._renderQPush({ type: 'fill', x: 3, y: 4, width: 5, height: 6, color: [7, 8, 9]}); expect(display.fillRect).to.have.been.calledOnce; expect(display.fillRect).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9]); }); it('should draw an image from an image object on type "img" (if complete)', function () { display.drawImage = sinon.spy(); - display._renderQ_push({ type: 'img', x: 3, y: 4, img: { complete: true } }); + display._renderQPush({ type: 'img', x: 3, y: 4, img: { complete: true } }); expect(display.drawImage).to.have.been.calledOnce; expect(display.drawImage).to.have.been.calledWith({ complete: true }, 3, 4); }); -- 2.39.2