Merge pull request #18361 from QuLogic/nbagg-fig-ratio

tacaswell · web-flow · commit 705a1403d8bc · 2020-08-28T10:49:38.000-04:00
FIX: Store DPI ratio on figure instead of window for nbagg/webagg
diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js
@@ -62,8 +62,8 @@ mpl.figure = function (figure_id, websocket, ondownload, parent_element) {
     this.ws.onopen = function () {
         fig.send_message('supports_binary', { value: fig.supports_binary });
         fig.send_message('send_image_mode', {});
-        if (mpl.ratio !== 1) {
-            fig.send_message('set_dpi_ratio', { dpi_ratio: mpl.ratio });
+        if (fig.ratio !== 1) {
+            fig.send_message('set_dpi_ratio', { dpi_ratio: fig.ratio });
         }
         fig.send_message('refresh', {});
     };
@@ -156,7 +156,10 @@ mpl.figure.prototype._init_canvas = function () {
         this.context.backingStorePixelRatio ||
         1;
 
-    mpl.ratio = (window.devicePixelRatio || 1) / backingStore;
+    this.ratio = (window.devicePixelRatio || 1) / backingStore;
+    if (this.ratio !== 1) {
+        fig.send_message('set_dpi_ratio', { dpi_ratio: this.ratio });
+    }
 
     var rubberband_canvas = (this.rubberband_canvas = document.createElement(
         'canvas'
@@ -200,8 +203,8 @@ mpl.figure.prototype._init_canvas = function () {
                     entry.devicePixelContentBoxSize[0].blockSize
                 );
             } else {
-                canvas.setAttribute('width', width * mpl.ratio);
-                canvas.setAttribute('height', height * mpl.ratio);
+                canvas.setAttribute('width', width * fig.ratio);
+                canvas.setAttribute('height', height * fig.ratio);
             }
             canvas.setAttribute(
                 'style',
@@ -399,10 +402,10 @@ mpl.figure.prototype.handle_resize = function (fig, msg) {
 };
 
 mpl.figure.prototype.handle_rubberband = function (fig, msg) {
-    var x0 = msg['x0'] / mpl.ratio;
-    var y0 = (fig.canvas.height - msg['y0']) / mpl.ratio;
-    var x1 = msg['x1'] / mpl.ratio;
-    var y1 = (fig.canvas.height - msg['y1']) / mpl.ratio;
+    var x0 = msg['x0'] / fig.ratio;
+    var y0 = (fig.canvas.height - msg['y0']) / fig.ratio;
+    var x1 = msg['x1'] / fig.ratio;
+    var y1 = (fig.canvas.height - msg['y1']) / fig.ratio;
     x0 = Math.floor(x0) + 0.5;
     y0 = Math.floor(y0) + 0.5;
     x1 = Math.floor(x1) + 0.5;
@@ -415,8 +418,8 @@ mpl.figure.prototype.handle_rubberband = function (fig, msg) {
     fig.rubberband_context.clearRect(
         0,
         0,
-        fig.canvas.width / mpl.ratio,
-        fig.canvas.height / mpl.ratio
+        fig.canvas.width / fig.ratio,
+        fig.canvas.height / fig.ratio
     );
 
     fig.rubberband_context.strokeRect(min_x, min_y, width, height);
@@ -599,8 +602,8 @@ mpl.figure.prototype.mouse_event = function (event, name) {
         this.canvas_div.focus();
     }
 
-    var x = canvas_pos.x * mpl.ratio;
-    var y = canvas_pos.y * mpl.ratio;
+    var x = canvas_pos.x * this.ratio;
+    var y = canvas_pos.y * this.ratio;
 
     this.send_message(name, {
         x: x,
diff --git a/lib/matplotlib/backends/web_backend/js/nbagg_mpl.js b/lib/matplotlib/backends/web_backend/js/nbagg_mpl.js
@@ -51,7 +51,7 @@ mpl.mpl_figure_comm = function (comm, msg) {
 };
 
 mpl.figure.prototype.handle_close = function (fig, msg) {
-    var width = fig.canvas.width / mpl.ratio;
+    var width = fig.canvas.width / fig.ratio;
     fig.root.removeEventListener('remove', this._remove_fig_handler);
 
     // Update the output cell to use the data from the current canvas.
@@ -72,7 +72,7 @@ mpl.figure.prototype.close_ws = function (fig, msg) {
 
 mpl.figure.prototype.push_to_output = function (_remove_interactive) {
     // Turn the data on the canvas into data in the output cell.
-    var width = this.canvas.width / mpl.ratio;
+    var width = this.canvas.width / this.ratio;
     var dataURL = this.canvas.toDataURL();
     this.cell_info[1]['text/html'] =
         '<img src="' + dataURL + '" width="' + width + '">';
