From d5f1e21ca9508f957d994634dc62d1d2b7f2cfcc Mon Sep 17 00:00:00 2001
From: simaQ <sima.zhang1990@gmail.com>
Date: Mon, 23 Mar 2020 14:34:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(tooltip):=20=E4=BD=BF=E7=94=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=20API=20setCapture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chart/controller/tooltip.ts     | 23 ++++++++++++++---------
 tests/unit/chart/view/index-spec.ts |  4 ++++
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts
index 0d3e7745a1..dee3421fc6 100644
--- a/src/chart/controller/tooltip.ts
+++ b/src/chart/controller/tooltip.ts
@@ -1,6 +1,6 @@
 import { CONTAINER_CLASS } from '@antv/component/lib/tooltip/css-const';
 
-import { deepMix, each, find, flatten, get, isArray, isEqual, isFunction, mix } from '@antv/util';
+import { deepMix, each, find, flatten, get, isArray, isEqual, isFunction, mix, isUndefined } from '@antv/util';
 import { Crosshair, HtmlTooltip, IGroup } from '../../dependents';
 import Geometry from '../../geometry/base';
 import { MappingDatum, Point, TooltipOption } from '../../interface';
@@ -163,6 +163,10 @@ export default class Tooltip extends Controller<TooltipOption> {
    */
   public lockTooltip() {
     this.isLocked = true;
+    if (this.tooltip) {
+      // tooltip contianer 可捕获事件
+      this.tooltip.setCapture(true);
+    }
   }
 
   /**
@@ -170,6 +174,11 @@ export default class Tooltip extends Controller<TooltipOption> {
    */
   public unlockTooltip() {
     this.isLocked = false;
+    const cfg = this.getTooltipCfg();
+    if (this.tooltip) {
+      // 重置 capture 属性
+      this.tooltip.setCapture(cfg.capture);
+    }
   }
 
   /**
@@ -305,14 +314,10 @@ export default class Tooltip extends Controller<TooltipOption> {
     const option = view.getOptions().tooltip;
     const theme = view.getTheme();
     const defaultCfg = get(theme, ['components', 'tooltip'], {});
-    const pointerEvents = (get(option, 'enterable') || this.isLocked) ? 'auto' : (defaultCfg.enterable ? 'auto' : 'none');
-    return deepMix({}, defaultCfg, {
-      domStyles: {
-        [`${CONTAINER_CLASS}`]: {
-          pointerEvents,
-        },
-      },
-    }, option);
+    const enterable = isUndefined(get(option, 'enterable')) ? defaultCfg.enterable : get(option, 'enterable');
+    return deepMix({}, defaultCfg, option, {
+      capture: enterable || this.isLocked ? true : false,
+    });
   }
 
   private getTitle(items) {
diff --git a/tests/unit/chart/view/index-spec.ts b/tests/unit/chart/view/index-spec.ts
index 91234eba3f..673c2b0f49 100644
--- a/tests/unit/chart/view/index-spec.ts
+++ b/tests/unit/chart/view/index-spec.ts
@@ -315,11 +315,15 @@ describe('View', () => {
   it('lockTooltip', () => {
     view.lockTooltip();
     expect(view.isTooltipLocked()).toBeTrue();
+    // @ts-ignore
+    expect(div.getElementsByClassName('g2-tooltip')[0].style['pointer-events']).toBe('auto');
   });
 
   it('unlockTooltip', () => {
     view.unlockTooltip();
     expect(view.isTooltipLocked()).toBeFalse();
+    // @ts-ignore
+    expect(div.getElementsByClassName('g2-tooltip')[0].style['pointer-events']).toBe('none');
   });
 
   it('filtered group scale values', () => {