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

Reply via email to