=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java' --- src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java 2015-08-26 22:14:27 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java 2015-08-27 13:19:27 +0000 @@ -461,6 +461,25 @@ switch (ps.id) { + case SET_LOCATION: + extra = String.format(" x = %d; y = %d", ps.x, ps.y); + break; + case DRAW_LINE: + extra = String.format(" x1 = %d; y1 = %d; x2 = %d; y2 = %d", + ps.x, + ps.y, + ps.width, + ps.height); + break; + case DRAW_ROUND_RECT: + case FILL_ROUND_RECT: + extra = String.format(" x = %d; y = %d; width = %d; height = %d; diameter = %d", + ps.x, + ps.y, + ps.width, + ps.height, + ps.arcDiameter); + break; case DRAW_RECT: case FILL_RECT: case DRAW_IMAGE: === modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-27 07:47:53 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-27 13:47:59 +0000 @@ -925,8 +925,8 @@ var y1 = p2j.socket.readInt32BinaryMessage(message, idx + 5); var x2 = p2j.socket.readInt32BinaryMessage(message, idx + 9); var y2 = p2j.socket.readInt32BinaryMessage(message, idx + 13); - extra = " x1 = " + x1 +"; y1 = " + y1 + "; x2 = " + x2 + "; y2 = " + y2; - path = this.drawLine(this.ctx, x1, y1, x2, y2, this.rawColor); + extra = " x1 = " + x1 + "; y1 = " + y1 + "; x2 = " + x2 + "; y2 = " + y2; + path = this.drawLineSegment(this.ctx, x1, y1, x2, y2, this.rawColor); strokesManager.applyStrokeToPath(this.ctx, this.strokeStyleId, @@ -939,7 +939,7 @@ y = p2j.socket.readInt32BinaryMessage(message, idx + 5); width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); - extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height; + extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height; path = this.drawRect(this.ctx, x, y, width, height, this.rawColor, false); strokesManager.applyStrokeToPath(this.ctx, @@ -954,7 +954,8 @@ width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17); - extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height + "; diameter = " + diameter; + extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height + + "; diameter = " + diameter; this.drawRoundRect(ctx, x, y, width, height, diameter, this.rawColor, false); break; case ops.DRAW_IMAGE: @@ -964,7 +965,7 @@ width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); - extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height; + extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height; var encoding = message[idx + 17]; var key = p2j.socket.readInt32BinaryMessage(message, idx + 18); @@ -989,7 +990,7 @@ y = p2j.socket.readInt32BinaryMessage(message, idx + 5); width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); - extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height; + extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height; this.drawRect(this.ctx, x, y, width, height, this.rawColor, true); break; case ops.FILL_ROUND_RECT: @@ -998,6 +999,8 @@ width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17); + extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height + + "; diameter = " + diameter; this.drawRoundRect(this.ctx, x, y, width, height, diameter, this.rawColor, true); break; case ops.FILL_POLYGON: @@ -1097,7 +1100,7 @@ y = p2j.socket.readInt32BinaryMessage(message, idx + 5); this.canvas.style.left = x.toString() + "px"; this.canvas.style.top = y.toString() + "px"; - extra = " x = " + x +"; y = " + y; + extra = " x = " + x + "; y = " + y; break; case ops.RESIZE_WINDOW: width = p2j.socket.readInt32BinaryMessage(message, idx + 1); @@ -1411,9 +1414,9 @@ * Array of 3 integer values between 0 and 255 inclusive, representing an RGB color. * * @return {Array} path - * The {x:.,y:.} point per a pixel array that represents the rectangle outerline. + * The {x:.,y:.} point per a pixel array that represents the drawing line segment. */ - Window.prototype.drawLine = function(ctx, x1, y1, x2, y2, color) + Window.prototype.drawLineSegment = function(ctx, x1, y1, x2, y2, color) { x1 = x1 + this.origin.x; x2 = x2 + this.origin.x; @@ -1490,6 +1493,36 @@ }; /** + * Draw a line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing and + * add its pixels path to the end of the provided pixels path. + *

