Show pan/zoom toggle state in nbAgg/webagg toolbars.

This uses the 'active' Bootstrap style on nbagg, and colorizes the image
to tab:blue on webagg.

Author: QuLogic

lib/matplotlib/backends/backend_webagg_core.py

@@ -398,6 +398,14 @@ def save_figure(self, *args):
         """Save the current figure"""
         self.canvas.send_event('save')
 
+    def pan(self):
+        super().pan()
+        self.canvas.send_event('navigate_mode', mode=self.mode.name)
+
+    def zoom(self):
+        super().zoom()
+        self.canvas.send_event('navigate_mode', mode=self.mode.name)
+
     def set_history_buttons(self):
         can_backward = self._nav_stack._pos > 0
         can_forward = self._nav_stack._pos < len(self._nav_stack._elements) - 1

lib/matplotlib/backends/web_backend/css/mpl.css

@@ -34,6 +34,11 @@
   filter: contrast(0%);
 }
 
+.mpl-widget.active img {
+  /* Convert black to tab:blue, approximately */
+  filter: invert(34%) sepia(97%) saturate(468%) hue-rotate(162deg) brightness(96%) contrast(91%);
+}
+
 button.mpl-widget:focus,
 button.mpl-widget:hover {
   background-color: #ddd;

lib/matplotlib/backends/web_backend/js/mpl.js

@@ -436,6 +436,19 @@ mpl.figure.prototype.handle_history_buttons = function (fig, msg) {
     }
 };
 
+mpl.figure.prototype.handle_navigate_mode = function (fig, msg) {
+    if (msg['mode'] === 'PAN') {
+        fig.buttons['Pan'].classList.add('active');
+        fig.buttons['Zoom'].classList.remove('active');
+    } else if (msg['mode'] === 'ZOOM') {
+        fig.buttons['Pan'].classList.remove('active');
+        fig.buttons['Zoom'].classList.add('active');
+    } else {
+        fig.buttons['Pan'].classList.remove('active');
+        fig.buttons['Zoom'].classList.remove('active');
+    }
+};
+
 mpl.figure.prototype.updated_canvas_event = function () {
     // Called whenever the canvas gets updated.
     this.send_message('ack', {});