fix: tooltip plugin with shouldBegin problem, closes #2006.

antvis · Sep 2, 2020 · c5f7bc3 · c5f7bc3
1 parent bddae6f
commit c5f7bc3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/plugins/tooltip/index.ts b/src/plugins/tooltip/index.ts
@@ -87,9 +87,8 @@ export default class Tooltip extends Base {
   }
 
   onMouseEnter(e: IG6GraphEvent) {
-    const shouldBegin = this.get('shouldBegin');
-    if (!shouldBegin(e)) return;
     const itemTypes = this.get('itemTypes');
+
     if (e.item && e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;
     const { item } = e;
     const graph: IGraph = this.get('graph');
@@ -99,8 +98,6 @@ export default class Tooltip extends Base {
   }
 
   onMouseMove(e: IG6GraphEvent) {
-    const shouldBegin = this.get('shouldBegin');
-    if (!shouldBegin(e)) return;
     const itemTypes = this.get('itemTypes');
     if (e.item && e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;
     if (!this.currentTarget || e.item !== this.currentTarget) {
@@ -117,12 +114,11 @@ export default class Tooltip extends Base {
   }
 
   showTooltip(e: IG6GraphEvent) {
-    const shouldBegin = this.get('shouldBegin');
-    if (!shouldBegin(e)) return;
     if (!e.item) {
       return;
     }
     const itemTypes = this.get('itemTypes');
+
     if (e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;
 
     const container = this.get('tooltip');
@@ -146,11 +142,18 @@ export default class Tooltip extends Base {
   }
 
   updatePosition(e: IG6GraphEvent) {
+    const shouldBegin = this.get('shouldBegin');
+    const tooltip = this.get('tooltip');
+    if (!shouldBegin(e)) {
+      modifyCSS(tooltip, {
+        visibility: 'hidden',
+      });
+      return
+    };
     const graph: Graph = this.get('graph');
     const width: number = graph.get('width');
     const height: number = graph.get('height');
 
-    const tooltip = this.get('tooltip');
 
     const offsetX = this.get('offsetX') || 0;
     const offsetY = this.get('offsetY') || 0;

diff --git a/stories/Plugins/component/tooltip.tsx b/stories/Plugins/component/tooltip.tsx
@@ -48,6 +48,10 @@ const Tooltip = () => {
       const tooltip = new G6.Tooltip({
         offsetX: 0,
         offsetY: 100, // the height of the top div
+        shouldBegin: d => {
+          if (d.target.get('name') === 'text-shape') return true;
+          return false;
+        }
       });
       graph = new Graph({
         container: container.current as string | HTMLElement,
@@ -57,6 +61,9 @@ const Tooltip = () => {
         modes: {
           default: ['drag-canvas', 'zoom-canvas'],
         },
+        defaultNode: {
+          size: 50
+        }
       });
       graph.data(data);
       graph.render();