jsplumb-chinese-tutorial

在2024年这个时间点，流程图框架选型有太多可选择的框架了，没必要选择jsplumb。

1. jsplumb本身就是10年前开发，用的技术栈可能比较老旧
2. jsplumb的开源协议并不太友好

你可以访问：https://github.com/topics/flowchart 在这个话题下，有很多的框架可以选择。

例如：

• https://github.com/xyflow/xyflow
• https://github.com/didi/LogicFlow
• https://github.com/alyssaxuu/flowy
• https://github.com/antvis/X6
• https://github.com/bcakmakoglu/vue-flow

• 1. jsplumb 中文基础教程
  • 1.1. 什么是jsplumb？
  • 1.2. jsplumb能干什么？
  • 1.3. 基本概念
    • 1.3.1. Anchors [todo]
    • 1.3.2. Connectors [todo]
    • 1.3.3. Endpoints [todo]
    • 1.3.4. Overlays [todo]
    • 1.3.5. Groups [todo]
  • 1.4. 样式设置 [todo]
• 2. 基础demos
  • 2.1. 连接两个节点
  • 2.2. 可拖动节点
  • 2.3. 连接的其他参数
  • 2.4. 设置连接的默认值
  • 2.5. 给连接加上样式
  • 2.6. 给连接加上箭头
  • 2.7. 增加一个端点
  • 2.8. 拖动创建连接
  • 2.9. 给端点增加样式
  • 2.10. 节点改变尺寸
  • 2.11. 限制节点拖动区域
  • 2.12. 节点网格对齐
  • 2.13. 给连接添加点击事件：点击删除连线
  • 2.14. 删除节点，包括节点相关的连接
  • 2.15. 通过编码连接endPoint
  • 2.16. 连接前的检查，判断是否建立连接
  • 2.17. 一个端点如何拖拽出多条连线
  • 2.18. 整个节点作为source或者target
  • 2.19. 节点缩放
• 3. jsPlumb事件列表
  • 3.1. 常用事件
    • 3.1.1. connection 连接建立时触发
    • 3.1.2. connectionDetached 连接断开时触发
    • 3.1.3. connectionMoved 连接移动事件
    • 3.1.4. connectionAborted 连接取消事件
    • 3.1.5. click 连接点击事件
    • 3.1.6. dblclick 连接双击事件
    • 3.1.7. connectionDrag 连接拖动事件
    • 3.1.8. connectionDragStop 连接停止拖动事件
    • 3.1.9. endpointClick 端点单击事件
    • 3.1.10. endpointDblClick 端点双击事件
    • 3.1.11. contextmenu 鼠标右键事件
    • 3.1.12. beforeDrop 连接建立前事件
    • 3.1.13. beforeDetach 连接断开前事件
    • 3.1.14. zoom 缩放事件
  • 3.2. 其他事件
    • 3.2.1. Connection Events
    • 3.2.2. Endpoint Events
    • 3.2.3. Overlay Events
• 4. jsPlumb默认配置简介
• 5. 工具函数
  • 5.1. 重绘某个元素 jsPlumb.revalidate
  • 5.2. 重绘所有元素 jsPlumb.repaintEverything
  • 5.3. 重设节点ID jsPlumb.setId
  • 5.4. 删除节点 jsPlumb.remove
  • 5.5. 清空所有节点连接和端点 jsPlumb.empty
  • 5.6. 移除连线 jsPlumb.detach
  • 5.7. 移除某个节点上的所有连线 jsPlumb.deleteConnectionsForElement
  • 5.8. 移除所有节点上的连线 jsPlumb.deleteEveryConnection()
  • 5.9. 移除某个节点上的端点
  • 5.10. 移除所有节点上的端点
  • 5.11. 元素的显示与隐藏
• 6. 样式修改
  • 6.1. 通过css添加样式
  • 6.2. paintStyle属性添加
