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: [email protected]
For additional commands, e-mail: [email protected]
