Feature: coarse pointer tolerance

src/Handler.ts

@@ -11,7 +11,7 @@ import { ZRRawEvent, ZRPinchEvent, ElementEventName, ElementEventNameWithOn, ZRR
 import Storage from './Storage';
 import Element, {ElementEvent} from './Element';
 import CanvasPainter from './canvas/Painter';
-
+import BoundingRect from './core/BoundingRect';
 
 /**
  * [The interface between `Handler` and `HandlerProxy`]:
@@ -131,6 +131,8 @@ const handlerNames = [
 type HandlerName = 'click' |'dblclick' |'mousewheel' |'mouseout' |
     'mouseup' |'mousedown' |'mousemove' |'contextmenu';
 
+const tmpRect = new BoundingRect(0, 0, 0, 0);
+
 // TODO draggable
 class Handler extends Eventful {
 
@@ -146,6 +148,8 @@ class Handler extends Eventful {
 
     private _draggingMgr: Draggable
 
+    private _pointerSize: number
+
     _downEl: Element
     _upEl: Element
     _downPoint: [number, number]
@@ -154,7 +158,8 @@ class Handler extends Eventful {
         storage: Storage,
         painter: PainterBase,
         proxy: HandlerProxyInterface,
-        painterRoot: HTMLElement
+        painterRoot: HTMLElement,
+        pointerSize: number
     ) {
         super();
 
@@ -164,6 +169,8 @@ class Handler extends Eventful {
 
         this.painterRoot = painterRoot;
 
+        this._pointerSize = pointerSize;
+
         proxy = proxy || new EmptyProxy();
 
         /**
@@ -337,18 +344,55 @@ class Handler extends Eventful {
     findHover(x: number, y: number, exclude?: Displayable): HoveredResult {
         const list = this.storage.getDisplayList();
         const out = new HoveredResult(x, y);
+        setHoverTarget(list, out, x, y, exclude);
+
+        if (this._pointerSize && !out.target) {
+            /**
+             * If no element at pointer position, check intersection with
+             * elements with pointer enlarged by target size.
+             */
+            const candidates: Displayable[] = [];
+            const pointerSize = this._pointerSize;
+            const targetSizeHalf = pointerSize / 2;
+            const pointerRect = new BoundingRect(x - targetSizeHalf, y - targetSizeHalf, pointerSize, pointerSize);
+
+            for (let i = list.length - 1; i >= 0; i--) {
+                const el = list[i];
+                if (el !== exclude
+                    && !el.ignore
+                    && !el.ignoreCoarsePointer
+                    // If an element ignores, its textContent should also ignore.
+                    // TSpan's parent is not a Group but a ZRText.
+                    // See Text.js _getOrCreateChild
+                    && (!el.parent || !(el.parent as any).ignoreCoarsePointer)
+                ) {
+                    tmpRect.copy(el.getBoundingRect());
+                    if (el.transform) {
+                        tmpRect.applyTransform(el.transform);
+                    }
+                    if (tmpRect.intersect(pointerRect)) {
+                        candidates.push(el);
+                    }
+                }
+            }
 
-        for (let i = list.length - 1; i >= 0; i--) {
-            let hoverCheckResult;
-            if (list[i] !== exclude
-                // getDisplayList may include ignored item in VML mode
-                && !list[i].ignore
-                && (hoverCheckResult = isHover(list[i], x, y))
-            ) {
-                !out.topTarget && (out.topTarget = list[i]);
-                if (hoverCheckResult !== SILENT) {
-                    out.target = list[i];
-                    break;
+            /**
+             * If there are elements whose bounding boxes are near the pointer,
+             * use the most top one that intersects with the enlarged pointer.
+             */
+            if (candidates.length) {
+                const rStep = 4;
+                const thetaStep = Math.PI / 12;
+                const PI2 = Math.PI * 2;
+                for (let r = 0; r < targetSizeHalf; r += rStep) {
+                    for (let theta = 0; theta < PI2; theta += thetaStep) {
+                        const x1 = x + r * Math.cos(theta);
+                        const y1 = y + r * Math.sin(theta);
+                        setHoverTarget(candidates, out, x1, y1, exclude);
+                        if (out.target) {
+                            return out;
+                        }
+                    }
                 }
             }
         }
@@ -468,6 +512,30 @@ function isHover(displayable: Displayable, x: number, y: number) {
     return false;
 }
 
+function setHoverTarget(
+    list: Displayable[],
+    out: HoveredResult,
+    x: number,
+    y: number,
+    exclude: Displayable
+) {
+    for (let i = list.length - 1; i >= 0; i--) {
+        const el = list[i];
+        let hoverCheckResult;
+        if (el !== exclude
+            // getDisplayList may include ignored item in VML mode
+            && !el.ignore
+            && (hoverCheckResult = isHover(el, x, y))
+        ) {
+            !out.topTarget && (out.topTarget = el);
+            if (hoverCheckResult !== SILENT) {
+                out.target = el;
+                break;
+            }
+        }
+    }
+}
+
 /**
  * See [DRAG_OUTSIDE].
  */

src/core/event.ts

@@ -309,6 +309,5 @@ export function isMiddleOrRightButtonOnMouseUpDown(e: { which: number }) {
     return e.which === 2 || e.which === 3;
 }
 
-
 // For backward compatibility
 export {Eventful as Dispatcher};

src/graphic/Displayable.ts

@@ -66,6 +66,8 @@ export interface DisplayableProps extends ElementProps {
 
     incremental?: boolean
 
+    ignoreCoarsePointer?: boolean
+
     batch?: boolean
     invisible?: boolean
 }
@@ -127,6 +129,11 @@ class Displayable<Props extends DisplayableProps = DisplayableProps> extends Ele
      */
     incremental: boolean
 
+    /**
+     * Never increase to target size
+     */
+    ignoreCoarsePointer?: boolean
+
     style: Dictionary<any>
 
     protected _normalState: DisplayableState

src/zrender.ts

@@ -126,7 +126,18 @@ class ZRender {
         const handerProxy = (!env.node && !env.worker && !ssrMode)
             ? new HandlerProxy(painter.getViewportRoot(), painter.root)
             : null;
-        this.handler = new Handler(storage, painter, handerProxy, painter.root);
+
+        const useCoarsePointer = opts.useCoarsePointer;
+        const usePointerSize = (useCoarsePointer == null || useCoarsePointer === 'auto')
+            ? env.touchEventsSupported
+            : !!useCoarsePointer;
+        const defaultPointerSize = 44;
+        let pointerSize;
+        if (usePointerSize) {
+            pointerSize = zrUtil.retrieve2(opts.pointerSize, defaultPointerSize);
+        }
+
+        this.handler = new Handler(storage, painter, handerProxy, painter.root, pointerSize);
 
         this.animation = new Animation({
             stage: {
@@ -425,6 +436,8 @@ export interface ZRenderInitOpt {
     width?: number | string // 10, 10px, 'auto'
     height?: number | string
     useDirtyRect?: boolean
+    useCoarsePointer?: 'auto' | boolean
+    pointerSize?: number
     ssr?: boolean   // If enable ssr mode.
 }