nbagg: Improve resizing code.

QuLogic · QuLogic · commit 6e8bda708142 · 2020-06-01T15:58:46.000-04:00
Directly resize the canvas when the container div is resized, instead of
waiting for the message round-trip to Python. Set a minimum size to
prevent positive-finite errors in the console.
diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js
@@ -115,6 +115,8 @@ mpl.figure.prototype._init_canvas = function () {
         'border: 1px solid #ddd;' +
             'box-sizing: content-box;' +
             'clear: both;' +
+            'min-height: 1px;' +
+            'min-width: 1px;' +
             'outline: 0;' +
             'overflow: hidden;' +
             'position: relative;' +
@@ -168,16 +170,32 @@ mpl.figure.prototype._init_canvas = function () {
         var nentries = entries.length;
         for (var i = 0; i < nentries; i++) {
             var entry = entries[i];
+            var width, height;
             if (entry.contentBoxSize) {
-                fig.request_resize(
-                    entry.contentBoxSize.inlineSize,
-                    entry.contentBoxSize.blockSize
-                );
+                width = entry.contentBoxSize.inlineSize;
+                height = entry.contentBoxSize.blockSize;
             } else {
-                fig.request_resize(
-                    entry.contentRect.width,
-                    entry.contentRect.height
-                );
+                width = entry.contentRect.width;
+                height = entry.contentRect.height;
+            }
+
+            // Keep the size of the canvas and rubber band canvas in sync with
+            // the canvas container.
+            canvas.setAttribute('width', width * mpl.ratio);
+            canvas.setAttribute('height', height * mpl.ratio);
+            canvas.setAttribute(
+                'style',
+                'width: ' + width + 'px; height: ' + height + 'px;'
+            );
+
+            rubberband_canvas.setAttribute('width', width);
+            rubberband_canvas.setAttribute('height', height);
+
+            // And update the size in Python. We ignore the initial 0/0 size
+            // that occurs as the element is placed into the DOM, which should
+            // otherwise not happen due to the minimum size styling.
+            if (width != 0 && height != 0) {
+                fig.request_resize(width, height);
             }
         }
     });
@@ -228,28 +246,12 @@ mpl.figure.prototype._init_canvas = function () {
     this.rubberband_context.strokeStyle = '#000000';
 
     this._resize_canvas = function (width, height, forward) {
-        // Keep the size of the canvas and rubber band canvas in sync with the
-        // canvas container.
         if (forward) {
             canvas_div.style.width = width + 'px';
             canvas_div.style.height = height + 'px';
         }
-
-        canvas.setAttribute('width', width * mpl.ratio);
-        canvas.setAttribute('height', height * mpl.ratio);
-        canvas.setAttribute(
-            'style',
-            'width: ' + width + 'px; height: ' + height + 'px;'
-        );
-
-        rubberband_canvas.setAttribute('width', width);
-        rubberband_canvas.setAttribute('height', height);
     };
 
-    // Set the figure to an initial 600x600px, this will subsequently be updated
-    // upon first draw.
-    this._resize_canvas(600, 600, true);
-
     // Disable right mouse context menu.
     this.rubberband_canvas.addEventListener('contextmenu', function (_e) {
         return false;
