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-09-07 21:26:31 +0000
|
3
|
+++ src/com/goldencode/p2j/ui/client/gui/driver/EmulatedWindowState.java 2015-09-08 10:10:09 +0000
|
4
|
@@ -452,12 +452,22 @@
|
5
|
extra = String.format(" x = %d; y = %d", ps.x, ps.y);
|
6
|
break;
|
7
|
case DRAW_STRING:
|
8
|
- extra = String.format(" text = %s; x = %d; y = %d, centered = %b",
|
9
|
+ extra = String.format(" text = %s; x = %d; y = %d; centered = %b",
|
10
|
ps.text,
|
11
|
ps.x,
|
12
|
ps.y,
|
13
|
ps.centered);
|
14
|
break;
|
15
|
+ case DRAW_STRING_SCALED:
|
16
|
+ extra = String.format(
|
17
|
+ " text = %s; x = %d; y = %d; centered = %b; lwidth = %d; lheight = %d",
|
18
|
+ ps.text,
|
19
|
+ ps.x,
|
20
|
+ ps.y,
|
21
|
+ ps.centered,
|
22
|
+ ps.width,
|
23
|
+ ps.height);
|
24
|
+ break;
|
25
|
case SET_TITLE:
|
26
|
extra = String.format(" title = %s", ps.title);
|
27
|
break;
|
28
|
|
29
|
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js'
|
30
|
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js 2015-09-06 23:47:37 +0000
|
31
|
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js 2015-09-08 09:58:48 +0000
|
32
|
@@ -23,15 +23,18 @@
|
33
|
* The canvas 2D graphics context on which to draw.
|
34
|
* @param {LinesStroke} strokesManager
|
35
|
* The stroke manager
|
36
|
+ * @param {Object} fontsManager
|
37
|
+ * The p2j fonts manager.
|
38
|
* @param {Object} logger
|
39
|
* The p2j logger.
|
40
|
*/
|
41
|
-function CanvasRenderer(canvas, ctx, strokesManager, logger)
|
42
|
+function CanvasRenderer(canvas, ctx, strokesManager, fontsManager, logger)
|
43
|
{
|
44
|
this.canvas = canvas;
|
45
|
this.ctx = ctx;
|
46
|
this.strokesManager = strokesManager;
|
47
|
this.logger = logger;
|
48
|
+ this.fontsManager = fontsManager;
|
49
|
|
50
|
/** Color scaling factor, compatible with Java2D. */
|
51
|
var SCALE_FACTOR = 0.7;
|
52
|
@@ -233,6 +236,35 @@
|
53
|
}
|
54
|
|
55
|
/**
|
56
|
+ * Fill or stroke the current path on the given context, first using the current path as a
|
57
|
+ * clipping region. This ensures that the drawing of the path will not extend outside of the
|
58
|
+ * path by a half-pixel (which it would otherwise). The state of the context is saved on
|
59
|
+ * entry and restored after the drawing operation, so there will be no residual clipping
|
60
|
+ * region when this function returns.
|
61
|
+ *
|
62
|
+ * @param {CanvasRenderingContext2D} ctx
|
63
|
+ * The canvas 2D graphics context on which to draw.
|
64
|
+ * @param {Boolean} fill
|
65
|
+ * <code>true</code> to fill the drawn rectangle with the given color.
|
66
|
+ */
|
67
|
+CanvasRenderer.prototype.renderClosedPath = function(ctx, fill)
|
68
|
+{
|
69
|
+ ctx.save();
|
70
|
+ ctx.clip();
|
71
|
+
|
72
|
+ if (fill)
|
73
|
+ {
|
74
|
+ ctx.fill();
|
75
|
+ }
|
76
|
+ else
|
77
|
+ {
|
78
|
+ ctx.stroke();
|
79
|
+ }
|
80
|
+
|
81
|
+ ctx.restore();
|
82
|
+};
|
83
|
+
|
84
|
+/**
|
85
|
* Adjust the origin for pixel drawing on the canvas.
|
86
|
*
|
87
|
* @param {Number} x
|
88
|
@@ -421,35 +453,6 @@
|
89
|
}
|
90
|
|
91
|
/**
|
92
|
- * Fill or stroke the current path on the given context, first using the current path as a
|
93
|
- * clipping region. This ensures that the drawing of the path will not extend outside of the
|
94
|
- * path by a half-pixel (which it would otherwise). The state of the context is saved on
|
95
|
- * entry and restored after the drawing operation, so there will be no residual clipping
|
96
|
- * region when this function returns.
|
97
|
- *
|
98
|
- * @param {CanvasRenderingContext2D} ctx
|
99
|
- * The canvas 2D graphics context on which to draw.
|
100
|
- * @param {Boolean} fill
|
101
|
- * <code>true</code> to fill the drawn rectangle with the given color.
|
102
|
- */
|
103
|
-function renderClosedPath(ctx, fill)
|
104
|
-{
|
105
|
- ctx.save();
|
106
|
- ctx.clip();
|
107
|
-
|
108
|
- if (fill)
|
109
|
- {
|
110
|
- ctx.fill();
|
111
|
- }
|
112
|
- else
|
113
|
- {
|
114
|
- ctx.stroke();
|
115
|
- }
|
116
|
-
|
117
|
- ctx.restore();
|
118
|
-};
|
119
|
-
|
120
|
-/**
|
121
|
* Draw a rectangle in the given color and dimensions with the line drawing being overwritten
|
122
|
* using direct drawing to eliminate the negative/unwanted effects of alni-aliasing.
|
123
|
*
|
124
|
@@ -483,7 +486,7 @@
|
125
|
inset = 1;
|
126
|
ctx.beginPath();
|
127
|
ctx.rect(x, y, width - inset, height - inset);
|
128
|
- renderClosedPath(ctx, fill);
|
129
|
+ this.renderClosedPath(ctx, fill);
|
130
|
}
|
131
|
|
132
|
// now overdraw the stroked portion to eliminate anti-aliasing, we draw in a
|
133
|
@@ -527,7 +530,7 @@
|
134
|
inset = 1;
|
135
|
ctx.beginPath();
|
136
|
ctx.rect(x, y, width - inset, height - inset);
|
137
|
- renderClosedPath(ctx, fill);
|
138
|
+ this.renderClosedPath(ctx, fill);
|
139
|
}
|
140
|
|
141
|
// now overdraw the stroked portion to eliminate anti-aliasing, we draw in a
|
142
|
@@ -662,7 +665,7 @@
|
143
|
ctx.quadraticCurveTo(northWestX, northWestY, topLeftX, topLeftY);
|
144
|
ctx.closePath();
|
145
|
|
146
|
- renderClosedPath(ctx, fill);
|
147
|
+ this.renderClosedPath(ctx, fill);
|
148
|
|
149
|
// overdraw the anti-aliased line segments
|
150
|
var path = [];
|
151
|
@@ -738,7 +741,7 @@
|
152
|
ctx.fillStyle = this.createColorString(current);
|
153
|
ctx.beginPath();
|
154
|
ctx.rect(x, y, width - 2, height - 2);
|
155
|
- renderClosedPath(ctx, fill);
|
156
|
+ this.renderClosedPath(ctx, fill);
|
157
|
}
|
158
|
|
159
|
current = raised ? lighter : darker;
|
160
|
@@ -807,7 +810,7 @@
|
161
|
ctx.lineTo(xPoints[i], yPoints[i]);
|
162
|
}
|
163
|
ctx.closePath();
|
164
|
- renderClosedPath(ctx, fill);
|
165
|
+ this.renderClosedPath(ctx, fill);
|
166
|
}
|
167
|
var path = [];
|
168
|
// now overdraw the stroked portion
|
169
|
@@ -1144,3 +1147,90 @@
|
170
|
|
171
|
this.ctx.translate(x, y);
|
172
|
};
|
173
|
+
|
174
|
+/**
|
175
|
+ * Draws a given text at the given (x,y) position.
|
176
|
+ *
|
177
|
+ * @param {Number} text
|
178
|
+ * The text to draw.
|
179
|
+ * @param {Number} x
|
180
|
+ * The X-axis of the coordinate for the text starting point.
|
181
|
+ * @param {Number} y
|
182
|
+ * The Y-axis of the coordinate for the text starting point or the height
|
183
|
+ * of the text rectangle from the most top screen position.
|
184
|
+ * @param {Boolean} centered
|
185
|
+ * Defines the text base line and the interpretation of y.
|
186
|
+ * If it is true, the text base line is set to 'middle' and interprets y as a height,
|
187
|
+ * otherwise the text base line is set to 'bottom'.
|
188
|
+ */
|
189
|
+CanvasRenderer.prototype.drawText = function(text, x, y, centered)
|
190
|
+{
|
191
|
+ if (centered)
|
192
|
+ {
|
193
|
+ // in this case, the "y" is the height in which it needs to be vertically centered
|
194
|
+ y = y / 2;
|
195
|
+
|
196
|
+ this.ctx.textBaseline = 'middle';
|
197
|
+ }
|
198
|
+ else
|
199
|
+ {
|
200
|
+ this.ctx.textBaseline = 'bottom';
|
201
|
+ }
|
202
|
+
|
203
|
+ this.ctx.fillText(text, x, y);
|
204
|
+}
|
205
|
+
|
206
|
+/**
|
207
|
+ * Draws a given text at the given (x,y) position fitted to the given text rectangle.
|
208
|
+ *
|
209
|
+ * @param {Number} currentFont
|
210
|
+ * The current font ID, in the js font-table.
|
211
|
+ * @param {Number} text
|
212
|
+ * The text to draw.
|
213
|
+ * @param {Number} x
|
214
|
+ * The X-axis of the coordinate for the text starting point.
|
215
|
+ * @param {Number} y
|
216
|
+ * The Y-axis of the coordinate for the text starting point or the height
|
217
|
+ * of the text rectangle from the most top screen position.
|
218
|
+ * @param {Boolean} centered
|
219
|
+ * Defines the text base line and the interpretation of y.
|
220
|
+ * If it is true, the text base line is set to 'middle' and interprets y as a height,
|
221
|
+ * otherwise the text base line is set to 'bottom'.
|
222
|
+ * @param {Number} lwidth
|
223
|
+ * The space width to be used to display the given text.
|
224
|
+ * The text is scaled to fit this width, squeezed or extended
|
225
|
+ * @param {Number} lheight
|
226
|
+ * The space height to be used to display the given text.
|
227
|
+ * The text is scaled to fit this height, squeezed or extended.
|
228
|
+ */
|
229
|
+CanvasRenderer.prototype.drawScaledText = function(currentFont, text, x, y, centered, lwidth, lheight)
|
230
|
+{
|
231
|
+ var textWidth = this.fontsManager.getTextWidth(currentFont, text);
|
232
|
+ var textHeight = this.fontsManager.getTextHeight(currentFont, text);
|
233
|
+
|
234
|
+ var widthScale = lwidth / textWidth;
|
235
|
+ var heightScale = lheight / textHeight;
|
236
|
+
|
237
|
+ // scale drawing context to computed width
|
238
|
+ // this scales the desired structure.x as well so it needs adjusting
|
239
|
+ this.ctx.save();
|
240
|
+ this.ctx.scale(widthScale, heightScale);
|
241
|
+
|
242
|
+ var scaleBackWidth = 1 / widthScale;
|
243
|
+ var scaleBackHeight = 1 / heightScale;
|
244
|
+
|
245
|
+ if (centered)
|
246
|
+ {
|
247
|
+ // in this case, the "y" is the height in which it needs to be vertically centered
|
248
|
+ y = y / 2;
|
249
|
+
|
250
|
+ this.ctx.textBaseline = 'middle';
|
251
|
+ }
|
252
|
+ else
|
253
|
+ {
|
254
|
+ this.ctx.textBaseline = 'bottom';
|
255
|
+ }
|
256
|
+
|
257
|
+ this.ctx.fillText(text, x * scaleBackWidth, y * scaleBackHeight);
|
258
|
+ this.ctx.restore();
|
259
|
+}
|
260
|
\ No newline at end of file
|
261
|
|
262
|
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js'
|
263
|
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-09-07 21:26:31 +0000
|
264
|
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-09-08 09:59:32 +0000
|
265
|
@@ -184,7 +184,8 @@
|
266
|
this.iconHeight = 0;
|
267
|
|
268
|
/** Creates canvas renderer. */
|
269
|
- this.canvasRenderer = new CanvasRenderer(this.canvas, this.ctx, strokesManager, p2j.logger);
|
270
|
+ this.canvasRenderer = new CanvasRenderer(this.canvas, this.ctx, strokesManager,
|
271
|
+ p2j.fonts, p2j.logger);
|
272
|
|
273
|
/** List of widgets which are aware of mouse events. */
|
274
|
this.mouseAwareWidgets = new Array();
|
275
|
@@ -556,20 +557,7 @@
|
276
|
y = p2j.socket.readInt32BinaryMessage(message, idx + offset);
|
277
|
offset = offset + 4;
|
278
|
|
279
|
- if (centered)
|
280
|
- {
|
281
|
- // in this case, the "y" is the height in which it needs to be vertically centered
|
282
|
- y = y / 2;
|
283
|
-
|
284
|
- this.ctx.textBaseline = 'middle';
|
285
|
- }
|
286
|
- else
|
287
|
- {
|
288
|
- this.ctx.textBaseline = 'bottom';
|
289
|
- }
|
290
|
-
|
291
|
- this.ctx.fillText(text, x, y);
|
292
|
-
|
293
|
+ this.canvasRenderer.drawText(text, x, y, centered);
|
294
|
extra = " text = " + text + "; x = " + x + "; y = " + y +
|
295
|
"; centered = " + centered;
|
296
|
break;
|
297
|
@@ -597,35 +585,10 @@
|
298
|
var lheight = p2j.socket.readInt32BinaryMessage(message, idx + offset);
|
299
|
offset = offset + 4;
|
300
|
|
301
|
- var textWidth = p2j.fonts.getTextWidth(currentFont, text);
|
302
|
- var textHeight = p2j.fonts.getTextHeight(currentFont, text);
|
303
|
-
|
304
|
- var widthScale = lwidth / textWidth;
|
305
|
- var heightScale = lheight / textHeight;
|
306
|
-
|
307
|
- // scale drawing context to computed width
|
308
|
- // this scales the desired structure.x as well so it needs adjusting
|
309
|
- this.ctx.save();
|
310
|
- this.ctx.scale(widthScale, heightScale);
|
311
|
-
|
312
|
- var scaleBackWidth = 1 / widthScale;
|
313
|
- var scaleBackHeight = 1 / heightScale;
|
314
|
-
|
315
|
- if (centered)
|
316
|
- {
|
317
|
- // in this case, the "y" is the height in which it needs to be vertically centered
|
318
|
- y = y / 2;
|
319
|
-
|
320
|
- this.ctx.textBaseline = 'middle';
|
321
|
- }
|
322
|
- else
|
323
|
- {
|
324
|
- this.ctx.textBaseline = 'bottom';
|
325
|
- }
|
326
|
-
|
327
|
- this.ctx.fillText(text, x * scaleBackWidth, y * scaleBackHeight);
|
328
|
- this.ctx.restore();
|
329
|
-
|
330
|
+ this.canvasRenderer.drawScaledText(currentFont, text, x, y, centered, lwidth, lheight);
|
331
|
+ extra = " text = " + text + "; x = " + x + "; y = " + y +
|
332
|
+ "; centered = " + centered +
|
333
|
+ "; lwidth = " + lwidth + "; lheight = " + lheight;
|
334
|
break;
|
335
|
case ops.DRAW_PARAGRAPH:
|
336
|
offset = 1;
|
337
|
|