=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js 2015-10-14 11:10:46 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js 2015-10-19 12:34:58 +0000 @@ -278,7 +278,13 @@ { var BORDER_SIZE = 4; var rops = [ "mousemove", "mouseenter", "mouseleave", "mouseout", "mouseover"]; - + //The peer canvas needs to animate the resize operation + var canvas = document.createElement('canvas'); + canvas.id = "resizable_peer_canvas"; + canvas.style.visibility = "hidden"; + canvas.style["position"] = "fixed"; + var ctx = canvas.getContext("2d"); + // register default mouse listeners last for (var idx in rops) { @@ -295,8 +301,149 @@ document.addEventListener("mouseup", processMouseDragStop ("mouseup")); document.addEventListener("mousemove", processMouseDrag ("mousemove")); + /** + * Resizes the peer canvas according to given area. + * + * @param {Object} area + * The new size and position to be assigned to the peer canvas + */ + function resizePeerCanvas(area) + { + canvas.height = area.height; + canvas.width = area.width; + canvas.style.top = area.top + "px"; + canvas.style.left = area.left + "px"; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, area.width, area.height); + ctx.strokeStyle = "black"; + ctx.strokeRect(0, 0, area.width, area.height); + + } + + /** + * Shows the resized peer canvas that represents the resize of the original window. + * + * @param {Window} win + * The original window to be resized. + * @param {String} resizeCursor + * The cursor style. + */ + function dispalayResizedPeerCanvas(win, resizeCursor) + { + var parent = win.canvas.parentNode; + if (parent) + { + canvas.height = win.canvas.height; + canvas.width = win.canvas.width; + canvas.style.top = win.canvas.style.top; + canvas.style.left = win.canvas.style.left; + canvas.style.zIndex = win.canvas.style.zIndex + 1; + canvas.style.visibility = "visible"; + canvas.style.opacity = 0.5; + parent.appendChild(canvas); + + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.strokeStyle = "black"; + ctx.strokeRect(0, 0, canvas.width, canvas.height); + + canvas.style.cursor = resizeCursor; + } + } + + /** + * Calculates the resize cursor style. + * + * @param {Object} bounds + * The current client area given by its sides coordinates {top, left, right, bottom} + * @param {Object} mousePos + * The mouse position relative to the current client area given by its coordinates + * {x, y}. + */ + function calculateResizeCursorStyle(bounds, mousePos) + { + // check the window borders + if (mousePos.x <= BORDER_SIZE || + mousePos.x >= bounds.right - bounds.left - BORDER_SIZE || + mousePos.y <= BORDER_SIZE || + mousePos.y >= bounds.bottom - bounds.top - BORDER_SIZE) + { + // we have 8 cases; corners have precedence + var cursors = + [ + "nw-resize", + "ne-resize", + "se-resize", + "sw-resize", + "n-resize", + "e-resize", + "s-resize", + "w-resize" + ]; + var xcoords1 = + [ + bounds.left, // NW + bounds.right, // NE + bounds.right, // SE + bounds.left, // SW + bounds.left, // N + bounds.right, // E + bounds.left, // S + bounds.left // W + ]; + var xcoords2 = + [ + bounds.left, // NW + bounds.right, // NE + bounds.right, // SE + bounds.left, // SW + bounds.right, // N + bounds.right, // E + bounds.right, // S + bounds.left // W + ]; + var ycoords1 = + [ + bounds.top, // NW + bounds.top, // NE + bounds.bottom, // SE + bounds.bottom, // SW + bounds.top, // N + bounds.top, // E + bounds.bottom, // S + bounds.top // W + ]; + var ycoords2 = + [ + bounds.top, // NW + bounds.top, // NE + bounds.bottom, // SE + bounds.bottom, // SW + bounds.top, // N + bounds.bottom, // E + bounds.bottom, // S + bounds.bottom // W + ]; + + for (var i = 0; i < cursors.length; i++) + { + var x1 = xcoords1[i] - BORDER_SIZE - bounds.left; + var y1 = ycoords1[i] - BORDER_SIZE - bounds.top; + var x2 = xcoords2[i] + BORDER_SIZE - bounds.left; + var y2 = ycoords2[i] + BORDER_SIZE - bounds.top; + var w = x2 - x1 + 1; + var h = y2 - y1 + 1; + + if (mousePos.x >= x1 && mousePos.x <= x2 && mousePos.y >= y1 && mousePos.y <= y2) + { + return cursors[i]; + } + } + } + return "default"; + }; + // leave/out listeners are not required for dragging purposes. - /** * If the event acts on the window border, send it to the Java side immediately. * @@ -325,109 +472,22 @@ return; } - var canResize = false; - var bounds = win.canvas.getBoundingClientRect(); var mousePos = mThis.getMousePos(evt); - // check the window borders - if (evt.clientX <= bounds.left + BORDER_SIZE || - evt.clientX >= bounds.right - BORDER_SIZE || - evt.clientY <= bounds.top + BORDER_SIZE || - evt.clientY >= bounds.bottom - BORDER_SIZE) + var cursor = calculateResizeCursorStyle(bounds, mousePos); + if (cursor !== "default") { - // we have 8 cases; corners have precedence - var cursors = - [ - "nw-resize", - "ne-resize", - "se-resize", - "sw-resize", - "n-resize", - "e-resize", - "s-resize", - "w-resize" - ]; - var xcoords1 = - [ - bounds.left, // NW - bounds.right, // NE - bounds.right, // SE - bounds.left, // SW - bounds.left, // N - bounds.right, // E - bounds.left, // S - bounds.left // W - ]; - var xcoords2 = - [ - bounds.left, // NW - bounds.right, // NE - bounds.right, // SE - bounds.left, // SW - bounds.right, // N - bounds.right, // E - bounds.right, // S - bounds.left // W - ]; - var ycoords1 = - [ - bounds.top, // NW - bounds.top, // NE - bounds.bottom, // SE - bounds.bottom, // SW - bounds.top, // N - bounds.top, // E - bounds.bottom, // S - bounds.top // W - ]; - var ycoords2 = - [ - bounds.top, // NW - bounds.top, // NE - bounds.bottom, // SE - bounds.bottom, // SW - bounds.top, // N - bounds.bottom, // E - bounds.bottom, // S - bounds.bottom // W - ]; - - var cursor = "default"; - for (var i = 0; i < cursors.length; i++) - { - var x1 = xcoords1[i] - BORDER_SIZE - bounds.left; - var y1 = ycoords1[i] - BORDER_SIZE - bounds.top; - var x2 = xcoords2[i] + BORDER_SIZE - bounds.left; - var y2 = ycoords2[i] + BORDER_SIZE - bounds.top; - var w = x2 - x1 + 1; - var h = y2 - y1 + 1; - - if (mousePos.x >= x1 && mousePos.x <= x2 && mousePos.y >= y1 && mousePos.y <= y2) - { - cursor = cursors[i]; - canResize = true; - break; - } - } - if (cursor != win.getCursorStyle()) { win.setCursorStyle(cursor); } - else if (!canResize) - { - cursor = "default"; - win.setCursorStyle(cursor); - } - - return; } else { // restore mouse, if current is set to a "resize" style var style = win.getCursorStyle(); - if (style.lastIndexOf("resize") >= 0) + if (style.lastIndexOf("resize") >= 0 && !mThis.mouseDrag) { win.setCursorStyle("default"); } @@ -448,11 +508,16 @@ } var mThis = win.mouseHandler; - if (!win.resizeable || !mThis.mouseDrag) + if (!win.resizeable || !mThis.mouseDrag || !mThis.resizeArea) { return; } - + // resize canvas + win.resize(mThis.resizeArea.width, mThis.resizeArea.height); + // set new location + win.canvas.style.left = mThis.resizeArea.left + "px"; + win.canvas.style.top = mThis.resizeArea.top + "px"; + var bounds = win.canvas.getBoundingClientRect(); var h = bounds.bottom - bounds.top + 1; var w = bounds.right - bounds.left + 1; @@ -492,6 +557,13 @@ mThis.initialBounds = undefined; mThis.resizeEvent = undefined; mThis.dragOwner = undefined; + canvas.style.cursor = "default"; + canvas.style.visibility = "hidden"; + if (canvas.parentNode) + { + canvas.parentNode.removeChild(canvas); + } + mThis.resizeArea = undefined; // event was processed, cancel other listeners evt.preventDefault(); @@ -524,19 +596,22 @@ } var bounds = win.canvas.getBoundingClientRect(); - - if (evt.clientX <= bounds.left + BORDER_SIZE || - evt.clientX >= bounds.right - BORDER_SIZE || - evt.clientY <= bounds.top + BORDER_SIZE || - evt.clientY >= bounds.bottom - BORDER_SIZE) + var mousePos = mThis.getMousePos(evt); + var resizeCursor = calculateResizeCursorStyle(bounds, mousePos); + var w = bounds.right - bounds.left; + var h = bounds.bottom - bounds.top; + if (!(inside(mousePos, BORDER_SIZE, BORDER_SIZE, w - BORDER_SIZE, h - BORDER_SIZE)) + && inside(mousePos, -BORDER_SIZE, -BORDER_SIZE, w + BORDER_SIZE, h + BORDER_SIZE)) { mThis.dragOwner = win.id; mThis.mouseDrag = true; - // save the location mThis.initialBounds = win.canvas.getBoundingClientRect(); mThis.resizeEvent = evt; + mThis.resizeCursor = resizeCursor; + + dispalayResizedPeerCanvas(win, resizeCursor); // event was processed, cancel other listeners evt.preventDefault(); } @@ -563,11 +638,11 @@ { return; } - + var mousePos = win.getMousePos(evt); var bounds = win.canvas.getBoundingClientRect(); - var activeCursor = win.getCursorStyle(); + var activeCursor = mThis.resizeCursor; // check which cursor is in use var setLocationX = (activeCursor == "nw-resize" || @@ -602,6 +677,28 @@ origin.x = bounds.left; origin.y = bounds.top; + + // determine the new size + var dx = mThis.initialBounds.right - mThis.initialBounds.left + 1; + var dy = mThis.initialBounds.bottom - mThis.initialBounds.top + 1; + var new_dx = dx; + var new_dy = dy; + if (resizeX) + { + new_dx -= signX * (evt.clientX - mThis.resizeEvent.clientX); + } + + if (resizeY) + { + new_dy -= signY * (evt.clientY - mThis.resizeEvent.clientY); + } + + var maxWidth = Math.max( win.canvas.width, win.maxWidth); + var maxHeight = Math.max( win.canvas.height, win.maxHeight); + // + new_dx = Math.min(Math.max(new_dx, win.minWidth), maxWidth); + new_dy = Math.min(Math.max(new_dy, win.minHeight), maxHeight); + //recalculate origin if (setLocationX || setLocationY) { if (!(setLocationX && setLocationY)) @@ -617,66 +714,22 @@ if (setLocationX) { - origin.x = evt.clientX; + origin.x = mThis.resizeEvent.clientX + signX * (dx - new_dx); } if (setLocationY) { - origin.y = evt.clientY; + origin.y = mThis.resizeEvent.clientY + signX * (dx - new_dy); } } - - // determine the new size - var dx = mThis.initialBounds.right - mThis.initialBounds.left + 1; - var dy = mThis.initialBounds.bottom - mThis.initialBounds.top + 1; - - if (resizeX) - { - dx -= signX * (evt.clientX - mThis.resizeEvent.clientX); - } - - if (resizeY) - { - dy -= signY * (evt.clientY - mThis.resizeEvent.clientY); - } - - var w = bounds.right - bounds.left + 1; - var h = bounds.bottom - bounds.top + 1; - - // if the width/height is increased, then do not go past max - // if the width/height is decreased, then do not go past min - if ((dx < w && dx <= win.minWidth) || - (dx > w && dx >= win.maxWidth) || - (dy < h && dy <= win.minHeight) || - (dy > h && dy >= win.maxHeight)) - { - // reached window limits, do nothing - evt.preventDefault(); - return; - } - - // resize canvas - win.resize(dx, dy); - - // set new location - win.canvas.style.left = origin.x + "px"; - win.canvas.style.top = origin.y + "px"; - - // draw a rectangle - /* - win.ctx.save(); - win.ctx.strokeStyle = "#ff0000"; - var tx = win.canvasRenderer.origin.x; - var ty = win.canvasRenderer.origin.y; - win.ctx.rect(0 - tx, 0 - ty, dx - tx, dy - ty); - win.ctx.stroke(); - win.ctx.restore(); - */ + mThis.resizeArea = {left : origin.x, top : origin.y, width : new_dx, height : new_dy}; + resizePeerCanvas(mThis.resizeArea); // event was processed, cancel other listeners evt.preventDefault(); }; }; + } /** @@ -705,13 +758,13 @@ { p2j.screen.setCursorStyle(0, win.id); evt.preventDefault(); - } + }; this.mouseEnter = function(evt) { p2j.screen.setCursorStyle(1, win.id); evt.preventDefault(); - } + }; this.deregisterListeners = function() { @@ -1152,3 +1205,26 @@ return { "click" : true, "mouseDown" : true }; }; }; + +/** + * Returns true if the point is inside the rectangle given by its sides coordinates: left, + * to, right and bottom. + * + * @param {Object} point + * The point {x: x, y : y} to test. + * @param {Number} left + * The coord of the left side of the target rectangle. + * @param {Number} top + * The coord of the top side of the target rectangle. + * @param {Number} right + * The coord of the right side of the target rectangle. + * @param {Number} bottom + * The coord of the bottom side of the target rectangle. + * + * @return {Boolean} + * True iff the point is inside the target. + */ +function inside(point, left, top, right, bottom) +{ + return (point.x > left && point.x < right && point.y > top && point.y < bottom); +}