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>

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`

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);
 				}
 			};
 

test/specs/core.controller.tests.js

@@ -1289,6 +1289,7 @@ describe('Chart', function() {
 			var hooks = {
 				init: [
 					'beforeInit',
+					'resize',
 					'afterInit'
 				],
 				update: [

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;