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