Add mouse position routines to util.js.
On path towards removing dependency on mootools in non-UI code.
This commit is contained in:
parent
e2e7c22494
commit
61dd52c983
|
@ -1,5 +1,9 @@
|
|||
Medium Term:
|
||||
|
||||
- Remove mootools dependency from vnc.js and canvas.js.
|
||||
- canvas.js deps:
|
||||
$(), getPosition, getScroll
|
||||
|
||||
- Implement Cursor pseudo-encoding (CSS cursor)
|
||||
http://en.wikipedia.org/wiki/ICO_(file_format)
|
||||
https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property
|
||||
|
|
|
@ -27,26 +27,14 @@ keyPress : null,
|
|||
mouseButton : null,
|
||||
mouseMove : null,
|
||||
|
||||
|
||||
getX: function() {
|
||||
var c = $(Canvas.id);
|
||||
return c.getPosition().x - document.getScroll().x;
|
||||
},
|
||||
|
||||
getY: function() {
|
||||
var c = $(Canvas.id);
|
||||
return c.getPosition().y - document.getScroll().y;
|
||||
},
|
||||
|
||||
onMouseButton: function(e, down) {
|
||||
var evt, x, y, bmask;
|
||||
var evt, pos, bmask;
|
||||
evt = e.event || window.event;
|
||||
x = (evt.clientX - Canvas.getX());
|
||||
y = (evt.clientY - Canvas.getY());
|
||||
pos = getEventPosition(e, $(Canvas.id));
|
||||
bmask = 1 << evt.button;
|
||||
//console.log('mouse ' + evt.which + '/' + evt.button + ' down:' + x + "," + y);
|
||||
//console.log('mouse ' + evt.which + '/' + evt.button + ' down:' + pos.x + "," + pos.y);
|
||||
if (Canvas.mouseButton) {
|
||||
Canvas.mouseButton(x, y, down, bmask);
|
||||
Canvas.mouseButton(pos.x, pos.y, down, bmask);
|
||||
}
|
||||
e.stop();
|
||||
return false;
|
||||
|
@ -61,21 +49,19 @@ onMouseUp: function (e) {
|
|||
},
|
||||
|
||||
onMouseWheel: function (e) {
|
||||
var evt, x, y, bmask;
|
||||
var evt, pos, bmask;
|
||||
evt = e.event || window.event;
|
||||
//e = e ? e : window.event;
|
||||
x = (evt.clientX - Canvas.getX());
|
||||
y = (evt.clientY - Canvas.getY());
|
||||
pos = getEventPosition(e, $(Canvas.id));
|
||||
var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
|
||||
if (wheelData > 0) {
|
||||
bmask = 1 << 3;
|
||||
} else {
|
||||
bmask = 1 << 4;
|
||||
}
|
||||
//console.log('mouse scroll by ' + wheelData + ':' + x + "," + y);
|
||||
//console.log('mouse scroll by ' + wheelData + ':' + pos.x + "," + pos.y);
|
||||
if (Canvas.mouseButton) {
|
||||
Canvas.mouseButton(x, y, 1, bmask);
|
||||
Canvas.mouseButton(x, y, 0, bmask);
|
||||
Canvas.mouseButton(pos.x, pos.y, 1, bmask);
|
||||
Canvas.mouseButton(pos.x, pos.y, 0, bmask);
|
||||
}
|
||||
e.stop();
|
||||
return false;
|
||||
|
@ -83,12 +69,12 @@ onMouseWheel: 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);
|
||||
var evt, pos;
|
||||
evt = e.event || window.event;
|
||||
pos = getEventPosition(e, $(Canvas.id));
|
||||
//console.log('mouse ' + evt.which + '/' + evt.button + ' up:' + pos.x + "," + pos.y);
|
||||
if (Canvas.mouseMove) {
|
||||
Canvas.mouseMove(pos.x, pos.y);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -111,12 +97,14 @@ onKeyUp : function (e) {
|
|||
},
|
||||
|
||||
onMouseDisable: function (e) {
|
||||
var evt = e.event || window.event;
|
||||
var evt, pos;
|
||||
evt = e.event || window.event;
|
||||
pos = getPosition($(Canvas.id));
|
||||
/* Stop propagation if inside canvas area */
|
||||
if ((evt.clientX >= Canvas.getX()) &&
|
||||
(evt.clientY >= Canvas.getY()) &&
|
||||
(evt.clientX < (Canvas.getX() + Canvas.c_wx)) &&
|
||||
(evt.clientY < (Canvas.getY() + Canvas.c_wy))) {
|
||||
if ((evt.clientX >= pos.x) &&
|
||||
(evt.clientY >= pos.y) &&
|
||||
(evt.clientX < (pos.x + Canvas.c_wx)) &&
|
||||
(evt.clientY < (pos.y + Canvas.c_wy))) {
|
||||
e.stop();
|
||||
return false;
|
||||
}
|
||||
|
|
|
@ -28,6 +28,40 @@ function dirObj(obj, depth, parent) {
|
|||
return msg;
|
||||
}
|
||||
|
||||
/*
|
||||
* Cross-browser positioning
|
||||
*/
|
||||
|
||||
// Get DOM element position on page
|
||||
function getPosition(obj) {
|
||||
var x = 0, y = 0;
|
||||
if (obj.offsetParent) {
|
||||
do {
|
||||
x += obj.offsetLeft;
|
||||
y += obj.offsetTop;
|
||||
} while (obj = obj.offsetParent);
|
||||
}
|
||||
return {'x': x, 'y': y};
|
||||
}
|
||||
|
||||
// Get mouse event position in DOM element
|
||||
function getEventPosition(e, obj) {
|
||||
var evt, docX, docY, pos;
|
||||
//if (!e) evt = window.event;
|
||||
evt = e.event || window.event;
|
||||
if (evt.pageX || evt.pageY) {
|
||||
docX = evt.pageX;
|
||||
docY = evt.pageY;
|
||||
} else if (evt.clientX || evt.clientY) {
|
||||
docX = evt.clientX + document.body.scrollLeft +
|
||||
document.documentElement.scrollLeft;
|
||||
docY = evt.clientY + document.body.scrollTop +
|
||||
document.documentElement.scrollTop;
|
||||
}
|
||||
pos = getPosition(obj);
|
||||
return {'x': docX - pos.x, 'y': docY - pos.y};
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Make arrays quack
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<script>
|
||||
var msg_cnt = 0;
|
||||
var width = 800, height = 600;
|
||||
var width = 1280, height = 600;
|
||||
var iterations;
|
||||
|
||||
function message(str) {
|
||||
|
@ -35,60 +35,27 @@
|
|||
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);
|
||||
function mouseButton(x, y, down, bmask) {
|
||||
msg = 'mouse x,y: ' + x + ',' + y + ' down: ' + down;
|
||||
msg += ' bmask: ' + bmask;
|
||||
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(x, y) {
|
||||
msg = 'mouse x,y: ' + x + ',' + y;
|
||||
//console.log(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 + ")";
|
||||
function keyPress(keysym, down) {
|
||||
msg = "keyPress keysym: " + keysym + " down: " + down;
|
||||
console.log(msg);
|
||||
message(msg);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
Canvas.init('canvas', width, height, keyDown, keyUp,
|
||||
mouseDown, mouseUp, mouseMove, mouseWheel);
|
||||
Canvas.init('canvas', width, height, true, keyPress,
|
||||
mouseButton, mouseMove);
|
||||
message("Canvas initialized");
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue