Fix remaining handleEvent issues

Author: kurkle

docs/getting-started/v3-migration.md

@@ -86,10 +86,16 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 ### Removed
 
+* `Chart.borderWidth`
 * `Chart.chart.chart`
 * `Chart.Controller`
+* `Chart.innerRadius`
+* `Chart.offsetX`
+* `Chart.offsetY`
+* `Chart.outerRadius`
 * `Chart.prototype.generateLegend`
 * `Chart.platform`. It only contained `disableCSSInjection`. CSS is never injected in v3.
+* `Chart.radiusLength`
 * `Chart.types`
 * `Chart.Tooltip` is now provided by the tooltip plugin. The positioners can be accessed from `tooltipPlugin.positioners`
 * `DatasetController.addElementAndReset`

src/controllers/controller.doughnut.js

@@ -3,6 +3,10 @@ import defaults from '../core/core.defaults';
 import Arc from '../elements/element.arc';
 import {isArray, valueOrDefault} from '../helpers/helpers.core';
 
+/**
+ * @typedef { import("../core/core.controller").default } Chart
+ */
+
 const PI = Math.PI;
 const DOUBLE_PI = PI * 2;
 const HALF_PI = PI / 2;
@@ -94,13 +98,45 @@ defaults.set('doughnut', {
 	}
 });
 
