FWD » Core Development » User Interface

=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/WebClientMessageTypes.java'

--- src/com/goldencode/p2j/ui/client/driver/web/WebClientMessageTypes.java	2015-08-20 14:07:03 +0000

+++ src/com/goldencode/p2j/ui/client/driver/web/WebClientMessageTypes.java	2015-08-20 14:14:14 +0000

@@ -126,4 +126,7 @@

    /** Restack the z-order of all windows. */

    public static final byte MSG_RESTACK_WINDOWS     = (byte) 0x95;

+   

+   /** Set the stroke style for a window. */

+   public static final byte MSG_SET_STROKE_STYLE    = (byte) 0x96;

 }

=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/index.html'

--- src/com/goldencode/p2j/ui/client/driver/web/index.html	2015-08-12 17:42:50 +0000

+++ src/com/goldencode/p2j/ui/client/driver/web/index.html	2015-08-20 12:40:07 +0000

@@ -9,6 +9,7 @@

       <script type="text/javascript" src="/common/p2j.js"></script>

       <script type="text/javascript" src="/common/p2j.sound.js"></script>

+      <script type="text/javascript" src="/client/p2j.strokes.js"></script>

       <script type="text/javascript" src="/client/p2j.screen.js"></script>

       <script type="text/javascript" src="/common/p2j.socket.js"></script>

       <script type="text/javascript" src="/common/p2j.keymap.js"></script>

=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.socket.js'

--- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.socket.js	2015-08-20 14:07:03 +0000

+++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.socket.js	2015-08-20 14:15:40 +0000

@@ -24,7 +24,7 @@

 **                  requests.

 ** 010 GES 20150818 Added more GUI message support including fonts, cursors and z-order.

 **                  Once the web socket has connected, notify the Java side, so that it can start

-**                  sending requests.

+**                  sending requests, added line strokes.

 */

 "use strict";

@@ -534,6 +534,13 @@

                      }

                      p2j.screen.restackZOrderEntries(winids);

                      break;

+                  case 0x96:

+                     // set line stroke

+                     var strokeStyle = me.readInt32BinaryMessage(message, 1);

+                     var strokeWidth = me.readInt32BinaryMessage(message, 5);

+                     var wid = me.readInt32BinaryMessage(message, 9);

+                     p2j.screen.setLineStroke(strokeStyle, strokeWidth, wid);

+                     break;

                };

             }

             else

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebEmulatedWindow.java'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebEmulatedWindow.java	2015-08-18 19:50:34 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebEmulatedWindow.java	2015-08-20 10:02:03 +0000

@@ -17,7 +17,7 @@

 **                  font creation/selection.

 ** 005 GES 20150817 Removed isOnTop() since it is unnecessary. The saveFocusListeners(),

 **                  restoreFocusListeners() and moveToTop() are only needed for Swing usage and

-**                  have been removed from this class.

+**                  have been removed from this class, added line strokes.

 */

 package com.goldencode.p2j.ui.client.gui.driver.web;

@@ -362,6 +362,7 @@

             websock.setColor(ps.color.getRed(), ps.color.getGreen(), ps.color.getBlue());

             break;

          case SET_LINE_STROKE:

+            websock.setLineStroke(ps.stroke.ordinal(), Math.round(ps.strokeWidth), getWindowId());

             break;

          case SET_FONT:

             websock.setFont(ps.font.font);

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebSocket.java'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebSocket.java	2015-08-20 14:07:03 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebSocket.java	2015-08-20 14:17:12 +0000

@@ -12,8 +12,8 @@

 ** 001 GES 20150331 First version which is a placeholder using the common parent code as ChUI.

 ** 002 GES 20150701 Added messages for a first pass at GUI support,

 **                  implemented an images drawing operation.

-** 003 CA  20150810 Added operations for font, metrics and string drawing.  Added z-order

-**                  support.

+** 003 CA  20150810 Added operations for font, metrics and string drawing.  Added z-order,

+**                  line strokes.

 ** 004 CA  20150820 Moved the message receiving APIs to parent class.

 */

@@ -1231,6 +1231,31 @@

    }

    /**

+    * Sends MSG_SET_STROKE_STYLE to order the current window stroke to be changed

+    * on the client side. It sends a window its stroke style and line width. All possible stroke

+    * styles are listed by LineStroke enumeration. 

+    * 

+    * @param    strokeStyle

+    *           The known stroke style id.

+    * @param    width

+    *           The stroke line width.

+    * @param    wid

+    *           The window id.

+    */

+   public void setLineStroke(int strokeStyle, int width, int wid)

+   {

+      byte[] message = new byte[13];

+

+      message[0] = WebClientMessageTypes.MSG_SET_STROKE_STYLE;

+

+      writeMessageInt32(message, 1, strokeStyle);

+      writeMessageInt32(message, 5, width);

+      writeMessageInt32(message, 9, wid);

+

+      sendBinaryMessage(message);

+   }

+

