Merge pull request #174 from martinRenou/remove_resize

Remove all resizing logic on the front-end

Author: SylvainCorlay

examples/ipympl.ipynb

@@ -26,19 +26,26 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {
-    "scrolled": false
-   },
+   "metadata": {},
    "outputs": [],
    "source": [
     "# Testing matplotlib interactions with a simple plot\n",
     "\n",
     "import matplotlib.pyplot as plt\n",
     "import numpy as np\n",
     "\n",
-    "plt.figure(1)\n",
-    "plt.plot(np.sin(np.linspace(0, 20, 100)))\n",
-    "plt.show()"
+    "fig = plt.figure()\n",
+    "plt.plot(np.sin(np.linspace(0, 20, 100)))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fig.canvas.toolbar_visible = False\n",
+    "fig.canvas.header_visible = False"
    ]
   },
   {
@@ -144,7 +151,7 @@
     "    max=2.0\n",
     ")\n",
     "\n",
-    "fig = plt.figure(3)\n",
+    "fig = plt.figure()\n",
     "\n",
     "x = np.linspace(0, 20, 500)\n",
     "\n",
@@ -156,23 +163,10 @@
     "    fig.canvas.flush_events()\n",
     "\n",
     "slider.observe(update_lines, names='value')\n",
+    "fig.canvas.toolbar_visible = False\n",
     "\n",
     "HBox([slider, fig.canvas])"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {
@@ -191,9 +185,9 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.3"
+   "version": "3.8.1"
   }
  },
  "nbformat": 4,
- "nbformat_minor": 2
+ "nbformat_minor": 4
 }

js/src/mpl_widget.js

@@ -55,6 +55,9 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
 
             that.update_toolbar_position();
 
+            that.update_header_visible();
+            that.update_toolbar_visible();
+
             that.model_events();
 
             that.send_initialization_message();
@@ -80,12 +83,10 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
 
     update_header_visible: function() {
         this.header.style.display = this.model.get('header_visible') ? '': 'none';
-        this.request_resize();
     },
 
     update_toolbar_visible: function() {
         this.toolbar_view.el.style.display = this.model.get('toolbar_visible') ? '' : 'none';
-        this.request_resize();
     },
 
     update_toolbar_position: function() {
@@ -117,8 +118,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
                 this.el.appendChild(this.toolbar_view.el);
             }
         }
-
-        this.request_resize();
     },
 
     clear: function() {
@@ -227,60 +226,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
         this.figure.appendChild(this.footer);
     },
 
-    _calculate_decorations_size: function() {
-        // Calculate the size of the decorations on the figure.
-        var decorations_width = 0;
-        var decorations_height = 0;
-
-        // Toolbar size
-        var toolbar_position = this.model.get('toolbar_position');
-        if (toolbar_position == 'top' || toolbar_position == 'bottom') {
-            decorations_height += utils.get_full_size(this.toolbar_view.el).height;
-        } else {
-            decorations_width += utils.get_full_size(this.toolbar_view.el).width;
-        }
-
-        // Label sizes
-        decorations_height += utils.get_full_size(this.header).height;
-        decorations_height += utils.get_full_size(this.footer).height;
-
-        // Margins on the canvas
-        var canvas_div_margins = utils.get_margin_size(this.canvas_div);
-        decorations_width += canvas_div_margins.width;
-        decorations_height += canvas_div_margins.height;
-
-        // Margins on the figure div
-        var figure_margins = utils.get_margin_size(this.figure);
-        decorations_width += figure_margins.width;
-        decorations_height += figure_margins.height;
-
-        return {
-            width: decorations_width,
-            height: decorations_height
-        };
-    },
-
-    request_resize: function() {
-        // Ensure that the image already exists. We ignore the first calls to resize
-        // because we want the widget to first adapt to the figure size set in
-        // matplotlib.
-        if (!this.image.src) {
-            return;
-        }
-
-        // Using the given widget size, figure out how big the canvas should be.
-        var decorations_size = this._calculate_decorations_size();
-
-        var new_canvas_width = this.el.clientWidth - decorations_size.width;
-        var new_canvas_height = this.el.clientHeight - decorations_size.height;
-
-        // Ensure that the canvas size is a positive number.
-        new_canvas_width = new_canvas_width < 1 ? 1 : new_canvas_width;
-        new_canvas_height = new_canvas_height < 1 ? 1 : new_canvas_height;
-
-        this.send_message('resize', {'width': new_canvas_width, 'height': new_canvas_height});
-    },
-
     _resize_canvas: function(width, height) {
         // Keep the size of the canvas, and rubber band canvas in sync.
         this.canvas.setAttribute('width', width * this.ratio);
@@ -292,13 +237,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
 
         this.canvas_div.style.width = width + 'px';
         this.canvas_div.style.height = height + 'px';
-
-        // Figure out the widget size.
-        var decorations_size = this._calculate_decorations_size();
-
-        // Reset the widget size to adapt to this figure.
-        this.el.style.width = width + decorations_size.width + 'px';
-        this.el.style.height = height + decorations_size.height + 'px';
     },
 
     send_message: function(type, message = {}) {
@@ -431,17 +369,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
         }
     },
 
-    processPhosphorMessage: function(msg) {
-        MPLCanvasView.__super__.processPhosphorMessage.apply(this, arguments);
-
-        switch (msg.type) {
-        case 'resize':
-            this.request_resize();
-            break;
-        }
-    },
-
-
     mouse_event: function(name) {
         var that = this;
         var last_update = 0;

js/src/utils.js

@@ -41,41 +41,9 @@ function get_simple_keys(original) {
     }, {});
 }
 
-/*
- * Return the total size of the margins for an element in both width and height.
- */
-function get_margin_size(el) {
-    var style = getComputedStyle(el);
-
-    var margin_width = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-    var margin_height = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
-
-    return {
-        width: margin_width,
-        height: margin_height,
-    };
-}
-
-
-/*
- * Return the full size of an element, including margins.
- */
-function get_full_size(el) {
-    var margin_size = get_margin_size(el);
-
-    var full_width = el.scrollWidth + margin_size.width;
-    var full_height = el.scrollHeight + margin_size.height;
-
-    return {
-        width: full_width,
-        height: full_height,
-    };
-}
 
 module.exports = {
   offset: offset,
   get_mouse_position: get_mouse_position,
-  get_simple_keys: get_simple_keys,
-  get_margin_size: get_margin_size,
-  get_full_size: get_full_size,
+  get_simple_keys: get_simple_keys
 }