Author: kpreisser Date: Tue Oct 29 18:00:46 2013 New Revision: 1536834 URL: http://svn.apache.org/r1536834 Log: Add mouse events to the document object so that the canvas correctly gets notified by MouseUp/MouseMove events even if the mouse cursor is outside of the canvas.
Modified: tomcat/trunk/webapps/examples/websocket/drawboard.xhtml Modified: tomcat/trunk/webapps/examples/websocket/drawboard.xhtml URL: http://svn.apache.org/viewvc/tomcat/trunk/webapps/examples/websocket/drawboard.xhtml?rev=1536834&r1=1536833&r2=1536834&view=diff ============================================================================== --- tomcat/trunk/webapps/examples/websocket/drawboard.xhtml (original) +++ tomcat/trunk/webapps/examples/websocket/drawboard.xhtml Tue Oct 29 18:00:46 2013 @@ -185,6 +185,7 @@ var canvasMouseMoveHandler; var canvasMouseDownHandler; + var isActive = false; var mouseInWindow = false; var mouseDown = false; var currentMouseX = 0, currentMouseY = 0; @@ -500,6 +501,10 @@ } function refreshDisplayCanvas() { + if (!isActive) { // Don't draw a curser when not active. + return; + } + canvasDisplayCtx.drawImage(canvasBackground, 0, 0); if (currentPreviewPath != null) { // Draw the preview path. @@ -520,6 +525,8 @@ } function startControls() { + isActive = true; + labelContainer.removeChild(placeholder); placeholder = undefined; @@ -555,7 +562,6 @@ canvasDisplay.addEventListener("mousedown", canvasMouseDownHandler, false); canvasMouseMoveHandler = function(e) { - mouseInWindow = true; var mouseX = e.pageX - canvasDisplay.offsetLeft; var mouseY = e.pageY - canvasDisplay.offsetTop; @@ -596,9 +602,9 @@ refreshDisplayCanvas(); }; - canvasDisplay.addEventListener("mousemove", canvasMouseMoveHandler, false); + document.addEventListener("mousemove", canvasMouseMoveHandler, false); - canvasDisplay.addEventListener("mouseup", function(e) { + document.addEventListener("mouseup", function(e) { if (e.button == 0) { if (mouseDown) { mouseDown = false; @@ -632,6 +638,13 @@ refreshDisplayCanvas(); }, false); + canvasDisplay.addEventListener("mousemove", function(e) { + if (!mouseInWindow) { + mouseInWindow = true; + refreshDisplayCanvas(); + } + }, false); + // Create color and thickness controls. var colorContainersBox = document.createElement("div"); @@ -730,10 +743,12 @@ } function disableControls() { - canvasDisplay.removeEventListener("mousedown", canvasMouseDownHandler); - canvasDisplay.removeEventListener("mousemove", canvasMouseMoveHandler); + document.removeEventListener("mousedown", canvasMouseDownHandler); + document.removeEventListener("mousemove", canvasMouseMoveHandler); mouseInWindow = false; refreshDisplayCanvas(); + + isActive = false; } function pushPath(path) { --------------------------------------------------------------------- To unsubscribe, e-mail: dev-unsubscr...@tomcat.apache.org For additional commands, e-mail: dev-h...@tomcat.apache.org