Cleanup Event Handling code to match style of tooltip plugin. (#7467)

* Cleanup Event Handling code to match style of tooltip plugin.

Eliminates saving two arrays of items on the chart prototype. The `onHover`
callback now receives the wrapped event instead of the native one.

docs/docs/getting-started/v3-migration.md

@@ -166,6 +166,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 * `modes['X-axis']` was replaced with `{mode: 'index', intersect: false}`
 * `options.onClick` is now limited to the chart area
 * `options.onClick` and `options.onHover` now receive the `chart` instance as a 3rd argument
+* `options.onHover` now receives a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`.
 
 #### Ticks
 
@@ -201,6 +202,7 @@ The following properties and methods were removed:
 
 #### Chart
 
+* `Chart.active`
 * `Chart.borderWidth`
 * `Chart.chart.chart`
 * `Chart.Bar`. New charts are created via `new Chart` and providing the appropriate `type` parameter
@@ -209,6 +211,7 @@ The following properties and methods were removed:
 * `Chart.Controller`
 * `Chart.Doughnut`. New charts are created via `new Chart` and providing the appropriate `type` parameter
 * `Chart.innerRadius` now lives on doughnut, pie, and polarArea controllers
+* `Chart.lastActive`
 * `Chart.Legend` was moved to `Chart.plugins.legend._element` and made private
 * `Chart.Line`. New charts are created via `new Chart` and providing the appropriate `type` parameter
 * `Chart.LinearScaleBase` now must be imported and cannot be accessed off the `Chart` object

src/core/core.controller.js

@@ -218,8 +218,7 @@ class Chart {
 		this.currentDevicePixelRatio = undefined;
 		this.chartArea = undefined;
 		this.data = undefined;
-		this.active = undefined;
-		this.lastActive = [];
+		this._active = [];
 		this._lastEvent = undefined;
 		/** @type {{attach?: function, detach?: function, resize?: function}} */
 		this._listeners = {};
@@ -1030,19 +1029,19 @@ class Chart {
 	/**
 	 * @private
 	 */
-	_updateHoverStyles() {
+	_updateHoverStyles(active, lastActive) {
 		const me = this;
 		const options = me.options || {};
 		const hoverOptions = options.hover;
 
 		// Remove styling for last active (even if it may still be active)
-		if (me.lastActive.length) {
-			me.updateHoverStyle(me.lastActive, hoverOptions.mode, false);
+		if (lastActive.length) {
+			me.updateHoverStyle(lastActive, hoverOptions.mode, false);
 		}
 
 		// Built-in hover styling
-		if (me.active.length && hoverOptions.mode) {
-			me.updateHoverStyle(me.active, hoverOptions.mode, true);
+		if (active.length && hoverOptions.mode) {
+			me.updateHoverStyle(active, hoverOptions.mode, true);
 		}
 	}
 
@@ -1074,6 +1073,7 @@ class Chart {
 	 */
 	_handleEvent(e, replay) {
 		const me = this;
+		const lastActive = me._active || [];
 		const options = me.options;
 		const hoverOptions = options.hover;
 
@@ -1092,36 +1092,32 @@ class Chart {
 		// - it would be expensive.
 		const useFinalPosition = replay;
 
+		let active = [];
 		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, useFinalPosition);
+			active = me.getElementsAtEventForMode(e, hoverOptions.mode, hoverOptions, useFinalPosition);
 			me._lastEvent = e.type === 'click' ? me._lastEvent : e;
 		}
 
 		// Invoke onHover hook
-		// Need to call with native event here to not break backwards compatibility
-		callCallback(options.onHover || options.hover.onHover, [e.native, me.active, me], me);
+		callCallback(options.onHover || options.hover.onHover, [e, active, me], me);
 
 		if (e.type === 'mouseup' || e.type === 'click') {
 			if (_isPointInArea(e, me.chartArea)) {
-				// Use e.native here for backwards compatibility
-				callCallback(options.onClick, [e, me.active, me], me);
+				callCallback(options.onClick, [e, active, me], me);
 			}
 		}
 
-		changed = !_elementsEqual(me.active, me.lastActive);
+		changed = !_elementsEqual(active, lastActive);
 		if (changed || replay) {
-			me._updateHoverStyles();
+			me._active = active;
+			me._updateHoverStyles(active, lastActive);
 		}
 
-		// Remember Last Actives
-		me.lastActive = me.active;
-
 		return changed;
 	}
 }

test/specs/core.controller.tests.js

@@ -1177,12 +1177,12 @@ describe('Chart', function() {
 				// Check and see if tooltip was displayed
 				var tooltip = chart.tooltip;
 
-				expect(chart.lastActive[0].element).toEqual(point);
+				expect(chart._active[0].element).toEqual(point);
 				expect(tooltip._active[0].element).toEqual(point);
 
 				// Update and confirm tooltip is updated
 				chart.update();
-				expect(chart.lastActive[0].element).toEqual(point);
+				expect(chart._active[0].element).toEqual(point);
 				expect(tooltip._active[0].element).toEqual(point);
 
 				done();