Use Resize/MutationObserver to detect detach/attach/resize

Author: kurkle

docs/getting-started/integration.md

@@ -64,18 +64,3 @@ require(['moment'], function() {
     });
 });
 ```
-
-## Content Security Policy
-
-By default, Chart.js injects CSS directly into the DOM. For webpages secured using [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only `style-src 'self'` is allowed, the following CSS file needs to be manually added to your webpage:
-
-```html
-<link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">
-```
-
-And the style injection must be turned off **before creating the first chart**:
-
-```javascript
-// Disable automatic style injection
-Chart.platform.disableCSSInjection = true;
-```

docs/getting-started/v3-migration.md

@@ -88,6 +88,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 * `Chart.chart.chart`
 * `Chart.Controller`
 * `Chart.prototype.generateLegend`
+* `Chart.platform`
 * `Chart.types`
 * `Chart.Tooltip` is now provided by the tooltip plugin. The positioners can be accessed from `tooltipPlugin.positioners`
 * `DatasetController.addElementAndReset`
@@ -253,6 +254,6 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 #### Platform
 
-* `Chart.platform` is no longer the platform object used by charts. It contains only a single configuration option, `disableCSSInjection`. Every chart instance now has a separate platform instance.
+* `Chart.platform` is no longer the platform object used by charts. Every chart instance now has a separate platform instance.
 * `Chart.platforms` is an object that contains two usable platform classes, `BasicPlatform` and `DomPlatform`. It also contains `BasePlatform`, a class that all platforms must extend from.
 * If the canvas passed in is an instance of `OffscreenCanvas`, the `BasicPlatform` is automatically used.

package-lock.json

@@ -66,6 +66,7 @@
     "merge-stream": "^1.0.1",
     "moment": "^2.10.2",
     "pixelmatch": "^5.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rollup": "^1.31.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-cleanup": "^3.1.1",

package.json

@@ -7,7 +7,6 @@ const babel = require('rollup-plugin-babel');
 const cleanup = require('rollup-plugin-cleanup');
 const terser = require('rollup-plugin-terser').terser;
 const optional = require('./rollup.plugins').optional;
-const stylesheet = require('./rollup.plugins').stylesheet;
 const pkg = require('./package.json');
 
 const input = 'src/index.js';
@@ -29,13 +28,12 @@ module.exports = [
 			resolve(),
 			commonjs(),
 			babel(),
-			stylesheet({
-				extract: true
-			}),
 			optional({
 				include: ['moment']
 			}),
-			cleanup(),
+			cleanup({
+				sourcemap: true
+			})
 		],
 		output: {
 			name: 'Chart',
@@ -60,10 +58,6 @@ module.exports = [
 			optional({
 				include: ['moment']
 			}),
-			stylesheet({
-				extract: true,
-				minify: true
-			}),
 			terser({
 				output: {
 					preamble: banner
@@ -93,10 +87,7 @@ module.exports = [
 			resolve(),
 			commonjs(),
 			babel(),
-			stylesheet({
-				extract: true
-			}),
-			cleanup(),
+			cleanup()
 		],
 		output: {
 			name: 'Chart',
@@ -118,10 +109,6 @@ module.exports = [
 			resolve(),
 			commonjs(),
 			babel(),
-			stylesheet({
-				extract: true,
-				minify: true
-			}),
 			terser({
 				output: {
 					preamble: banner

rollup.config.js

@@ -244,9 +244,6 @@
 		items: [{
 			title: 'Progress bar',
 			path: 'advanced/progress-bar.html'
-		}, {
-			title: 'Content Security Policy',
-			path: 'advanced/content-security-policy.html'
 		}, {
 			title: 'Polar Area Radial Gradient',
 			path: 'advanced/radial-gradient.html'

samples/advanced/content-security-policy.css

@@ -7,6 +7,7 @@ import layouts from './core.layouts';
 import {BasicPlatform, DomPlatform} from '../platform/platforms';
 import plugins from './core.plugins';
 import scaleService from '../core/core.scaleService';
+import {getMaximumWidth, getMaximumHeight} from '../helpers/helpers.dom';
 
 /**
  * @typedef { import("../platform/platform.base").IEvent } IEvent
@@ -246,15 +247,16 @@ class Chart {
 		// Before init plugin notification
 		plugins.notify(me, 'beforeInit');
 
-		helpers.dom.retinaScale(me, me.options.devicePixelRatio);
-
-		me.bindEvents();
+		// helpers.dom.retinaScale(me, me.options.devicePixelRatio);
 
 		if (me.options.responsive) {
-			// Initial resize before chart draws (must be silent to preserve initial animations).
 			me.resize(true);
+		} else {
+			helpers.dom.retinaScale(me, me.options.devicePixelRatio);
 		}
 
+		me.bindEvents();
+
 		// After init plugin notification
 		plugins.notify(me, 'afterInit');
 
@@ -285,19 +287,23 @@ class Chart {
 		return this;
 	}
 
-	resize(silent) {
+	resize(silent, width, height) {
 		const me = this;
 		const options = me.options;
 		const canvas = me.canvas;
-		const aspectRatio = (options.maintainAspectRatio && me.aspectRatio) || null;
-		const oldRatio = me.currentDevicePixelRatio;
+		const aspectRatio = options.maintainAspectRatio && me.aspectRatio;
 
+		if (height === undefined) {
+			width = getMaximumWidth(canvas);
+			height = getMaximumHeight(canvas);
+		}
 		// the canvas render width and height will be casted to integers so make sure that
 		// the canvas display style uses the same integer values to avoid blurring effect.
+		const newWidth = Math.max(0, Math.floor(width));
+		const newHeight = Math.max(0, Math.floor(aspectRatio ? newWidth / aspectRatio : height));
 
-		// Set to 0 instead of canvas.size because the size defaults to 300x150 if the element is collapsed
-		const newWidth = Math.max(0, Math.floor(helpers.dom.getMaximumWidth(canvas)));
-		const newHeight = Math.max(0, Math.floor(aspectRatio ? newWidth / aspectRatio : helpers.dom.getMaximumHeight(canvas)));
+		// detect devicePixelRation changes
+		const oldRatio = me.currentDevicePixelRatio;
 		const newRatio = options.devicePixelRatio || me.platform.getDevicePixelRatio();
 
 		if (me.width === newWidth && me.height === newHeight && oldRatio === newRatio) {
@@ -903,7 +909,7 @@ class Chart {
 		if (canvas) {
 			me.unbindEvents();
 			helpers.canvas.clear(me);
-			me.platform.releaseContext(me.ctx);
+			me.platform.releaseContext(me, me.ctx);
 			me.canvas = null;
 			me.ctx = null;
 		}
@@ -932,13 +938,11 @@ class Chart {
 			listeners[type] = listener;
 		});
 
-		// Elements used to detect size change should not be injected for non responsive charts.
-		// See https://github.com/chartjs/Chart.js/issues/2210
 		if (me.options.responsive) {
-			listener = function() {
-				me.resize();
+			// resize
+			listener = function(width, height) {
+				me.resize(false, width, height);
 			};
-
 			me.platform.addEventListener(me, 'resize', listener);
 			listeners.resize = listener;
 		}