antv x6将节点拖动到两连线的节点中,自动插入

news2024/9/21 4:36:24

1、找到节点相交的边

/**
   * 
   * 将节点拖入两节点之间自动插入【找相交的边】
   * date 2023-07-29
   */
   export const findIntersectsEdge = (graph, node) => {
  const edges = graph.getEdges();
  const bbox = node.getBBox();
  const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine];  
  let res = null;
  edges.forEach((edge) => {    
    const view = graph.findViewByCell(edge);
    lines.forEach((line) => {      
      if (view) {
        if (view.path.intersectsWithLine(line)) {
          res = edge;
        }
      }
    });
  });
  return res;
};

2、对插入的节点进行判断、克隆、设置、插入

 graph.on("node:added", ({ node }) => {
    const e = findIntersectsEdge(graph, node);
    if (e) {
      if (e.store.data.source.cell) {
        let newNode = graph.getCellById(node.id);
        const sourceNode = e.getSourceNode();
        const targetNode = e.getTargetNode();     
        let isInsertFlag = false; //是否插入标志位
        if (
          newNode.shape == "flow-chart-rect-end" ||
          newNode.shape == "flow-chart-rect-start" ||       
        ) {
          isInsertFlag = false;
        } else { 
          isInsertFlag = true;
        }
        if (sourceNode && targetNode && isInsertFlag) {
          e.clone()
            .setSource({
              cell: sourceNode.id,
              connectionPoint: {
                name: "boundary",
                args: {
                  sticky: true,
                },
              },
            })
            .setTarget({
              cell: node.id,
              connectionPoint: {
                name: "boundary",
                args: {
                  sticky: true,
                },
              },
              })
            .addTo(graph);
          e.clone()
            .setSource({
              cell: node.id,
              connectionPoint: {
                name: "boundary",
                args: {
                  sticky: true,
                },
              },
              })
            .setTarget({
              cell: targetNode.id,
              connectionPoint: {
                name: "boundary",
                args: {
                  sticky: true,
                },
              },        
            })
            .addTo(graph);  
          graph.removeEdge(e);
        }
      }
    }
  });

效果图:

在这里插入图片描述

参考:https://blog.csdn.net/ZCJSGSZ/article/details/126545542

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/812245.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《零基础入门学习Python》第073讲:GUI的终极选择:Tkinter10

我们不难发现,几乎每一个应用程序都有一些相同的地方,比如说:标题栏、状态栏、边框、滚动条、工作区。还有的就是 菜单。 传统的菜单有大家熟悉的 File,Edit,Help等,点开之后,是下拉菜单&#…

点云可视化工具2

文章目录 1. 序2. 开发环境2.1 QT PCL 3. 程序3.1 新建项目3.2 修改.pro文件3.2.1 添加头文件目录3.2.2 添加依赖的库文件 3.3 软件界面3.3.1 ui文件3.3.2 按钮图标3.3.3 其他界面设置 3.4 点云处理3.4.1 点云读取显示3.4.2 上/下一张显示点云3.4.3 状态栏显示点云信息3.4.5 线…

0基础五分钟学会使用shardingJDBC实现分表 及测试

1.引入相关依赖 <dependency> <groupId>org.apache.shardingsphere</groupId> <artifactId>sharding-jdbc-spring-boot-starter</artifactId> <version>4.1.1</version> </dependency> 2.添加配置 不懂的地方自己看注释 主…

vue基础-虚拟dom

vue基础-虚拟dom 1、真实dom目标2、虚拟dom目标 1、真实dom目标 在真实的document对象上&#xff0c;渲染到浏览器上显示的标签。 2、虚拟dom目标 本质是保存节点信息、属性和内容的一个JS对象 更新会监听变化的部分 给真实的DOM打补丁

SpringBoot多环境开发-配置文件

在Spring Boot中进行多环境开发时&#xff0c;你可以使用配置文件来定义每个环境的属性。Spring Boot提供了一种方便的方式来管理和加载不同环境的配置文件。 以下是一些常见的配置文件命名约定&#xff1a; application.properties: 默认的配置文件&#xff0c;适用于所有环…

Unity 性能优化五:渲染模块压力

CPU压力 Batching 在GPU渲染前&#xff0c;CPU会把数据按batch发送给GPU&#xff0c;每发送一次&#xff0c;都是一个drawcall&#xff0c;GPU在渲染每个batch的时候&#xff0c;会切换渲染状态&#xff0c;这里的渲染状态指的是&#xff1a;影响对象在屏幕上的外观的渲染属性…

【公益】Q学友联合福田人力资源局开展“侨香社区促就业 技能培训强本领”

落实《“十四五”就业促进规划》文件精神&#xff0c;进一步提高就业劳动者就业技能水平&#xff0c;提高居民就业率&#xff0c;侨香社区党委坚持以党建为引领&#xff0c;整合多方资源&#xff0c;深入开展“我为群众办实事”&#xff0c;切合群众实际、满足群众需求&#xf…

Huggingface基本使用

