Feature: coarse pointer tolerance

package.json

@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "npm:zrender-nightly@^5.3.3-dev.20220720"
+    "zrender": "npm:zrender-nightly@^5.3.3-dev.20220820"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/chart/bar/BarView.ts

@@ -1146,6 +1146,7 @@ function createLarge(
     const el = new LargePath({
         shape: {points: data.getLayout('largePoints')},
         incremental: !!incremental,
+        ignoreCoarsePointer: true,
         z2: 1
     });
     el.baseDimIdx = baseDimIdx;

src/chart/candlestick/CandlestickView.ts

@@ -358,12 +358,14 @@ function createLarge(
 
     const elP = new LargeBoxPath({
         shape: {points: largePoints},
-        __sign: 1
+        __sign: 1,
+        ignoreCoarsePointer: true
     });
     group.add(elP);
     const elN = new LargeBoxPath({
         shape: {points: largePoints},
-        __sign: -1
+        __sign: -1,
+        ignoreCoarsePointer: true
     });
     group.add(elN);
 
@@ -397,4 +399,3 @@ function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickS
 
 
 export default CandlestickView;
-

src/chart/helper/LargeLineDraw.ts

@@ -293,7 +293,8 @@ class LargeLineDraw {
 
     private _create() {
         const lineEl = new LargeLinesPath({
-            cursor: 'default'
+            cursor: 'default',
+            ignoreCoarsePointer: true
         });
         this._newAdded.push(lineEl);
         this.group.add(lineEl);

src/chart/helper/LargeSymbolDraw.ts

@@ -315,6 +315,7 @@ class LargeSymbolDraw {
         const symbolEl = new LargeSymbolPath({
             cursor: 'default'
         });
+        symbolEl.ignoreCoarsePointer = true;
         this.group.add(symbolEl);
         this._newAdded.push(symbolEl);
         return symbolEl;

src/core/echarts.ts

@@ -34,7 +34,8 @@ import {
     isDom,
     isArray,
     noop,
-    isString
+    isString,
+    retrieve2
 } from 'zrender/src/core/util';
 import env from 'zrender/src/core/env';
 import timsort from 'zrender/src/core/timsort';
@@ -324,6 +325,8 @@ type EChartsInitOpts = {
     renderer?: RendererType,
     devicePixelRatio?: number,
     useDirtyRect?: boolean,
+    useCoarsePointer?: boolean,
+    pointerSize?: number,
     ssr?: boolean,
     width?: number,
     height?: number
@@ -409,6 +412,7 @@ class ECharts extends Eventful<ECEventDefinition> {
         this._dom = dom;
 
         let defaultRenderer = 'canvas';
+        let defaultCoarsePointer: 'auto' | boolean = 'auto';
         let defaultUseDirtyRect = false;
         if (__DEV__) {
             const root = (
@@ -418,6 +422,8 @@ class ECharts extends Eventful<ECEventDefinition> {
 
             defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
 
+            defaultCoarsePointer = retrieve2(root.__ECHARTS__DEFAULT__COARSE_POINTER, defaultCoarsePointer);
+
             const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
             defaultUseDirtyRect = devUseDirtyRect == null
                 ? defaultUseDirtyRect
@@ -430,7 +436,9 @@ class ECharts extends Eventful<ECEventDefinition> {
             width: opts.width,
             height: opts.height,
             ssr: opts.ssr,
-            useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect
+            useDirtyRect: retrieve2(opts.useDirtyRect, defaultUseDirtyRect),
+            useCoarsePointer: retrieve2(opts.useCoarsePointer, defaultCoarsePointer),
+            pointerSize: opts.pointerSize
         });
         this._ssr = opts.ssr;