Merge pull request #3968 from blink1073/web-scroll-event

ENH : Add Support for `scroll_event` in WebAgg and NbAgg

lib/matplotlib/backends/backend_webagg_core.py

@@ -193,7 +193,7 @@ def handle_event(self, event):
         elif e_type == 'draw':
             self.draw()
         elif e_type in ('button_press', 'button_release', 'motion_notify',
-                        'figure_enter', 'figure_leave'):
+                        'figure_enter', 'figure_leave', 'scroll'):
             x = event['x']
             y = event['y']
             y = self.get_renderer().height - y
@@ -219,6 +219,8 @@ def handle_event(self, event):
                 self.enter_notify_event(xy=(x, y))
             elif e_type == 'figure_leave':
                 self.leave_notify_event()
+            elif e_type == 'scroll':
+                self.scroll_event(x, y, event['step'])
         elif e_type in ('key_press', 'key_release'):
             key = event['key']
 

lib/matplotlib/backends/web_backend/mpl.js

@@ -94,6 +94,8 @@ mpl.figure.prototype._init_header = function() {
     this.header = titletext[0];
 }
 
+
+
 mpl.figure.prototype._canvas_extra_style = function(canvas_div) {
 
 }
@@ -143,6 +145,17 @@ mpl.figure.prototype._init_canvas = function() {
     rubberband.mouseenter('figure_enter', mouse_event_fn);
     rubberband.mouseleave('figure_leave', mouse_event_fn);
 
+    canvas_div.on("wheel", function (event) {
+        event = event.originalEvent;
+        event['data'] = 'scroll'
+        if (event.deltaY < 0) {
+            event.step = 1;
+        } else {
+            event.step = -1;
+        }
+        mouse_event_fn(event);
+    });
+
     canvas_div.append(canvas);
     canvas_div.append(rubberband);
 
@@ -168,6 +181,7 @@ mpl.figure.prototype._init_canvas = function() {
     // upon first draw.
     this._resize_canvas(600, 600);
 
+
     function set_focus () {
         canvas.focus();
         canvas_div.focus();
@@ -425,7 +439,8 @@ mpl.figure.prototype.mouse_event = function(event, name) {
     var x = canvas_pos.x;
     var y = canvas_pos.y;
 
-    this.send_message(name, {x: x, y: y, button: event.button});
+    this.send_message(name, {x: x, y: y, button: event.button,
+                             step: event.step});
 
     /* This prevents the web browser from automatically changing to
      * the text insertion cursor when the button is pressed.  We want

lib/matplotlib/backends/web_backend/nbagg_uat.ipynb

@@ -1,7 +1,7 @@
 {
  "metadata": {
   "name": "",
-  "signature": "sha256:43daeaae8ae9fd496fc33d7a64639194bc009b755d28c23cd6329f225628197c"
+  "signature": "sha256:7f7ec6a6e2a63837a45a88a501ba3c5b1eb88e744925456a9bfeb0d6faa896a5"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
@@ -400,9 +400,9 @@
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "### UAT 16 - key events\n",
+      "### UAT 16 - Events\n",
       "\n",
-      "Pressing any keyboard key or mouse button should cycle the line line while the figure has focus.  The figure should have focus by default when it is created and re-gain it by clicking on the canvas.  Clicking anywhere outside of the figure should release focus, but moving the mouse out of the figure should not release focus."
+      "Pressing any keyboard key or mouse button (or scrolling) should cycle the line line while the figure has focus.  The figure should have focus by default when it is created and re-gain it by clicking on the canvas.  Clicking anywhere outside of the figure should release focus, but moving the mouse out of the figure should not release focus."
      ]
     },
     {
@@ -423,6 +423,7 @@
       "    fig.canvas.draw_idle()\n",
       "fig.canvas.mpl_connect('button_press_event', on_event)\n",
       "fig.canvas.mpl_connect('key_press_event', on_event)\n",
+      "fig.canvas.mpl_connect('scroll_event', on_event)\n",
       "plt.show()"
      ],
      "language": "python",