+ * This is an implementation of the well known 50+ year old Bresenham algorithm. + * + * @param {CanvasRenderingContext2D} ctx + * The canvas 2D graphics context on which to draw. + * @param {Number} x1 + * X coordinate of the starting pixel to be drawn. + * @param {Number} y1 + * Y coordinate of the starting pixel to be drawn. + * @param {Number} x2 + * X coordinate of the ending pixel to be drawn. + * @param {Number} y2 + * Y coordinate of the ending pixel to be drawn. + * @param {Number[]} color + * Array of 3 integer values between 0 and 255 inclusive, representing an RGB color. + * @param {Array} path + * The provided holder of {x:.,y:.} points, the target drawing as a set of sequential + * line points will be added at the end of the provided path. + * @return {Array} + * The {x:.,y:.} point per a pixel array that represents the drawing line segment. + */ + Window.prototype.drawLine = function(ctx, x1, y1, x2, y2, color, path) + { + var segment = this.drawLineSegment(ctx, x1, y1, x2, y2, color); + Array.prototype.push.apply(path, segment); + return segment; + } + /** * Fill or stroke the current path on the given context, first using the current path as a * clipping region. This ensures that the drawing of the path will not extend outside of the * path by a half-pixel (which it would otherwise). The state of the context is saved on @@ -1545,7 +1578,7 @@ { // filled rectangles draw 1 pixel smaller in 2 dimensions than stroked rectangles var inset = 0; - + var path = []; // use vector operations for the interior of the rectangle if (fill) { @@ -1553,25 +1586,16 @@ ctx.beginPath(); ctx.rect(x, y, width - inset, height - inset); renderClosedPath(ctx, fill); - return []; - } - else - { - // now overdraw the stroked portion to eliminate anti-aliasing, we draw in a - // clockwise direction (since we are not using paths, this is not strictly necessary) - var path = this.drawLine(ctx, x, y, x + width - inset, y, color); - - var more = this.drawLine(ctx, x + width - inset, y + 1, x + width - inset, y + height - inset, color); - Array.prototype.push.apply(path, more); - - more = this.drawLine(ctx, x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, color); - Array.prototype.push.apply(path, more); - - // close the path - more = this.drawLine(ctx, x, y + height - inset, x, y + 1, color); - Array.prototype.push.apply(path, more); - return path; - } + } + + // now overdraw the stroked portion to eliminate anti-aliasing, we draw in a + // clockwise direction (since we are not using paths, this is not strictly necessary) + this.drawLine(ctx, x, y, x + width - inset, y, color, path); + this.drawLine(ctx, x + width - inset, y + 1, x + width - inset, y + height - inset, color, path); + this.drawLine(ctx, x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, color, path); + this.drawLine(ctx, x, y + height - inset, x, y + 1, color, path);// close the path + + return path; }; /** @@ -1851,14 +1875,11 @@ renderClosedPath(ctx, fill); // overdraw the anti-aliased line segments - - var path = this.drawLine(ctx, topLeftX, topLeftY, topRightX, topRightY, color); - var more = this.drawLine(ctx, rightUpX, rightUpY, rightDownX, rightDownY, color); - Array.prototype.push.apply(path, more); - more = this.drawLine(ctx, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, color); - Array.prototype.push.apply(path, more); - more = this.drawLine(ctx, leftUpX, leftUpY, leftDownX, leftDownY, color); - Array.prototype.push.apply(path, more); + var path = []; + this.drawLine(ctx, topLeftX, topLeftY, topRightX, topRightY, color, path); + this.drawLine(ctx, rightUpX, rightUpY, rightDownX, rightDownY, color, path); + this.drawLine(ctx, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, color, path); + this.drawLine(ctx, leftUpX, leftUpY, leftDownX, leftDownY, color, path); strokesManager.applyStrokeToPath(this.ctx, this.strokeStyleId, this.strokeWidth, @@ -1934,9 +1955,9 @@ // draw the top and left sides in the contrasting color (raised mode) or the darker color // otherwise - var path = this.drawLine(ctx, x, y, x + width - 2 - inset, y, current); - var more = this.drawLine(ctx, x, y + 1, x, y + height - 1 - inset, current); - Array.prototype.push.apply(path, more); + var path = [];// create new pixels path to draw + this.drawLine(ctx, x, y, x + width - 2 - inset, y, current, path); + this.drawLine(ctx, x, y + 1, x, y + height - 1 - inset, current, path); strokesManager.applyStrokeToPath(this.ctx, this.strokeStyleId, this.strokeWidth, @@ -1946,9 +1967,9 @@ // draw the bottom and right sides in the darker color (raised mode) or the contrasting // color otherwise current = raised ? darker : lighter; - path = this.drawLine(ctx, x + 1, y + height - 1 - inset, x + width - 1 - inset, y + height - 1 - inset, current); - more = this.drawLine(ctx, x + width - 1 - inset, y, x + width - 1 - inset, y + height - 2, current); - Array.prototype.push.apply(path, more); + path = []; // create new pixels path to draw + this.drawLine(ctx, x + 1, y + height - 1 - inset, x + width - 1 - inset, y + height - 1 - inset, current, path); + this.drawLine(ctx, x + width - 1 - inset, y, x + width - 1 - inset, y + height - 2, current, path); strokesManager.applyStrokeToPath(this.ctx, this.strokeStyleId, this.strokeWidth, @@ -2000,8 +2021,7 @@ // now overdraw the stroked portion for (i = 0; i < (num - 1); i++) { - var more = this.drawLine(ctx, xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], color); - Array.prototype.push.apply(path, more); + this.drawLine(ctx, xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], color, path); } return path; };