+   /**

     * Draw a string at the specified location.

     * 

     * @param    text

=== 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-19 20:05:05 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-08-20 14:22:24 +0000

@@ -84,6 +84,8 @@

       SET_TITLE            : 29

    };

+   var strokesManager = new LineStrokes();

+   

    /**

     * Constructor for a Window class that represents a Progress 4GL window instance.

     *

@@ -138,12 +140,17 @@

       // eliminate anti-aliasing of images

       this.ctx.imageSmoothingEnabled = false;

+      // the current window stroke style

+      this.strokeStyle = strokesManager.getDefaultStrokeStyle();

+      // the current window stroke width

+      this.strokeWidth = 1;

+      

       // force all drawing to be inside pixel "cells" instead of "stradling" between two cells

       // which is the default; this eliminates much of the worst of the anti-aliasing and

       // positioning problems inherent in canvas operations; this will also save off the

       // current state of the graphics context so that it can be restored later 

       this.translate(0.5, 0.5);

-   }

+   };

    /**

     * Cleanup any resources, including any linkages to the window from an owning window.

@@ -353,7 +360,7 @@

             this.ctx.rect(x, y, width, height);

             this.ctx.clip();

          }

-      }      

+      }

    };

    /**

@@ -430,7 +437,7 @@

    Window.prototype.resize = function(width, height)

    {

       // save off the previously drawn content

-      var oldPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

+      var oldPixels = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);

       // this is expensive, but we really do need to change the overall size of the canvas 

       this.canvas.width  = width;

@@ -441,7 +448,7 @@

       this.replay();

       // re-blit the previously drawn content

-      ctx.putImageData(oldPixels, 0, 0);

+      this.ctx.putImageData(oldPixels, 0, 0);

    };   

    /**

@@ -454,6 +461,42 @@

    {

       this.canvas.style.cursor = style;

    };

+   

+   /**

+    * Sets the stroke style.

+    * 

+    * @param    {Number} strokeStyle

+    *           The predefined stroke style.

+    */

+   Window.prototype.setStrokeStyle = function(strokeStyle)

+   {

+      this.strokeStyle = strokeStyle;

+   };

+   

+   /**

+    * Sets the stroke line width.

+    * 

+    * @param    {Number} width

+    *           The stroke line width.

+    */

+   Window.prototype.setStrokeWidth = function(width)

+   {

+      this.strokeWidth = width;

+   };

+

+   /**

+    * Sets the line stroke.

+    * 

+    * @param    {Number} strokeStyle

+    *           The predefined stroke style.

+    * @param    {Number} width

+    *           The stroke line width.

+    */

+   Window.prototype.setLineStroke = function(strokeStyle, width)

