fix(axisPointer&tooltip): (1) axisPointer and tooltip should be able to update when mousewheel, since dataZoomInside can modify views on mousewheel, and cause highlighted element to be not able to restore. (2) Fix axisPointer highlighted item can not restore due to outdated dataIndexIndex.

Author: 100pah

src/component/axisPointer/AxisPointerView.ts

@@ -31,7 +31,8 @@ class AxisPointerView extends ComponentView {
     render(globalAxisPointerModel: AxisPointerModel, ecModel: GlobalModel, api: ExtensionAPI) {
         const globalTooltipModel = ecModel.getComponent('tooltip') as TooltipModel;
         const triggerOn = globalAxisPointerModel.get('triggerOn')
-            || (globalTooltipModel && globalTooltipModel.get('triggerOn') || 'mousemove|click');
+            // mousewheel can change view by dataZoom.
+            || (globalTooltipModel && globalTooltipModel.get('triggerOn') || 'mousemove|click|mousewheel');
 
         // Register global listener in AxisPointerView to enable
         // AxisPointerView to be independent to Tooltip.

src/component/axisPointer/axisTrigger.ts

@@ -73,7 +73,7 @@ type CollectedCoordInfo = ReturnType<typeof modelHelper['collect']>;
 type CollectedAxisInfo = CollectedCoordInfo['axesInfo'][string];
 
 interface AxisTriggerPayload extends Payload {
-    currTrigger?: 'click' | 'mousemove' | 'leave'
+    currTrigger?: 'click' | 'mousemove' | 'leave' | 'mousewheel'
     /**
      * x and y, which are mandatory, specify a point to trigger axisPointer and tooltip.
      */
@@ -453,7 +453,7 @@ function dispatchHighDownActually(
 ) {
     // FIXME
     // highlight status modification should be a stage of main process?
-    // (Consider confilct (e.g., legend and axisPointer) and setOption)
+    // (Consider conflict (e.g., legend and axisPointer) and setOption)
 
     const zr = api.getZr();
     const highDownKey = 'axisPointerLastHighlights' as const;
@@ -465,19 +465,26 @@ function dispatchHighDownActually(
     each(axesInfo, function (axisInfo, key) {
         const option = axisInfo.axisPointerModel.option;
         option.status === 'show' && axisInfo.triggerEmphasis && each(option.seriesDataIndices, function (batchItem) {
-            const key = batchItem.seriesIndex + ' | ' + batchItem.dataIndex;
-            newHighlights[key] = batchItem;
+            newHighlights[batchItem.seriesIndex + '|' + batchItem.dataIndex] = batchItem;
         });
     });
 
     // Diff.
-    const toHighlight: BatchItem[] = [];
-    const toDownplay: BatchItem[] = [];
+    const toHighlight: Pick<BatchItem, 'seriesIndex' | 'dataIndex'>[] = [];
+    const toDownplay: Pick<BatchItem, 'seriesIndex' | 'dataIndex'>[] = [];
+    function makeHighDownItem(batchItem: BatchItem) {
+        // `dataIndexInside` should be removed, since the last recorded `dataIndexInside` may have
+        // been changed if `dataZoomInside` changed the view. Only `dataIndex` will suffice.
+        return {
+            seriesIndex: batchItem.seriesIndex,
+            dataIndex: batchItem.dataIndex,
+        };
+    }
     each(lastHighlights, function (batchItem, key) {
-        !newHighlights[key] && toDownplay.push(batchItem);
+        !newHighlights[key] && toDownplay.push(makeHighDownItem(batchItem));
     });
     each(newHighlights, function (batchItem, key) {
-        !lastHighlights[key] && toHighlight.push(batchItem);
+        !lastHighlights[key] && toHighlight.push(makeHighDownItem(batchItem));
     });
 
     toDownplay.length && api.dispatchAction({

src/component/axisPointer/globalListener.ts

@@ -28,7 +28,7 @@ import { Dictionary } from 'zrender/src/core/types';
 type DispatchActionMethod = ExtensionAPI['dispatchAction'];
 
 type Handler = (
-    currTrigger: 'click' | 'mousemove' | 'leave',
+    currTrigger: 'click' | 'mousemove' | 'mousewheel' | 'leave',
     event: ZRElementEvent,
     dispatchAction: DispatchActionMethod
 ) => void;
@@ -59,13 +59,6 @@ interface Pendings {
 const inner = makeInner<InnerStore, ZRenderType>();
 const each = zrUtil.each;
 
-/**
- * @param {string} key
- * @param {module:echarts/ExtensionAPI} api
- * @param {Function} handler
- *      param: {string} currTrigger
- *      param: {Array.<number>} point
- */
 export function register(key: string, api: ExtensionAPI, handler?: Handler) {
     if (env.node) {
         return;
@@ -89,6 +82,10 @@ function initGlobalListeners(zr: ZRenderType, api?: ExtensionAPI) {
 
     useHandler('click', zrUtil.curry(doEnter, 'click'));
     useHandler('mousemove', zrUtil.curry(doEnter, 'mousemove'));
+    // For example, dataZoom may update series layout while mousewheel,
+    // axisPointer and tooltip need to follow that updates, otherwise,
+    // highlighted items (by axisPointer) may have no chance to downplay.
+    useHandler('mousewheel', zrUtil.curry(doEnter, 'mousewheel'));
     // useHandler('mouseout', onLeave);
     useHandler('globalout', onLeave);
 
@@ -134,7 +131,7 @@ function onLeave(
 }
 
 function doEnter(
-    currTrigger: 'click' | 'mousemove' | 'leave',
+    currTrigger: 'click' | 'mousemove' | 'mousewheel' | 'leave',
     record: Record,
     e: ZRElementEvent,
     dispatchAction: DispatchActionMethod

src/component/tooltip/TooltipModel.ts

@@ -106,7 +106,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
         trigger: 'item',
 
         // 'click' | 'mousemove' | 'none'
-        triggerOn: 'mousemove|click',
+        triggerOn: 'mousemove|click|mousewheel',
 
         alwaysShowContent: false,
 

src/util/types.ts

@@ -1586,8 +1586,9 @@ export interface CommonTooltipOption<FormatterParams> {
 
     /**
      * When to trigger
+     * NOTE: mousewheel may modify view by dataZoom.
      */
-    triggerOn?: 'mousemove' | 'click' | 'none' | 'mousemove|click'
+    triggerOn?: 'mousemove' | 'click' | 'none' | 'mousewheel' | 'mousemove|click|mousewheel'
     /**
      * Whether to not hide popup content automatically
      */