Project

General

Profile

1811q_201509008_1.txt

Sergey Ivanovskiy, 09/08/2015 06:21 AM

Download (12 KB)

 
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