+   {

+      this.setStrokeStyle(strokeStyle);

+      this.setStrokeWidth(width);

+   };

    /**

     * Draw the given list of operations in the canvas.

@@ -521,11 +564,11 @@

                   // in this case, the "y" is the height in which it needs to be vertically centered

                   y = y / 2;

-                  ctx.textBaseline = 'middle';

+                  this.ctx.textBaseline = 'middle';

                }

                else

                {

-                  ctx.textBaseline = 'top';

+                  this.ctx.textBaseline = 'top';

                }

                this.ctx.fillText(text, x, y);

@@ -554,16 +597,16 @@

                var lheight = p2j.socket.readInt32BinaryMessage(message, idx + offset);

                offset = offset + 4;

-               var textWidth = p2j.fonts.getTextWidth(this.currentFont, text);

-               var textHeight = p2j.fonts.getTextHeight(this.currentFont, text);

+               var textWidth = p2j.fonts.getTextWidth(currentFont, text);

+               var textHeight = p2j.fonts.getTextHeight(currentFont, text);

                var widthScale = lwidth / textWidth;

                var heightScale = lheight / textHeight;

                // scale drawing context to computed width

                // this scales the desired structure.x as well so it needs adjusting

-               ctx.save();

-               ctx.scale(widthScale, heightScale);

+               this.ctx.save();

+               this.ctx.scale(widthScale, heightScale);

                var scaleBackWidth = 1 / widthScale;

                var scaleBackHeight = 1 / heightScale;

@@ -573,15 +616,15 @@

                   // in this case, the "y" is the height in which it needs to be vertically centered

                   y = y / 2;

-                  ctx.textBaseline = 'middle';

+                  this.ctx.textBaseline = 'middle';

                }

                else

                {

-                  ctx.textBaseline = 'top';

+                  this.ctx.textBaseline = 'top';

                }

-               ctx.fillText(text, x * scaleBackWidth, y * scaleBackHeight);

-               ctx.restore();

+               this.ctx.fillText(text, x * scaleBackWidth, y * scaleBackHeight);

+               this.ctx.restore();

                break;

             case ops.DRAW_PARAGRAPH:

@@ -605,7 +648,7 @@

                width = p2j.socket.readInt32BinaryMessage(message, idx + offset);

                offset = offset + 4;

-               ctx.textBaseline = 'top';

+               this.ctx.textBaseline = 'top';

                me.layoutParagraphWorker(text, fontId, x, y, width, true);

@@ -615,7 +658,9 @@

                var y1 =  p2j.socket.readInt32BinaryMessage(message, idx + 5);

                var x2 =  p2j.socket.readInt32BinaryMessage(message, idx + 9);

                var y2 =  p2j.socket.readInt32BinaryMessage(message, idx + 13);

-               drawLine(this.ctx, x1, y1, x2, y2, this.rawColor);

+               strokesManager.applyStrokeToPath(this.ctx,

+                     this.strokeStyle, this.strokeWidth, this.rawColor,

+                     drawLine(this.ctx, x1, y1, x2, y2, this.rawColor));

                this.ctx.stroke();

                break;

             case ops.DRAW_RECT:

@@ -623,7 +668,9 @@

                y      = p2j.socket.readInt32BinaryMessage(message, idx + 5);

                width  = p2j.socket.readInt32BinaryMessage(message, idx + 9);

                height = p2j.socket.readInt32BinaryMessage(message, idx + 13);

-               drawRect(this.ctx, x, y, width, height, this.rawColor, false);

+               strokesManager.applyStrokeToPath(this.ctx,

+                     this.strokeStyle, this.strokeWidth, this.rawColor,

+                     drawRect(this.ctx, x, y, width, height, this.rawColor, false));

                break;

             case ops.DRAW_ROUND_RECT:

                x        = p2j.socket.readInt32BinaryMessage(message, idx + 1);

@@ -658,7 +705,7 @@

                   imgDataOffset = idx + 22;

                   loadedImages.set(key, message.subarray(imgDataOffset, imgDataOffset + pixelsInBytes));

                }

-               drawImage(x, y, width, height, imgData, imgDataOffset);

+               drawImage(this.ctx, x, y, width, height, imgData, imgDataOffset);

                break;

             case ops.FILL_RECT:

                x      = p2j.socket.readInt32BinaryMessage(message, idx + 1);

@@ -673,7 +720,7 @@

                width    = p2j.socket.readInt32BinaryMessage(message, idx + 9);

                height   = p2j.socket.readInt32BinaryMessage(message, idx + 13);

                diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17);

-               drawRoundRect(ctx, x, y, width, height, diameter, this.rawColor, true);

+               drawRoundRect(this.ctx, x, y, width, height, diameter, this.rawColor, true);

                break;

             case ops.FILL_POLYGON:

                idx += 1;

@@ -719,14 +766,14 @@

             case ops.SET_FONT:

                fontId = p2j.socket.readInt32BinaryMessage(message, idx + 1);

-               this.setFont(fontId);

+               this.setFont(this.ctx, fontId);

                break;

             case ops.SET_FONT_STYLE:

                var style = p2j.socket.readInt32BinaryMessage(message, idx + 1);

-               if (p2j.fonts.setFontStyle(this.currentFont, style))

+               if (p2j.fonts.setFontStyle(currentFont, style))

                {

-                  fname = p2j.fonts.getFontName(this.currentFont);

+                  fname = p2j.fonts.getFontName(currentFont);

                   this.ctx.font = fname;

                }

@@ -792,7 +839,7 @@

    function isValidWindowId(wid)

    {

       return (typeof wid === 'number') && (wid % 1 === 0) && wid > 0;

-   }

+   };

    /**

     * Checks if the given value already exists as a window id.

@@ -805,8 +852,8 @@

    function isExistingWindowId(wid)

    {

       return winlist[wid] instanceof Window;

-   }

-   

+   };

+

    /**

     * Obtain the specified window.

     *

@@ -819,8 +866,8 @@

    function getWindow(wid)

    {

       return winlist[wid] instanceof Window ? winlist[wid] : null;

-   }

-            

+   };

+

    /**

     * Find the index of the given window in the z-order list.

     *

@@ -855,8 +902,8 @@

       }

       return found;

-   }

-   

+   };

+

    /**

     * Adds the given window to the end of the z-order list, setting the z-order value as needed.

     *

@@ -875,7 +922,7 @@

       // assign the z-order

       win.canvas.style.zIndex = zidx;

-   }

+   };

    /**

     * Removes the given window from the z-order list and resets the z-order values of all

@@ -898,7 +945,7 @@

       }

       return removeZOrderEntryWorker(found);

-   }

+   };

    /**

     * Removes the given element from the z-order list and resets the z-order values of all

@@ -924,7 +971,7 @@

       }

       return removed;

-   }

+   };

    /**

     * Moves the given window to the top of the z-order list and resets the z-order values of all

@@ -945,7 +992,7 @@

          addZOrderEntry(entry.id, entry.win);

       }

-   }

+   };

    /**

     * Directly draw the specified pixel in the given color.

@@ -959,14 +1006,14 @@

     * @param    {Number[]} color

     *           Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.

     */

-   function drawPixel(ctx, x, y, color)

