Move DOM event handling from vnc.js to canvas.js.

include/canvas.js

@@ -23,6 +23,10 @@ ctx  : null,
 
 prevStyle: "",
 
+keyPress    : null,
+mouseButton : null,
+mouseMove   : null,
+
 
 getX: function() {
     var c = $(Canvas.id);
@@ -34,46 +38,79 @@ getY: function() {
     return c.getPosition().y - document.getScroll().y;
 },
 
-mouseDown: function (e) {
-    var evt = e.event || window.event;
+onMouseButton: function(e, down) {
+    var evt, x, y, bmask;
+    evt = e.event || window.event;
+    x = (evt.clientX - Canvas.getX());
+    y = (evt.clientY - Canvas.getY());
+    bmask = 1 << evt.button;
+    //console.log('mouse ' + evt.which + '/' + evt.button + ' down:' + x + "," + y);
+    if (Canvas.mouseButton) {
+        Canvas.mouseButton(x, y, down, bmask);
+    }
     e.stop();
-    console.log('mouse ' + evt.which + '/' + evt.button + ' down:' +
-            (evt.clientX - Canvas.getX()) + "," + (evt.clientY - Canvas.getY()));
+    return false;
 },
 
-mouseUp: function (e) {
-    var evt = e.event || window.event;
-    e.stop();
-    console.log('mouse ' + evt.which + '/' + evt.button + ' up:' +
-            (evt.clientX - Canvas.getX()) + "," + (evt.clientY - Canvas.getY()));
+onMouseDown: function (e) {
+    Canvas.onMouseButton(e, 1);
 },
 
-mouseMove: function (e) {
-    var evt = e.event || window.event;
-    console.log('mouse ' + evt.which + '/' + evt.button + ' up:' +
-            (evt.clientX - Canvas.getX()) + "," + (evt.clientY - Canvas.getY()));
+onMouseUp: function (e) {
+    Canvas.onMouseButton(e, 0);
 },
 
-mouseWheel: function (e) {
-    var evt = e.event || window.event;
+onMouseWheel: function (e) {
+    var evt, x, y, bmask;
+    evt = e.event || window.event;
     //e = e ? e : window.event;
+    x = (evt.clientX - Canvas.getX());
+    y = (evt.clientY - Canvas.getY());
     var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
-    console.log('mouse scroll by ' + wheelData + ':' +
-            (evt.clientX - Canvas.getX()) + "," + (evt.clientY - Canvas.getY()));
+    if (wheelData > 0) {
+        bmask = 1 << 3;
+    } else {
+        bmask = 1 << 4;
+    }
+    //console.log('mouse scroll by ' + wheelData + ':' + x + "," + y);
+    if (Canvas.mouseButton) {
+        Canvas.mouseButton(x, y, 1, bmask);
+        Canvas.mouseButton(x, y, 0, bmask);
+    }
+    e.stop();
+    return false;
 },
 
 
-keyDown: function (e) {
+onMouseMove: function (e) {
+    var evt = e.event || window.event;
+    x = (evt.clientX - Canvas.getX());
+    y = (evt.clientY - Canvas.getY());
+    //console.log('mouse ' + evt.which + '/' + evt.button + ' up:' + x + "," + y);
+    if (Canvas.keyPress) {
+        Canvas.mouseMove(x, y);
+    }
+},
+
+onKeyDown: function (e) {
+    //console.log("keydown: " + e.key + "(" + e.code + ")");
+    if (Canvas.keyPress) {
+        Canvas.keyPress(Canvas.getKeysym(e), 1);
+    }
     e.stop();
-    console.log("keydown: " + e.key + "(" + e.code + ")");
+    return false;
 },
 
-keyUp : function (e) {
+onKeyUp : function (e) {
+    //console.log("keyup: " + e.key + "(" + e.code + ")");
+    if (Canvas.keyPress) {
+        Canvas.keyPress(Canvas.getKeysym(e), 0);
+    }
     e.stop();
-    console.log("keyup: " + e.key + "(" + e.code + ")");
+    return false;
 },
 
-ctxDisable: function (e) {
+onMouseDisable: function (e) {
     var evt = e.event || window.event;
     /* Stop propagation if inside canvas area */
     if ((evt.clientX >= Canvas.getX()) &&
@@ -86,30 +123,27 @@ ctxDisable: function (e) {
 },
 
 
-init: function (id, width, height, true_color, keyDown, keyUp,
-                mouseDown, mouseUp, mouseMove, mouseWheel) {
+init: function (id, width, height, true_color, keyPress,
+                mouseButton, mouseMove) {
     //console.log(">> Canvas.init");
 
     Canvas.id = id;
 
-    if (! keyDown) { keyDown = Canvas.keyDown; }
-    if (! keyUp) { keyUp = Canvas.keyUp; }
-    if (! mouseDown) { mouseDown = Canvas.mouseDown; }
-    if (! mouseUp) { mouseUp = Canvas.mouseUp; }
-    if (! mouseMove) { mouseMove = Canvas.mouseMove; }
-    if (! mouseWheel) { mouseWheel = Canvas.mouseWheel; }
+    Canvas.keyPress = keyPress || null;
+    Canvas.mouseButton = mouseButton || null;
+    Canvas.mouseMove = mouseMove || null;
 
     var c = $(Canvas.id);
-    document.addEvent('keydown', keyDown);
-    document.addEvent('keyup', keyUp);
-    c.addEvent('mousedown', mouseDown);
-    c.addEvent('mouseup', mouseUp);
-    c.addEvent('mousemove', mouseMove);
-    c.addEvent('mousewheel', mouseWheel);
+    document.addEvent('keydown', Canvas.onKeyDown);
+    document.addEvent('keyup', Canvas.onKeyUp);
+    c.addEvent('mousedown', Canvas.onMouseDown);
+    c.addEvent('mouseup', Canvas.onMouseUp);
+    c.addEvent('mousewheel', Canvas.onMouseWheel);
+    c.addEvent('mousemove', Canvas.onMouseMove);
 
     /* Work around right and middle click browser behaviors */
-    document.addEvent('click', Canvas.ctxDisable);
-    document.body.addEvent('contextmenu', Canvas.ctxDisable);
+    document.addEvent('click', Canvas.onMouseDisable);
+    document.body.addEvent('contextmenu', Canvas.onMouseDisable);
 
     Canvas.resize(width, height);
     Canvas.c_wx = c.getSize().x;

include/vnc.js

@@ -453,8 +453,7 @@ init_msg: function () {
         RFB.fb_name = RQ.shiftStr(name_length);
 
         Canvas.init(RFB.canvasID, RFB.fb_width, RFB.fb_height, RFB.true_color,
-                RFB.keyDown, RFB.keyUp, RFB.mouseDown, RFB.mouseUp,
-                RFB.mouseMove, RFB.mouseWheel);
+                RFB.keyPress, RFB.mouseButton, RFB.mouseMove);
 
         if (RFB.true_color) {
             RFB.fb_Bpp           = 4;
@@ -955,12 +954,6 @@ display_tight_png: function() {
         FBU.imgs.push([img, FBU.x, FBU.y]);
         img.src = "data:image/" + cmode +
             RFB.extract_data_uri(RQ.shiftBytes(clength[1]));
-        /*
-        img.onload = (function () {
-                var x = FBU.x, y = FBU.y, me = img;
-                return function () { Canvas.ctx.drawImage(me, x, y); };
-            })();
-        */
         img = null;
         break;
     }
@@ -1303,88 +1296,31 @@ checkEvents: function () {
     RFB.checkEvents.delay(RFB.check_rate);
 },
 
-keyX: function (e, down) {
+keyPress: function (keysym, down) {
     var arr;
     if (RFB.clipboardFocus) {
         return true;
     }
-    e.stop();
-    arr = RFB.keyEvent(Canvas.getKeysym(e), down);
+    arr = RFB.keyEvent(keysym, down);
     arr = arr.concat(RFB.fbUpdateRequest(1));
     RFB.send_array(arr);
 },
 
-keyDown: function (e) {
-    //console.log(">> keyDown: " + Canvas.getKeysym(e));
-    RFB.keyX(e, 1);
-},
-
-keyUp: function (e) {
-    //console.log(">> keyUp: " + Canvas.getKeysym(e));
-    RFB.keyX(e, 0);
-},
-
-mouseDown: function(e) {
-    var evt, x, y;
-    evt = e.event || window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
-    //console.log(">> mouseDown " + evt.which + "/" + evt.button +
-    //            " " + x + "," + y);
-    RFB.mouse_buttonMask |= 1 << evt.button;
-    RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
-
-    RFB.flushClient();
-    return false;
-},
-
-mouseUp: function(e) {
-    var evt, x, y;
-    evt = e.event || window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
-    //console.log(">> mouseUp " + evt.which + "/" + evt.button +
-    //            " " + x + "," + y);
-    RFB.mouse_buttonMask ^= 1 << evt.button;
+mouseButton: function(x, y, down, bmask) {
+    if (down) {
+        RFB.mouse_buttonMask |= bmask;
+    } else {
+        RFB.mouse_buttonMask ^= bmask;
+    }
     RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
-
     RFB.flushClient();
-    return false;
 },
 
-mouseMove: function(e) {
-    var evt, x, y;
-    evt = e.event || window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
+mouseMove: function(x, y) {
     //console.log('>> mouseMove ' + x + "," + y);
     RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
 },
 
-mouseWheel: function (e) {
-    var evt, wheelData, bmask;
-    evt = e.event || window.event;
-    //e = e ? e : window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
-    wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
-    //console.log('>> mouseWheel ' + wheelData +
-    //            " " + x + "," + y);
-
-    if (wheelData > 0) {
-        bmask = 1 << 3;
-    } else {
-        bmask = 1 << 4;
-    }
-    RFB.mouse_buttonMask |= bmask;
-    RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
-    RFB.mouse_buttonMask ^= bmask;
-    RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
-    RFB.flushClient();
-    return false;
-},
-
-
 clipboardCopyTo: function (text) {
     console.log(">> clipboardCopyTo stub");
     // Stub