fix: 修复graphs中tooltip频繁闪烁问题 (#1946)

Co-authored-by: chenkun <ck01107787@antgroup.com>
ant-design · Jul 7, 2023 · 7cc988f · 7cc988f
1 parent b4df3da
commit 7cc988f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/packages/graphs/src/plugins/toolbar.tsx b/packages/graphs/src/plugins/toolbar.tsx
@@ -22,6 +22,7 @@ export const processToolbar = (cfg: ToolbarCfg = {}, graph: Graph, container: HT
         className: className ?? 'charts-toolbar',
         id: toolbarId,
       },
+      'toolbar',
       {
         ...defaultToolbarStyle,
         ...style,

diff --git a/packages/graphs/src/plugins/tooltip.ts b/packages/graphs/src/plugins/tooltip.ts
@@ -2,6 +2,7 @@ import G6, { Tooltip } from '@antv/g6';
 import { isFunction } from '@antv/util';
 import { TooltipCfg, Graph } from '../interface';
 import { createNode } from '../utils';
+import { uuid } from '../utils/uuid';
 
 export const processTooltip = (cfg: TooltipCfg = {}, graph: Graph): void => {
   if (!graph || graph.destroyed) {
@@ -14,16 +15,22 @@ export const processTooltip = (cfg: TooltipCfg = {}, graph: Graph): void => {
   // 兼容旧数据
   if (cfg.show || (cfg.show === undefined && Object.keys(cfg).length > 0)) {
     const { customContent, ...rest } = cfg;
+    const _uuid = uuid();
     const tooltip = new G6.Tooltip({
       offsetX: 10,
       offsetY: 20,
       itemTypes: ['node'],
       ...rest,
       getContent(e) {
         return isFunction(customContent)
-          ? createNode(customContent(e.item.getModel()), {
-              className: 'g6-tooltip',
-            })
+          ? createNode(
+              customContent(e.item.getModel()),
+              {
+                className: 'g6-tooltip',
+              },
+              'tooltip',
+              _uuid,
+            )
           : '';
       },
       name: 'tooltip',

diff --git a/packages/graphs/src/utils/create-fetch-loading.ts b/packages/graphs/src/utils/create-fetch-loading.ts
@@ -10,9 +10,13 @@ export const createFetchLoading = (node: NodeConfig, fetchLoading: FetchLoading)
   if (fetchLoading) {
     const loadingTemplate = isFunction(fetchLoading) ? fetchLoading(node) : fetchLoading;
     document.body.appendChild(
-      createNode(loadingTemplate, {
-        className: loadingClassName,
-      }),
+      createNode(
+        loadingTemplate,
+        {
+          className: loadingClassName,
+        },
+        'fetchloading',
+      ),
     );
   } else {
     const container = document.createElement('div');

diff --git a/packages/graphs/src/utils/create-node.ts b/packages/graphs/src/utils/create-node.ts
@@ -1,13 +1,34 @@
 import { render } from './render';
 import { setStyles } from './set-styles';
 
-export const createNode = (children: React.ReactNode, attrs: object = {}, styles?: React.CSSProperties) => {
-  const mountPoint = document.createElement('div');
+const TOOLTIP_CONTAINER_MAPPING = new Map();
+
+export const createNode = (
+  children: React.ReactNode,
+  attrs: object = {},
+  type: string,
+  styles?: React.CSSProperties | string,
+  uuid?: string,
+) => {
+  if (typeof styles === 'string') {
+    uuid = styles;
+    styles = undefined;
+  }
+  let mountPoint = document.createElement('div');
   Object.keys(attrs).forEach((key) => {
     mountPoint[key] = attrs[key];
   });
   if (styles) {
-    setStyles(mountPoint, styles);
+    setStyles(mountPoint, styles as React.CSSProperties);
+  }
+  if (type === 'tooltip') {
+    mountPoint.setAttribute('data-uuid', uuid);
+    if (TOOLTIP_CONTAINER_MAPPING.has(uuid)) {
+      mountPoint = TOOLTIP_CONTAINER_MAPPING.get(uuid);
+    } else {
+      TOOLTIP_CONTAINER_MAPPING.set(uuid, mountPoint);
+    }
+    mountPoint.className = 'g2-tooltip';
   }
   render(children as React.ReactElement, mountPoint);
   return mountPoint;