Skip to content

Commit 3be8051

Browse files
committed
Fix mouse position computation
This fixes mouse position computation, fixing resizing issues in complicated front-ends like custom Voila templates (where the scroll level of the page is not the document scroll, for example with a fixed top bar). Signed-off-by: martinRenou <[email protected]>
1 parent b6d38ca commit 3be8051

File tree

2 files changed

+8
-30
lines changed

2 files changed

+8
-30
lines changed

js/src/mpl_widget.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
474474
var that = this;
475475
var last_update = 0;
476476
return function(event) {
477-
var canvas_pos = utils.get_mouse_position(event);
477+
var canvas_pos = utils.get_mouse_position(event, that.top_canvas);
478478

479479
if (name === 'scroll') {
480480
event['data'] = 'scroll'

js/src/utils.js

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,11 @@
1-
// Equivalent of jQuery offset method
2-
function offset(el) {
3-
var boundingRect = el.getBoundingClientRect();
4-
return {
5-
top: boundingRect.top + document.body.scrollTop,
6-
left: boundingRect.left + document.body.scrollLeft
7-
}
8-
};
9-
10-
// from http://stackoverflow.com/questions/1114465/getting-mouse-location-in-canvas
11-
function get_mouse_position(e, targ) {
12-
//this section is from http://www.quirksmode.org/js/events_properties.html
13-
if (!e)
14-
e = window.event;
15-
if (!targ) {
16-
if (e.target)
17-
targ = e.target;
18-
else if (e.srcElement)
19-
targ = e.srcElement;
20-
if (targ.nodeType == 3) // defeat Safari bug
21-
targ = targ.parentNode;
22-
}
1+
// Get mouse position relative to target
2+
function get_mouse_position(event, targ) {
3+
var boundingRect = targ.getBoundingClientRect();
234

24-
// offset() returns the position of the element relative to the document
25-
var targ_offset = offset(targ);
26-
var x = e.pageX - targ_offset.left;
27-
var y = e.pageY - targ_offset.top;
28-
29-
return {'x': x, 'y': y};
5+
return {
6+
x: event.clientX - boundingRect.left,
7+
y: event.clientY - boundingRect.top
8+
};
309
};
3110

3211
/*
@@ -44,7 +23,6 @@ function get_simple_keys(original) {
4423

4524

4625
module.exports = {
47-
offset: offset,
4826
get_mouse_position: get_mouse_position,
4927
get_simple_keys: get_simple_keys
5028
}

0 commit comments

Comments
 (0)