Rewrite animation logic

Author: kurkle

.eslintrc.yml

@@ -1,6 +1,7 @@
 extends: chartjs
 
 env:
+  es6: true
   browser: true
   node: true
 

docs/configuration/tooltip.md

@@ -356,7 +356,7 @@ The tooltip model contains parameters that can be used to render the tooltip.
 
     // 0 opacity is a hidden tooltip
     opacity: number,
-    legendColorBackground: Color,
+    multiKeyBackground: Color,
     displayColors: boolean,
     borderColor: Color,
     borderWidth: number

docs/developers/api.md

@@ -175,5 +175,5 @@ Extensive examples of usage are available in the [Chart.js tests](https://github
 
 ```javascript
 var meta = myChart.getDatasetMeta(0);
-var x = meta.data[0]._model.x;
+var x = meta.data[0].x;
 ```

docs/developers/charts.md

@@ -94,13 +94,13 @@ var custom = Chart.controllers.bubble.extend({
         // Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
         var meta = this.getMeta();
         var pt0 = meta.data[0];
-        var radius = pt0._view.radius;
+        var radius = pt0.radius;
 
         var ctx = this.chart.chart.ctx;
         ctx.save();
         ctx.strokeStyle = 'red';
         ctx.lineWidth = 1;
-        ctx.strokeRect(pt0._view.x - radius, pt0._view.y - radius, 2 * radius, 2 * radius);
+        ctx.strokeRect(pt0.x - radius, pt0.y - radius, 2 * radius, 2 * radius);
         ctx.restore();
     }
 });

docs/getting-started/v3-migration.md

@@ -89,10 +89,8 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 
 * `Chart.data.datasets[datasetIndex]._meta`
 * `Element._ctx`
-* `Element._model.datasetLabel`
-* `Element._model.label`
-* `Point._model.tension`
-* `Point._model.steppedLine`
+* `Element._model`
+* `Element._view`
 * `TimeScale._getPixelForOffset`
 * `TimeScale.getLabelWidth`
 

src/controllers/controller.bar.js

@@ -30,7 +30,13 @@ defaults._set('global', {
 	datasets: {
 		bar: {
 			categoryPercentage: 0.8,
-			barPercentage: 0.9
+			barPercentage: 0.9,
+			animation: {
+				numbers: {
+					type: 'number',
+					properties: ['x', 'y', 'width', 'height']
+				}
+			}
 		}
 	}
 });
