[Bug]: tooltip插件，鼠标悬浮显示后，graph.clear()，控制台报错，并且一直显示

[EnochGao]

Describe the bug / 问题描述

1. 鼠标悬浮显示
2. graph.clear()后报错，并且延迟隐藏

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@EnochGao 您好！以下是关于您问题的自动回复：

您好，感谢反馈 tooltip 插件在 graph.clear() 后报错及延迟隐藏的问题。以下是分析与建议：

---

问题分析

根据您的描述，主要有两个现象：

1. Tooltip 鼠标悬浮显示后，调用 graph.clear() 报错
2. Tooltip 延迟隐藏，不会及时消失

结合 G6 v5.x 的插件机制和源码，常见原因如下：

• Tooltip 事件未正确解绑：graph.clear() 会清空所有节点、边，但 tooltip 插件可能还在监听悬浮事件，导致引用失效，触发报错。
• Tooltip DOM 未及时移除：清空图时，如果 tooltip 还在异步等待关闭或动画未结束，可能出现延迟隐藏现象。
• 插件生命周期未处理 edge case：部分情况下，插件未正确响应图的销毁或重绘，导致异常。

---

建议解决方案

1. 主动销毁/隐藏 Tooltip

   • 在调用 graph.clear() 前，主动调用 tooltip.hide() 或销毁 tooltip 实例，确保 DOM 和事件都被清理。例如：

     const tooltipPlugin = graph.getPluginInstance('tooltip');
     if (tooltipPlugin) tooltipPlugin.hide();
     graph.clear();

   • 如果使用多个 tooltip 插件（如 click/hover），分别处理每个实例。

2. 监听 graph.clear 事件（插件高级用法）

   • 可在插件 onClear 钩子或 graph 事件中，自动隐藏 tooltip，避免异常。

3. 升级 G6 到最新稳定版本

   • 部分历史版本存在插件事件未解绑的 bug。建议升级到最新版 5.x，并参考官方 Tooltip 插件文档确保配置正确。

4. 确保插件配置规范

   • 确认 tooltip 插件的 enable、trigger、enterable 等参数设置无冲突，避免异步延迟导致延迟隐藏。

---

参考代码

// graph.clear() 前主动隐藏 tooltip
const tooltip = graph.getPluginInstance('tooltip');
if (tooltip) tooltip.hide();
graph.clear();

如果使用自定义 key：

const tooltipHover = graph.getPluginInstance('tooltip-hover');
const tooltipClick = graph.getPluginInstance('tooltip-click');
tooltipHover && tooltipHover.hide();
tooltipClick && tooltipClick.hide();
graph.clear();

---

其他建议

• 若依然报错，请贴出详细错误日志（控制台信息），便于社区定位问题。
• 可以将 tooltip 插件的 getContent、enable 等函数写法与官方示例对比，避免不兼容用法。

---

如需进一步排查或有复现 demo，欢迎补充，我们将持续协助解决！

感谢您的使用和反馈！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[github-actions]

@EnochGao 您好！以下是关于您问题的自动回复：

您好，感谢反馈 tooltip 插件在调用 graph.clear() 后报错并且无法正常隐藏的问题。以下是针对您描述的情况的专业分析和解决建议：

---

问题分析

1. 现象

   • 鼠标悬浮后 tooltip 正常显示。
   • 执行 graph.clear() 后，控制台报错，并且 tooltip 仍然显示，延迟或无法自动隐藏。

2. 原因

   • 调用 graph.clear() 会清除画布上的所有元素，但 tooltip 插件的 DOM 或内部状态未被及时销毁或重置，导致：
     • 悬浮事件已失效，tooltip 仍挂在页面上。
     • 如果 tooltip 内部还在等待异步内容或定时隐藏，可能访问了已不存在的元素，出现报错。

---

解决建议

1. 在调用 graph.clear() 前手动隐藏 tooltip

可以通过插件实例的 hide() 方法主动关闭 tooltip，避免残留：

// 获取 tooltip 插件实例
const tooltip = graph.getPluginInstance('tooltip');
if (tooltip) {
  tooltip.hide();
}
// 然后再清空画布
graph.clear();

2. 检查插件配置与事件绑定

确保 tooltip 的 onOpenChange 钩子中对 open=false 时做了清理处理，或在 clear 时自动触发隐藏。

例如：

plugins: [
  {
    type: 'tooltip',
    onOpenChange: (open) => {
      if (!open) {
        // 可以在此做额外的清理逻辑
      }
    },
  },
]

3. 清理自定义内容或异步逻辑