+   Window.prototype.drawPixel = function(ctx, x, y, color)

    {

-      pixData[0] = color[0];

-      pixData[1] = color[1];

-      pixData[2] = color[2];

+      this.pixData[0] = color[0];

+      this.pixData[1] = color[1];

+      this.pixData[2] = color[2];

-      ctx.putImageData(pixel, x, y);

-   }

+      this.ctx.putImageData(pixel, x, y);

+   };

    /**

     * Draw a line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing.

@@ -985,9 +1032,14 @@

     *           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.

+    * 

+    * @return   {Array} path

+    *           The {x:.,y:.} point per a pixel array that represents the rectangle outerline.

     */

-   function drawLine(ctx, x1, y1, x2, y2, color)

+   Window.prototype.drawLine = function(ctx, x1, y1, x2, y2, color)

    {

+      // holds the line pixels to draw

+      var path = [];

       var dx = Math.abs(x2 - x1);

       var dy = Math.abs(y2 - y1);

@@ -1004,7 +1056,11 @@

       while (true)

       {

-         drawPixel(ctx, x, y, color);

+         if (strokesManager.isDirectDrawingStrokeStyle(this.strokeStyle))

+         {

+            drawPixel(ctx, x, y, color);

+         }

+         path.push({x : x, y : y});

          if (x == x2 && y == y2)

             break;

@@ -1023,7 +1079,9 @@

             y   += yIncr;

          }

       }

-   }

+      

+      return path;

+   };

    /**

     * Fill or stroke the current path on the given context, first using the current path as a

@@ -1052,8 +1110,8 @@

       }

       ctx.restore();

-   }

-         

+   };

+

    /**

     * Draw a rectangle in the given color and dimensions with the line drawing being overwritten

     * using direct drawing to eliminate the negative/unwanted effects of alni-aliasing.

@@ -1073,8 +1131,11 @@

     *           This will be used for the border lines and when in fill mode, also the interior.

     * @param    {Boolean} fill

     *           <code>true</code> to fill the drawn rectangle with the given color.

+    * 

+    * @return   {Array} path

+    *           The {x:.,y:.} point per a pixel array that represents the rectangle outerline.

     */

-   function drawRect(ctx, x, y, width, height, color, fill)

+   Window.prototype.drawRect = function(ctx, x, y, width, height, color, fill)

    {

       // use vector operations for the interior of the rectangle

       if (fill)

@@ -1085,15 +1146,20 @@

       }

       // now overdraw the stroked portion to eliminate anit-aliasing

-      drawLine(ctx, x, y, x + width, y, color);

-      drawLine(ctx, x, y + 1, x, y + height, color);

-      drawLine(ctx, x + width, y + 1, x + width, y + height, color);

-      drawLine(ctx, x + 1, y + height, x + width - 1, y + height, color);

-   }                         

+      // to draw rectangle following a clockwise direction

+      var path = drawLine(ctx, x, y, x + width, y, color);

+      Array.prototype.push.apply(path, drawLine(ctx, x + width, y + 1, x + width, y + height, color));

+      Array.prototype.push.apply(path, drawLine(ctx, x + width - 1, y + height, x + 1, y + height, color));

+      Array.prototype.push.apply(path, drawLine(ctx, x, y + height, x, y + 1, color));// close the path

+      

+      return path;

+   };

    /**

     * It draws an image on the canvas.

     * 

+    * @param    {CanvasRenderingContext2D} ctx

+    *           The canvas 2D graphics context on which to draw.

     * @param    {Number} x

     *           X coordinate of the top left corner.

     * @param    {Number} y

@@ -1107,7 +1173,7 @@

     * @param    {Number} imgDataOffset

     *           The offset of the encoded image data.

     */

-   function drawImage(x, y, width, height, imgData, imgDataOffset)

+   Window.prototype.drawImage = function(ctx, x, y, width, height, imgData, imgDataOffset)

    {

       var img = ctx.createImageData(width, height);

       var data = img.data;

@@ -1121,7 +1187,7 @@

          data[i + 3] = imgData[j + 3];

      }

      ctx.putImageData(img, x, y);

-   }

+   };

    /**

     * Convert a standard fillStyle or strokeStyle color into an array of [ R, G, B ] values.

@@ -1162,7 +1228,7 @@

       }

       return [ r, g, b ];

-   }

+   };

    /**

     * Test if the given argument is an array of 3 integer values.

@@ -1199,7 +1265,7 @@

       }

       return true;

-   }

+   };

    /**

     * Convert the given array of 3 integer values into an HTML color string.

@@ -1219,7 +1285,7 @@

       return "rgb(" + color[0].toString() + ", "

                     + color[1].toString() + ", "

                     + color[2].toString() + ")";

-   }

+   };

    /**

     * Convert the given array of RGB values into a lighter color in a manner that is compatible 

@@ -1254,7 +1320,7 @@

       var b = Math.min(Math.floor(bIn / SCALE_FACTOR), 255);

       return [ r, g, b ];

-   }

+   };

    /**

     * Convert the given array of RGB values into a darker color in a manner that is compatible 

@@ -1277,7 +1343,7 @@

       var b = Math.max(0, Math.floor(color[2] * SCALE_FACTOR));

       return [ r, g, b ];

-   }

+   };

    /**

     * Draw a rounded rectangle with the given context, dimensions and fill.

@@ -1302,7 +1368,7 @@

     *           <code>true</code> to fill the rectangle with the current color, otherwise just

     *           stroke the rectangle.

     */

