Add mouse wheel support and input test page.
This commit is contained in:
parent
7f4f41b0c7
commit
a575a383fb
|
@ -42,6 +42,14 @@ mouseMove: function (e) {
|
||||||
(evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
|
(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) {
|
keyDown: function (e) {
|
||||||
e.stop();
|
e.stop();
|
||||||
|
@ -67,7 +75,7 @@ ctxDisable: function (e) {
|
||||||
|
|
||||||
|
|
||||||
init: function (id, width, height, keyDown, keyUp,
|
init: function (id, width, height, keyDown, keyUp,
|
||||||
mouseDown, mouseUp, mouseMove) {
|
mouseDown, mouseUp, mouseMove, mouseWheel) {
|
||||||
console.log(">> Canvas.init");
|
console.log(">> Canvas.init");
|
||||||
|
|
||||||
Canvas.id = id;
|
Canvas.id = id;
|
||||||
|
@ -77,6 +85,7 @@ init: function (id, width, height, keyDown, keyUp,
|
||||||
if (! mouseDown) { mouseDown = Canvas.mouseDown; }
|
if (! mouseDown) { mouseDown = Canvas.mouseDown; }
|
||||||
if (! mouseUp) { mouseUp = Canvas.mouseUp; }
|
if (! mouseUp) { mouseUp = Canvas.mouseUp; }
|
||||||
if (! mouseMove) { mouseMove = Canvas.mouseMove; }
|
if (! mouseMove) { mouseMove = Canvas.mouseMove; }
|
||||||
|
if (! mouseWheel) { mouseWheel = Canvas.mouseWheel; }
|
||||||
|
|
||||||
var c = $(Canvas.id);
|
var c = $(Canvas.id);
|
||||||
document.addEvent('keydown', keyDown);
|
document.addEvent('keydown', keyDown);
|
||||||
|
@ -84,6 +93,7 @@ init: function (id, width, height, keyDown, keyUp,
|
||||||
c.addEvent('mousedown', mouseDown);
|
c.addEvent('mousedown', mouseDown);
|
||||||
c.addEvent('mouseup', mouseUp);
|
c.addEvent('mouseup', mouseUp);
|
||||||
c.addEvent('mousemove', mouseMove);
|
c.addEvent('mousemove', mouseMove);
|
||||||
|
c.addEvent('mousewheel', mouseWheel);
|
||||||
|
|
||||||
/* Work around right and middle click browser behaviors */
|
/* Work around right and middle click browser behaviors */
|
||||||
document.addEvent('click', Canvas.ctxDisable);
|
document.addEvent('click', Canvas.ctxDisable);
|
||||||
|
@ -122,6 +132,7 @@ stop: function () {
|
||||||
c.removeEvents('mousedown');
|
c.removeEvents('mousedown');
|
||||||
c.removeEvents('mouseup');
|
c.removeEvents('mouseup');
|
||||||
c.removeEvents('mousemove');
|
c.removeEvents('mousemove');
|
||||||
|
c.removeEvents('DOMMouseScroll');
|
||||||
|
|
||||||
/* Work around right and middle click browser behaviors */
|
/* Work around right and middle click browser behaviors */
|
||||||
document.removeEvents('click');
|
document.removeEvents('click');
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
../include
|
|
@ -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>
|
27
vnc.js
27
vnc.js
|
@ -289,8 +289,8 @@ init_msg: function () {
|
||||||
RFB.fb_name = RQ.shiftStr(name_length);
|
RFB.fb_name = RQ.shiftStr(name_length);
|
||||||
|
|
||||||
Canvas.init('VNC_canvas', RFB.fb_width, RFB.fb_height,
|
Canvas.init('VNC_canvas', RFB.fb_width, RFB.fb_height,
|
||||||
RFB.keyDown, RFB.keyUp,
|
RFB.keyDown, RFB.keyUp, RFB.mouseDown, RFB.mouseUp,
|
||||||
RFB.mouseDown, RFB.mouseUp, RFB.mouseMove);
|
RFB.mouseMove, RFB.mouseWheel);
|
||||||
|
|
||||||
response = RFB.pixelFormat();
|
response = RFB.pixelFormat();
|
||||||
response = response.concat(RFB.encodings());
|
response = response.concat(RFB.encodings());
|
||||||
|
@ -984,6 +984,29 @@ mouseMove: function(e) {
|
||||||
RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(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.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) {
|
clipboardCopyTo: function (text) {
|
||||||
console.log(">> clipboardCopyTo: " + text.substr(0,40) + "...");
|
console.log(">> clipboardCopyTo: " + text.substr(0,40) + "...");
|
||||||
RFB.clipboard.value = text;
|
RFB.clipboard.value = text;
|
||||||
|
|
Loading…
Reference in New Issue