@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;
        }
      }
    });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值