@antv/x6 嵌入结点到父节点中时,进行检测,查看当前节点是否是父结点,如果是父结点,不可以嵌入到父结点中,实现方法一。
1、项目中会有几个父结点,可以拖动父结点,然后将子结点拖到里面,这样就便于结点的管理与分类。
2、那么现在的问题就是如果是拖动的是父类型的结点,直接到父结点中,这样是不匀许的。
我们要给出提示,并且还原初始的状态。
3、找了半天,发现并没有提供像node:drag或者node:begindrag或者node:draging的事件,所以没有办法直接进行处理。
4、事件执行顺序:findParent(检测父结点,这里面并没有子结点),node:added(增加节点到画面布中),node:embedded(嵌入结点)。
5、处理1:在findParent中我们进行父节点状态的保存,比如宽高位置等等。
embedding: {
enabled: true,
findParent({ node, view }) {
const bbox = node.getBBox();
return this.getNodes().filter((node) => {
// console.log('embedding filter:', node);
const data = node.getData<any>();
if (data && data.parent) {
const targetBBox = node.getBBox();
parentSize.width = targetBBox.width;
parentSize.height = targetBBox.height;
return bbox.isIntersectWithRect(targetBBox);
}
return false;
});
},
},
6、处理2:我们在增加node:embedded的事件中,进行源结果的判断,并且可以直接删除节点。
7、处理3:根据之前父节点的状态,还原父节点。
graph.on('node:embedded', ({ node }) => {
let data = node.store.data; // 获取节点数据
if (data.attrs.data.parent != undefined && data.attrs.data.parent) {
message.warning('父节点不可以拖拽到里面');
let parent = node.getParent();
parent.removeChild(node);
if (parentSize.width != 0) {
parent.resize(parentSize.width, parentSize.height);
parentSize.width = 0;
}
}
});