• 7. 查询 [todo]
• 8. 视图与数据结构同步
• 9. 有没有稍微复杂一点，带有拖放的栗子？
• 10. 还有哪些类似的图形连线可视化项目
  • 10.1. G6 AntV
  • 10.2. VivaGraphJS
  • 10.3. springy
  • 10.4. graphviz
  • 10.5. visjs
• 11. 参考资源

1. jsplumb 中文基础教程

后续更新会在仓库：https://github.com/wangduanduan/jsplumb-chinese-tutorial.git

阅读建议：由于本教程目录太多，建议安装谷歌浏览器插件Smart TOC，方便目录按照目录跳转查看。

1.1. 什么是jsplumb？

你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。

该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。 jsPlumb由他积极开发。作为许多优秀的开发人员，他似乎更喜欢开发代码而不是编写教程，这就是为什么我提供一个简单的入门教程。

1.2. jsplumb能干什么？

那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！

1.3. 基本概念

• Souce 源节点
• Target 目标节点
• Anchor 锚点 锚点位于源节点或者目标节点上
• Endpoint 端点 端点位于连线上
• Connector 连接 或者也可以理解是连接线
• Overlays 可以理解为在连接线上的文字或者箭头之类的东东

1.3.1. Anchors [todo]

锚点类型：

• 静态锚点
• 动态锚点
• 边缘锚点
• 固定锚点

1.3.2. Connectors [todo]

连线类型：

• Bezier 贝塞尔曲线
• Straight 直线
• Flowchart 90度转角线
• State Machine 状态机

1.3.3. Endpoints [todo]

端点类型:

• Dot 圆点
• Rectangle 矩形
• Image 图像
• Blank 空白

1.3.4. Overlays [todo]

Overlays可以理解为在连接线上的文字或者箭头之类的东东

Overlays类型

• Arrow
• Label
• PlainArrow
• Diamond
• Custom

// 连线上overlay可以多个，
// 每个overlay可以指定相对位置
// label类型的overlay实际上可以在里面直接写html
// 
jsPlumb.connect({
  ...
  connectorOverlays: [
    ['Arrow', {
      width: 10,
      length: 10,
      location: 1
    }],
    ['Label', {
      label: 'X',
      cssClass: '',
      labelStyle: {
        color: 'red'
      },
      events: {
        click: function (labelOverlay, originalEvent) {
          console.log('click on label overlay for :' + labelOverlay.component)
          console.log(labelOverlay)
          console.log(originalEvent)
        }
      }
    }]
  ]
});

1.3.5. Groups [todo]

1.4. 样式设置 [todo]

2. 基础demos

2.1. 连接两个节点

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/01.html

jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用于建立连线

参数说明： jsPlumb.connect(config) return connection

>>> connect方法详情

2.2. 可拖动节点

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/02.html

使用draggable可以让节点被拖动，draggable方法参考

2.3. 连接的其他参数

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/03.html

可以通过connector去设置连接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。

jsplumb连线的样式有四种

• Bezier: 贝塞尔曲线
• Flowchart: 具有90度转折点的流程线
• StateMachine: 状态机
• Straight: 直线

2.4. 设置连接的默认值

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/04.html

很多连线都是相同设置的情况下，可以将配置抽离出来，作为一个单独的变量，作为connect的第二个参数传入。实际上connect的第二个参数会和第一个参数merge，作为一个整体。

2.5. 给连接加上样式

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/05.html

例如给连线设置不同的颜色，设置不同的粗细之类的。

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)

2.6. 给连接加上箭头

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/06.html

箭头实际上是通过设置overlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。 一根连线是可以添加多个箭头的。

overlays也是一个比较重要的概念，overlays可以理解为遮罩层。遮罩层不仅仅可以设置箭头，也可以设置其他内容。

overlays有五种类型，下面给出简介。具体使用方法参见 http://jsplumb.github.io/jsplumb/overlays.html

• Arrow 一个可配置的箭头
• Label 标签，可以在连接上显示文字信息
• PlainArrow 原始类型的箭头
• Diamond 菱形箭头
• Custom 自定义类型

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)

