vue项目中使用jsplumb总结

vue项目中使用jsplum总结
先介绍一下背景，最近项目中有个需求(各节点与节点之间的连线)，网上搜刮了一波关于连线的开源库，发现jsplumb的文章应该是最多的，功能也比较丰富，最终就选择了jsplumb来实现项目需求。
下面开始我的vue+jsplumb踩坑之旅。

在线DOME预览

一、安装 jsplumb

1、vue 项目中安装 jsPlumb 模块

npm install jsplumb  --save

2、在main.js 中引入 jsPlumb（全局引入，也可以局部引入）

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

二、使用jsplumb

nodeConnection.vue组件

// 初始化JSPlumb样式
    initJSPlumb() {
      this.jsPlumb = this.$jsPlumb.getInstance({
        Container: "efContainer", //容器id
        //  Endpoint:['Image', {
        //    src: 'static/images/def_endpoint.png',
        //  }] , // 端点的形状
        Anchor: [0.5, 1, 0, 1, 0, 50],
        Anchors: ["Right", "Left"], //连线的source和target 
        EndpointStyle: { radius: 6, fill: "#818FB4" }, //端点默认样式
        PaintStyle: { stroke: "#818FB4", strokeWidth: 1, fill: 'red' }, // 连线样式
        HoverPaintStyle: { stroke: "#498FFF" }, // 默认悬停样式
        // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
        EndpointHoverStyle: { fill: "#498FFF" }, // 端点悬停样式
        ConnectionOverlays: [
          [
            "Arrow",
            {
              // 箭头
              location: 1,
              visible: false,
              paintStyle: {
                stroke: "#ccc",
                fill: "#ccc"
              }
            }
          ]
        ],
        Connector: ["Straight", { gap: 5 }], //要使用的默认连接器的类型：折线，流程等
        DrapOptions: { cursor: "crosshair", zIndex: 2000 },
        Scope: "jsPlumb_DefaultScope"
      });
      
    // 连接断开时触发
      this.jsPlumb.bind('connectionDetached', evt => {
      })

      // 连接建立时触发
      this.jsPlumb.bind("connection", evt => {
      });

      // 改变线的连接节点
      this.jsPlumb.bind("connectionMoved", evt => {
      });

      // 当链接建立前
      this.jsPlumb.bind("beforeDrop", evt => { 
      });
      // 连接断开前
      this.jsPlumb.bind("beforeDetach", evt => {
      });
    }

三、默认的参数配置(此处只列了部分参数配置，更多配置请移步官方文档)

{
  Anchor : "BottomCenter",//端点的定位点的位置声明（锚点）：left，top，bottom等
  Anchors : [ null, null ],//多个锚点的位置声明
  ConnectionsDetachable   : true,//连接是否可以使用鼠标默认分离
  ConnectionOverlays  : [],//附加到每个连接的默认重叠
  Connector : "Bezier",//要使用的默认连接器的类型：折线，流程等
  Container : null,//设置父级的元素，一个容器
  DoNotThrowErrors  : false,//如果请求不存在的Anchor，Endpoint或Connector，是否会抛出
  DragOptions : { },//用于配置拖拽元素的参数
  DropOptions : { },//用于配置元素的drop行为的参数
  Endpoint : "Dot",//端点（锚点）的样式声明（Dot）
  Endpoints : [ null, null ],//多个端点的样式声明（Dot）
  EndpointOverlays : [ ],//端点的重叠
  EndpointStyle : { fill : "#456" },//端点的css样式声明
  EndpointStyles : [ null, null ],//同上
  EndpointHoverStyle : null,//鼠标经过样式
  EndpointHoverStyles : [ null, null ],//同上
  HoverPaintStyle : null,//鼠标经过线的样式
  LabelStyle : { color : "black" },／／标签的默认样式。
  LogEnabled : false,//是否打开jsPlumb的内部日志记录
  Overlays : [ ],//重叠
  MaxConnections : 1,//最大连接数
  PaintStyle : { lineWidth : 8, stroke : "#456" },//连线样式
  ReattachConnections : false,//是否重新连接使用鼠标分离的线
  RenderMode : "svg",//默认渲染模式
  Scope : "jsPlumb_DefaultScope"//范围，标识
}

四、jsPlumb的相关方法

• 添加连线

// 此处参数sourceId，targetId一般是从后台获取后再添加连线
const params={source: item.sourceId, target: item.targetId};
// 为自定义的jsPlumb设置，也可以不传入
const  connectOptions = {
   isSource: true,
   isTarget: true,
   // 动态锚点、提供了4个方向 Continuous、AutoDefault
   anchor: 'Continuous',
   // 设置连线上面的label样式
   labelStyle: {
     cssClass: 'flowLabel'
   },
  connectorStyle: {
     stroke: '#30BF78'
   },
}
this.jsPlumb.connect(params, connectOptions);

• 删除连线

//  这个方法删除指定的节点和连线，传入的node为节点元素
this.jsPlumb.removeAllEndpoints(node)
// 这个方法删除所有连线，不需要传入参数 
this.jsPlumb.deleteEveryConnection();
// 这个方法删除所有节点，不需要传入参数
this.jsPlumb.deleteEveryEndpoint();
// 删除制定的连线，传入节点ID
this.jsPlumb.deleteConnectionsForElement('t001',{});

• 重绘连线

// 重绘连线
this.jsPlumb.repaintEverything()
// 这里第二个参数的true，会使整个jsPlumb立即重绘。
this.jsPlumb.setSuspendDrawing(false,true);

最后附上一个在线DOME预览
组件编辑器