feat(tooltip): 使用组件新 API setCapture

antvis · Mar 23, 2020 · d5f1e21 · d5f1e21
1 parent 1e4e0ba
commit d5f1e21
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git 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,13 +163,22 @@ export default class Tooltip extends Controller<TooltipOption> {
    */
   public lockTooltip() {
     this.isLocked = true;
+    if (this.tooltip) {
+      // tooltip contianer 可捕获事件
+      this.tooltip.setCapture(true);
+    }
   }
 
   /**
    * unlockTooltip
    */
   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
@@ -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', () => {