From 6ffb217946a302c71f4434064261c018b5ddb45a Mon Sep 17 00:00:00 2001 From: "Maarten A. Breddels" Date: Fri, 5 Feb 2021 17:03:18 +0100 Subject: [PATCH] feat: support button clicks and modifiers --- examples/mouse.ipynb | 2 ++ js/lib/MouseInteraction.js | 11 +++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/examples/mouse.ipynb b/examples/mouse.ipynb index 22e36a7..7029201 100644 --- a/examples/mouse.ipynb +++ b/examples/mouse.ipynb @@ -109,6 +109,8 @@ "def on_mouse_msg(interaction, data, buffers):\n", " # it might be a good idea to throttle on the Python side as well, for instance when many computations\n", " # happen, we can effectively ignore the queue of messages\n", + " if data['event'] in ['click', 'dblclick', 'contextmenu']:\n", + " widget_label.value = f'click {data}'\n", " if data['event'] == 'mousemove':\n", " domain_x = data['domain']['x']\n", " domain_y = data['domain']['y']\n", diff --git a/js/lib/MouseInteraction.js b/js/lib/MouseInteraction.js index 5b86da6..8ffa646 100644 --- a/js/lib/MouseInteraction.js +++ b/js/lib/MouseInteraction.js @@ -61,13 +61,16 @@ class MouseInteraction extends Interaction_1.Interaction { this._emit('dragend', { x: e.x, y: e.y }); })); // and click events - ['click', 'dblclick', 'mouseenter', 'mouseleave'].forEach(eventName => { + ['click', 'dblclick', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(eventName => { eventElement.on(eventName, () => { this._emitThrottled.flush(); // we don't want mousemove events to come after enter/leave const e = d3GetEvent(); // to be consistent with drag events, we need to user clientPoint const [x, y] = d3_selection_1.clientPoint(eventElement.node(), e); - this._emit(eventName, { x, y }); + e.preventDefault(); + e.stopPropagation(); + this._emit(eventName, { x, y }, {button: e.button, altKey: e.altKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey}); + return false }); }); // throttled events @@ -88,9 +91,9 @@ class MouseInteraction extends Interaction_1.Interaction { super.remove(); this.parent.off('margin_updated', this.updateScaleRanges); } - _emit(name, { x, y }) { + _emit(name, { x, y }, extra) { let domain = { x: this.x_scale.scale.invert(x), y: this.y_scale.scale.invert(y) }; - this.send({ event: name, pixel: { x, y }, domain: domain }); + this.send({ event: name, pixel: { x, y }, domain: domain, ...extra }); } } exports.MouseInteraction = MouseInteraction;