Skip to content

Add touch event handlers to the webagg and nbagg backends #18851

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add touch event handlers to the webagg and nbagg backends #18851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions lib/matplotlib/backend_bases.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1976,6 +1976,21 @@ def enter_notify_event(self, guiEvent=None, xy=None):
event = LocationEvent('figure_enter_event', self, x, y, guiEvent)
self.callbacks.process('figure_enter_event', event)

def touch_start_event(self, touches, guiEvent=None):
# Placeholder implementation awaiting
# https://github.com/matplotlib/matplotlib/pull/8041.
pass

def touch_move_event(self, touches, guiEvent=None):
# Placeholder implementation awaiting
# https://github.com/matplotlib/matplotlib/pull/8041.
pass

def touch_end_event(self, touches, guiEvent=None):
# Placeholder implementation awaiting
# https://github.com/matplotlib/matplotlib/pull/8041.
pass

def inaxes(self, xy):
"""
Return the topmost visible `~.axes.Axes` containing the point *xy*.
Expand Down
12 changes: 12 additions & 0 deletions lib/matplotlib/backends/backend_webagg_core.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,18 @@ def _handle_key(self, event):
self.key_release_event(key, guiEvent=guiEvent)
handle_key_press = handle_key_release = _handle_key

def _handle_touch(self, event):
e_type = event['type']
guiEvent = event.get('guiEvent', None)
# TODO: Use event['touches'] to build up an appropriate backend event record.
if e_type == 'touch_start':
self.touch_start_event([], guiEvent=guiEvent)
elif e_type == 'touch_move':
self.touch_move_event([], guiEvent=guiEvent)
elif e_type == 'touch_end':
self.touch_end_event([], guiEvent=guiEvent)
handle_touch_start = handle_touch_move = handle_touch_end = _handle_touch

def handle_toolbar_button(self, event):
# TODO: Be more suspicious of the input
getattr(self.toolbar, event['name'])()
Expand Down
12 changes: 7 additions & 5 deletions lib/matplotlib/backends/web_backend/all_figures.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@
main_div.appendChild(figure_div);
var websocket_type = mpl.get_websocket_type();
var websocket = new websocket_type("{{ ws_uri }}" + fig_id + "/ws");
var fig = new mpl.figure(fig_id, websocket, mpl_ondownload, figure_div);

fig.focus_on_mouseover = true;

fig.canvas.setAttribute("tabindex", fig_id);
var fig;
websocket.onopen = function ()
{
fig = new mpl.figure(fig_id, websocket, mpl_ondownload, figure_div);
fig.focus_on_mouseover = true;
fig.canvas.setAttribute("tabindex", fig_id);
}
}
};

Expand Down
41 changes: 39 additions & 2 deletions lib/matplotlib/backends/web_backend/js/mpl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,12 @@ mpl.figure.prototype._init_canvas = function () {
};
}

function on_touch_event_closure(name) {
return function (event) {
return fig.touch_event(event, name);
};
}

rubberband_canvas.addEventListener(
'mousedown',
on_mouse_event_closure('button_press')
Expand All @@ -242,12 +248,10 @@ mpl.figure.prototype._init_canvas = function () {
'dblclick',
on_mouse_event_closure('dblclick')
);
// Throttle sequential mouse events to 1 every 20ms.
rubberband_canvas.addEventListener(
'mousemove',
on_mouse_event_closure('motion_notify')
);

rubberband_canvas.addEventListener(
'mouseenter',
on_mouse_event_closure('figure_enter')
Expand All @@ -256,6 +260,18 @@ mpl.figure.prototype._init_canvas = function () {
'mouseleave',
on_mouse_event_closure('figure_leave')
);
rubberband_canvas.addEventListener(
'touchmove',
on_touch_event_closure('touch_move')
);
rubberband_canvas.addEventListener(
'touchenter',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly I've not seen this event (nor touchleave) actually fire. Perhaps I don't have the right kind of device (mobile or chrome developer tools).

on_touch_event_closure('touch_start')
);
rubberband_canvas.addEventListener(
'touchleave',
on_touch_event_closure('touch_end')
);

canvas_div.addEventListener('wheel', function (event) {
if (event.deltaY < 0) {
Expand Down Expand Up @@ -628,6 +644,27 @@ mpl.figure.prototype.mouse_event = function (event, name) {
return false;
};

mpl.figure.prototype.touch_event = function (event, name) {
var touches = [];
for (var i = 0; i < event.changedTouches.length; i++) {
var canvas_pos = mpl.findpos(event.changedTouches[i]);
var x = canvas_pos.x * this.ratio;
var y = canvas_pos.y * this.ratio;
touches.push({x: x, y: y});
}

this.send_message(name, {
touches: touches
});

// TODO: preventDefault will stop the event having any further impact
// in the user's browser. This effectively will stop things like
// pinch-to-zoom etc. Sometimes this is desirable, but certainly
// not always. For now, err on the side of caution.
// event.preventDefault();
return false;
};

mpl.figure.prototype._key_event_extra = function (_event, _name) {
// Handle any extra behaviour associated with a key event
};
Expand Down
6 changes: 5 additions & 1 deletion lib/matplotlib/backends/web_backend/single_figure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,13 @@
var websocket_type = mpl.get_websocket_type();
var websocket = new websocket_type(
"{{ ws_uri }}" + {{ str(fig_id) }} + "/ws");
var fig = new mpl.figure(
var fig;
websocket.onopen = function ()
{
fig = new mpl.figure(
{{ str(fig_id) }}, websocket, mpl_ondownload,
document.getElementById("figure"));
}
}
);
</script>
Expand Down