[Bug]: G6 5.x版本，官网的minmap示例中，画布与minimap遮罩选中区域不一致

[swq90]

Describe the bug / 问题描述

G6 5.1.x版本，官网的minmap示例中，画布与minimap遮罩选中区域不一致

Reproduction link / 复现链接

https://g6.antv.antgroup.com/manual/plugin/minimap

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

1.minimap示例，放大画布并拖动到画布边缘使得minimap的遮罩尺寸最小和小地图边缘几乎重合
2.拖动遮罩，可以看到画布中展示节点和遮罩所覆盖范围不一致

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

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

感谢您的反馈！您的问题描述非常清晰。针对 G6 5.x 版本 minimap 遮罩与画布显示区域不同步的问题，下面是分析与建议：

---

问题分析

您在官网示例中发现：

• 当画布放大并拖到边缘时，minimap 的遮罩尺寸变得极小且与小地图边缘几乎重合。
• 拖动遮罩后，画布实际显示的节点与遮罩覆盖范围不一致。

这种情况通常是由于 minimap 遮罩与主画布视口的同步计算存在偏差，尤其在极端缩放或拖动边缘时。

---

可能原因

1. 同步算法误差：Minimap 遮罩位置和大小是通过主画布的 viewport（视口）计算映射的。如果映射算法未正确处理极端缩放/拖动，可能出现遮罩与视口不一致。
2. 配置缺失：部分行为（如 drag-canvas、zoom-canvas）未正确启用，导致 minimap 没有及时响应画布变化。
3. 延迟/刷新问题：遮罩刷新延迟（delay）过高或未及时更新，也会导致不一致。

---

检查与优化建议

1. 确保行为配置完整

   const graph = new Graph({
     // 其他配置...
     behaviors: ['drag-canvas', 'zoom-canvas'],
     plugins: [
       {
         key: 'minimap',
         type: 'minimap',
         size: [240, 160],
         position: 'right-bottom',
         // 可根据实际需求调整 delay、padding 等参数
       },
     ],
   });

2. 适当调整 minimap 配置

   • 可尝试增加 minimap 的 padding，减少遮罩超边界的概率。
   • 调整 delay 参数，确保遮罩即时更新。
   • 检查 maskStyle 和 containerStyle，避免样式影响遮罩显示。

3. 升级 G6 版本

   • 如果官网示例已是最新版本，建议关注官方 issue或升级到最新 patch 版本（如 5.1.x -> 5.2.x），有可能已修复此类同步问题。

4. 复现与调试

   • 在控制台打印 minimap 遮罩的坐标与主画布 viewport，确认同步逻辑。
   • 可用 graph.getCanvasByViewport(point) 检查坐标转换结果。

---

示例代码

确保 minimap 与画布行为同步：

const graph = new Graph({
  container: 'container',
  width: 800,
  height: 600,
  behaviors: ['drag-canvas', 'zoom-canvas'],
  plugins: [
    {
      key: 'minimap',
      type: 'minimap',
      size: [240, 160],
      position: 'right-bottom',
      padding: 10,
      delay: 100,
      maskStyle: { border: '1px solid #ddd', background: 'rgba(0,0,0,0.1)' },
      containerStyle: { border: '1px solid #ddd', background: '#fff' },
    },
  ],
});

---

后续建议

• 如官方示例确实存在问题，可提交详细复现步骤至 AntV G6 issue。
• 若您有代码片段或更详细的场景，欢迎补充，便于进一步排查。

---

感谢您的反馈，G6 团队会持续关注 minimap 同步体验，欢迎继续提出建议与问题！

---

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

💡 您也可以前往 Sive 平台 体验 AntV 智能问答！