-   function drawRoundRect(ctx, x, y, width, height, diameter, color, fill)

+   Window.prototype.drawRoundRect = function(ctx, x, y, width, height, diameter, color, fill)

    {

       var radius = diameter / 2;

@@ -1352,7 +1418,7 @@

       drawLine(ctx, rightUpX, rightUpY, rightDownX, rightDownY, color);

       drawLine(ctx, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, color);

       drawLine(ctx, leftUpX, leftUpY, leftDownX, leftDownY, color);

-   }

+   };

    /**

     * Draw a slightly shaded "3D" rectangle with the given context, dimensions and fill. In

@@ -1380,7 +1446,7 @@

     * @param    {Boolean} raise

     *           <code>true</code> to draw in raised mode.

     */

-   function draw3DRect(ctx, x, y, width, height, color, fill, raised)

+   Window.prototype.draw3DRect = function(ctx, x, y, width, height, color, fill, raised)

    {

       // save off our colors

       var oriFillColor   = ctx.fillStyle;

@@ -1422,8 +1488,8 @@

       // restore our colors

       ctx.fillStyle   = oriFillColor;

       ctx.strokeStyle = oriStrokeColor;

-   }                         

-         

+   };

+

    /**

     * Draw a closed polygon with the given context, vertices and fill.

     *

@@ -1441,7 +1507,7 @@

     *           <code>true</code> to fill the rectangle with the current color, otherwise just

     *           stroke the rectangle.

     */

-   function drawPolygon(ctx, xPoints, yPoints, num, color, fill)

+   Window.prototype.drawPolygon = function(ctx, xPoints, yPoints, num, color, fill)

    {

       var i;

@@ -1462,26 +1528,28 @@

       {

          drawLine(ctx, xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], color);

       }

-   }

+   };

    /**

     * Set the font in the current context.  If the current font does not get changed, then this

     * will be a no-op.

     *

+    * @param    {CanvasRenderingContext2D} ctx

+    *           The canvas 2D graphics context on which to draw.

     * @param    {Number}  fontId

     *           The font identifier.

     */

-   function setFont(fontId)

+   function setFont(ctx, fontId)

    {

-      if (fontId != this.currentFont)

+      if (fontId != currentFont)

       {

          var fname = p2j.fonts.getFontName(fontId);

-         this.ctx.font = fname;

+         ctx.font = fname;

-         this.currentFont = fontId;

+         currentFont = fontId;

       }

-   }

+   };

    /**

     * Find the next split position, so that the sub-text fits the given width.

@@ -1535,7 +1603,7 @@

       while (end < txt.length);

       return end;

-   }

+   };

    /**

     * Split the word starting on the given index so that it fits the specified width.

@@ -1568,7 +1636,7 @@

       }

       return end;

-   }

+   };

    /**

     * Find the next occurrence of the character given by the specified regex, starting from the

@@ -1587,7 +1655,7 @@

    {

       var indexOf = txt.substring(start).search(regex);

       return (indexOf >= 0) ? (indexOf + start) : indexOf;

-   }

+   };

    /**

     * Create a new top-level window (and the canvas that backs it).

@@ -1770,13 +1838,16 @@

    /**

     * Draw text on canvas.

     * 

-    * @param {number} x      x coordinate

-    * @param {number} y      y coordinate

-    * @param {string} text   text to draw

-    * @param {number} a      attribute

-    * @param {object} v      color pairs

+    * @param    {CanvasRenderingContext2D} ctx

+    *           The canvas 2D graphics context on which to draw.

+    * @param    {Number} x

+    *           The x coordinate.

+    * @param    {Number} y

+    *           The y coordinate.

+    * @param    {String} text

+    *           The text to draw

     */

-   var drawText = function(ctx, x, y, text)

+   Window.prototype.drawText = function(ctx, x, y, text)

    {

       // TODO calc width and height

       var width;

@@ -1902,6 +1973,25 @@

    };

    /**

+    * Sets the line stroke for a window with the given id.

+    * 

+    * @param    {Number} strokeStyle

+    *           The predefined stroke style.

+    * @param    {Number} width

+    *           The stroke line width.

+    * @param    {Number} wid

+    *           Denotes the active window id.

+    */

+   me.setLineStroke = function(strokeStyle, width, wid)

+   {

+      var win = getWindow(wid);

+      if (win)

+      {

+         win.setLineStroke(strokeStyle, width);

+      }

+   };

