API change: Mouse/kbd handling to include/input.js

API change: for intergrators that explicitly include the Javascript
files (that do not use include/vnc.js)js, include/input.js is a new
file that must also be included.

The mouse and keyboard handling could be useful on its own so split it
out into a Keyboard and Mouse class in include/input.js.

This refactoring is preparation to deal with issue #21 - non-US
keyboard layouts.

include/rfb.js

@@ -7,7 +7,7 @@
  */
 
 /*jslint white: false, browser: true, bitwise: false, plusplus: false */
-/*global window, Util, Canvas, Websock, Websock_native, Base64, DES, noVNC_logo */
+/*global window, Util, Canvas, Keyboard, Mouse, Websock, Websock_native, Base64, DES, noVNC_logo */
 
 
 function RFB(conf) {
@@ -24,6 +24,7 @@ var that           = {},         // Public API interface
     keyEvent, pointerEvent, clientCutText,
 
     extract_data_uri, scan_tight_imgQ,
+    keyPress, mouseButton, mouseMove,
 
     checkEvents,  // Overridable for testing
 
@@ -64,6 +65,8 @@ var that           = {},         // Public API interface
 
     ws             = null,   // Websock object
     canvas         = null,   // Canvas object
+    keyboard       = null,   // Keyboard input handler object
+    mouse          = null,   // Mouse input handler object
     sendTimer      = null,   // Send Queue check timer
     connTimer      = null,   // connection timer
     disconnTimer   = null,   // disconnection timer
@@ -182,10 +185,14 @@ function constructor() {
         encNames[encodings[i][1]] = encodings[i][0];
         encStats[encodings[i][1]] = [0, 0];
     }
-    // Initialize canvas
+    // Initialize canvas, mouse and keyboard
     try {
-        canvas = new Canvas({'target': conf.target,
-                             'focusContainer': conf.focusContainer});
+        canvas   = new Canvas({'target': conf.target});
+        keyboard = new Keyboard({'target': conf.focusContainer,
+                                 'keyPress': keyPress});
+        mouse    = new Mouse({'target': conf.target,
+                              'mouseButton': mouseButton,
+                              'mouseMove': mouseMove});
     } catch (exc) {
         Util.Error("Canvas exception: " + exc);
         updateState('fatal', "No working Canvas");
@@ -349,7 +356,9 @@ updateState = function(state, statusMsg) {
         }
 
         if (canvas && canvas.getContext()) {
-            canvas.stop();
+            keyboard.ungrab();
+            mouse.ungrab();
+            canvas.defaultCursor();
             if (Util.get_logging() !== 'debug') {
                 canvas.clear();
             }
@@ -543,14 +552,14 @@ checkEvents = function() {
     setTimeout(checkEvents, conf.check_rate);
 };
 
-function keyPress(keysym, down) {
+keyPress = function(keysym, down) {
     var arr;
     arr = keyEvent(keysym, down);
     arr = arr.concat(fbUpdateRequest(1));
     ws.send(arr);
-}
+};
 
-function mouseButton(x, y, down, bmask) {
+mouseButton = function(x, y, down, bmask) {
     if (down) {
         mouse_buttonMask |= bmask;
     } else {
@@ -558,12 +567,12 @@ function mouseButton(x, y, down, bmask) {
     }
     mouse_arr = mouse_arr.concat( pointerEvent(x, y) );
     flushClient();
-}
+};
 
-function mouseMove(x, y) {
+mouseMove = function(x, y) {
     //Util.Debug('>> mouseMove ' + x + "," + y);
     mouse_arr = mouse_arr.concat( pointerEvent(x, y) );
-}
+};
 
 
 //
@@ -744,7 +753,8 @@ init_msg = function() {
         fb_name = ws.rQshiftStr(name_length);
 
         canvas.resize(fb_width, fb_height, conf.true_color);
-        canvas.start(keyPress, mouseButton, mouseMove);
+        keyboard.grab();
+        mouse.grab();
 
         if (conf.true_color) {
             fb_Bpp           = 4;

include/util.js

@@ -78,7 +78,7 @@ Util.init_logging = function (level) {
 };
 Util.get_logging = function () {
     return Util._log_level;
-}
+};
 // Initialize logging level
 Util.init_logging();
 
@@ -104,6 +104,10 @@ Util.conf_default = function(cfg, api, v, type, defval, desc) {
                     }
                 } else if (type in {'integer':1, 'int':1}) {
                     val = parseInt(val, 10);
+                } else if (type === 'func') {
+                    if (!val) {
+                        val = function () {};
+                    }
                 }
                 cfg[v] = val;
             };

include/vnc.js

@@ -33,6 +33,7 @@ function get_INCLUDE_URI() {
     extra += start + "base64.js" + end;
     extra += start + "websock.js" + end;
     extra += start + "des.js" + end;
+    extra += start + "input.js" + end;
     extra += start + "canvas.js" + end;
     extra += start + "rfb.js" + end;
 

tests/input.html

@@ -22,6 +22,7 @@
     <script src="../include/util.js"></script>
     <script src="../include/webutil.js"></script> 
     <script src="../include/base64.js"></script>
+    <script src="../include/input.js"></script> 
     <script src="../include/canvas.js"></script>
     <script>
         var msg_cnt = 0;
@@ -55,8 +56,14 @@
 
         window.onload = function() {
             var canvas = new Canvas({'target' : $D('canvas')});
+            keyboard = new Keyboard({'target': document,
+                                    'keyPress': keyPress});
+            mouse    = new Mouse({'target': $D('canvas'),
+                                'mouseButton': mouseButton,
+                                'mouseMove': mouseMove});
             canvas.resize(width, height, true);
-            canvas.start(keyPress, mouseButton, mouseMove);
+            keyboard.grab();
+            mouse.grab();
             message("Canvas initialized");
         }
     </script>

tests/keyboard.html

@@ -41,24 +41,22 @@
             msg = "Dn: key:" + e.keyCode + " char:" + e.charCode + " which:" + e.which + " id:" + e.keyIdentifier + " ksym:" + getKeysym(evt) + " alt:" + e.altKey + " shift:" + e.shiftKey + " ctrl:" + e.ctrlKey;
             message(msg);
 
-            /*
             if (e.stopPropagation) { e.stopPropagation(); }
             else                   { e.cancelBubble = true; }
 
+            /*
             if (e.preventDefault)  { Util.Debug("here1"); e.preventDefault(); }
             else                   { Util.Debug("here2"); e.returnValue = false; }
-
-            return false;
             */
 
+            return false;
         }
 
-        function keyUp(evt) {
+        function keyPress(evt) {
             var e = (evt ? evt : window.event);
-            msg = "Up: key:" + e.keyCode + " char:" + e.charCode + " which:" + e.which + " id:" + e.keyIdentifier + " ksym:" + getKeysym(evt) + " alt:" + e.altKey + " shift:" + e.shiftKey + " ctrl:" + e.ctrlKey;
+            msg = "Pr: key:" + e.keyCode + " char:" + e.charCode + " which:" + e.which + " id:" + e.keyIdentifier + " ksym:" + getKeysym(evt) + " alt:" + e.altKey + " shift:" + e.shiftKey + " ctrl:" + e.ctrlKey;
             message(msg);
 
-            /*
             if (e.stopPropagation) { e.stopPropagation(); }
             else                   { e.cancelBubble = true; }
 
@@ -66,13 +64,11 @@
             else                   { e.returnValue = false; }
 
             return false;
-            */
-
         }
 
-        function keyPress(evt) {
+        function keyUp(evt) {
             var e = (evt ? evt : window.event);
-            msg = "Pr: key:" + e.keyCode + " char:" + e.charCode + " which:" + e.which + " id:" + e.keyIdentifier + " ksym:" + getKeysym(evt) + " alt:" + e.altKey + " shift:" + e.shiftKey + " ctrl:" + e.ctrlKey;
+            msg = "Up: key:" + e.keyCode + " char:" + e.charCode + " which:" + e.which + " id:" + e.keyIdentifier + " ksym:" + getKeysym(evt) + " alt:" + e.altKey + " shift:" + e.shiftKey + " ctrl:" + e.ctrlKey;
             message(msg);
 
             /*
@@ -84,7 +80,6 @@
 
             return false;
             */
-
         }
 
         window.onload = function() {