FWD » Core Development » User Interface

=== 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-09-08 22:00:49 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-09 15:24:41 +0000

@@ -798,6 +798,7 @@

                text = p2j.socket.readStringBinaryMessageByLength(message, idx + 5, textLength);

                extra = " title = " + text;

                this.title = text;

+               taskBar.setTitleForTask(this.id, this.title);

                taskBar.draw();

                break;

             case ops.SET_ICON:

@@ -818,7 +819,7 @@

                   this.iconWidth  = iconWidth;

                   this.iconHeight = iconHeight;

                }

-               taskBar.setIconForTask(this.id, loadedImages.get(this.iconId));

+               taskBar.setIconForTask(this.id, loadedImages.get(this.iconId), this.iconWidth, this.iconHeight);

                break;

             default:

                if (typeof type !== "undefined")

@@ -1337,7 +1338,7 @@

       addZOrderEntry(wid, newwin);

       // creates new task icon widget for new window

-      taskBar.addTaskIcon(newwin);

+      taskBar.addTaskIcon(newwin.id);

       return newwin;

    };

@@ -1375,7 +1376,11 @@

       newwin.owner = owner;

       newwin.title = title || "";

-      

+

+      // creates new task icon widget for new window

+      var taskIcon = taskBar.addTaskIcon(newwin.id);

+      taskIcon.title = newwin.title;

+

       var parent = getWindow(owner);

       // add to the owned window list

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

--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-08 16:51:50 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-09 15:51:55 +0000

@@ -204,6 +204,8 @@

       var DRAGGED_OPACITY = 0.3;

       var TOP_PADDING  = 2;

       var LEFT_PADDING = 2;

+      var ICON_MARGIN  = 1;

+      var TEXT_MARGIN  = 1;

       var TASK_BAR_TITLE = "Task Bar"; 

       var TASK_ICON_WIDTH  = 40; 

       var TASK_ICON_HEIGHT = 32;

@@ -221,14 +223,14 @@

       peer.appendChild(canvas);

       var ctx = canvas.getContext('2d', {alpha : true});

-//      console.log("peer width = " + peer.offsetWidth);

-//      console.log("peer height = " + peer.offsetHeight);

       var strokesManager = new LineStrokes();

       var canvasRenderer = new CanvasRenderer(canvas, ctx, strokesManager, fontsManager, logger);

       var taskIcons = [];

       var viewLogButton = createViewLogButton(logger);

+      

+      var sysButtons = [viewLogButton];

       var foreground  = fg;

       var background  = bg;