目录 0.install 1.tokenizer 2.datasets 3.metrics 0.install !pip install transformers !pip install datasets 1.tokenizer from transformers import BertTokenizer#加载预训练字典和分词方法 tokenizer BertTokenizer.from_pretrained(pretrained_model_name_or…

力扣 509. 斐波那契数

题目来源&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ C题解1&#xff1a;根据题意&#xff0c;直接用递归函数。 class Solution { public:int fib(int n) {if(n 0) return 0;else if(n 1) return 1;else return(fib(n-1) fib(n-2));} }; C题…

【物联网无线通信技术】UWB定位从理论到实现(DW1000)

超宽带&#xff08;UWB&#xff09;是一种基于IEEE 802.15.4a和802.15.4z标准的无线电技术&#xff0c;可以非常精确地测量无线电信号的飞行时间&#xff0c;从而实现厘米级精度的距离/位置测量。UWB技术除了提供定位功能外&#xff0c;它本身是一种通信技术&#xff0c;其提供…

Java在线OJ项目(三)、前后端交互API模块

Java在线OJ项目&#xff08;三&#xff09;、前后端交互API模块 1. 客户端向服务器请求所有题目 或者 单个题目前端获取所有题目获取一个题目 后端 2. 后端读取前端提交的代码&#xff0c;进行编译运行&#xff0c;返回结果前端提交代码后端处理 1. 客户端向服务器请求所有题目…

【程序设计】一文讲解程序设计原则SOLDI

前言 设计原则&#xff0c;是指导我们如何设计出低耦合、高内聚的代码&#xff0c;让代码能够更好的应对变化&#xff0c;从而降本提效。 设计原则的关键&#xff0c;是从『使用方的角度』看『提供方』的设计&#xff0c;一句话概括就是&#xff1a;请不要要我知道太多&#…

VBA技术资料MF36:VBA_在Excel中排序

【分享成果&#xff0c;随喜正能量】一个人的气质&#xff0c;并不在容颜和身材&#xff0c;而是所经历过的往事&#xff0c;是内在留下的印迹&#xff0c;令人深沉而安谧。所以&#xff0c;优雅是一种阅历的凝聚&#xff1b;淡然是一段人生的沉淀。时间会让一颗灵魂&#xff0…

IO流(2)-缓冲流

1. 缓冲流的简单介绍 我们上贴说到了 FileInputStream&#xff0c;FileOutputStream&#xff0c;FileReader&#xff0c;FileWriter。 其实这四个流&#xff0c;我们通常把它叫做原始流&#xff0c;它们是比较偏底层的&#xff1b;而今天我们要说的四个缓冲流&#xff0c;如…

自己创建的类,其他类中使用错误

说明&#xff1a;自己创建的类&#xff0c;在其他类中创建&#xff0c;报下面的错误&#xff08;Cannot resolve sysmbol ‘Redishandler’&#xff09;&#xff1b; 解决&#xff1a;看下是不是漏掉了包名 加上包名&#xff0c;问题解决&#xff1b;

第9届Python编程挑战赛初中组初赛真题剖析-2023年全国青少年信息素养大赛

[导读]&#xff1a;超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲&#xff0c;这是超平老师解读Python编程挑战赛系列的第13讲。 全国青少年信息素养大赛&#xff08;原全国青少年电子信息智能创新大赛&#xff09;是“世界机器人大会青少年机器人设计与…

PyCharm安装pip依赖,如何添加国内镜像源?

目录 前言 PyCharm如何安装依赖 PyCharm如何配置国内镜像源 前言 首先我们都知道&#xff0c;使用pip安装依赖的方式&#xff0c;却很少有人知道使用PyCharm如何安装依赖。 PyCharm如何安装依赖 但你会发现&#xff0c;基本都是安装失败的&#xff0c;因为你是去外网下载的…

左神算法之中级提升班(8)

目录 【案例1】 【题目描述】 【思路解析】 【代码实现】 【案例2】 【题目描述】 【思路解析】 【代码实现】 【案例3】 【题目描述】 【思路解析】 【案例4】 【题目描述】 【思路解析】 【代码实现】 【案例5】 【题目描述】 【子序列概念】 【思路解析1 经典…

CTF-MISC:BUUCTF练习汇总(持续更新)

CTF-MISC&#xff1a;BUUCTF练习汇总 1、金三胖2、你竟然赶我走3、二维码4、大白 1、金三胖 解题思路&#xff1a; flag隐藏在gif图片帧中&#xff0c;使用在线GIF拆分工具即可 在线GIF图片帧拆分工具&#xff1a;https://uutool.cn/gif2img/ flag为&#xff1a;flag{he11oho…

应用层协议——https

文章目录 1. HTTPS 是什么2. 什么是"加密"3. 常见的加密方式4. 数据摘要 && 数字签名5. HTTPS 的工作过程探究5.1 方案1 - 只使用对称加密5.2 方案2 - 只使用非对称加密5.3 方案3 - 双方都使用非对称加密5.4 方案4 - 非对称加密 对称加密5.5 中间人攻击5.6 …