Delay resize to just before draw when animating (#7989)

* Remove unused properties
* Delay resize to just before draw when animating
* Remove silent resize, update migration guide
* Fix typo in migrations doc

Co-authored-by: Evert Timberg <evert.timberg+github@gmail.com>

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 907390b85d5ecda9d3a3969196c6cf1ca896e4c9..ffdd121f74686240e5d4ec1ec5b8a77011f84116 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -366,6 +366,8 @@ The following public APIs were removed.
 
 The following private APIs were removed.
 
+* `Chart._bufferedRender`
+* `Chart._updating`
 * `Chart.data.datasets[datasetIndex]._meta`
 * `DatasetController._getIndexScaleId`
 * `DatasetController._getIndexScale`
@@ -457,6 +459,7 @@ The APIs listed in this section have changed in signature or behaviour from vers
 ##### Core Controller
 
 * The first parameter to `updateHoverStyle` is now an array of objects containing the `element`, `datasetIndex`, and `index`
+* The signature or `resize` changed, the first `silent` parameter was removed.
 
 ##### Dataset Controllers
 
@@ -492,3 +495,4 @@ All helpers are now exposed in a flat hierarchy, e.g., `Chart.helpers.canvas.cli
 
 * `afterDatasetsUpdate`, `afterUpdate`, `beforeDatasetsUpdate`, and `beforeUpdate` now receive `args` object as second argument. `options` argument is always the last and thus was moved from 2nd to 3rd place.
 * `afterEvent` and `beforeEvent` now receive a wrapped `event` as the second argument. The native event is available via `event.native`.
+* Initial `resize` is no longer silent. Meaning that `resize` event can fire between `beforeInit` and `afterInit`

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 13d3f8d0fbbbe24f83204a12ba8c39aceb2f14f3..f17aabb3afc70e720f93499a9cdb7dd61c7c242b 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -97,7 +97,6 @@ class Chart {
                this.height = height;
                this.aspectRatio = height ? width / height : null;
                this.options = config.options;
-               this._bufferedRender = false;
                this._layers = [];
                this._metasets = [];
                this.boxes = [];
@@ -108,7 +107,6 @@ class Chart {
                /** @type {{attach?: function, detach?: function, resize?: function}} */
                this._listeners = {};
                this._sortedMetasets = [];
-               this._updating = false;
                this.scales = {};
                this.scale = undefined;
                this._plugins = new PluginService();
@@ -157,8 +155,7 @@ class Chart {
                me._plugins.notify(me, 'beforeInit');
 
                if (me.options.responsive) {
-                       // Initial resize before chart draws (must be silent to preserve initial animations).
-                       me.resize(true);
+                       me.resize();
                } else {
                        retinaScale(me, me.options.devicePixelRatio);
                }
@@ -193,7 +190,15 @@ class Chart {
                return this;
        }
 
-       resize(silent, width, height) {
+       resize(width, height) {
+               if (!animator.running(this)) {
+                       this._resize(width, height);
+               } else {
+                       this._resizeBeforeDraw = {width, height};
+               }
+       }
+
+       _resize(width, height) {
                const me = this;
                const options = me.options;
                const canvas = me.canvas;
@@ -217,14 +222,12 @@ class Chart {
 
                retinaScale(me, newRatio);
 
-               if (!silent) {
-                       me._plugins.notify(me, 'resize', [newSize]);
+               me._plugins.notify(me, 'resize', [newSize]);
 
-                       callCallback(options.onResize, [newSize], me);
+               callCallback(options.onResize, [newSize], me);
 
-                       if (me.attached) {
-                               me.update('resize');
-                       }
+               if (me.attached) {
+                       me.update('resize');
                }
        }
 
@@ -426,8 +429,6 @@ class Chart {
                const args = {mode};
                let i, ilen;
 
-               me._updating = true;
-
                each(me.scales, (scale) => {
                        layouts.removeBox(me, scale);
                });
@@ -475,8 +476,6 @@ class Chart {
                }
 
                me.render();
-
-               me._updating = false;
        }
 
        /**
@@ -569,7 +568,11 @@ class Chart {
        draw() {
                const me = this;
                let i;
-
+               if (me._resizeBeforeDraw) {
+                       const {width, height} = me._resizeBeforeDraw;
+                       me._resize(width, height);
+                       me._resizeBeforeDraw = null;
+               }
                me.clear();
 
                if (me.width <= 0 || me.height <= 0) {
@@ -848,7 +851,7 @@ class Chart {
                if (me.options.responsive) {
                        listener = (width, height) => {
                                if (me.canvas) {
-                                       me.resize(false, width, height);
+                                       me.resize(width, height);
                                }
                        };
 

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 6192f9bdf33d187bb40b1163fcbba6e049760d6e..60a1a4b0ba2a0e21c875c787e683a87ecd7c059b 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -1289,6 +1289,7 @@ describe('Chart', function() {
                        var hooks = {
                                init: [
                                        'beforeInit',
+                                       'resize',
                                        'afterInit'
                                ],
                                update: [

diff --git a/types/core/index.d.ts b/types/core/index.d.ts
index 0b01d97609ca8a93e296c6717d6e761935eb7b02..f8b88351bcda84b5c9a7ef00def510e1ec103643 100644 (file)
--- a/types/core/index.d.ts
+++ b/types/core/index.d.ts
@@ -277,7 +277,7 @@ export declare class Chart<
        clear(): this;
        stop(): this;
 
-       resize(silent: boolean, width: number, height: number): void;
+       resize(width: number, height: number): void;
        ensureScalesHaveIDs(): void;
        buildOrUpdateScales(): void;
        buildOrUpdateControllers(): void;