+function getRatioAndOffset(rotation, circumference, cutout) {
+	let ratioX = 1;
+	let ratioY = 1;
+	let offsetX = 0;
+	let offsetY = 0;
+	// If the chart's circumference isn't a full circle, calculate size as a ratio of the width/height of the arc
+	if (circumference < DOUBLE_PI) {
+		let startAngle = rotation % DOUBLE_PI;
+		startAngle += startAngle >= PI ? -DOUBLE_PI : startAngle < -PI ? DOUBLE_PI : 0;
+		const endAngle = startAngle + circumference;
+		const startX = Math.cos(startAngle);
+		const startY = Math.sin(startAngle);
+		const endX = Math.cos(endAngle);
+		const endY = Math.sin(endAngle);
+		const contains0 = (startAngle <= 0 && endAngle >= 0) || endAngle >= DOUBLE_PI;
+		const contains90 = (startAngle <= HALF_PI && endAngle >= HALF_PI) || endAngle >= DOUBLE_PI + HALF_PI;
+		const contains180 = startAngle === -PI || endAngle >= PI;
+		const contains270 = (startAngle <= -HALF_PI && endAngle >= -HALF_PI) || endAngle >= PI + HALF_PI;
+		const minX = contains180 ? -1 : Math.min(startX, startX * cutout, endX, endX * cutout);
+		const minY = contains270 ? -1 : Math.min(startY, startY * cutout, endY, endY * cutout);
+		const maxX = contains0 ? 1 : Math.max(startX, startX * cutout, endX, endX * cutout);
+		const maxY = contains90 ? 1 : Math.max(startY, startY * cutout, endY, endY * cutout);
+		ratioX = (maxX - minX) / 2;
+		ratioY = (maxY - minY) / 2;
+		offsetX = -(maxX + minX) / 2;
+		offsetY = -(maxY + minY) / 2;
+	}
+	return {ratioX, ratioY, offsetX, offsetY};
+}
+
 class DoughnutController extends DatasetController {
 
 	constructor(chart, datasetIndex) {
 		super(chart, datasetIndex);
 
 		this.innerRadius = undefined;
 		this.outerRadius = undefined;
+		this.offsetX = undefined;
+		this.offsetY = undefined;
 	}
 
 	linkScales() {}
@@ -131,61 +167,31 @@ class DoughnutController extends DatasetController {
 		return ringIndex;
 	}
 
+	/**
+	 * @param {string} mode
+	 */
 	update(mode) {
 		const me = this;
 		const chart = me.chart;
-		const chartArea = chart.chartArea;
-		const opts = chart.options;
-		let ratioX = 1;
-		let ratioY = 1;
-		let offsetX = 0;
-		let offsetY = 0;
+		const {chartArea, options} = chart;
 		const meta = me._cachedMeta;
 		const arcs = meta.data;
-		const cutout = opts.cutoutPercentage / 100 || 0;
-		const circumference = opts.circumference;
+		const cutout = options.cutoutPercentage / 100 || 0;
 		const chartWeight = me._getRingWeight(me.index);
-
-		// If the chart's circumference isn't a full circle, calculate size as a ratio of the width/height of the arc
-		if (circumference < DOUBLE_PI) {
-			let startAngle = opts.rotation % DOUBLE_PI;
-			startAngle += startAngle >= PI ? -DOUBLE_PI : startAngle < -PI ? DOUBLE_PI : 0;
-			const endAngle = startAngle + circumference;
-			const startX = Math.cos(startAngle);
-			const startY = Math.sin(startAngle);
-			const endX = Math.cos(endAngle);
-			const endY = Math.sin(endAngle);
-			const contains0 = (startAngle <= 0 && endAngle >= 0) || endAngle >= DOUBLE_PI;
-			const contains90 = (startAngle <= HALF_PI && endAngle >= HALF_PI) || endAngle >= DOUBLE_PI + HALF_PI;
-			const contains180 = startAngle === -PI || endAngle >= PI;
-			const contains270 = (startAngle <= -HALF_PI && endAngle >= -HALF_PI) || endAngle >= PI + HALF_PI;
-			const minX = contains180 ? -1 : Math.min(startX, startX * cutout, endX, endX * cutout);
-			const minY = contains270 ? -1 : Math.min(startY, startY * cutout, endY, endY * cutout);
-			const maxX = contains0 ? 1 : Math.max(startX, startX * cutout, endX, endX * cutout);
-			const maxY = contains90 ? 1 : Math.max(startY, startY * cutout, endY, endY * cutout);
-			ratioX = (maxX - minX) / 2;
-			ratioY = (maxY - minY) / 2;
-			offsetX = -(maxX + minX) / 2;
-			offsetY = -(maxY + minY) / 2;
-		}
-
-		for (let i = 0, ilen = arcs.length; i < ilen; ++i) {
-			arcs[i]._options = me._resolveDataElementOptions(i, mode);
-		}
-
-		chart.borderWidth = me.getMaxBorderWidth();
-		const maxWidth = (chartArea.right - chartArea.left - chart.borderWidth) / ratioX;
-		const maxHeight = (chartArea.bottom - chartArea.top - chart.borderWidth) / ratioY;
-		chart.outerRadius = Math.max(Math.min(maxWidth, maxHeight) / 2, 0);
-		chart.innerRadius = Math.max(chart.outerRadius * cutout, 0);
-		chart.radiusLength = (chart.outerRadius - chart.innerRadius) / (me._getVisibleDatasetWeightTotal() || 1);
-		chart.offsetX = offsetX * chart.outerRadius;
-		chart.offsetY = offsetY * chart.outerRadius;
+		const {ratioX, ratioY, offsetX, offsetY} = getRatioAndOffset(options.rotation, options.circumference, cutout);
+		const borderWidth = me.getMaxBorderWidth();
+		const maxWidth = (chartArea.right - chartArea.left - borderWidth) / ratioX;
+		const maxHeight = (chartArea.bottom - chartArea.top - borderWidth) / ratioY;
+		const outerRadius = Math.max(Math.min(maxWidth, maxHeight) / 2, 0);
+		const innerRadius = Math.max(outerRadius * cutout, 0);
+		const radiusLength = (outerRadius - innerRadius) / (me._getVisibleDatasetWeightTotal() || 1);
+		me.offsetX = offsetX * outerRadius;
+		me.offsetY = offsetY * outerRadius;
 
 		meta.total = me.calculateTotal();
 
-		me.outerRadius = chart.outerRadius - chart.radiusLength * me._getRingWeightOffset(me.index);
-		me.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0);
+		me.outerRadius = outerRadius - radiusLength * me._getRingWeightOffset(me.index);
+		me.innerRadius = Math.max(me.outerRadius - radiusLength * chartWeight, 0);
 
 		me.updateElements(arcs, 0, mode);
 	}