2.7. 增加一个端点

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/07.html

addEndpoint方法可以用来增加端点，具体使用请看

    jsPlumb.ready(function () {
      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      })
    })

2.8. 拖动创建连接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/08.html

如果你将isSource和isTarget设置成true，那么久可以用户在拖动时，自动创建连接。

jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: ['Straight']
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })

一般来说拖动创建的连接，可以再次拖动，让连接断开。如果不想触发这种行为，可以设置。

  jsPlumb.importDefaults({
    ConnectionsDetachable: false
  })

如果你需要在连接被拖动建立后，更新数据模型，则需要订阅connection事件, 回调函数的info对象里，有你所需的任何数据。比如说从哪个节点拖动到哪个节点的。

关于事件，可以参考事件章节。

jsPlumb.bind("connection", function(info, originalEvent) {
   .. update your model in here, maybe.
});

2.9. 给端点增加样式

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/09.html

通过设置各种 *Style来改变连接或者端点的样式。

…

2.10. 节点改变尺寸

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/10.html

jsplumb实际上不支持改变节点大小，实际上只能通过jquery ui resizable 方法去改变。

2.11. 限制节点拖动区域

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/11.html

默认情况下，节点可以被拖动到区域外边，如果想只能在区域内拖动，需要设置containment，这样节点只能在固定区域内移动。

实际上上这个功能是使用jQueryUI的功能，所以函数的使用可以参考jQueryUI的文档。https://jqueryui.com/draggable/#constrain-movement

jsPlumb.draggable('item_left', {containment: 'parent'})
jsPlumb.draggable('item_right', {containment: 'parent'})
jsPlumb.draggable('some-id', {containment: "#containment-wrapper"})

2.12. 节点网格对齐

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/12.html 网格对齐实际上是设置了grid属性，使移动只能按照固定的尺寸移动。然后用一张图作为背景铺开作为网格来实现的。

#diagramContainer {
  padding: 20px;
  width: 80%;
  height: 400px;
  border: 1px solid gray;
  background-image: url(./images/20180227163310_1bVYeW_grid.jpeg);
  background-repeat: repeat;
}

jsPlumb.draggable('item_left', {
  containment: 'parent',
  grid: [10, 10]
})

2.13. 给连接添加点击事件：点击删除连线

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/13.html

// 请单点击一下连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('确定删除所点击的连接吗？ 输入1确定') === '1') {
    jsPlumb.detach(conn)
  }
})

jsPlumb支持许多事件

jsPlumb Events列表

• connection
• connectionDetached
• connectionMoved
• click
• dblclick
• endpointClick
• endpointDblClick
• contextmenu
• beforeDrop
• beforeDetach
• zoom
• Connection Events
• Endpoint Events
• Overlay Events
• Unbinding Events

参考用法参考：https://github.com/jsplumb/jsplumb/blob/da6688b86f/doc/wiki/events.md

2.14. 删除节点，包括节点相关的连接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/14.html

// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线
console.log('3 秒后移除左边节点包括它的连线')
setTimeout(function () {
  jsPlumb.remove('item_left')
}, 3000)

注意remove方法有些情况下是无法删除干净连线的，详情

2.15. 通过编码连接endPoint

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/15.html

初始化数据后，给节点加上了endPoint, 如果想编码让endPoint连接上。需要在addEndpoint时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点连接上。建议使用node-uuid给每个断点都加上唯一的uuid， 这样以后连接就方便多了。

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right'],
  uuid: 'fromId'
})

jsPlumb.addEndpoint('item_right', {
  anchors: ['Left'],
  uuid: 'toId'
})

console.log('3 秒后建立连线')
setTimeout(function () {
  jsPlumb.connect({ uuids: ['fromId', 'toId'] })
}, 3000)

2.16. 连接前的检查，判断是否建立连接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/16.html

有时候当用户从A端点连接到B端点