@@ -236,7 +238,7 @@

       if (peer)

       {

-         /** events fired on the draggable target */

+         // events fired on the draggable target 

          peer.addEventListener("dragstart", startDragging);

          peer.addEventListener("dragend", dragEnded);

          //peer.addEventListener("drag", drag);

@@ -274,19 +276,14 @@

        */

       function createViewLogButton(logger)

       {

-         var taskIcon = new TaskIcon(

-               {title : "View Log Output"},

-               null, 3 * TASK_ICON_WIDTH, TASK_ICON_HEIGHT, fg);

+         var taskIcon = new TaskIcon(1, 3 * TASK_ICON_WIDTH, TASK_ICON_HEIGHT, fg,

+               "View Log Output", null, 0, 0);

          taskIcon.setActive(false);

-         /**

-          * Opens new log window.

-          */

+         // Opens new log window.

          taskIcon.doClick = function()

          {

             logger.viewLog();

-            /**

-             * Change the view log button to inactive after 500 ms.

-             */

+            // Change the view log button to inactive after 500 ms.

             window.setTimeout(

                   function()

                   {

@@ -300,6 +297,10 @@

       /**

        * Layouts the view log button on the task bar.

        * 

+       * @param    {Number} width

+       *           The task bar width in pixels.

+       * @param    {Number} height

+       *           The task bar height in pixels.

        * @param    {Boolean} horizontalLayout

        *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,

        *           it is along a vertical line.

@@ -337,10 +338,9 @@

       {

          canvas.width = width;

          canvas.height = height;

-//         console.log("canvas width = " + canvas.width);

-//         console.log("canvas height = " + canvas.height);

          canvasRenderer.draw3DRect(ctx, 0, 0, width, height, background, true, true);

+         

          //check taskIcons is not empty

          if (taskIcons.length === 0)

          {

@@ -357,6 +357,10 @@

          {

             horizontalLayout = false;

          }

+         

+         var unified = calculateTaskIconWidth(width, height, horizontalLayout);

+         setUnifiedDimension(unified, TASK_ICON_HEIGHT, horizontalLayout);

+         

          var x;

          var y;

@@ -388,8 +392,152 @@

             }

          }

          doViewLogButtonLayout(width, height, horizontalLayout);

-      }

-      

+      };

+      

+      /**

+       * Calculates the maximal pixel width of the task title for the current canvas font.

+       * 

+       * @param    {Array} widgets

+       *           The array of TaskIcon widgets.

+       * 

+       * @return   {Number}

+       *           The maximal pixel width of titles used for task widgets relative to the current

+       *           canvas font.

+       */

+      function calculateMaximalTextWidth(widgets)

+      {

+         //check that it is not empty

+         if (widgets.length === 0)

+         {

+            return 0;

+         }

+         var initialValue = fontsManager.getTextWidth(TASK_BAR_FONT_ID, widgets[0].title);

+         return widgets.reduce(

+               function(previousValue, currentValue, index, array)

+               {

+                  var textWidth  = fontsManager.getTextWidth(TASK_BAR_FONT_ID, array[index].title);

+                  return Math.max(previousValue, textWidth);

+               },

+               initialValue);

+      };

+      

+      /**

+       * Calculates the maximal icon width from all icons for the task bar.

+       * 

+       * @param    {Array} widgets

+       *           The array of TaskIcon widgets.

+       * @param    {Boolean} horizontalLayout

+       *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,

+       *           it is along a vertical line.

+       * 

+       * @return   {Number}

+       *           The maximal icon width from all icons for the task bar.

+       */

+      function calculateMaximalIconWidth(widgets, horizontalLayout)

+      {

+         //check that it is not empty

+         if (widgets.length === 0)

+         {

+            return 0;

+         }

+         var initialValue;

+         if (horizontalLayout)

+         {

+            initialValue = widgets[0].iconWidth;

+         }

+         else

+         {

+            initialValue = widgets[0].iconHeight;

+         }

+

+         return widgets.reduce(

+               function(previousValue, currentValue, index, array)

+               {

+                  var width;

+                  if (horizontalLayout)

+                  {

+                     width = array[index].iconWidth;

+                  }

+                  else

+                  {

+                     width = array[index].iconHeight;

+                  }

+                  return Math.max(previousValue, width);

+               },

+               initialValue);

+      };

+      

+      /**

+       * Calculates the unified task icon width.

+       * 

+       * @param    {Number} width

+       *           The task bar width in pixels.

+       * @param    {Number} height

+       *           The task bar height in pixels.

+       * @param    {Boolean} horizontalLayout

+       *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,

+       *           it is along a vertical line.

+       * 

+       * @return   {Number}

+       *           The unified task icon width.

+       */

+      function calculateTaskIconWidth(width, height, horizontalLayout)

+      {

+         var maxWidth;

+         if (horizontalLayout)

+         {

+            maxWidth = width / (taskIcons.length + sysButtons.length);

+         }

+         else

+         {

+            maxWidth = height / (taskIcons.length + sysButtons.length);

+         }

+         var taskIconsWidth = calculateMaximalIconWidth(taskIcons, horizontalLayout);

+         if (taskIconsWidth > 0)

+         {

+            taskIconsWidth += (2 * ICON_MARGIN);

+         }

+         taskIconsWidth  += (calculateMaximalTextWidth(taskIcons) + (2 * TEXT_MARGIN));

+         var sysButtonsWidth = calculateMaximalIconWidth(sysButtons, horizontalLayout);

+         if (sysButtonsWidth > 0)

+         {

+            sysButtonsWidth += (2 * ICON_MARGIN);

+         }

+         sysButtonsWidth += (calculateMaximalTextWidth(sysButtons) + (2 * TEXT_MARGIN));

+         return Math.min(maxWidth, Math.max(taskIconsWidth, sysButtonsWidth));

+      };

+      

+      /**

+       * Sets the unified dimension for all task bar widgets.

+       * 

+       * @param    {Number} unifiedWidth

+       *           The widget width in pixels.

+       * @param    {Number} unifiedHeight

+       *           The widget height in pixels.

+       * @param    {Boolean} horizontalLayout

+       *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,

+       *           it is along a vertical line.

+       */

+      function setUnifiedDimension(unifiedWidth, unifiedHeight, horizontalLayout)

+      {

+         function set(element, index, array)

+         {

+            if (horizontalLayout)

+            {

+               array[index].width  = unifiedWidth;

+               array[index].height = unifiedHeight;

+            }

+            else

+            {

+               array[index].width  = unifiedHeight;

+               array[index].height = unifiedWidth;

+            }

+            array[index].horizontalLayout = horizontalLayout;

+         };

+         taskIcons.forEach(set);

+         sysButtons.forEach(set);

+      };

+

       /**

        * Draws the task bar on the canvas.

        */

@@ -397,27 +545,28 @@

       {

          doLayout(peer.offsetWidth, peer.offsetHeight);

       }

-      

+

+      this.addTaskIcon    = addTaskIcon;

+

       /**

        * Adds new task to the task bar.

        * 

-       * @param    {Window} win

-       *           The window to be represented by a task in the task bar.

+       * @param    {Number} windowId

+       *           The id of the window that needs to be represented by this task.

        * 

        * @return   {TaskIcon}

        *           The task icon that represents the target window.

        */

-      function addTaskIcon(win)

+      function addTaskIcon(windowId)

       {

-         var taskIcon = new TaskIcon(win, null, TASK_ICON_WIDTH, TASK_ICON_HEIGHT, foreground);

+         var taskIcon = new TaskIcon(windowId, TASK_ICON_WIDTH, TASK_ICON_HEIGHT, foreground,

+               "", null, 0, 0);

          taskIcons.push(taskIcon);

-         /**

-          * By default the task is active. Only one task can be active.

-          */

+         // By default the task is active. Only one task can be active.

          deactivateHead();

          return taskIcon;

       };

-      

+

       /**

        * Deactivate the head tasks.

        */

@@ -428,7 +577,9 @@

             taskIcons[i].setActive(false);

          }

       }

-      

+

+      this.setIconForTask = setIconForTask;

+

       /**

        * Sets an icon for the task that represents the target window.

        * 

@@ -437,19 +588,43 @@

        * @param    {Array} iconData

        *           It is the binary icon to set. The pixels array with 4-bytes per a pixel that

        *           are red, green, blue and alpha bytes.

+       * @param    {Number} iconWidth

+       *           The icon width in pixels.

+       * @param    {Number} iconHeight

+       *           The icon height in pixels.

        * 

        * @return   {TaskIcon}

        *           The task that represents the target window.

        */

-      function setIconForTask(windowId, iconData)

+      function setIconForTask(windowId, iconData, iconWidth, iconHeight)

       {

          var taskIcon = findTaskIcon(windowId);

          taskIcon.iconData = iconData;

-         return taskIcon;

-      };

-      

-      this.addTaskIcon    = addTaskIcon;

-      this.setIconForTask = setIconForTask;

+         taskIcon.iconWidth = iconWidth;

+         taskIcon.iconHeight = iconHeight;

+         return taskIcon;

+      };

+      

+      this.setTitleForTask = setTitleForTask;

+      

+      /**

+       * Sets a title for the task that represents the target window.

+       * 

+       * @param    {Number} windowId

+       *           The target window id.

+       * @param    {String} title

+       *           The title of the task icon for the given window.

+       * 

+       * @return   {TaskIcon}

+       *           The task that represents the target window.

+       */

+      function setTitleForTask(windowId, title)

+      {

+         var taskIcon = findTaskIcon(windowId);

+         taskIcon.title = title;

+         return taskIcon;

+      };

+

       this.setDefaultFont = setDefaultFont;

       /**

@@ -474,7 +649,7 @@

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

          {

             var taskIcon = taskIcons[i];

-            if (taskIcon.win.id === windowId)

+            if (taskIcon.id === windowId)

             {

                return taskIcon;

             }

@@ -553,7 +728,9 @@

       {

       }

-      /* events fired on the drop targets */

+      /**

+       * events fired on the drop targets

+       */

       document.addEventListener("dragover", function(event) { event.preventDefault(); }, false);

       /**

@@ -596,10 +773,12 @@

                event.target.appendChild(dragged);

                event.target.style.zIndex = MAX_Z_INDEX;

                parent.style["background"] = getTransparentColor(background, 0.0);

+               parent.style.zIndex = MIN_Z_INDEX;

             }

             catch(e)

             {

                parent.addChild(dragged);

+               parent.style.zIndex = MAX_Z_INDEX;

             }

             doLayout(peer.offsetWidth, peer.offsetHeight);

          }

@@ -629,7 +808,7 @@

                taskIcon.setActive(true);

                if (taskIconOnClickCallback)

                {

-                  taskIconOnClickCallback(taskIcon.win.id);

+                  taskIconOnClickCallback(taskIcon.id);

                }

                taskIcon.draw();

                break;

@@ -649,7 +828,7 @@

          //special view log use case.

          if (viewLogButton.testMousePointerInside(event))

          {

-            peer.title = viewLogButton.win.title;

+            peer.title = viewLogButton.title;

             return;

          }

@@ -658,8 +837,8 @@

             var taskIcon = taskIcons[i];

             if (taskIcon.testMousePointerInside(event))

             {

-               peer.title = (taskIcon.win.title !== null && taskIcon.win.title !== undefined)

-                                 ? taskIcon.win.title : " ";

+               peer.title = (taskIcon.title !== null && taskIcon.title !== undefined)

+                                 ? taskIcon.title : " ";

                break;

             }

@@ -674,7 +853,7 @@

        * Returns rgba(r,g,b,a) string representation for the target color

        * with the target transparency.

        * 

-       * @param    {Number[]} c

+       * @param    {Array} c

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

        * @param    {Number} transparency

        *           The transparency from 0.0 to 1.0.

@@ -693,23 +872,32 @@

       /**

        * Creates the task icon widget that represents the target window on the task bar.

        * 

-       * @param    {Window} win

-       *           The window to be represented by a task in the task bar.

-       * @param    {Array} iconData

-       *           It is the binary icon to set. The pixels array with 4-bytes per a pixel that

-       *           are red, green, blue and alpha bytes.

+       * @param    {Number} windowId

+       *           The id of the window that needs to be represented by this task icon.

        * @param    {Number} w

-       *           The task icon widget width in pixels.

+       *           The widget width in pixels.

        * @param    {Number} h

-       *           The task icon widget height in pixels.

-       * @param    {Number[]} c

+       *           The widget height in pixels.

+       * @param    {Array} c

        *           The task icon widget color. Array of 3 integer values between 0

        *           and 255 inclusive, representing an RGB color.

+       * @param    {String} title

+       *           The title of the task icon for the given window.

+       * @param    {Array} iconData

+       *           It is the binary icon to set. The pixels array with 4-bytes per a pixel that

+       *           are red, green, blue and alpha bytes.

+       * @param    {Number} iconWidth

+       *           The icon width in pixels.

+       * @param    {Number} iconHeight

+       *           The icon height in pixels.

        */

-      function TaskIcon(win, iconData, w, h, c)

+      function TaskIcon(windowId, w, h, c, title, iconData, iconWidth, iconHeight)

       {

-         this.win = win;

+         this.id = windowId;

          this.iconData = iconData;

+         this.iconWidth = iconWidth;

+         this.iconHeight = iconHeight;

+         this.title = title;

          this.width  = w;

          this.height = h;

          this.color  = c;

@@ -717,12 +905,12 @@

          var active = true;

          this.x = 0;

          this.y = 0;

+         /**

+          * Defines the widget's title layout, 

+          */

+         this.horizontalLayout = true;

          this.setLocation = setLocation;

-         this.setActive = setActive;

-         this.isActive  = isActive;

-         this.draw = draw;

-         this.testMousePointerInside = testMousePointerInside;

          /**

           * Sets the widget location.

@@ -732,7 +920,9 @@

             this.x = x;

             this.y = y;

          };

-         

+

+         this.setActive = setActive;

+

          /**

           * Sets an active state.

           */

@@ -740,7 +930,9 @@

          {

             active = value;

          };

-         

+

+         this.isActive  = isActive;

+

          /**

           * Is active?

           */

@@ -748,7 +940,9 @@

          {

             return active;

          };

-         

+

+         this.draw = draw;

+

          /**

           * Draw the widget on the task bar canvas.

           */

@@ -766,25 +960,80 @@

             canvasRenderer.draw3DRect(ctx, that.x, that.y, that.width, that.height, c, true, !active);

             if (that.iconData)

             {

-               var iconWidth  = that.win.iconWidth;

-               var iconHeight = that.win.iconHeight;

-               canvasRenderer.drawImage(ctx, that.x, that.y + (that.height - iconHeight) / 2,

-                     iconWidth, iconHeight, that.iconData, 0);

+               drawIcon();

+            }

+            drawTitle();

+         };

+

+         /**

+          * Draws the icon according to the icon margins and the widget's layout.

+          */

+         function drawIcon()

+         {

+            var xIconPos;

+            var yIconPos;

+            if (that.horizontalLayout)

+            {

+               xIconPos = that.x + ICON_MARGIN;

+               yIconPos = that.y + (that.height - that.iconHeight) / 2;

             }

             else

             {

-               var text = that.win.title;

-               if (TASK_BAR_FONT_ID !== undefined)

-               {

-                  var textWidth  = fontsManager.getTextWidth(TASK_BAR_FONT_ID, text);

-                  var textHeight = fontsManager.getTextHeight(TASK_BAR_FONT_ID, text);

-                  ctx.font = fontsManager.getFontName(TASK_BAR_FONT_ID);

-                  canvasRenderer.drawText(that.win.title, that.x + (that.width - textWidth) / 2,

-                        that.y + (that.height + textHeight) / 2, false);

-               }

-            }

-         };

-         

+               xIconPos = that.x + (that.width - that.iconWidth) / 2;

+               yIconPos = that.y + ICON_MARGIN;

+            }

+            canvasRenderer.drawImage(ctx, xIconPos, yIconPos, that.iconWidth, that.iconHeight,

+                  that.iconData, 0);

+         }

