matplotlib
diff --git a/Collapse file
‎lib/matplotlib/backends/backend_webagg_core.py‎
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/backend_webagg_core.py
+8Lines changed: 8 additions & 0 deletions b/Collapse file
‎lib/matplotlib/backends/backend_webagg_core.py‎
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/backend_webagg_core.py
+8Lines changed: 8 additions & 0 deletions
diff --git a/Collapse file
‎lib/matplotlib/backends/web_backend/css/mpl.css‎
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/css/mpl.css
+5Lines changed: 5 additions & 0 deletions b/Collapse file
‎lib/matplotlib/backends/web_backend/css/mpl.css‎
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/css/mpl.css
+5Lines changed: 5 additions & 0 deletions
diff --git a/Collapse file
‎lib/matplotlib/backends/web_backend/js/mpl.js‎
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/js/mpl.js
+13Lines changed: 13 additions & 0 deletions b/Collapse file
‎lib/matplotlib/backends/web_backend/js/mpl.js‎
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/js/mpl.js
+13Lines changed: 13 additions & 0 deletions
@@ -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._active)
+
+    def zoom(self):
+        super().zoom()
+        self.canvas.send_event('navigate_mode', mode=self._active)
+
     def set_history_buttons(self):
         can_backward = self._nav_stack._pos > 0
         can_forward = self._nav_stack._pos < len(self._nav_stack._elements) - 1
 
@@ -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;
 
@@ -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', {});