+

+   /**

     * Clear the screen.

     */

    me.clear = function()

@@ -1941,6 +2031,8 @@

     * The method performs a layout operation on the supplied text and returns the resulting 

     * paragraph height while maintaining the supplied maximum width.

     *

+    * @param    {CanvasRenderingContext2D} ctx

+    *           The canvas 2D graphics context on which to draw.

     * @param    {String} txt

     *           The paragraph text.

     * @param    {Number} font

@@ -1957,7 +2049,7 @@

     * 

     * @return   {Number} The paragraph height.

     */

-   me.layoutParagraphWorker = function(txt, font, x, y, width, draw)

+   me.layoutParagraphWorker = function(ctx, txt, font, x, y, width, draw)

    {

       var newLine = true;

       var i = 0;

@@ -1965,9 +2057,9 @@

       if (draw)

       {

          // unless we are drawing, there is no need in changing the context font

-         this.ctx.save();

+         ctx.save();

-         this.setFont(font);

+         this.setFont(ctx, font);

       }

       var height = 0;

@@ -1992,7 +2084,7 @@

       if (draw)

       {

-         this.ctx.restore();

+         ctx.restore();

       }

       return height;

=== added file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js	1970-01-01 00:00:00 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js	2015-08-20 09:36:41 +0000

@@ -0,0 +1,398 @@

+/*

+** Module   : p2j.strokes.js

+** Abstract : GUI-specific screen management

+**

+** Copyright (c) 2014-2015, Golden Code Development Corporation.

+** ALL RIGHTS RESERVED. Use is subject to license terms.

+**

+**         Golden Code Development Corporation

+**                 CONFIDENTIAL

+**

+** -#- -I- --Date-- ------------------------------Description----------------------------------

+** 001 SBI 20150819 The first version defines LineStrokes class as a strokes manager.

+*/

+

+"use strict";

+

+/**

+ * Defines the known stroke styles and methods to draw styled outer lines.

+ */

+function LineStrokes()

+{

+   /**

+    * Joins path segments by extending their outside edges until

+    * they meet.

+    */

+   var JOIN_MITER = 0;

+

+   /**

+    * Joins path segments by rounding off the corner at a radius

+    * of half the line width.

+    */

+   var JOIN_ROUND = 1;

+

+   /**

+    * Joins path segments by connecting the outer corners of their

+    * wide outlines with a straight segment.

+    */

+   var JOIN_BEVEL = 2;

+

+   /**

+    * Ends unclosed subpaths and dash segments with no added

+    * decoration.

+    */

+   var CAP_BUTT = 0;

+

+   /**

+    * Ends unclosed subpaths and dash segments with a round

+    * decoration that has a radius equal to half of the width

+    * of the pen.

+    */

+   var CAP_ROUND = 1;

+

+   /**

+    * Ends unclosed subpaths and dash segments with a square

+    * projection that extends beyond the end of the segment

+    * to a distance equal to half of the line width.

+    */

+   var CAP_SQUARE = 2;

+   

+   /**

+    * This is the list of all possible line stoke types.

+    */

+   var LineStrokeEnum = 

+   {

+      DEFAULT           : 0,

+      SPECIFIED_WIDTH   : 1,

+      DOTTED            : 2,

+      DOTTED_SMALL      : 3,

+      DOTTED_SMALL_THIN : 4

+   };

+

+   var LineStroke =

+   {

+      /** Dotted line specific parameter. */

+      DOT_STEP            : 2.0,

+      

+      /** Dotted line specific parameter. */

+      DOT_STEP_SMALL      : 1.0,

+      

+      /** Dotted line width. */

+      DOT_LINE_WIDTH      : 1.0,

+      

+      /** Dotted thin line width. */

+      DOT_LINE_THIN_WIDTH : 0.5

+   };

+   

+   var dotStroke = new BasicStroke(LineStroke.DOT_LINE_WIDTH, CAP_BUTT, JOIN_BEVEL, 0.0,

+         [LineStroke.DOT_STEP, LineStroke.DOT_STEP], LineStroke.DOT_STEP);

+

+   var dotSmallStroke  = new BasicStroke(LineStroke.DOT_LINE_WIDTH, CAP_BUTT, JOIN_BEVEL, 0.0,

+         [LineStroke.DOT_STEP_SMALL, LineStroke.DOT_STEP_SMALL], LineStroke.DOT_STEP_SMALL);

+

+   var dotSmallThinStroke = new BasicStroke(LineStroke.DOT_LINE_THIN_WIDTH, CAP_BUTT,

+         JOIN_BEVEL, 0.0, [LineStroke.DOT_STEP_SMALL, LineStroke.DOT_STEP_SMALL],

+         LineStroke.DOT_STEP_SMALL);

+

+   var defaultStroke = new BasicStroke(1.0, CAP_SQUARE, JOIN_MITER, 10.0, null, 0.0);

+   

+   /** Holds all java script styles of how the ends of lines are drawn. */

+   var caps = [ "butt", "round", "square"];

+   

+   /**

+    *   Holds all java script styles of how two connecting segments with non-zero lengths

+    *   in a shape are joined together.

+    */

+   var joins = [ "miter", "round", "bevel"];

+   

+   /**

+    * Holds properties for line drawing styles.

+    * 

+    * @param    width

+    *           The width of lines to draw.

+    * @param    cap

+    *           The decoration of the line ends.

+    * @param    join

+    *           The decoration applied where path segments meet.

+    * @param    miterlimit

+    *           The limit to trim the miter join.

+    * @param    dash

+    *           The array representing the dashing pattern.

+    * @param    dash_phase

+    *           The offset to start the dashing pattern.

+    */

+   function BasicStroke(width, cap, join, miterLimit, dash, dash_phase)

+   {

+      this.getWidth = function() { return width; };

+      this.getCap   = function() { return caps[cap]; };

+      

+      this.getJoin        = function() { return joins[join]; };

+      this.getMiterLimit  = function() { return miterLimit; };

+      

+      this.getDash       = function() { return dash; };

+      this.getDashPhase  = function() { return dash_phase; };

+   };

+

+   /**

+    * Returns the stroke style object.

+    * 

+    * @param    {Number} strokeStyle

+    *           The stroke style id according to the LineStroke enumeration.

+    * @param    {Number} width

+    *           The line width.

+    * 

+    * @return   The basic line stroke object.

+    */

+   function getLineStroke(strokeStyle, width)

+   {

+      switch(strokeStyle)

+      {

+         case LineStrokeEnum.SPECIFIED_WIDTH:

+            return new BasicStroke(width, CAP_SQUARE, JOIN_MITER, 10.0, null, 0.0);

+         case LineStrokeEnum.DOTTED:

+            return dotStroke;

+         case LineStrokeEnum.DOTTED_SMALL:

+            return dotSmallStroke;

+         case LineStrokeEnum.DOTTED_SMALL_THIN:

+            return dotSmallThinStroke;

+         default:

+            return defaultStroke;

+      }

+   };

+   

+   /**

+    * Returns the stroke path renderer.

+    * 

+    * @param    {CanvasRenderingContext2D} context

+    *           The canvas renderer.

+    * @param    {Number} strokeStyle

+    *           The stroke style id according to the LineStroke enumeration.

+    * @param    {Number} width

+    *           The line width.

+    * @param    {Number[]} strokeColor

+    *           The array of 3 integer values between 0 and 255 inclusive, representing

+    *           a stroke color.

+    * 

+    * @return   The stroke path renderer.

+    */

+   function getStrokePathRenderer(context, strokeStyle, width, strokeColor)

+   {

+      var basicStroke = getLineStroke(strokeStyle, width);

+      switch(strokeStyle)

+      {

+         case LineStrokeEnum.SPECIFIED_WIDTH:

+            return new WidenPathRenderer(context, basicStroke, strokeColor);

+         case LineStrokeEnum.DOTTED:

+         case LineStrokeEnum.DOTTED_SMALL:

+         case LineStrokeEnum.DOTTED_SMALL_THIN:

+            return new DotsPathRenderer(context, basicStroke, strokeColor);

+         default:

+            return { applyStroke : function (path) {} };

+      }

+   };

+   

+   /**

+    * Apply the given stroke style to the JS native canvas renderer.

+    * 

+    * @param    {CanvasRenderingContext2D} context

+    *           The canvas renderer.

+    * @param    {Number} strokeStyle

+    *           The stroke style id.

+    * @param    {Number} width

+    *           The line width.

+    */

+   this.apply = function(context, strokeStyle, width)

+   {

+      if (context instanceof CanvasRenderingContext2D)

+      {

+         var basicStroke = getLineStroke(strokeStyle, width);

+         context.lineWidth = basicStroke.getWidth();

+         

+         context.lineCap = basicStroke.getCap();

+         

+         context.lineJoin = basicStroke.getJoin();

+         

+         context.miterLimit = basicStroke.getMiterLimit();

+         if (basicStroke.getDash())

+         {

+            context.setLineDash(basicStroke.getDash());

+         }

+         else

+         {

+            context.setLineDash([]);

+         }

+         context.lineDashOffset = basicStroke.getDashPhase();

+      }

+   }

+

+   /**

+    * Apply the given stroke style to the area outer bounds.

+    * 

+    * @param    {CanvasRenderingContext2D} context

+    *           The canvas renderer.

+    * @param    {Number} strokeStyle

+    *           The stroke style id.

+    * @param    {Number} width

+    *           The line width.

+    * @param    {Number[]} strokeColor

+    *           The array of 3 integer values between 0 and 255 inclusive, representing

+    *           a stroke color.

+    * @param    {Array} path

+    *           The array of points that forms the outline of the target area.

+    */

+   this.applyStrokeToPath = function(context, strokeStyle, width, strokeColor, path)

+   {

+      if (context instanceof CanvasRenderingContext2D)

+      {

+         var renderer = getStrokePathRenderer(context, strokeStyle, width, strokeColor);

+         renderer.applyStroke(path);

+      }

+   }

+   

+   

+   this.isDirectDrawingStrokeStyle = function(strokeStyle)

+   {

+      return LineStrokeEnum.DEFAULT == strokeStyle;

+   }

+   

+   this.getDefaultStrokeStyle = function()

+   {

+      return LineStrokeEnum.DEFAULT;

+   }

+   

+   /**

+    * Used to draw dash patterns on lines of pixels.

+    * 

+    * @param    {CanvasRenderingContext2D} context

+    *           The canvas renderer.

+    * @param    {Object} basicStroke

+    *           The stroke style object.

+    * @param    {Number[]} strokeColor

+    *           The array of 3 integer values between 0 and 255 inclusive, representing

+    *           a stroke color.

+    */

+   function DotsPathRenderer(ctx, basicStroke, strokeColor)

+   {

+      var pixel = ctx.createImageData(1, 1);

+      var pixelData = pixel.data;

+      pixelData[3] = 0xFF;

+

+      /**

+       * Normalizes a dash offset distance according to the given dash pattern.

+       * A normalized dash offset distance is a distance that is cut the corresponding segment

+       * from the dash pattern that is extended periodically in order to cover the target dash

+       * offset.

+       * 

+       * @param    {Array} dash

+       *           The dash array that specifies the number of units to be drawn followed

+       *           by the number of units to be skipped.

+       * @param    {Number} dashOffset

+       *           The offset distance from the first pattern point to the point which becomes

+       *           a start point of the dash pattern.

+       * 

+       * @return   The container {startPhase : phase, startDashOn : dashOn, startIdx : idx},

+       *           where the startPhase field holds a normalized dash offset, startDashOn defines

+       *           to draw or to skip, the value of startIdx is the current dash pattern index.

+       */

+      function normalize(dash, dashOffset)

+      {

+         var phase = dashOffset;

+         var idx = 0;

+         var dashOn = true;

+         var d;

+         while (phase >= (d = dash[idx]))

+         {

+             phase -= d;

+             idx = (idx + 1) % dash.length;

+             dashOn = !dashOn;

+         }

+

+         return {startPhase : phase, startDashOn : dashOn, startIdx : idx};

+      }

+      

+      /**

+       * Apply the given stroke to the line of pixels called a path.

+       * 

+       * @param    {Array} path

+       *           The array of points that forms the outline of the target area.

+       */

+      this.applyStroke = function (path)

+      {

+         var dash = basicStroke.getDash();

+         if (!dash || dash.length == 0)

+         {

+            return;

+         }

+         var dashOffset = basicStroke.getDashPhase();

+         var len = dash.length;

+         

+         var patternObj = normalize(dash, dashOffset);

+         

+         var dashOn = patternObj.startDashOn;

+         var phase  = patternObj.startPhase;

+         var idx    = patternObj.startIdx;

+         var rest = dash[idx] - phase;

+         for (var i = 0; i < path.length; i++)

+         {

+            var point = path[i];

+            if (rest < 1)

+            {

+               idx = (idx + 1) % len;

+               rest = dash[idx];

+               dashOn = !dashOn;

+            }

+            rest -= 1;

+

+            if (dashOn)

+            {

+               pixelData[0] = strokeColor[0];

+               pixelData[1] = strokeColor[1];

+               pixelData[2] = strokeColor[2];

+               ctx.putImageData(pixel, point.x, point.y);

+            }

+         }

+

+      }

+   }

+   

+   /**

+    * Used to widen lines of pixels.

+    * 

+    * @param    {CanvasRenderingContext2D} context

+    *           The canvas renderer.

+    * @param    {Object} basicStroke

+    *           The stroke style object.

+    * @param    {Number[]} strokeColor

+    *           The array of 3 integer values between 0 and 255 inclusive, representing

+    *           a stroke color.

+    */

+   function WidenPathRenderer(ctx, basicStroke, strokeColor)

+   {

+      var width = basicStroke.getWidth();

+      var image = ctx.createImageData(width, width);

+      var imageData = image.data;

+      

+      for (var i = 0; i < 4 * width * width; i += 4)

+      {

+         imageData[i] = strokeColor[0];

+         imageData[i + 1] = strokeColor[1];

+         imageData[i + 2] = strokeColor[2];

+         imageData[i + 3] = 0xFF;

+      }

+

+      /**

+       * To widen the line of pixels called a path according to the stroke style.

+       * 

+       * @param    {Array} path

+       *           The array of points that forms the outline of the target area.

+       */

+      this.applyStroke = function (path)

+      {

+         for (var i = 0; i < path.length; i++)

+         {

+            var point = path[i];

+            ctx.putImageData(image, point.x - (width >> 1), point.y - (width >> 1));

+         }

+      }

+   }

+}

\ No newline at end of file