Skip to content

Remove all resizing logic on the front-end #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 25, 2020
Merged

Remove all resizing logic on the front-end #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 17 additions & 23 deletions examples/ipympl.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
},
{
Expand Down Expand Up @@ -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",
Expand All @@ -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": {
Expand All @@ -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
}
79 changes: 3 additions & 76 deletions js/src/mpl_widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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() {
Expand Down Expand Up @@ -117,8 +118,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
this.el.appendChild(this.toolbar_view.el);
}
}

this.request_resize();
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, all those request_resize were useless and were causing flickering.

},

clear: function() {
Expand Down Expand Up @@ -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);
Expand All @@ -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 = {}) {
Expand Down Expand Up @@ -431,17 +369,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
}
},

processPhosphorMessage: function(msg) {
MPLCanvasView.__super__.processPhosphorMessage.apply(this, arguments);

switch (msg.type) {
case 'resize':
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want this, this was causing a redraw every time the plot container was resized in JupyterLab, but this redraw was useless (because the plot size is controlled by matplotlib, not JupyterLab), and it was causing some flickering.

this.request_resize();
break;
}
},


mouse_event: function(name) {
var that = this;
var last_update = 0;
Expand Down
34 changes: 1 addition & 33 deletions js/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}