1
|
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java'
|
2
|
--- src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java 2015-08-26 22:14:27 +0000
|
3
|
+++ src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java 2015-08-27 13:19:27 +0000
|
4
|
@@ -461,6 +461,25 @@
|
5
|
|
6
|
switch (ps.id)
|
7
|
{
|
8
|
+ case SET_LOCATION:
|
9
|
+ extra = String.format(" x = %d; y = %d", ps.x, ps.y);
|
10
|
+ break;
|
11
|
+ case DRAW_LINE:
|
12
|
+ extra = String.format(" x1 = %d; y1 = %d; x2 = %d; y2 = %d",
|
13
|
+ ps.x,
|
14
|
+ ps.y,
|
15
|
+ ps.width,
|
16
|
+ ps.height);
|
17
|
+ break;
|
18
|
+ case DRAW_ROUND_RECT:
|
19
|
+ case FILL_ROUND_RECT:
|
20
|
+ extra = String.format(" x = %d; y = %d; width = %d; height = %d; diameter = %d",
|
21
|
+ ps.x,
|
22
|
+ ps.y,
|
23
|
+ ps.width,
|
24
|
+ ps.height,
|
25
|
+ ps.arcDiameter);
|
26
|
+ break;
|
27
|
case DRAW_RECT:
|
28
|
case FILL_RECT:
|
29
|
case DRAW_IMAGE:
|
30
|
|
31
|
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js'
|
32
|
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-27 07:47:53 +0000
|
33
|
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-27 13:47:59 +0000
|
34
|
@@ -925,8 +925,8 @@
|
35
|
var y1 = p2j.socket.readInt32BinaryMessage(message, idx + 5);
|
36
|
var x2 = p2j.socket.readInt32BinaryMessage(message, idx + 9);
|
37
|
var y2 = p2j.socket.readInt32BinaryMessage(message, idx + 13);
|
38
|
- extra = " x1 = " + x1 +"; y1 = " + y1 + "; x2 = " + x2 + "; y2 = " + y2;
|
39
|
- path = this.drawLine(this.ctx, x1, y1, x2, y2, this.rawColor);
|
40
|
+ extra = " x1 = " + x1 + "; y1 = " + y1 + "; x2 = " + x2 + "; y2 = " + y2;
|
41
|
+ path = this.drawLineSegment(this.ctx, x1, y1, x2, y2, this.rawColor);
|
42
|
|
43
|
strokesManager.applyStrokeToPath(this.ctx,
|
44
|
this.strokeStyleId,
|
45
|
@@ -939,7 +939,7 @@
|
46
|
y = p2j.socket.readInt32BinaryMessage(message, idx + 5);
|
47
|
width = p2j.socket.readInt32BinaryMessage(message, idx + 9);
|
48
|
height = p2j.socket.readInt32BinaryMessage(message, idx + 13);
|
49
|
- extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height;
|
50
|
+ extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height;
|
51
|
path = this.drawRect(this.ctx, x, y, width, height, this.rawColor, false);
|
52
|
|
53
|
strokesManager.applyStrokeToPath(this.ctx,
|
54
|
@@ -954,7 +954,8 @@
|
55
|
width = p2j.socket.readInt32BinaryMessage(message, idx + 9);
|
56
|
height = p2j.socket.readInt32BinaryMessage(message, idx + 13);
|
57
|
diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17);
|
58
|
- extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height + "; diameter = " + diameter;
|
59
|
+ extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height
|
60
|
+ + "; diameter = " + diameter;
|
61
|
this.drawRoundRect(ctx, x, y, width, height, diameter, this.rawColor, false);
|
62
|
break;
|
63
|
case ops.DRAW_IMAGE:
|
64
|
@@ -964,7 +965,7 @@
|
65
|
width = p2j.socket.readInt32BinaryMessage(message, idx + 9);
|
66
|
height = p2j.socket.readInt32BinaryMessage(message, idx + 13);
|
67
|
|
68
|
- extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height;
|
69
|
+ extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height;
|
70
|
|
71
|
var encoding = message[idx + 17];
|
72
|
var key = p2j.socket.readInt32BinaryMessage(message, idx + 18);
|
73
|
@@ -989,7 +990,7 @@
|
74
|
y = p2j.socket.readInt32BinaryMessage(message, idx + 5);
|
75
|
width = p2j.socket.readInt32BinaryMessage(message, idx + 9);
|
76
|
height = p2j.socket.readInt32BinaryMessage(message, idx + 13);
|
77
|
- extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + height;
|
78
|
+ extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height;
|
79
|
this.drawRect(this.ctx, x, y, width, height, this.rawColor, true);
|
80
|
break;
|
81
|
case ops.FILL_ROUND_RECT:
|
82
|
@@ -998,6 +999,8 @@
|
83
|
width = p2j.socket.readInt32BinaryMessage(message, idx + 9);
|
84
|
height = p2j.socket.readInt32BinaryMessage(message, idx + 13);
|
85
|
diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17);
|
86
|
+ extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height
|
87
|
+ + "; diameter = " + diameter;
|
88
|
this.drawRoundRect(this.ctx, x, y, width, height, diameter, this.rawColor, true);
|
89
|
break;
|
90
|
case ops.FILL_POLYGON:
|
91
|
@@ -1097,7 +1100,7 @@
|
92
|
y = p2j.socket.readInt32BinaryMessage(message, idx + 5);
|
93
|
this.canvas.style.left = x.toString() + "px";
|
94
|
this.canvas.style.top = y.toString() + "px";
|
95
|
- extra = " x = " + x +"; y = " + y;
|
96
|
+ extra = " x = " + x + "; y = " + y;
|
97
|
break;
|
98
|
case ops.RESIZE_WINDOW:
|
99
|
width = p2j.socket.readInt32BinaryMessage(message, idx + 1);
|
100
|
@@ -1411,9 +1414,9 @@
|
101
|
* Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.
|
102
|
*
|
103
|
* @return {Array} path
|
104
|
- * The {x:.,y:.} point per a pixel array that represents the rectangle outerline.
|
105
|
+ * The {x:.,y:.} point per a pixel array that represents the drawing line segment.
|
106
|
*/
|
107
|
- Window.prototype.drawLine = function(ctx, x1, y1, x2, y2, color)
|
108
|
+ Window.prototype.drawLineSegment = function(ctx, x1, y1, x2, y2, color)
|
109
|
{
|
110
|
x1 = x1 + this.origin.x;
|
111
|
x2 = x2 + this.origin.x;
|
112
|
@@ -1490,6 +1493,36 @@
|
113
|
};
|
114
|
|
115
|
/**
|
116
|
+ * Draw a line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing and
|
117
|
+ * add its pixels path to the end of the provided pixels path.
|
118
|
+ * <p>
|
119
|
+ * This is an implementation of the well known 50+ year old Bresenham algorithm.
|
120
|
+ *
|
121
|
+ * @param {CanvasRenderingContext2D} ctx
|
122
|
+ * The canvas 2D graphics context on which to draw.
|
123
|
+ * @param {Number} x1
|
124
|
+ * X coordinate of the starting pixel to be drawn.
|
125
|
+ * @param {Number} y1
|
126
|
+ * Y coordinate of the starting pixel to be drawn.
|
127
|
+ * @param {Number} x2
|
128
|
+ * X coordinate of the ending pixel to be drawn.
|
129
|
+ * @param {Number} y2
|
130
|
+ * Y coordinate of the ending pixel to be drawn.
|
131
|
+ * @param {Number[]} color
|
132
|
+ * Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.
|
133
|
+ * @param {Array} path
|
134
|
+ * The provided holder of {x:.,y:.} points, the target drawing as a set of sequential
|
135
|
+ * line points will be added at the end of the provided path.
|
136
|
+ * @return {Array}
|
137
|
+ * The {x:.,y:.} point per a pixel array that represents the drawing line segment.
|
138
|
+ */
|
139
|
+ Window.prototype.drawLine = function(ctx, x1, y1, x2, y2, color, path)
|
140
|
+ {
|
141
|
+ var segment = this.drawLineSegment(ctx, x1, y1, x2, y2, color);
|
142
|
+ Array.prototype.push.apply(path, segment);
|
143
|
+ return segment;
|
144
|
+ }
|
145
|
+ /**
|
146
|
* Fill or stroke the current path on the given context, first using the current path as a
|
147
|
* clipping region. This ensures that the drawing of the path will not extend outside of the
|
148
|
* path by a half-pixel (which it would otherwise). The state of the context is saved on
|
149
|
@@ -1545,7 +1578,7 @@
|
150
|
{
|
151
|
// filled rectangles draw 1 pixel smaller in 2 dimensions than stroked rectangles
|
152
|
var inset = 0;
|
153
|
-
|
154
|
+ var path = [];
|
155
|
// use vector operations for the interior of the rectangle
|
156
|
if (fill)
|
157
|
{
|
158
|
@@ -1553,25 +1586,16 @@
|
159
|
ctx.beginPath();
|
160
|
ctx.rect(x, y, width - inset, height - inset);
|
161
|
renderClosedPath(ctx, fill);
|
162
|
- return [];
|
163
|
- }
|
164
|
- else
|
165
|
- {
|
166
|
- // now overdraw the stroked portion to eliminate anti-aliasing, we draw in a
|
167
|
- // clockwise direction (since we are not using paths, this is not strictly necessary)
|
168
|
- var path = this.drawLine(ctx, x, y, x + width - inset, y, color);
|
169
|
-
|
170
|
- var more = this.drawLine(ctx, x + width - inset, y + 1, x + width - inset, y + height - inset, color);
|
171
|
- Array.prototype.push.apply(path, more);
|
172
|
-
|
173
|
- more = this.drawLine(ctx, x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, color);
|
174
|
- Array.prototype.push.apply(path, more);
|
175
|
-
|
176
|
- // close the path
|
177
|
- more = this.drawLine(ctx, x, y + height - inset, x, y + 1, color);
|
178
|
- Array.prototype.push.apply(path, more);
|
179
|
- return path;
|
180
|
- }
|
181
|
+ }
|
182
|
+
|
183
|
+ // now overdraw the stroked portion to eliminate anti-aliasing, we draw in a
|
184
|
+ // clockwise direction (since we are not using paths, this is not strictly necessary)
|
185
|
+ this.drawLine(ctx, x, y, x + width - inset, y, color, path);
|
186
|
+ this.drawLine(ctx, x + width - inset, y + 1, x + width - inset, y + height - inset, color, path);
|
187
|
+ this.drawLine(ctx, x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, color, path);
|
188
|
+ this.drawLine(ctx, x, y + height - inset, x, y + 1, color, path);// close the path
|
189
|
+
|
190
|
+ return path;
|
191
|
};
|
192
|
|
193
|
/**
|
194
|
@@ -1851,14 +1875,11 @@
|
195
|
renderClosedPath(ctx, fill);
|
196
|
|
197
|
// overdraw the anti-aliased line segments
|
198
|
-
|
199
|
- var path = this.drawLine(ctx, topLeftX, topLeftY, topRightX, topRightY, color);
|
200
|
- var more = this.drawLine(ctx, rightUpX, rightUpY, rightDownX, rightDownY, color);
|
201
|
- Array.prototype.push.apply(path, more);
|
202
|
- more = this.drawLine(ctx, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, color);
|
203
|
- Array.prototype.push.apply(path, more);
|
204
|
- more = this.drawLine(ctx, leftUpX, leftUpY, leftDownX, leftDownY, color);
|
205
|
- Array.prototype.push.apply(path, more);
|
206
|
+ var path = [];
|
207
|
+ this.drawLine(ctx, topLeftX, topLeftY, topRightX, topRightY, color, path);
|
208
|
+ this.drawLine(ctx, rightUpX, rightUpY, rightDownX, rightDownY, color, path);
|
209
|
+ this.drawLine(ctx, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, color, path);
|
210
|
+ this.drawLine(ctx, leftUpX, leftUpY, leftDownX, leftDownY, color, path);
|
211
|
strokesManager.applyStrokeToPath(this.ctx,
|
212
|
this.strokeStyleId,
|
213
|
this.strokeWidth,
|
214
|
@@ -1934,9 +1955,9 @@
|
215
|
|
216
|
// draw the top and left sides in the contrasting color (raised mode) or the darker color
|
217
|
// otherwise
|
218
|
- var path = this.drawLine(ctx, x, y, x + width - 2 - inset, y, current);
|
219
|
- var more = this.drawLine(ctx, x, y + 1, x, y + height - 1 - inset, current);
|
220
|
- Array.prototype.push.apply(path, more);
|
221
|
+ var path = [];// create new pixels path to draw
|
222
|
+ this.drawLine(ctx, x, y, x + width - 2 - inset, y, current, path);
|
223
|
+ this.drawLine(ctx, x, y + 1, x, y + height - 1 - inset, current, path);
|
224
|
strokesManager.applyStrokeToPath(this.ctx,
|
225
|
this.strokeStyleId,
|
226
|
this.strokeWidth,
|
227
|
@@ -1946,9 +1967,9 @@
|
228
|
// draw the bottom and right sides in the darker color (raised mode) or the contrasting
|
229
|
// color otherwise
|
230
|
current = raised ? darker : lighter;
|
231
|
- path = this.drawLine(ctx, x + 1, y + height - 1 - inset, x + width - 1 - inset, y + height - 1 - inset, current);
|
232
|
- more = this.drawLine(ctx, x + width - 1 - inset, y, x + width - 1 - inset, y + height - 2, current);
|
233
|
- Array.prototype.push.apply(path, more);
|
234
|
+ path = []; // create new pixels path to draw
|
235
|
+ this.drawLine(ctx, x + 1, y + height - 1 - inset, x + width - 1 - inset, y + height - 1 - inset, current, path);
|
236
|
+ this.drawLine(ctx, x + width - 1 - inset, y, x + width - 1 - inset, y + height - 2, current, path);
|
237
|
strokesManager.applyStrokeToPath(this.ctx,
|
238
|
this.strokeStyleId,
|
239
|
this.strokeWidth,
|
240
|
@@ -2000,8 +2021,7 @@
|
241
|
// now overdraw the stroked portion
|
242
|
for (i = 0; i < (num - 1); i++)
|
243
|
{
|
244
|
- var more = this.drawLine(ctx, xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], color);
|
245
|
- Array.prototype.push.apply(path, more);
|
246
|
+ this.drawLine(ctx, xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], color, path);
|
247
|
}
|
248
|
return path;
|
249
|
};
|
250
|
|