@@ -211,6 +217,9 @@ class DoughnutController extends DatasetController {
 		const centerY = (chartArea.top + chartArea.bottom) / 2;
 		const innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
 		const outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;
+		const firstOpts = me._resolveDataElementOptions(start, mode);
+		const sharedOptions = me._getSharedOptions(mode, arcs[start], firstOpts);
+		const includeOptions = me._includeOptions(mode, sharedOptions);
 		let startAngle = opts.rotation;
 		let i;
 
@@ -222,21 +231,23 @@ class DoughnutController extends DatasetController {
 			const index = start + i;
 			const circumference = me._circumference(index, reset);
 			const arc = arcs[i];
-			const options = arc._options || {};
 			const properties = {
-				x: centerX + chart.offsetX,
-				y: centerY + chart.offsetY,
+				x: centerX + me.offsetX,
+				y: centerY + me.offsetY,
 				startAngle,
 				endAngle: startAngle + circumference,
 				circumference,
 				outerRadius,
-				innerRadius,
-				options
+				innerRadius
 			};
+			if (includeOptions) {
+				properties.options = me._resolveDataElementOptions(index, mode);
+			}
 			startAngle += circumference;
 
 			me._updateElement(arc, index, properties, mode);
 		}
+		me._updateSharedOptions(sharedOptions, mode);
 	}
 
 	calculateTotal() {
@@ -252,10 +263,6 @@ class DoughnutController extends DatasetController {
 			}
 		}
 
-		/* if (total === 0) {
-			total = NaN;
-		}*/
-
 		return total;
 	}
 
@@ -267,7 +274,6 @@ class DoughnutController extends DatasetController {
 		return 0;
 	}
 
