From 43d36ce1735ce9efcdea41648e898f68e63ff889 Mon Sep 17 00:00:00 2001 From: Elliott Sales de Andrade Date: Thu, 9 Apr 2020 18:38:11 -0400 Subject: [PATCH 1/6] Replace jQuery UI resizable with ResizeObserver API. --- .../backends/backend_webagg_core.py | 7 ++- lib/matplotlib/backends/web_backend/js/mpl.js | 56 +++++++++++-------- 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/lib/matplotlib/backends/backend_webagg_core.py b/lib/matplotlib/backends/backend_webagg_core.py index 71f68ca52c6b..2155381fbd77 100644 --- a/lib/matplotlib/backends/backend_webagg_core.py +++ b/lib/matplotlib/backends/backend_webagg_core.py @@ -322,7 +322,7 @@ def handle_resize(self, event): # canvas size to the figure's new size (which is hopefully # identical or within a pixel or so). self._png_is_old = True - self.manager.resize(*fig.bbox.size) + self.manager.resize(*fig.bbox.size, forward=False) self.resize_event() def handle_send_image_mode(self, event): @@ -427,10 +427,11 @@ def _get_toolbar(self, canvas): toolbar = self.ToolbarCls(canvas) return toolbar - def resize(self, w, h): + def resize(self, w, h, forward=True): self._send_event( 'resize', - size=(w / self.canvas._dpi_ratio, h / self.canvas._dpi_ratio)) + size=(w / self.canvas._dpi_ratio, h / self.canvas._dpi_ratio), + forward=forward) def set_window_title(self, title): self._send_event('figure_label', label=title) diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js index c1455bbd9c5e..fadeeff7276a 100644 --- a/lib/matplotlib/backends/web_backend/js/mpl.js +++ b/lib/matplotlib/backends/web_backend/js/mpl.js @@ -112,7 +112,11 @@ mpl.figure.prototype._init_canvas = function () { var canvas_div = (this.canvas_div = document.createElement('div')); canvas_div.setAttribute( 'style', - 'position: relative; clear: both; outline: 0' + 'clear: both;' + + 'outline: 0;' + + 'overflow: hidden;' + + 'position: relative;' + + 'resize: both;' ); function on_keyboard_event_closure(name) { @@ -158,26 +162,28 @@ mpl.figure.prototype._init_canvas = function () { 'position: absolute; left: 0; top: 0; z-index: 1;' ); - var pass_mouse_events = true; - - $(canvas_div).resizable({ - start: function (_event, _ui) { - pass_mouse_events = false; - }, - resize: function (_event, ui) { - fig.request_resize(ui.size.width, ui.size.height); - }, - stop: function (_event, ui) { - pass_mouse_events = true; - fig.request_resize(ui.size.width, ui.size.height); - }, + var resizeObserver = new ResizeObserver(function (entries) { + var nentries = entries.length; + for (var i = 0; i < nentries; i++) { + var entry = entries[i]; + if (entry.contentBoxSize) { + fig.request_resize( + entry.contentBoxSize.inlineSize, + entry.contentBoxSize.blockSize + ); + } else { + fig.request_resize( + entry.contentRect.width, + entry.contentRect.height + ); + } + } }); + resizeObserver.observe(canvas_div); function on_mouse_event_closure(name) { return function (event) { - if (pass_mouse_events) { - return fig.mouse_event(event, name); - } + return fig.mouse_event(event, name); }; } @@ -219,11 +225,13 @@ mpl.figure.prototype._init_canvas = function () { this.rubberband_context = rubberband_canvas.getContext('2d'); this.rubberband_context.strokeStyle = '#000000'; - this._resize_canvas = function (width, height) { - // Keep the size of the canvas, canvas container, and rubber band - // canvas in synch. - canvas_div.style.width = width; - canvas_div.style.height = height; + 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); @@ -238,7 +246,7 @@ mpl.figure.prototype._init_canvas = function () { // Set the figure to an initial 600x600px, this will subsequently be updated // upon first draw. - this._resize_canvas(600, 600); + this._resize_canvas(600, 600, true); // Disable right mouse context menu. this.rubberband_canvas.addEventListener('contextmenu', function (_e) { @@ -360,7 +368,7 @@ mpl.figure.prototype.handle_save = function (fig, _msg) { mpl.figure.prototype.handle_resize = function (fig, msg) { var size = msg['size']; if (size[0] !== fig.canvas.width || size[1] !== fig.canvas.height) { - fig._resize_canvas(size[0], size[1]); + fig._resize_canvas(size[0], size[1], msg['forward']); fig.send_message('refresh', {}); } }; From 6c1606f80f69008a692aa32725102ef1efe37d42 Mon Sep 17 00:00:00 2001 From: Elliott Sales de Andrade Date: Thu, 9 Apr 2020 18:41:14 -0400 Subject: [PATCH 2/6] Embed minimal jQuery UI styling. We only really need clearfix, and some kind of style for the header. We could drop these entirely, but it's necessary to use these names for compatibility with the nbAgg styles. --- .../backends/web_backend/css/mpl.css | 21 +++++++++++++++++++ lib/matplotlib/backends/web_backend/js/mpl.js | 4 ++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/lib/matplotlib/backends/web_backend/css/mpl.css b/lib/matplotlib/backends/web_backend/css/mpl.css index 61ceb7163866..e55733d25ecf 100644 --- a/lib/matplotlib/backends/web_backend/css/mpl.css +++ b/lib/matplotlib/backends/web_backend/css/mpl.css @@ -1,3 +1,24 @@ +/* General styling */ +.ui-helper-clearfix:before, +.ui-helper-clearfix:after { + content: ""; + display: table; + border-collapse: collapse; +} +.ui-helper-clearfix:after { + clear: both; +} + +/* Header */ +.ui-widget-header { + border: 1px solid #dddddd; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: #e9e9e9; + color: #333333; + font-weight: bold; +} + /* Toolbar and items */ .mpl-toolbar { width: 100%; diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js index fadeeff7276a..d921b7752ad6 100644 --- a/lib/matplotlib/backends/web_backend/js/mpl.js +++ b/lib/matplotlib/backends/web_backend/js/mpl.js @@ -112,8 +112,8 @@ mpl.figure.prototype._init_canvas = function () { var canvas_div = (this.canvas_div = document.createElement('div')); canvas_div.setAttribute( 'style', - 'clear: both;' + - 'outline: 0;' + + 'border: 1px solid #ddd;' + + 'clear: both;' + 'overflow: hidden;' + 'position: relative;' + 'resize: both;' From 95fb2441110c00de55a4b2176ddb91b0834979dc Mon Sep 17 00:00:00 2001 From: Elliott Sales de Andrade Date: Thu, 9 Apr 2020 18:49:02 -0400 Subject: [PATCH 3/6] Remove jQuery and jQuery UI. It's now unused, except specfically in the IPython inline figure HTML, but we know it's available there. --- .gitignore | 2 - LICENSE/LICENSE_JQUERY | 61 ------------------- .../embedding_webagg_sgskip.py | 3 - .../backends/web_backend/all_figures.html | 3 - .../backends/web_backend/single_figure.html | 3 - setup.py | 57 +---------------- 6 files changed, 1 insertion(+), 128 deletions(-) delete mode 100644 LICENSE/LICENSE_JQUERY diff --git a/.gitignore b/.gitignore index 491c72e229b5..9634a3939793 100644 --- a/.gitignore +++ b/.gitignore @@ -102,7 +102,5 @@ lib/z.lib # Vendored dependencies # ######################### - -jquery-ui-*/ lib/matplotlib/backends/web_backend/node_modules/ lib/matplotlib/backends/web_backend/package-lock.json diff --git a/LICENSE/LICENSE_JQUERY b/LICENSE/LICENSE_JQUERY deleted file mode 100644 index f35387a3ab48..000000000000 --- a/LICENSE/LICENSE_JQUERY +++ /dev/null @@ -1,61 +0,0 @@ -Comment found in jQuery source code: - -/*! - * jQuery JavaScript Library v1.11.3 - * http://jquery.com/ - * - * Includes Sizzle.js - * http://sizzlejs.com/ - * - * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors - * Released under the MIT license - * http://jquery.org/license - * - * Date: 2015-04-28T16:19Z - */ - -Comment found in jQuery UI source code: - -/*! jQuery UI - v1.11.4 - 2015-03-11 -* http://jqueryui.com -* Includes: core.js, widget.js, mouse.js, position.js, accordion.js, autocomplete.js, button.js, datepicker.js, dialog.js, draggable.js, droppable.js, effect.js, effect-blind.js, effect-bounce.js, effect-clip.js, effect-drop.js, effect-explode.js, effect-fade.js, effect-fold.js, effect-highlight.js, effect-puff.js, effect-pulsate.js, effect-scale.js, effect-shake.js, effect-size.js, effect-slide.js, effect-transfer.js, menu.js, progressbar.js, resizable.js, selectable.js, selectmenu.js, slider.js, sortable.js, spinner.js, tabs.js, tooltip.js -* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */ - -Text found at http://jquery.org/license: - - jQuery Foundation projects are released under the terms of the license - specified in the project's repository or if not specified, under the - MIT license. - - The MIT License is simple and easy to understand and it places almost - no restrictions on what you can do with a jQuery Foundation project. - - You are free to use any jQuery Foundation project in any other project - (even commercial projects) as long as the copyright header is left - intact. - -The text links to https://tldrlegal.com/license/mit-license -which includes the following as the "Full License Text": - - The MIT License (MIT) - - Copyright (c) - - Permission is hereby granted, free of charge, to any person obtaining - a copy of this software and associated documentation files (the - "Software"), to deal in the Software without restriction, including - without limitation the rights to use, copy, modify, merge, publish, - distribute, sublicense, and/or sell copies of the Software, and to - permit persons to whom the Software is furnished to do so, subject to - the following conditions: - - The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE - LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION - OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION - WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/examples/user_interfaces/embedding_webagg_sgskip.py b/examples/user_interfaces/embedding_webagg_sgskip.py index 33cafb860d80..d4c0e7e9e6f2 100644 --- a/examples/user_interfaces/embedding_webagg_sgskip.py +++ b/examples/user_interfaces/embedding_webagg_sgskip.py @@ -60,9 +60,6 @@ def create_figure(): type="text/css" /> - - - - diff --git a/lib/matplotlib/backends/web_backend/single_figure.html b/lib/matplotlib/backends/web_backend/single_figure.html index 664cf57006fa..71fe451f6f14 100644 --- a/lib/matplotlib/backends/web_backend/single_figure.html +++ b/lib/matplotlib/backends/web_backend/single_figure.html @@ -4,9 +4,6 @@ - - -