fix: (1) Previously hoverLayerThreshold modification does not work. (2) Restrict the triggering of hoverLayer to only canvas renderer.

Author: 100pah

src/chart/custom/CustomView.ts

@@ -94,7 +94,6 @@ import CustomSeriesModel, {
 CustomRootElementOption,
 CustomSeriesOption,
 CustomCompoundPathOption,
-CustomSeriesRenderItemCoordinateSystemAPI
 }from'./CustomSeries';
 import{PatternObject}from'zrender/src/graphic/Pattern';
 import{
@@ -110,6 +109,7 @@ import type SeriesModel from '../../model/Series';
 import{getCustomSeries}from'./customSeriesRegister';
 importtokensfrom'../../visual/tokens';
 
+
 constEMPHASIS='emphasis'asconst;
 constNORMAL='normal'asconst;
 constBLUR='blur'asconst;
@@ -290,7 +290,7 @@ export default class CustomChartView extends ChartView {
 functionsetIncrementalAndHoverLayer(el: Displayable){
 if(!el.isGroup){
 el.incremental=true;
-el.ensureState('emphasis').hoverLayer=true;
+el.ensureState('emphasis').hoverLayer=graphicUtil.HOVER_LAYER_FOR_INCREMENTAL;
 }
 }
 for(letidx=params.start;idx<params.end;idx++){

src/chart/heatmap/HeatmapView.ts

@@ -346,7 +346,7 @@ class HeatmapView extends ChartView {
 // PENDING
 if(incremental){
 // Rect must use hover layer if it's incremental.
-rect.states.emphasis.hoverLayer=true;
+rect.states.emphasis.hoverLayer=graphic.HOVER_LAYER_FOR_INCREMENTAL;
 }
 
 group.add(rect);

src/chart/helper/LineDraw.ts

@@ -172,7 +172,7 @@ class LineDraw {
 functionupdateIncrementalAndHover(el: Displayable){
 if(!el.isGroup&&!isEffectObject(el)){
 el.incremental=true;
-el.ensureState('emphasis').hoverLayer=true;
+el.ensureState('emphasis').hoverLayer=graphic.HOVER_LAYER_FOR_INCREMENTAL;
 }
 }
 

src/chart/helper/SymbolDraw.ts

@@ -292,7 +292,7 @@ class SymbolDraw {
 functionupdateIncrementalAndHover(el: Displayable){
 if(!el.isGroup){
 el.incremental=true;
-el.ensureState('emphasis').hoverLayer=true;
+el.ensureState('emphasis').hoverLayer=graphic.HOVER_LAYER_FOR_INCREMENTAL;
 }
 }
 for(letidx=taskParams.start;idx<taskParams.end;idx++){

src/component/legend/LegendView.ts

@@ -724,25 +724,13 @@ function dispatchSelectAction(
 dispatchHighlightAction(seriesName,dataName,api,excludeSeriesId);
 }
 
-functionisUseHoverLayer(api: ExtensionAPI){
-constlist=api.getZr().storage.getDisplayList();
-letemphasisState: DisplayableState;
-leti=0;
-constlen=list.length;
-while(i<len&&!(emphasisState=list[i].states.emphasis)){
-i++;
-}
-returnemphasisState&&emphasisState.hoverLayer;
-}
-
 functiondispatchHighlightAction(
 seriesName: string,
 dataName: string,
 api: ExtensionAPI,
 excludeSeriesId: string[]
 ){
-// If element hover will move to a hoverLayer.
-if(!isUseHoverLayer(api)){
+if(!api.usingTHL()){
 api.dispatchAction({
 type: 'highlight',
 seriesName: seriesName,
@@ -758,8 +746,7 @@ function dispatchDownplayAction(
 api: ExtensionAPI,
 excludeSeriesId: string[]
 ){
-// If element hover will move to a hoverLayer.
-if(!isUseHoverLayer(api)){
+if(!api.usingTHL()){
 api.dispatchAction({
 type: 'downplay',
 seriesName: seriesName,

src/core/ExtensionAPI.ts

@@ -73,6 +73,14 @@ abstract class ExtensionAPI {
 abstractgetViewOfSeriesModel(seriesModel: SeriesModel): ChartView;
 abstractgetModel(): GlobalModel;
 abstractgetECMainCycleVersion(): number;
+/**
+ * PENDING: a temporary method - may be refactored.
+ * Whether a "threshold hoverLayer" is used.
+ * `true` means using hover layer due to over `hoverLayerThreshold`.
+ * Otherwise, if `false`, hover layer may be still used due to progressive (incremental),
+ * but this method does not need to cover this case.
+ */
+abstractusingTHL(): boolean;
 }
 
 exportdefaultExtensionAPI;

src/core/Scheduler.ts

@@ -34,6 +34,7 @@ import { EChartsType } from './echarts';
 importSeriesModelfrom'../model/Series';
 importChartViewfrom'../view/Chart';
 importSeriesDatafrom'../data/SeriesData';
+import{ZRenderType}from'zrender/src/zrender';
 
 exporttypeGeneralTask=Task<TaskContext>;
 exporttypeSeriesTask=Task<SeriesTaskContext>;
@@ -233,12 +234,12 @@ class Scheduler {
 };
 }
 
-restorePipelines(ecModel: GlobalModel): void{
+restorePipelines(zr: ZRenderType,ecModel: GlobalModel): void{
 constscheduler=this;
 constpipelineMap=scheduler._pipelineMap=createHashMap();
 
 ecModel.eachSeries(function(seriesModel){
-constprogressive=seriesModel.getProgressive();
+constprogressive=zr.painter.type==='canvas'&&seriesModel.getProgressive();
 constpipelineId=seriesModel.uid;
 
 pipelineMap.set(pipelineId,{

src/core/echarts.ts

@@ -310,6 +310,11 @@ interface PostIniter {
 (chart: EChartsType): void
 }
 
+constecInner=modelUtil.makeInner<{
+// Using hoverLayer due to over hoverLayerThreshold.
+usingTHL: boolean;
+},ECharts>();
+
 typeEventMethodName='on'|'off';
 functioncreateRegisterEventWithLowercaseECharts(method: EventMethodName){
 returnfunction(this: ECharts, ...args: any): ECharts{
@@ -1638,7 +1643,7 @@ class ECharts extends Eventful<ECEventDefinition> {
 
 constscheduler=ecIns._scheduler;
 
-scheduler.restorePipelines(ecIns._model);
+scheduler.restorePipelines(ecIns._zr,ecIns._model);
 scheduler.prepareStageTasks();
 
 prepareView(ecIns,true);
@@ -2538,6 +2543,11 @@ class ECharts extends Eventful<ECEventDefinition> {
 
 functionupdateHoverLayerStatus(ecIns: ECharts,ecModel: GlobalModel): void{
 constzr=ecIns._zr;
+
+if(zr.painter.type!=='canvas'){
+return;
+}
+
 conststorage=zr.storage;
 letelCount=0;
 
@@ -2547,20 +2557,27 @@ class ECharts extends Eventful<ECEventDefinition> {
 }
 });
 
-if(elCount>ecModel.get('hoverLayerThreshold')&&!env.node&&!env.worker){
+constinner=ecInner(ecIns);
+constshouldUseHoverLayer=elCount>ecModel.get('hoverLayerThreshold')&&!env.node&&!env.worker;
+
+if(inner.usingTHL||shouldUseHoverLayer){
 ecModel.eachSeries(function(seriesModel){
 if(seriesModel.preventUsingHoverLayer){
 return;
 }
 constchartView=ecIns._chartsMap[seriesModel.__viewId];
 if(chartView.__alive){
 chartView.eachRendered((el: ECElement)=>{
-if(el.states.emphasis){
-el.states.emphasis.hoverLayer=true;
+constemphasis=el.states.emphasis;
+if(emphasis&&emphasis.hoverLayer!==graphic.HOVER_LAYER_FOR_INCREMENTAL){
+emphasis.hoverLayer=shouldUseHoverLayer
+ ? graphic.HOVER_LAYER_FROM_THRESHOLD
+ : graphic.HOVER_LAYER_NO;
 }
 });
 }
 });
+inner.usingTHL=shouldUseHoverLayer;
 }
 };
 
@@ -2726,6 +2743,9 @@ class ECharts extends Eventful<ECEventDefinition> {
 getECMainCycleVersion(): number{
 returnecIns[EC_MAIN_CYCLE_VERSION_KEY];
 }
+usingTHL(): boolean{
+returnecInner(ecIns).usingTHL;
+}
 })(ecIns);
 };
 

src/util/graphic.ts

@@ -97,6 +97,14 @@ type ExtendShapeReturn = ReturnType<typeof Path.extend>;
 exportconstXY=['x','y']asconst;
 exportconstWH=['width','height']asconst;
 
+/**
+ * NOTICE: Only canvas renderer can set these hoverLayer flags.
+ * @see ElementCommonState['hoverLayer']
+ */
+exportconstHOVER_LAYER_NO=0;
+exportconstHOVER_LAYER_FROM_THRESHOLD=1;
+exportconstHOVER_LAYER_FOR_INCREMENTAL=2;
+
 /**
  * Extend shape with parameters
  */

src/view/Chart.ts

@@ -249,6 +249,9 @@ function toggleHighlight(data: SeriesData, payload: Payload, state: DisplayState
 });
 }
 else{
+// In progressive mode, `data._graphicEls` has typically no items,
+// thereby skipping this hover style changing.
+// PENDING: more robust approaches?
 data.eachItemGraphicEl(function(el){
 elSetState(el,state,highlightDigit);
 });