当前位置: 首页 > article >正文

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


http://www.kler.cn/news/330868.html

相关文章:

  • 【AIGC】内容创作——AI文字、图像、音频和视频的创作流程
  • PHP反序列化7(字符串逃逸)
  • 《OpenCV 计算机视觉》—— Harris角点检测、SIFT特征检测
  • 用systemd 来控制 qt 程序的启动, 停止 . 解决 qt.qpa.xcb: could not connect to display 问题
  • 工程师 - 如何配置DNS服务器
  • 基于yolov8调用本地摄像头并将读取的信息传入jsonl中
  • SpringBoot框架下的社区医院信息系统开发
  • Stream流的终结方法(二)——collect
  • 2024大二上js高级+ES6学习9.29(深/浅拷贝,正则表达式,let/const,解构赋值,箭头函数,剩余参数)
  • 并集运算的线段树维护方式
  • c++就业磁盘链式b树与b+树
  • 3. 将GitHub上的开源项目导入(clone)到本地pycharm上——深度学习·科研实践·从0到1
  • 滚雪球学MySQL[7.1讲]:安全管理
  • 【笔记】数据结构12
  • Dubbo和Http的调用有什么区别
  • 【Docker】docker的存储
  • el-table动态表头
  • 828华为云征文|部署音乐流媒体服务器 mStream
  • React返回上一个页面,会重新挂载吗
  • 【AI知识点】非独立同分布(non-iid, non-independent and identically distributed)