diff --git a/examples/ipympl.ipynb b/examples/ipympl.ipynb index 0665d2f3..7aad88c7 100644 --- a/examples/ipympl.ipynb +++ b/examples/ipympl.ipynb @@ -26,9 +26,7 @@ { "cell_type": "code", "execution_count": null, - "metadata": { - "scrolled": false - }, + "metadata": {}, "outputs": [], "source": [ "# Testing matplotlib interactions with a simple plot\n", @@ -36,9 +34,18 @@ "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 } diff --git a/js/src/mpl_widget.js b/js/src/mpl_widget.js index d98526bb..4768b63b 100644 --- a/js/src/mpl_widget.js +++ b/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; diff --git a/js/src/utils.js b/js/src/utils.js index b96270e3..12058cdf 100644 --- a/js/src/utils.js +++ b/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 }