Bläddra i källkod

Add mouse wheel support and input test page.

Joel Martin 15 år sedan
förälder
incheckning
a575a383fb
4 ändrade filer med 133 tillägg och 3 borttagningar
  1. 12 1
      include/canvas.js
  2. 1 0
      tests/include
  3. 95 0
      tests/input.html
  4. 25 2
      vnc.js

+ 12 - 1
include/canvas.js

@@ -42,6 +42,14 @@ mouseMove: function (e) {
             (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
 },
 
+mouseWheel: function (e) {
+    var evt = e.event || window.event;
+    //e = e ? e : window.event;
+    var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
+    console.log('mouse scroll by ' + wheelData + ':' +
+            (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
+},
+
 
 keyDown: function (e) {
     e.stop();
@@ -67,7 +75,7 @@ ctxDisable: function (e) {
 
 
 init: function (id, width, height, keyDown, keyUp,
-                mouseDown, mouseUp, mouseMove) {
+                mouseDown, mouseUp, mouseMove, mouseWheel) {
     console.log(">> Canvas.init");
 
     Canvas.id = id;
@@ -77,6 +85,7 @@ init: function (id, width, height, keyDown, keyUp,
     if (! mouseDown) { mouseDown = Canvas.mouseDown; }
     if (! mouseUp) { mouseUp = Canvas.mouseUp; }
     if (! mouseMove) { mouseMove = Canvas.mouseMove; }
+    if (! mouseWheel) { mouseWheel = Canvas.mouseWheel; }
 
     var c = $(Canvas.id);
     document.addEvent('keydown', keyDown);
@@ -84,6 +93,7 @@ init: function (id, width, height, keyDown, keyUp,
     c.addEvent('mousedown', mouseDown);
     c.addEvent('mouseup', mouseUp);
     c.addEvent('mousemove', mouseMove);
+    c.addEvent('mousewheel', mouseWheel);
 
     /* Work around right and middle click browser behaviors */
     document.addEvent('click', Canvas.ctxDisable);
@@ -122,6 +132,7 @@ stop: function () {
     c.removeEvents('mousedown');
     c.removeEvents('mouseup');
     c.removeEvents('mousemove');
+    c.removeEvents('DOMMouseScroll');
 
     /* Work around right and middle click browser behaviors */
     document.removeEvents('click');

+ 1 - 0
tests/include

@@ -0,0 +1 @@
+../include

+ 95 - 0
tests/input.html

@@ -0,0 +1,95 @@
+<html>
+    <head><title>Input Test</title></head>
+    <body>
+        <br><br>
+
+        Canvas:<br>
+        <canvas id="canvas" width="640" height="20"
+                style="border-style: dotted; border-width: 1px;">
+            Canvas not supported.
+        </canvas>
+
+        <br>
+        Results:<br>
+        <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
+    </body>
+
+    <!--
+    <script type='text/javascript' 
+        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
+    -->
+
+    <script src="include/mootools.js"></script>
+    <script src="include/util.js"></script>
+    <script src="include/canvas.js"></script>
+
+    <script>
+        var msg_cnt = 0;
+        var width = 800, height = 600;
+        var iterations;
+
+        function message(str) {
+            console.log(str);
+            cell = $('messages');
+            cell.innerHTML += msg_cnt + ": " + str + "\n";
+            cell.scrollTop = cell.scrollHeight;
+        }
+
+        function mouseDown (e) {
+            var msg, evt = e.event || window.event;
+            e.stop();
+            msg = 'mouse ' + evt.which + '/' + evt.button + ' down:' +
+                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y);
+            console.log(msg);
+            message(msg);
+        }
+
+        function mouseUp (e) {
+            var msg, evt = e.event || window.event;
+            e.stop();
+            msg = 'mouse ' + evt.which + '/' + evt.button + ' up:' +
+                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y);
+            console.log(msg);
+            message(msg);
+        }
+
+        function mouseMove (e) {
+            var msg, evt = e.event || window.event;
+            console.log('mouse ' + evt.which + '/' + evt.button + ' up:' +
+                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
+        }
+
+        function mouseWheel (e) {
+            var evt = e.event || window.event;
+            //e = e ? e : window.event;
+            var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
+            msg = 'mouse scroll by ' + wheelData + ':' +
+                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y);
+            console.log(msg);
+            message(msg);
+        }
+
+
+        function keyDown (e) {
+            var msg;
+            e.stop();
+            msg = "keydown: " + e.key + "(" + e.code + ")";
+            console.log(msg);
+            message(msg);
+        }
+
+        function keyUp (e) {
+            var msg;
+            e.stop();
+            msg = "keyup: " + e.key + "(" + e.code + ")";
+            console.log(msg);
+            message(msg);
+        }
+
+        window.onload = function() {
+            Canvas.init('canvas', width, height, keyDown, keyUp,
+                        mouseDown, mouseUp, mouseMove, mouseWheel);
+            message("Canvas initialized");
+        }
+    </script>
+</html>

+ 25 - 2
vnc.js

@@ -289,8 +289,8 @@ init_msg: function () {
         RFB.fb_name = RQ.shiftStr(name_length);
 
         Canvas.init('VNC_canvas', RFB.fb_width, RFB.fb_height,
-                RFB.keyDown, RFB.keyUp,
-                RFB.mouseDown, RFB.mouseUp, RFB.mouseMove);
+                RFB.keyDown, RFB.keyUp, RFB.mouseDown, RFB.mouseUp,
+                RFB.mouseMove, RFB.mouseWheel);
 
         response = RFB.pixelFormat();
         response = response.concat(RFB.encodings());
@@ -984,6 +984,29 @@ mouseMove: function(e) {
     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.c_x);
+    y = (evt.clientY - Canvas.c_y);
+    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();
+},
+
+
 clipboardCopyTo: function (text) {
     console.log(">> clipboardCopyTo: " + text.substr(0,40) + "...");
     RFB.clipboard.value = text;