@@ -267,50 +273,53 @@ module.exports = DatasetController.extend({
 		meta.bar = true;
 	},
 
-	update: function(reset) {
+	update: function(mode) {
 		const me = this;
 		const rects = me._cachedMeta.data;
 
-		me.updateElements(rects, 0, rects.length, reset);
+		me.updateElements(rects, 0, rects.length, mode);
 	},
 
-	updateElements: function(rectangles, start, count, reset) {
+	updateElements: function(rectangles, start, count, mode) {
 		const me = this;
+		const reset = mode === 'reset';
 		const vscale = me._cachedMeta.vScale;
 		const base = vscale.getBasePixel();
 		const horizontal = vscale.isHorizontal();
 		const ruler = me.getRuler();
+		const firstOpts = me._resolveDataElementOptions(start, mode);
+		const sharedOptions = me._getSharedOptions(mode, rectangles[start], firstOpts);
+		const includeOptions = me._includeOptions(mode, sharedOptions);
+
 		let i;
 
 		for (i = 0; i < start + count; i++) {
-			const rectangle = rectangles[i];
-			const options = me._resolveDataElementOptions(i);
+			const options = me._resolveDataElementOptions(i, mode);
 			const vpixels = me.calculateBarValuePixels(i, options);
 			const ipixels = me.calculateBarIndexPixels(i, ruler, options);
 
-			rectangle._model = {
-				backgroundColor: options.backgroundColor,
-				borderColor: options.borderColor,
-				borderSkipped: options.borderSkipped,
-				borderWidth: options.borderWidth
+			const properties = {
+				horizontal,
+				base: reset ? base : vpixels.base,
+				x: horizontal ? reset ? base : vpixels.head : ipixels.center,
+				y: horizontal ? ipixels.center : reset ? base : vpixels.head,
+				height: horizontal ? ipixels.size : undefined,
+				width: horizontal ? undefined : ipixels.size
 			};
 
-			const model = rectangle._model;
-
 			// all borders are drawn for floating bar
+			/* TODO: float bars border skipping magic
 			if (me._getParsed(i)._custom) {
 				model.borderSkipped = null;
 			}
-
-			model.horizontal = horizontal;
-			model.base = reset ? base : vpixels.base;
-			model.x = horizontal ? reset ? base : vpixels.head : ipixels.center;
-			model.y = horizontal ? ipixels.center : reset ? base : vpixels.head;
-			model.height = horizontal ? ipixels.size : undefined;
-			model.width = horizontal ? undefined : ipixels.size;
-
-			rectangle.pivot(me.chart._animationsDisabled);
+			*/
+			if (includeOptions) {
+				properties.options = options;
+			}
+			me._updateElement(rectangles[i], i, properties, mode);
 		}
+
+		me._updateSharedOptions(sharedOptions, mode);
 	},
 
 	/**

src/controllers/controller.bubble.js

@@ -1,14 +1,18 @@
 'use strict';
 
-var DatasetController = require('../core/core.datasetController');
-var defaults = require('../core/core.defaults');
-var elements = require('../elements/index');
-var helpers = require('../helpers/index');
+const DatasetController = require('../core/core.datasetController');
+const defaults = require('../core/core.defaults');
+const elements = require('../elements/index');
+const helpers = require('../helpers/index');
 
-var valueOrDefault = helpers.valueOrDefault;
-var resolve = helpers.options.resolve;
+const resolve = helpers.options.resolve;
 
 defaults._set('bubble', {
+	animation: {
+		numbers: {
+			properties: ['x', 'y', 'borderWidth', 'radius']
+		}
+	},
 	scales: {
 		x: {
 			type: 'linear',
@@ -43,11 +47,8 @@ module.exports = DatasetController.extend({
 		'backgroundColor',
 		'borderColor',
 		'borderWidth',
-		'hoverBackgroundColor',
-		'hoverBorderColor',
-		'hoverBorderWidth',
-		'hoverRadius',
 		'hitRadius',
+		'radius',
 		'pointStyle',
 		'rotation'
 	],
@@ -77,15 +78,14 @@ module.exports = DatasetController.extend({
 	 * @private
 	 */
 	_getMaxOverflow: function() {
-		var me = this;
-		var meta = me._cachedMeta;
-		var data = meta.data || [];
-		if (!data.length) {
-			return false;
+		const me = this;
+		const meta = me._cachedMeta;
+		let i = (meta.data || []).length - 1;
+		let max = 0;
+		for (; i >= 0; --i) {
+			max = Math.max(max, me.getStyle(i, true).radius);
 		}
-		var firstPoint = data[0].size();
-		var lastPoint = data[data.length - 1].size();
-		return Math.max(firstPoint, lastPoint) / 2;
+		return max > 0 && max;
 	},
 
 	/**
@@ -109,72 +109,56 @@ module.exports = DatasetController.extend({
 	/**
 	 * @protected
 	 */
-	update: function(reset) {
+	update: function(mode) {
 		const me = this;
 		const points = me._cachedMeta.data;
 
 		// Update Points
-		me.updateElements(points, 0, points.length, reset);
+		me.updateElements(points, 0, points.length, mode);
 	},
 
 	/**
 	 * @protected
 	 */
-	updateElements: function(points, start, count, reset) {
+	updateElements: function(points, start, count, mode) {
 		const me = this;
+		const reset = mode === 'reset';
 		const {xScale, yScale} = me._cachedMeta;
+		const firstOpts = me._resolveDataElementOptions(start, mode);
+		const sharedOptions = me._getSharedOptions(mode, points[start], firstOpts);
+		const includeOptions = me._includeOptions(mode, sharedOptions);
 		let i;
 
 		for (i = start; i < start + count; i++) {
 			const point = points[i];
-			const options = me._resolveDataElementOptions(i);
 			const parsed = !reset && me._getParsed(i);
 			const x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(parsed[xScale.id]);
 			const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed[yScale.id]);
-
-			point._options = options;
-			point._model = {
-				backgroundColor: options.backgroundColor,
-				borderColor: options.borderColor,
-				borderWidth: options.borderWidth,
-				hitRadius: options.hitRadius,
-				pointStyle: options.pointStyle,
-				rotation: options.rotation,
-				radius: reset ? 0 : options.radius,
-				skip: isNaN(x) || isNaN(y),
-				x: x,
-				y: y,
+			const properties = {
+				x,
+				y,
+				skip: isNaN(x) || isNaN(y)
 			};
 
-			point.pivot(me.chart._animationsDisabled);
-		}
-	},
+			if (includeOptions) {
+				properties.options = i === start ? firstOpts
+					: me._resolveDataElementOptions(i, mode);
 
-	/**
-	 * @protected
-	 */
-	setHoverStyle: function(point) {
-		var model = point._model;
-		var options = point._options;
-		var getHoverColor = helpers.getHoverColor;
-
-		point.$previousStyle = {
-			backgroundColor: model.backgroundColor,
-			borderColor: model.borderColor,
-			borderWidth: model.borderWidth,
-			radius: model.radius
-		};
+				if (reset) {
+					properties.options.radius = 0;
+				}
+			}
 
-		model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
-		model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor));
-		model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
-		model.radius = options.radius + options.hoverRadius;
+			me._updateElement(point, i, properties, mode);
+		}
+
+		me._updateSharedOptions(sharedOptions, mode);
 	},
 
 	/**
 	 * @private
 	 */
-	_resolveDataElementOptions: function(index) {
+	_resolveDataElementOptions: function(index, mode) {
 		var me = this;
 		var chart = me.chart;
 		var dataset = me.getDataset();
@@ -190,12 +174,16 @@ module.exports = DatasetController.extend({
 		};
 
 		// In case values were cached (and thus frozen), we need to clone the values
-		if (me._cachedDataOpts === values) {
-			values = helpers.extend({}, values);
+		if (values.$shared) {
+			values = helpers.extend({}, values, {$shared: false});
 		}
 
+
 		// Custom radius resolution
-		values.radius = resolve([
+		if (mode !== 'active') {
+			values.radius = 0;
+		}
+		values.radius += resolve([
 			parsed && parsed._custom,
 			me._config.radius,
 			chart.options.elements.point.radius