Option resolution with proxies

Author: kurkle

samples/animations/delay.html

@@ -62,29 +62,23 @@
 
 		};
 		window.onload = function() {
+			var delayed = false;
 			var ctx = document.getElementById('canvas').getContext('2d');
 			window.myBar = new Chart(ctx, {
 				type: 'bar',
 				data: barChartData,
 				options: {
-					animation: (context) => {
-						if (context.active) {
-							return {
-								duration: 400
-							};
-						}
-						var delay = 0;
-						var dsIndex = context.datasetIndex;
-						var index = context.dataIndex;
-						if (context.parsed && !context.delayed) {
-							delay = index * 300 + dsIndex * 100;
-							context.delayed = true;
-						}
-						return {
-							easing: 'linear',
-							duration: 600,
-							delay
-						};
+					animation: {
+						onComplete: () => {
+							delayed = true;
+						},
+						delay: (context) => {
+							let delay = 0;
+							if (context.type === 'data' && context.mode === 'default' && !delayed) {
+								delay = context.dataIndex * 300 + context.datasetIndex * 100;
+							}
+							return delay;
+						},
 					},
 					plugins: {
 						title: {

samples/animations/loop.html

@@ -62,16 +62,13 @@
 				}]
 			},
 			options: {
-				animation: (context) => Object.assign({},
-					Chart.defaults.animation,
-					{
-						radius: {
-							duration: 400,
-							easing: 'linear',
-							loop: context.active
-						}
+				animation: {
+					radius: {
+						duration: 400,
+						easing: 'linear',
+						loop: (context) => context.active
 					}
-				),
+				},
 				elements: {
 					point: {
 						hoverRadius: 6

src/controllers/controller.bar.js

@@ -266,9 +266,8 @@ export default class BarController extends DatasetController {
 		me.updateSharedOptions(sharedOptions, mode, firstOpts);
 
 		for (let i = start; i < start + count; i++) {
-			const options = sharedOptions || me.resolveDataElementOptions(i, mode);
-			const vpixels = me._calculateBarValuePixels(i, options);
-			const ipixels = me._calculateBarIndexPixels(i, ruler, options);
+			const vpixels = me._calculateBarValuePixels(i);
+			const ipixels = me._calculateBarIndexPixels(i, ruler);
 
 			const properties = {
 				horizontal,
@@ -280,7 +279,7 @@ export default class BarController extends DatasetController {
 			};
 
 			if (includeOptions) {
-				properties.options = options;
+				properties.options = sharedOptions || me.resolveDataElementOptions(i, mode);
 			}
 			me.updateElement(bars[i], i, properties, mode);
 		}
@@ -400,11 +399,11 @@ export default class BarController extends DatasetController {
 	 * Note: pixel values are not clamped to the scale area.
 	 * @private
 	 */
-	_calculateBarValuePixels(index, options) {
+	_calculateBarValuePixels(index) {
 		const me = this;
 		const meta = me._cachedMeta;
 		const vScale = meta.vScale;
-		const {base: baseValue, minBarLength} = options;
+		const {base: baseValue, minBarLength} = me.options;
 		const parsed = me.getParsed(index);
 		const custom = parsed._custom;
 		const floating = isFloatBar(custom);
@@ -459,9 +458,10 @@ export default class BarController extends DatasetController {
 	/**
 	 * @private
 	 */
-	_calculateBarIndexPixels(index, ruler, options) {
+	_calculateBarIndexPixels(index, ruler) {
 		const me = this;
-		const stackCount = me.chart.options.skipNull ? me._getStackCount(index) : ruler.stackCount;
+		const options = me.options;
+		const stackCount = options.skipNull ? me._getStackCount(index) : ruler.stackCount;
 		const range = options.barThickness === 'flex'
 			? computeFlexCategoryTraits(index, ruler, options, stackCount)
 			: computeFitCategoryTraits(index, ruler, options, stackCount);
@@ -510,20 +510,7 @@ BarController.id = 'bar';
 BarController.defaults = {
 	datasetElementType: false,
 	dataElementType: 'bar',
-	dataElementOptions: [
-		'backgroundColor',
-		'borderColor',
-		'borderSkipped',
-		'borderWidth',
-		'borderRadius',
-		'barPercentage',
-		'barThickness',
-		'base',
-		'categoryPercentage',
-		'maxBarThickness',
-		'minBarLength',
-		'pointStyle'
-	],
+
 	interaction: {
 		mode: 'index'
 	},

src/controllers/controller.bubble.js

@@ -1,6 +1,5 @@
 import DatasetController from '../core/core.datasetController';
-import {resolve} from '../helpers/helpers.options';
-import {resolveObjectKey} from '../helpers/helpers.core';
+import {resolveObjectKey, valueOrDefault} from '../helpers/helpers.core';
 
 export default class BubbleController extends DatasetController {
 	initialize() {
@@ -107,29 +106,20 @@ export default class BubbleController extends DatasetController {
 	 * @protected
 	 */
 	resolveDataElementOptions(index, mode) {
-		const me = this;
-		const chart = me.chart;
-		const parsed = me.getParsed(index);
+		const parsed = this.getParsed(index);
 		let values = super.resolveDataElementOptions(index, mode);
 
-		// Scriptable options
-		const context = me.getContext(index, mode === 'active');
-
 		// In case values were cached (and thus frozen), we need to clone the values
 		if (values.$shared) {
 			values = Object.assign({}, values, {$shared: false});
 		}
 
-
 		// Custom radius resolution
+		const radius = values.radius;
 		if (mode !== 'active') {
 			values.radius = 0;
 		}
-		values.radius += resolve([
-			parsed && parsed._custom,
-			me._config.radius,
-			chart.options.elements.point.radius
-		], context, index);
+		values.radius += valueOrDefault(parsed && parsed._custom, radius);
 
 		return values;
 	}
@@ -143,15 +133,6 @@ BubbleController.id = 'bubble';
 BubbleController.defaults = {
 	datasetElementType: false,
 	dataElementType: 'point',
-	dataElementOptions: [
-		'backgroundColor',
-		'borderColor',
-		'borderWidth',
-		'hitRadius',
-		'radius',
-		'pointStyle',
-		'rotation'
-	],
 	animation: {
 		numbers: {
 			properties: ['x', 'y', 'borderWidth', 'radius']
@@ -168,6 +149,7 @@ BubbleController.defaults = {
 	plugins: {
 		tooltip: {
 			callbacks: {
+				_scriptable: false,
 				title() {
 					// Title doesn't make sense for scatter since we format the data as a point
 					return '';

src/controllers/controller.doughnut.js

@@ -81,14 +81,14 @@ export default class DoughnutController extends DatasetController {
 	 * @private
 	 */
 	_getRotation() {
-		return toRadians(valueOrDefault(this._config.rotation, this.chart.options.rotation) - 90);
+		return toRadians(this.options.rotation - 90);
 	}
 
 	/**
 	 * @private
 	 */
 	_getCircumference() {
-		return toRadians(valueOrDefault(this._config.circumference, this.chart.options.circumference));
+		return toRadians(this.options.circumference);
 	}
 
 	/**
@@ -124,10 +124,10 @@ export default class DoughnutController extends DatasetController {
 	update(mode) {
 		const me = this;
 		const chart = me.chart;
-		const {chartArea, options} = chart;
+		const {chartArea} = chart;
 		const meta = me._cachedMeta;
 		const arcs = meta.data;
-		const cutout = options.cutoutPercentage / 100 || 0;
+		const cutout = me.options.cutoutPercentage / 100 || 0;
 		const chartWeight = me._getRingWeight(me.index);
 
 		// Compute the maximal rotation & circumference limits.
@@ -157,7 +157,7 @@ export default class DoughnutController extends DatasetController {
 	 */
 	_circumference(i, reset) {
 		const me = this;
-		const opts = me.chart.options;
+		const opts = me.options;
 		const meta = me._cachedMeta;
 		const circumference = me._getCircumference();
 		return reset && opts.animation.animateRotate ? 0 : this.chart.getDataVisibility(i) ? me.calculateCircumference(meta._parsed[i] * circumference / TAU) : 0;
@@ -328,13 +328,6 @@ DoughnutController.id = 'doughnut';
 DoughnutController.defaults = {
 	datasetElementType: false,
 	dataElementType: 'arc',
-	dataElementOptions: [
-		'backgroundColor',
-		'borderColor',
-		'borderWidth',
-		'borderAlign',
-		'offset'
-	],
 	animation: {
 		numbers: {
 			type: 'number',
@@ -347,19 +340,22 @@ DoughnutController.defaults = {
 	},
 	aspectRatio: 1,
 
-	// The percentage of the chart that we cut out of the middle.
-	cutoutPercentage: 50,
+	datasets: {
+		// The percentage of the chart that we cut out of the middle.
+		cutoutPercentage: 50,
 
-	// The rotation of the chart, where the first data arc begins.
-	rotation: 0,
+		// The rotation of the chart, where the first data arc begins.
+		rotation: 0,
 
-	// The total circumference of the chart.
-	circumference: 360,
+		// The total circumference of the chart.
+		circumference: 360
+	},
 
 	// Need to override these to give a nice default
 	plugins: {
 		legend: {
 			labels: {
+				_scriptable: false,
 				generateLabels(chart) {
 					const data = chart.data;
 					if (data.labels.length && data.datasets.length) {
@@ -390,6 +386,7 @@ DoughnutController.defaults = {
 		},
 		tooltip: {
 			callbacks: {
+				_scriptable: false,
 				title() {
 					return '';
 				},

src/controllers/controller.line.js

@@ -1,7 +1,5 @@
 import DatasetController from '../core/core.datasetController';
-import {valueOrDefault} from '../helpers/helpers.core';
 import {isNumber, _limitValue} from '../helpers/helpers.math';
-import {resolve} from '../helpers/helpers.options';
 import {_lookupByKey} from '../helpers/helpers.collection';
 
 export default class LineController extends DatasetController {
@@ -32,9 +30,13 @@ export default class LineController extends DatasetController {
 
 		// In resize mode only point locations change, so no need to set the options.
 		if (mode !== 'resize') {
+			const options = me.resolveDatasetElementOptions(mode);
+			if (!me.options.showLine) {
+				options.borderWidth = 0;
+			}
 			me.updateElement(line, undefined, {
 				animated: !animationsDisabled,
-				options: me.resolveDatasetElementOptions()
+				options
 			}, mode);
 		}
 
@@ -49,7 +51,7 @@ export default class LineController extends DatasetController {
 		const firstOpts = me.resolveDataElementOptions(start, mode);
 		const sharedOptions = me.getSharedOptions(firstOpts);
 		const includeOptions = me.includeOptions(mode, sharedOptions);
-		const spanGaps = valueOrDefault(me._config.spanGaps, me.chart.options.spanGaps);
+		const spanGaps = me.options.spanGaps;
 		const maxGapLength = isNumber(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
 		const directUpdate = me.chart._animationsDisabled || reset || mode === 'none';
 		let prevParsed = start > 0 && me.getParsed(start - 1);
@@ -77,32 +79,6 @@ export default class LineController extends DatasetController {
 		me.updateSharedOptions(sharedOptions, mode, firstOpts);
 	}
 
-	/**
-	 * @param {boolean} [active]
-	 * @protected
-	 */
-	resolveDatasetElementOptions(active) {
-		const me = this;
-		const config = me._config;
-		const options = me.chart.options;
-		const lineOptions = options.elements.line;
-		const values = super.resolveDatasetElementOptions(active);
-		const showLine = valueOrDefault(config.showLine, options.showLine);
-
-		// The default behavior of lines is to break at null values, according
-		// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
-		// This option gives lines the ability to span gaps
-		values.spanGaps = valueOrDefault(config.spanGaps, options.spanGaps);
-		values.tension = valueOrDefault(config.tension, lineOptions.tension);
-		values.stepped = resolve([config.stepped, lineOptions.stepped]);
-
-		if (!showLine) {
-			values.borderWidth = 0;
-		}
-
-		return values;
-	}
-
 	/**
 	 * @protected
 	 */
@@ -132,37 +108,12 @@ LineController.id = 'line';
  */
 LineController.defaults = {
 	datasetElementType: 'line',
-	datasetElementOptions: [
-		'backgroundColor',
-		'borderCapStyle',
-		'borderColor',
-		'borderDash',
-		'borderDashOffset',
-		'borderJoinStyle',
-		'borderWidth',
-		'capBezierPoints',
-		'cubicInterpolationMode',
-		'fill'
-	],
-
 	dataElementType: 'point',
-	dataElementOptions: {
-		backgroundColor: 'pointBackgroundColor',
-		borderColor: 'pointBorderColor',
-		borderWidth: 'pointBorderWidth',
-		hitRadius: 'pointHitRadius',
-		hoverHitRadius: 'pointHitRadius',
-		hoverBackgroundColor: 'pointHoverBackgroundColor',
-		hoverBorderColor: 'pointHoverBorderColor',
-		hoverBorderWidth: 'pointHoverBorderWidth',
-		hoverRadius: 'pointHoverRadius',
-		pointStyle: 'pointStyle',
-		radius: 'pointRadius',
-		rotation: 'pointRotation'
-	},
 
-	showLine: true,
-	spanGaps: false,
+	datasets: {
+		showLine: true,
+		spanGaps: false,
+	},
 
 	interaction: {
 		mode: 'index'