如使用了自定义 getContent 且有异步操作，请确保 clear 时取消相关 promise 或定时器，避免访问空节点产生报错。

---

推荐实践

• 清空画布前，主动关闭/销毁 tooltip 插件，避免残留 DOM 或事件。
• 如有多个 tooltip（如 hover/click），建议分别获取实例并全部隐藏。
• 如频繁动态更新数据，建议用 graph.changeData() 替代 graph.clear()，以减少副作用。
• 如发现插件内部未随 clear 自动销毁，可反馈给 G6 官方进行优化。

---

参考官方文档

• G6 Tooltip 插件文档
• 插件实例获取与方法

---

示例代码

// 推荐写法：清空前隐藏 tooltip
const tooltip = graph.getPluginInstance('tooltip');
if (tooltip) tooltip.hide();
graph.clear();

---

希望以上建议能帮助您解决问题。如仍有异常，请贴出完整报错信息和代码片段，便于进一步定位。感谢您的支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[EnochGao]

在clear之前hidden还是会报错

[EnochGao]

    this.G6Graph.on<IPointerEvent<Rect>>(NodeEvent.CLICK, async (e) => {
      console.log('click::', e.target);
      const { target } = e;
      await this.G6Graph.clear();
    });

监听节点点击事件，事件中清除就会报错

[EnochGao]

不知道是不是插件引起的

import { Graph, NodeEvent } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', data: { label: 'Node 1' } },
    { id: 'node2', data: { label: 'Node 2' } },
    { id: 'node3', data: { label: 'Node 3' } },
  ],
  edges: [
    { id: 'edge1', source: 'node1', target: 'node2', data: { label: 'Edge 1' } },
    { id: 'edge2', source: 'node2', target: 'node3', data: { label: 'Edge 2' } },
  ]
};

const graph = new Graph({
  container: 'container',
  autoResize: true,
  autoFit: 'view',
  background: '#fff',
  zoomRange: [0.5, 2],
  padding: 40,
  behaviors: [
    'optimize-viewport-transform',
    'drag-canvas',
    'zoom-canvas',
    {
      type: 'drag-element',
      key: 'drag-node-only',
      enable: (event) => event.targetType === 'node',
    },
    {
      type: 'hover-activate',
      degree: 1,
      direction: 'both',
      enable: (e) => {
        if (e.targetType === 'node') {
          return true;
        }
        return false;
      },
    },
  ],
  plugins: [
    {
      type: 'grid-line',
      key: 'my-grid-line',
      size: 20,
      stroke: '#0001',
      follow: true,
    },
    {
      type: 'toolbar',
      getItems: () => [
        { id: 'zoom-in', value: 'zoom-in' },
        { id: 'zoom-out', value: 'zoom-out' },
        { id: 'auto-fit', value: 'auto-fit' },
        { id: 'export', value: 'export' },
      ],
      onClick: (value) => {
        if (value === 'zoom-in') {
          graph.zoomBy(1.2, {
            duration: 200,
            easing: 'easeCubic',
          });
        } else if (value === 'zoom-out') {
          graph.zoomBy(0.8);
        } else if (value === 'auto-fit') {
          graph.fitView();
        } else if (value === 'export') {
          console.log('Export image');
        }
      },
    },
  ],
  layout: {
    type: 'force',
    nodeSize: 300,
  },
  node: {
    type: 'rect',
    style: {
      size: [200, 40],
      fill: '#002FA7',
      labelFill: '#fff',
      labelText: (d) => d.data.label,
      labelPlacement: 'center',
      labelWordWrap: true,
      labelMaxWidth: '90%',
    },
    state: {
      active: {
        fill: '#001f6e',
        stroke: '#fff',
        lineWidth: 2,
        shadowColor: '#001f6e',
        shadowBlur: 10,
      },
      inactive: {
        fill: '#3a6ad3',
        stroke: '#fff',
        lineWidth: 1,
      },
    },
  },
  edge: {
    style: {
      labelText: (d) => d.data.label,
    },
    state: {
      active: {
        stroke: '#001f6e',
        lineWidth: 2,
      },
    },
  },
  data,
});

graph.render();

// 正确处理节点点击事件
graph.on(NodeEvent.CLICK, async (evt) => {
  // 在clear之前获取节点信息
  const nodeId = evt.target.id;
  console.log('点击的节点ID:', nodeId);
  
  // 执行清除操作
  await graph.clear();
  
  console.log('图表已清空');
});

[EnochGao]

复现案例地址：https://stackblitz.com/edit/stackblitz-starters-tgzk8kks?file=tsconfig.json