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.

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 00c222c6ab3b593ee7d7f343786ca066392fec52..8405fa72836473aafc6352016d5cdd85a63b51aa 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/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

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 5a7e6243de151397b9b96ee48e46348a2ff1ba6d..71ac4e123e525b7cd925ba95074605fa0f90fa4f 100644 (file)
--- a/src/core/core.controller.js
+++ b/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;
        }
 }

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 3251be75d06a319ec334d3edc4db35b67d7a4109..ed94068a7a45afbae589ea97d0506d0959186501 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/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();