jsPlumb初认识

hello，大家好，我是前端小老弟儿，最近老弟儿接到这样一个需求，实现一个流程图，可以连线，右键操作，以及删除连线等，如下所示得流程图。使用得插件是: jsPlumb；所以就简单的介绍一下jsPlumb基本使用

什么是jsplumb

jsPlumb是一个强大得JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue2.0 ，react和Angular 。

jsplumb 能干什么？

该框架适用于必须回值图表得web应用程序，比如流程图设计，组织架构图设计等。

jsplumb的基本使用：

1. 配置jsPlumb

npm install jsplumb

2. 引入

import {
    jsPlumb } from "jsplumb";

jsplumb的基本方法：

1. ready() 确保jsPlumb 插件已经开始渲染

jsPlumb.ready(function() {
   
    ...
    // your jsPlumb related init code goes here
    ...
});

2. batch() 绘制节点以及节点相关信息

jsPlumb.batch(function() {
   
  // import here
  for (var i = 0, j = connections.length; i < j; i++) {
   
      jsPlumb.connect(connections[i]);
  }
});

3. bind() jsPlumb 节点渲染完成后，在这里可以添加事件，在初始化时，直接添加事件

 // 连线事件
 jsPlumb.bind("connection", (info, event) => {
   
        this.bindLinkEvent(info.connection);
        this.data.links.push([info.sourceId, info.targetId]);
      });

4. getInstance()
   jsPlumb默认注册在浏览器的window对象中，为整个页面提供了一个静态实例(jsPlumb)可以直接使用，当然你也可以使用getInstance方法来单独创建一个实例。即：

this.flowInst = jsPlumb.getInstance();

同时，getInstance方法接受一个参数，可以更改实例的配置

this.flowInst = jsPlumb.getInstance({
   
    Connector : [ "Bezier", {
    curviness: 150 } ],
    Anchors : [ "TopCenter", "BottomCenter" ],
    ...
});

5. jsPlumb.connect(…) 用于创建连线

this.flowInst.connect({
   
        source: 'item_left', // 源
        target: 'item_right', // 目标
        endpoint: 'Dot' // 线的类型
      })

6. jsPlumb.addEndpoint(…) 用来增加端点

// id: 增加端点得id
// common：端点的配置信息
this.flowInst.addEndpoint(id,{
   common})
this.flowInst.addEndpoint('item_left', {
   
        anchors: ['Right']
      })

7. jsPlumb.draggable() 节点是否可拖拽

let common = {
    
        containment?: string
        start?: (params:DragEventCallbackOptions) => void
        drag?: (params:DragEventCallbackOptions) => void
        stop?: (params:DragEventCallbackOptions) => void
        cursor?: string
        zIndex?: number
}
this.flowInst.draggable(node._id, {
   common}); // 

此方法有两个参数：
第一个参数为可拖拽节点的id，
第二个参数为函数对象，有6个参数,start,drag,stop 三个函数中可以获取元素节点位置等。

基本配置

{
   
    Anchor: "BottomCenter", //锚点位置，如left，top，bottom等；对任何没有声明描点的Endpoint设置锚点，用于source及诶单或target节点
    Anchors: [ null, null ], //连线的source和target Anchor
    ConnectionsDetachable: true, //连线是否可用鼠标分离
    ConnectionOverlays: [  //连线的叠加组件，如箭头、标签
        ["Arrow", {
     //箭头参数设置