jsplumb

jsplumb是jquery的一个插件，它能够让你用动态或静态的链接来连接html界面上的元素，并且从1.10版本开始，提供用鼠标拖动来连接。jsPlumb允许您使用SVG，Canvas或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。

主要包含以下模块：Anchor、Connector、Endpoint、 Overlay、Style、css样式、Events

官方文档地址:https://docs.jsplumbtoolkit.com/community/current/index.html

jsPlumb中文基础教程:https://wdd.js.org/jsplumb-chinese-tutorial/#/

参考：https://blog.csdn.net/m0_54741495/category_12334749.html

参考vue2:https://wangjingtao.blog.csdn.net/article/details/134886879

参考vue2demo:https://github.com/lee-won/vue-jsPlumb-case

基础说明

连线

连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]

1. Bezier（贝塞尔曲线）：Bezier 连接线是一种光滑曲线，通过控制点来定义它们的形状。这种连接线通常用于创建弯曲或曲线状的连接线，可以更灵活地连接节点，并具有一定的美学效果。
2. Flowchart（流程图）：Flowchart 连接线是一种简单直线连接线，适合用于绘制流程图、组织结构图等图表。这种连接线风格简洁直接，适合展示清晰的流程关系。
3. StateMachine（状态机）：StateMachine 连接线是一种特定类型的连接线样式，通常用于描述系统中各种状态之间的转换和关系。它可以帮助可视化状态机的运行逻辑和状态转移过程。
4. Straight（直线）：Straight 连接线是一种简单的直线连接线，沿着两个节点之间的直线路径连接两个节点。这种连接线样式简洁明了，适合于需要直接连线的情况。

connector

connector 属性用于定义连接器的样式和形状。连接器是用于连接两个元素的线条或路径。

connector 属性可以接受多种不同的值，用于定义连接器的外观。以下是一些常见的选项：

1. 字符串值：你可以使用预定义的字符串值来指定连接器的类型。例如，"Bezier" 表示贝塞尔曲线连接器，"Flowchart" 表示流程图连接器。
2. 对象值：你可以使用一个包含连接器属性的对象来自定义连接器。这个对象可以包含以下属性：
   • type：连接器类型的字符串值。
   • paintStyle：连接器的绘制样式，如颜色、线宽等。
   • hoverPaintStyle：鼠标悬停在连接器上时的绘制样式。
   • overlays：连接器上的覆盖物，如箭头、标签等。
   • stub：连接器的起始和结束端点的长度。
   • gap：连接器与连接的元素之间的间隙。

jsPlumb.connect({
  source: "element1",
  target: "element2",
  connector: {
    type: "Bezier",
    paintStyle: {
      stroke: "blue",
      strokeWidth: 2
    },
    hoverPaintStyle: {
      stroke: "red"
    },
    overlays: [
      ["Arrow", { location: 1, width: 10, length: 12 }],
      ["Label", { label: "Example", location: 0.5 }]
    ],
    stub: 10,
    gap: 5
  }
});