+

+         /**

+          * Draws the title according to the text and icon margins and the widget's layout

+          */

+         function drawTitle()

+         {

+            if (TASK_BAR_FONT_ID !== undefined)

+            {

+               ctx.save();

+               var textWidth  = fontsManager.getTextWidth(TASK_BAR_FONT_ID, that.title);

+               var textHeight = fontsManager.getTextHeight(TASK_BAR_FONT_ID, that.title);

+               ctx.font = fontsManager.getFontName(TASK_BAR_FONT_ID);

+               

+               var xTextPos;

+               var yTextPos;

+               if (that.horizontalLayout)

+               {

+                  var xShift = 0;

+                  if (that.iconWidth > 0)

+                  {

+                     xShift += that.iconWidth + 2 * ICON_MARGIN;

+                  }

+                  xTextPos = that.x + (that.width - textWidth + xShift) / 2;

+                  yTextPos = that.y + (that.height + textHeight) / 2;

+               }

+               else

+               {

+                  var yShift = 0;

+                  if (that.iconHeight > 0)

+                  {

+                     yShift += that.iconHeight + 2 * ICON_MARGIN;

+                  }

+                  xTextPos = that.x + (that.width - textHeight) / 2;

+                  yTextPos = that.y + (that.height - textWidth + yShift) / 2;

+                  ctx.translate(xTextPos, yTextPos);

+                  ctx.rotate(Math.PI / 2);

+                  xTextPos = 0;

+                  yTextPos = 0;

+               }

+               canvasRenderer.drawText(

+                     that.title,

+                     xTextPos,

+                     yTextPos, false);

+               ctx.restore();

+            }

+         }

+

+         this.testMousePointerInside = testMousePointerInside;

+

          /**

           * Tests the mouse pointer inside the widgets bounds.

           */