Issue 4991 (#7084)

* Fix remaining handleEvent issues

* Reduce lines

* Update tooltip always on replay

* Address issues

* Fix test

* More tooltip fixing

* Extend comment

Author: kurkle

src/core/core.controller.js

@@ -212,7 +212,7 @@ export default class Chart {
 		this.chartArea = undefined;
 		this.data = undefined;
 		this.active = undefined;
-		this.lastActive = undefined;
+		this.lastActive = [];
 		this._lastEvent = undefined;
 		/** @type {{resize?: function}} */
 		this._listeners = {};
@@ -581,7 +581,7 @@ export default class Chart {
 
 		// Replay last event from before update
 		if (me._lastEvent) {
-			me._eventHandler(me._lastEvent);
+			me._eventHandler(me._lastEvent, true);
 		}
 
 		me.render();
@@ -808,10 +808,10 @@ export default 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 [];
@@ -1021,16 +1021,16 @@ export default 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();
 
@@ -1040,23 +1040,38 @@ export default 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;
-		let changed = false;
 
-		me.lastActive = me.lastActive || [];
+		// If the event is replayed from `update`, we should evaluate with the final positions.
+		//
+		// The `replay`:
+		// It's the last event (excluding click) that has occured before `update`.
+		// So mouse has not moved. It's also over the chart, because there is a `replay`.
+		//
+		// The why:
+		// If animations are active, the elements haven't moved yet compared to state before update.
+		// But if they will, we are activating the elements that would be active, if this check
+		// was done after the animations have completed. => "final positions".
+		// If there is no animations, the "final" and "current" positions are equal.
+		// This is done so we do not have to evaluate the active elements each animation frame
+		// - it would be expensive.
+		const useFinalPosition = replay;
+
+		let changed = false;
 
 		// 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;
 		}
 
@@ -1072,7 +1087,7 @@ export default class Chart {
 		}
 
 		changed = !helpers._elementsEqual(me.active, me.lastActive);
-		if (changed) {
+		if (changed || replay) {
 			me._updateHoverStyles();
 		}
 

src/core/core.element.js

@@ -5,27 +5,48 @@ export default class Element {
 
 	static extend = inherits;
 
-	/**
-	 * @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);
 		}
 	}
 
-	tooltipPosition() {
-		return {
-			x: this.x,
-			y: this.y
-		};
+	/**
+	 * @param {boolean} [useFinalPosition]
+	 */
+	tooltipPosition(useFinalPosition) {
+		const {x, y} = this.getProps(['x', 'y'], useFinalPosition);
+		return {x, y};
 	}
 
 	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;
+	}
 }

src/core/core.interaction.js

@@ -5,7 +5,8 @@ import {_lookupByKey, _rlookupByKey} from '../helpers/helpers.collection';
 /**
  * @typedef { import("./core.controller").default } Chart
  * @typedef { import("../platform/platform.base").IEvent } IEvent
- * @typedef {{axis?:'x'|'y'|'xy', intersect:boolean}} IInteractionOptions
+ * @typedef {{axis?: string, intersect?: boolean}} InteractionOptions
+ * @typedef {{datasetIndex: number, index: number, element: import("../core/core.element").default}} InteractionItem
  */
 
 /**
@@ -121,17 +122,18 @@ function getDistanceMetricForAxis(axis) {
  * @param {Chart} chart - the chart
  * @param {object} position - the point to be nearest to
  * @param {string} axis - the axis mode. x|y|xy
- * @return {object[]} the nearest items
+ * @param {boolean} [useFinalPosition] - use the element's animation target instead of current position
+ * @return {InteractionItem[]} the nearest items
  */
-function getIntersectItems(chart, position, axis) {
+function getIntersectItems(chart, position, axis, useFinalPosition) {
 	const items = [];
 
 	if (!_isPointInArea(position, chart.chartArea)) {
 		return items;
 	}
 
 	const evaluationFunc = function(element, datasetIndex, index) {
-		if (element.inRange(position.x, position.y)) {
+		if (element.inRange(position.x, position.y, useFinalPosition)) {
 			items.push({element, datasetIndex, index});
 		}
 	};
@@ -146,9 +148,10 @@ function getIntersectItems(chart, position, axis) {
  * @param {object} position - the point to be nearest to
  * @param {string} axis - the axes along which to measure distance
  * @param {boolean} [intersect] - if true, only consider items that intersect the position
- * @return {object[]} the nearest items
+ * @param {boolean} [useFinalPosition] - use the elements animation target instead of current position
+ * @return {InteractionItem[]} the nearest items
  */
-function getNearestItems(chart, position, axis, intersect) {
+function getNearestItems(chart, position, axis, intersect, useFinalPosition) {
 	const distanceMetric = getDistanceMetricForAxis(axis);
 	let minDistance = Number.POSITIVE_INFINITY;
 	let items = [];
@@ -158,11 +161,11 @@ function getNearestItems(chart, position, axis, intersect) {
 	}
 
 	const evaluationFunc = function(element, datasetIndex, index) {
-		if (intersect && !element.inRange(position.x, position.y)) {
+		if (intersect && !element.inRange(position.x, position.y, useFinalPosition)) {
 			return;
 		}
 
-		const center = element.getCenterPoint();
+		const center = element.getCenterPoint(useFinalPosition);
 		const distance = distanceMetric(position, center);
 		if (distance < minDistance) {
 			items = [{element, datasetIndex, index}];
@@ -191,14 +194,17 @@ export default {
 		 * @since v2.4.0
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @param {IInteractionOptions} options - options to use during interaction
-		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @param {InteractionOptions} options - options to use
+		 * @param {boolean} [useFinalPosition] - use final element position (animation target)
+		 * @return {InteractionItem[]} - items that are found
 		 */
-		index(chart, e, options) {
+		index(chart, e, options, useFinalPosition) {
 			const position = getRelativePosition(e, chart);
 			// Default axis for index mode is 'x' to match old behaviour
 			const axis = options.axis || 'x';
-			const items = options.intersect ? getIntersectItems(chart, position, axis) : getNearestItems(chart, position, axis);
+			const items = options.intersect
+				? getIntersectItems(chart, position, axis, useFinalPosition)
+				: getNearestItems(chart, position, axis, false, useFinalPosition);
 			const elements = [];
 
 			if (!items.length) {
@@ -224,13 +230,16 @@ export default {
 		 * @function Chart.Interaction.modes.dataset
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @param {IInteractionOptions} options - options to use during interaction
-		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @param {InteractionOptions} options - options to use
+		 * @param {boolean} [useFinalPosition] - use final element position (animation target)
+		 * @return {InteractionItem[]} - items that are found
 		 */
-		dataset(chart, e, options) {
+		dataset(chart, e, options, useFinalPosition) {
 			const position = getRelativePosition(e, chart);
 			const axis = options.axis || 'xy';
-			let items = options.intersect ? getIntersectItems(chart, position, axis) : getNearestItems(chart, position, axis);
+			let items = options.intersect
+				? getIntersectItems(chart, position, axis, useFinalPosition) :
+				getNearestItems(chart, position, axis, false, useFinalPosition);
 
 			if (items.length > 0) {
 				const datasetIndex = items[0].datasetIndex;
@@ -250,48 +259,51 @@ export default {
 		 * @function Chart.Interaction.modes.intersect
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @param {IInteractionOptions} options - options to use
-		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @param {InteractionOptions} options - options to use
+		 * @param {boolean} [useFinalPosition] - use final element position (animation target)
+		 * @return {InteractionItem[]} - items that are found
 		 */
-		point(chart, e, options) {
+		point(chart, e, options, useFinalPosition) {
 			const position = getRelativePosition(e, chart);
 			const axis = options.axis || 'xy';
-			return getIntersectItems(chart, position, axis);
+			return getIntersectItems(chart, position, axis, useFinalPosition);
 		},
 
 		/**
 		 * nearest mode returns the element closest to the point
 		 * @function Chart.Interaction.modes.intersect
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @param {IInteractionOptions} options - options to use
-		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @param {InteractionOptions} options - options to use
+		 * @param {boolean} [useFinalPosition] - use final element position (animation target)
+		 * @return {InteractionItem[]} - items that are found
 		 */
-		nearest(chart, e, options) {
+		nearest(chart, e, options, useFinalPosition) {
 			const position = getRelativePosition(e, chart);
 			const axis = options.axis || 'xy';
-			return getNearestItems(chart, position, axis, options.intersect);
+			return getNearestItems(chart, position, axis, options.intersect, useFinalPosition);
 		},
 
 		/**
 		 * x mode returns the elements that hit-test at the current x coordinate
 		 * @function Chart.Interaction.modes.x
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @param {IInteractionOptions} options - options to use
-		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @param {InteractionOptions} options - options to use
+		 * @param {boolean} [useFinalPosition] - use final element position (animation target)
+		 * @return {InteractionItem[]} - items that are found
 		 */
-		x(chart, e, options) {
+		x(chart, e, options, useFinalPosition) {
 			const position = getRelativePosition(e, chart);
 			const items = [];
 			let intersectsItem = false;
 
 			evaluateAllVisibleItems(chart, (element, datasetIndex, index) => {
-				if (element.inXRange(position.x)) {
+				if (element.inXRange(position.x, useFinalPosition)) {
 					items.push({element, datasetIndex, index});
 				}
 
-				if (element.inRange(position.x, position.y)) {
+				if (element.inRange(position.x, position.y, useFinalPosition)) {
 					intersectsItem = true;
 				}
 			});
@@ -309,20 +321,21 @@ export default {
 		 * @function Chart.Interaction.modes.y
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @param {IInteractionOptions} options - options to use
-		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @param {InteractionOptions} options - options to use
+		 * @param {boolean} [useFinalPosition] - use final element position (animation target)
+		 * @return {InteractionItem[]} - items that are found
 		 */
-		y(chart, e, options) {
+		y(chart, e, options, useFinalPosition) {
 			const position = getRelativePosition(e, chart);
 			const items = [];
 			let intersectsItem = false;
 
 			evaluateAllVisibleItems(chart, (element, datasetIndex, index) => {
-				if (element.inYRange(position.y)) {
+				if (element.inYRange(position.y, useFinalPosition)) {
 					items.push({element, datasetIndex, index});
 				}
 
-				if (element.inRange(position.x, position.y)) {
+				if (element.inRange(position.x, position.y, useFinalPosition)) {
 					intersectsItem = true;
 				}
 			});

src/core/core.plugins.js

@@ -365,6 +365,7 @@ export default new PluginService();
  * @param {Chart} chart - The chart instance.
  * @param {IEvent} event - The event object.
  * @param {object} options - The plugin options.
+ * @param {boolean} replay - True if this event is replayed from `Chart.update`
  */
 /**
  * @method IPlugin#afterEvent
@@ -373,6 +374,7 @@ export default new PluginService();
  * @param {Chart} chart - The chart instance.
  * @param {IEvent} event - The event object.
  * @param {object} options - The plugin options.
+ * @param {boolean} replay - True if this event is replayed from `Chart.update`
  */
 /**
  * @method IPlugin#resize