button-remove 层级显示问题

[forever0714yuan]

问题描述

使用工具button-remove 添加删除按钮之后，出现层级问题。 1.有两个节点A和B，两个节点都拥有 button-remove 删除按钮， 2.当A和B重叠，且A在B上，出现了B的删除按钮在A上的情况。

重现链接

官网例子：https://x6.antv.antgroup.com/tutorial/intermediate/tools

重现步骤

官网例子也有这个问题，下面描述以官网例子进行描述。 1.Source节点和Target节点都拥有删除按钮 2.将Target节点移动到Source节点之上， 3.出现Source节点的按钮出现在Target节点上面

预期行为

我希望Source节点的删除 不会出现在Target之上，但是现在出现在了Target节点之上

平台

• 操作系统: [Windows 11 ]
• 网页浏览器: [Google Chrome 119.0.6045.200]
• X6 版本: [2.11.1]
• vue3

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[apankun]

需要在addtool的时候设置local和reset为true，让工具和节点在同一个svg渲染。 默认工具的svg是在节点之后渲染的，会有层级问题。 https://x6.antv.antgroup.com/api/model/cell#addtools

[forever0714yuan]

你好，我已收到你的来信。辛苦了！！

[forever0714yuan]

好的 已收到 感谢您的解答

[forever0714yuan]

我在按您所说的方法配置后，发现，删除按钮会在节点移动的时候跟随移动 **复现连接:**https://codesandbox.io/p/sandbox/falling-architecture-lr3rjm?file=%2FApp.tsx%3A49%2C17

[byk04712]

不只是 button-remove 的层级问题，所有 tools 层级都很高，都在其他 Node 和 Edge 之上，这怎么破?

看到另外一个 issues 的回答是， svg 工具会处于节点上方，且无法修改，可以自定义 html 工具，设置 css 的 z-index 修改显示层级 。

其实内置的 tools 能满足需求，只是显示层级很高，因为显示层级问题而要自定义 html 工具来实现，有点费时费力