jsPlumb应用指南（二）应用部分

最新推荐文章于 2024-07-12 14:54:06 发布

伊人笑桃花酒

最新推荐文章于 2024-07-12 14:54:06 发布

阅读量1.6k

点赞数

分类专栏：框架介绍文章标签： jsPlumb 流程图基础流程图实例参考线段操作拖拽

本文链接：https://blog.csdn.net/T_tq_bnsg_bs_ll/article/details/93195499

版权

本文介绍如何利用jsPlumb库创建流程图，包括节点拖动、连线操作、节点点击事件、线段编辑等功能。通过实例展示jsPlumb的使用方法，帮助读者掌握流程图的动态构建。

摘要由CSDN通过智能技术生成

背景

创建一个流程图，一方面需要通过接口获取流程图的基本信息来绘制流程图，一方面可通过连接流程图节点的端点来添加线段。
节点的创建通过拖动原型复制。
节点的可连接线段端点有四个，分别为topCenter/bottomCenter/leftMiddle/rightMiddle
节点连接线段的规则为：同一节点不可连接，每个端点连接线段不做限制

引入包

npm install jsplumb --save

创建jsPlumb对象

if (!this.jsPlumbInstance) {
    this.jsPlumbInstance = jsPlumb.getInstance()   // 创建一个jsPlumb对象
}

注册事件

beforeDrop
连接线段或删除线段会触发此事件，即线段的变动触发。
此处用于判断用户连接的两个节点是否符合连接规则，如果符合返回true,该条线段连接成功；
如不符合返回false，该条线段连接不成功

this.jsPlumbInstance.bind('beforeDrop', (info) => {
    // info是该线段的基本信息  sourceId是线头节点id，targetId是线尾节点id
    if (info.sourceId == info.targetId) {  // 判断是否是同一节点
      return false
    }
    let sourceId = info.sourceId
    let targetId = info.targetId
    let sourceKey = info.connection['endpoints'][0].anchor.type  // 连接的位置获取
    let targetKey = info.dropEndpoint.anchor.type  // 连接的位置获取
    for (let i = 0; i < this.pointList.length; i++) { // 将连接的信息放入节点列表的对应节点中
      let item = this.pointData[i]
      if (item.id == sourceId) {
        if (item.target.length) {
          for (let j = 0; j < item.target.length; j++) { // 判断是否有重复连接，如果有且连接位置不同，则保存，如果位置相同则不保存
            let targetIndex = item.target[j]
            if (targetIndex.id == targetId && targetIndex.anchors[0]