-	// gets the max border or hover width to properly scale pie charts
 	getMaxBorderWidth(arcs) {
 		const me = this;
 		let max = 0;
@@ -321,8 +327,8 @@ class DoughnutController extends DatasetController {
 	/**
 	 * @private
 	 */
-	_getRingWeight(dataSetIndex) {
-		return Math.max(valueOrDefault(this.chart.data.datasets[dataSetIndex].weight, 1), 0);
+	_getRingWeight(datasetIndex) {
+		return Math.max(valueOrDefault(this.chart.data.datasets[datasetIndex].weight, 1), 0);
 	}
 
 	/**

src/controllers/controller.polarArea.js

@@ -128,12 +128,12 @@ class PolarAreaController extends DatasetController {
 		const opts = chart.options;
 		const minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
 
-		chart.outerRadius = Math.max(minSize / 2, 0);
-		chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);
-		chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
+		const outerRadius = Math.max(minSize / 2, 0);
+		const innerRadius = Math.max(opts.cutoutPercentage ? (outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);
+		const radiusLength = (outerRadius - innerRadius) / chart.getVisibleDatasetCount();
 
-		me.outerRadius = chart.outerRadius - (chart.radiusLength * me.index);
-		me.innerRadius = me.outerRadius - chart.radiusLength;
+		me.outerRadius = outerRadius - (radiusLength * me.index);
+		me.innerRadius = me.outerRadius - radiusLength;
 	}
 
 	updateElements(arcs, start, mode) {

src/core/core.controller.js

@@ -200,7 +200,7 @@ class Chart {
 		this.chartArea = undefined;
 		this.data = undefined;
 		this.active = undefined;
-		this.lastActive = undefined;
+		this.lastActive = [];
 		this._lastEvent = undefined;
 		this._listeners = {resize: undefined};
 		this._sortedMetasets = [];
@@ -568,7 +568,7 @@ class Chart {
 
 		// Replay last event from before update
 		if (me._lastEvent) {
-			me._eventHandler(me._lastEvent);
+			me._eventHandler(me._lastEvent, true);
 		}
 
 		me.render();
@@ -794,10 +794,10 @@ class Chart {
 		return Interaction.modes.index(this, e, {intersect: false});
 	}
 
-	getElementsAtEventForMode(e, mode, options) {
+	getElementsAtEventForMode(e, mode, options, useFinalPosition) {
 		const method = Interaction.modes[mode];
 		if (typeof method === 'function') {
-			return method(this, e, options);
+			return method(this, e, options, useFinalPosition);
 		}
 
 		return [];
@@ -1007,16 +1007,16 @@ class Chart {
 	/**
 	 * @private
 	 */
-	_eventHandler(e) {
+	_eventHandler(e, replay) {
 		const me = this;
 
-		if (plugins.notify(me, 'beforeEvent', [e]) === false) {
+		if (plugins.notify(me, 'beforeEvent', [e, replay]) === false) {
 			return;
 		}
 
-		me._handleEvent(e);
+		me._handleEvent(e, replay);
 
-		plugins.notify(me, 'afterEvent', [e]);
+		plugins.notify(me, 'afterEvent', [e, replay]);
 
 		me.render();
 
@@ -1026,23 +1026,24 @@ class Chart {
 	/**
 	 * Handle an event
 	 * @param {IEvent} e the event to handle
+	 * @param {boolean} [replay] - true if the event was replayed by `update`
 	 * @return {boolean} true if the chart needs to re-render
 	 * @private
 	 */
-	_handleEvent(e) {
+	_handleEvent(e, replay) {
 		const me = this;
-		const options = me.options || {};
+		const options = me.options;
 		const hoverOptions = options.hover;
+		// If the event is replayed from `update`, we should evaluate with the final positions.
+		const useFinalPosition = replay;
 		let changed = false;
 
-		me.lastActive = me.lastActive || [];
-
 		// Find Active Elements for hover and tooltips
 		if (e.type === 'mouseout') {
 			me.active = [];
 			me._lastEvent = null;
 		} else {
-			me.active = me.getElementsAtEventForMode(e, hoverOptions.mode, hoverOptions);
+			me.active = me.getElementsAtEventForMode(e, hoverOptions.mode, hoverOptions, useFinalPosition);
 			me._lastEvent = e.type === 'click' ? me._lastEvent : e;
 		}
 
@@ -1058,7 +1059,7 @@ class Chart {
 		}
 
 		changed = !helpers._elementsEqual(me.active, me.lastActive);
-		if (changed) {
+		if (changed || replay) {
 			me._updateHoverStyles();
 		}
 

src/core/core.element.js

@@ -3,13 +3,13 @@ import {isNumber} from '../helpers/helpers.math';
 
 class Element {
 
-	/**
-	 * @param {object} [cfg] optional configuration
-	 */
 	constructor(cfg) {
 		this.x = undefined;
 		this.y = undefined;
-		this.hidden = undefined;
+		this.hidden = false;
+		this.active = false;
+		this.options = undefined;
+		this.$animations = undefined;
 
 		if (cfg) {
 			Object.assign(this, cfg);
@@ -26,6 +26,26 @@ class Element {
 	hasValue() {
 		return isNumber(this.x) && isNumber(this.y);
 	}
+
+	/**
+	 * Gets the current or final value of each prop. Can return extra properties (whole object).
+	 * @param {string[]} props - properties to get
+	 * @param {boolean} [final] - get the final value (animation target)
+	 * @return {object}
+	 */
+	getProps(props, final) {
+		const me = this;
+		const anims = this.$animations;
+		if (!final || !anims) {
+			// let's not create an object, if not needed
+			return me;
+		}
+		const ret = {};
+		props.forEach(prop => {
+			ret[prop] = anims[prop] && anims[prop].active ? anims[prop]._to : me[prop];
+		});
+		return ret;
+	}
 }
 
 Element.extend = inherits;