X6
X6 copied to clipboard
群组不支持框选/多选节点嵌入
Describe the bug
当使用框选/多选功能时,选择多个节点 将选择的多个节点移动到群组中,群组节点只会将鼠标移动的节点嵌入群组节点内 其它被选中的节点未自动嵌入
Your Example Website or App
https://codesandbox.io/s/vibrant-pare-yqc3if?file=/index.ts
Steps to Reproduce the Bug or Issue
- 将多个节点位置集中
- 选中/框选多个节点
- 移动框选中的子节点到群组节点内
Expected behavior
群组节点支持批量嵌入功能 embedding中的findParent、validate支持批量节点的验证
Screenshots or Videos
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
👋 @zzyyu
Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
Any progress on this?
Any progress on this?
我使用如下方法来支持框选节点嵌入。在实现的时候,我发现node.setParent方法失效,但是没花时间去尝试复现了,大家可以看下。
embedding: {
enabled: true,
findParent({node}) {//拖动节点时,执行该函数
const bbox = node.getBBox();
//寻找节点的父节点
const parentNodes = this.getNodes().filter((cell) => {
const parentBbox = cell.getBBox();
//如果节点的bbox和该群组节点的bbox相交,则群组节点是该节点的父节点
if (bbox.isIntersectWithRect(parentBbox)) {
const nodes = this.getSelectedCells();
/**
* 注:antV x6的框选节点功能不能把被框选的其他节点一同设置为子节点
* 采用如下方法将当前框选的节点一并设置为群组节点的子节点
* 有可能出现被框选的节点没有和群组节点相交,也被设置为子节点的情况
* 但是用户已经框选一些节点并将其中一个节点拖进群组了,就认为他的目的就是一起设置
* 下面删除parent也是一样
*/
nodes.forEach((node) => {
//不知道为啥,node.setParent(cell)不生效,只能用addChild
cell.addChild(node);
node.getData().parent = cell.id;
//为了避免节点被群组节点遮罩,设为最顶层
node.toFront();
})
return true;
}
return false;
})
//如果没有找到任何父节点,则删除该节点的parent属性(移出群组)
if (parentNodes.length === 0) {
const nodes = this.getSelectedCells();
nodes.forEach((node) => {
//由于node.setParent(null)不生效,而且parent.removeChild会直接删除节点
//所以只能先过滤出删除后的子节点,再重新设置子节点
const parent = node.getParent();
if (parent) {
parent.setChildren(parent.filterChild((child) => child !== node))
}
})
}
return parentNodes;
},
},
Any progress on this?