jsPlumb.ready(() => {
var common = {
isSource: true, // 拖动端点时可以自动创建连接
isTarget: true,
endpoint: 'Dot', // 锚点形状 dot圆形 Rectangle 方形
connector: ['Flowchart'], // 连线的形状 Bezier: 贝塞尔曲线 Flowchart: 具有90度转折点的流程线 StateMachine: 状态机 Straight: 直线
// anchor: ['Left', 'Right'] //锚点的位置
connectorStyle: { outlineStroke: 'green', strokeWidth: 1 }, // 连接线样式（拖动自动连接时生效）
maxConnections: -1, // 限制连线的数量，-1为不限制
overlays: [['Arrow', { width: 12, length: 12, location: 0.5 }]] // 长宽 位置
}

jsPlumb.connect(
{
// source: "item_left", //连接源头
// target: "item_right", //连接去向
// paintStyle: { stroke: 'red', strokeWidth: 3 }, // 连接线的样式 （设置源头和去向时生效）
// endpointStyle: { fill: 'red', outlineStroke: 'black', outlineWidth: 2 }, // 锚点的样式 fill填充 outlineStroke边框（设置源头和去向时生效）
// overlays: [["Arrow", { width: 12, length: 12, location: 0.5 }]] // 长宽 位置
/*
Arrow 一个可配置的箭头
Label 标签，可以在链接上显示文字信息
PlainArrow 原始类型的箭头
Diamond 菱形箭头
Custom 自定义类型
/
/
默认参数的简介:
Anchor 锚点，即端点链接的位置
Anchors 多个锚点 [源锚点，目标锚点].
Connector 链接
ConnectionsDetachable 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开。
Container 连线的容器
DoNotThrowErrors 是否抛出错误
ConnectionOverlays 链接遮罩层
DragOptions 拖动设置
DropOptions 拖放设置
Endpoint 端点
Endpoints 数组形式的，[源端点，目标端点]
EndpointOverlays 端点遮罩层
EndpointStyle 端点样式
EndpointStyles [源端点样式，目标端点样式]
EndpointHoverStyle 端点鼠标经过的样式
EndpointHoverStyles [源端点鼠标经过样式，目标端点鼠标经过样式]
HoverPaintStyle 鼠标经过链接线时的样式
LabelStyle 标签样式
LogEnabled 是否启用日志
Overlays 连接线和端点的遮罩层样式
MaxConnections 端点最大连接线数量默认为1， 设置成-1可以表示无数个链接
PaintStyle 连线样式
ReattachConnections 端点是否可以再次重新链接
RenderMode 渲染模式，默认是svg
Scope 作用域，用来区分哪些端点可以链接，作用域相同的可以链接 */
},
common
)
// 新增一个端点
jsPlumb.addEndpoint(
'start',
{
anchors: 'Right',
uuid: 'fromId'
},
common
)
jsPlumb.addEndpoint(
'task',
{
anchor: 'Left',
uuid: 'toId'
},
common
)
jsPlumb.addEndpoint(
'end',
{
anchor: 'Left',
uuid: 'toId'
},
common
)

// 可拖拽 containment限制拖拽区域 grid拖拽时网格对齐
jsPlumb.draggable('start', { containment: 'diagramContainer', grid: [10, 10] })
jsPlumb.draggable('task', { containment: 'diagramContainer', grid: [10, 10] })
jsPlumb.draggable('end', { containment: 'diagramContainer', grid: [10, 10] })
// jsPlumb.addEndpoint(
// 'test',
// {
// anchors: 'Right',
// uuid: 'testddd'
// },
// common
// )
// jsPlumb.draggable('test', { containment: 'efContainer', grid: [10, 10] })
// this.nodeList.forEach(item => {
// console.log(item)
// var timestamp = new Date().getTime()
// jsPlumb.addEndpoint(
// item.id,
// {
// anchors: 'Right',
// uuid: timestamp
// },
// common
// )
// jsPlumb.draggable(item.id, { containment: 'efContainer', grid: [10, 10] })
// })
// 可拖拽 containment限制拖拽区域 grid拖拽时网格对齐
// jsPlumb.draggable('item_left', { containment: 'efContainer', grid: [10, 10] })
// jsPlumb.draggable('item_right', { containment: 'diagramContainer', grid: [10, 10] })
// jsPlumb.draggable('item_right1', { containment: 'diagramContainer', grid: [10, 10] })

// 给连接添加点击事件
jsPlumb.bind('click', function(conn, originalEvent) {
if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
jsPlumb.detach(conn) // 删除连接
// 删除节点包括相关的连接
// jsPlumb.remove('item_left')
// 通过编码连接,需要在addEndpoint时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点链接上,建议给每个断点都加上唯一的uuid
// jsPlumb.connect({ uuids: ['fromId', 'toId'] })

  /**

• jsPlumb Events列表
  connection
  connectionDetached
  connectionMoved
  click
  dblclick
  endpointClick
  endpointDblClick
  contextmenu
  beforeDrop 连接前的检查，可以用来判断是否建立连接
  beforeDetach
  zoom
  Connection Events
  Endpoint Events
  Overlay Events
  Unbinding Events
  /
  }
  })
  })
  export const easyFlowMixin = {
  data() {
  return {
  jsplumbSetting: {
  // 动态锚点、位置自适应
  Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
  // 容器ID
  Container: 'efContainer',
  // 连线的样式，直线或者曲线等，可选值: StateMachine、Flowchart，Bezier、Straight
  Connector: ['Bezier', {curviness: 100}],
  // Connector: ['Straight', {stub: 20, gap: 1}],
  // Connector: ['Flowchart', {stub: 30, gap: 1, alwaysRespectStubs: false, midpoint: 0.5, cornerRadius: 10}],
  // Connector: ['StateMachine', {margin: 5, curviness: 10, proximityLimit: 80}],
  // 鼠标不能拖动删除线
  ConnectionsDetachable: false,
  // 删除线的时候节点不删除
  DeleteEndpointsOnDetach: false,
  /*
  * 连线的两端端点类型：圆形
  * radius: 圆的半径，越大圆越大
  /
  // Endpoint: ['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}],
  /*
  * 连线的两端端点类型：矩形
  * height: 矩形的高
  * width: 矩形的宽
  /
  // Endpoint: ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}],
  /*
  * 图像端点
  /
  // Endpoint: ['Image', {src: 'https://www.easyicon.net/api/resizeApi.php?id=1181776&size=32', cssClass: 'ef-img', hoverClass: 'ef-img-hover'}],
  /*
  * 空白端点
  /
  Endpoint: ['Blank', {Overlays: ''}],
  // Endpoints: [['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}], ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}]],
  /*
  * 连线的两端端点样式
  * fill: 颜色值，如：#12aabb，为空不显示
  * outlineWidth: 外边线宽度
  /
  EndpointStyle: {fill: '#1879ffa1', outlineWidth: 1},
  // 是否打开jsPlumb的内部日志记录
  LogEnabled: true,
  /*
  * 连线的样式
  /
  PaintStyle: {
  // 线的颜色
  stroke: '#E0E3E7',
  // 线的粗细，值越大线越粗
  strokeWidth: 1,
  // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
  outlineStroke: 'transparent',
  // 线外边的宽，值越大，线的点击范围越大
  outlineWidth: 10
  },
  DragOptions: {cursor: 'pointer', zIndex: 2000},
  /*
  * 叠加 参考： https://www.jianshu.com/p/d9e9918fd928
  /
  Overlays: [
  // 箭头叠加
  ['Arrow', {
  width: 10, // 箭头尾部的宽度
  length: 8, // 从箭头的尾部到头部的距离
  location: 1, // 位置，建议使用0～1之间
  direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
  foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
  }],
  // ['Diamond', {
  // events: {
  // dblclick: function (diamondOverlay, originalEvent) {
  // console.log('double click on diamond overlay for : ' + diamondOverlay.component)
  // }
  // }
  // }],
  ['Label', {
  label: '',
  location: 0.1,
  cssClass: 'aLabel'
  }]
  ],
  // 绘制图的模式 svg、canvas
  RenderMode: 'svg',
  // 鼠标滑过线的样式
  HoverPaintStyle: {stroke: '#b0b2b5', strokeWidth: 1},
  // 滑过锚点效果
  // EndpointHoverStyle: {fill: 'red'}
  Scope: 'jsPlumb_DefaultScope' // 范围，具有相同scope的点才可连接
  },
  /*
  * 连线参数
  /
  jsplumbConnectOptions: {
  isSource: true,
  isTarget: true,
  // 动态锚点、提供了4个方向 Continuous、AutoDefault
  anchor: 'Continuous',
  // 设置连线上面的label样式
  labelStyle: {
  cssClass: 'flowLabel'
  },
  // 修改了jsplumb 源码，支持label 为空传入自定义style
  emptyLabelStyle: {
  cssClass: 'emptyFlowLabel'
  }
  },
  /*
  * 源点配置参数
  */
  jsplumbSourceOptions: {
  // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
  filter: '.flow-node-drag',
  filterExclude: false,
  anchor: 'Continuous',
  // 是否允许自己连接自己
  allowLoopback: true,
  maxConnections: -1,
  onMaxConnections: function (info, e) {
  console.log(超过了最大值连线: ${info.maxConnections})
  }
  },
  // 参考 https://www.cnblogs.com/mq0036/p/7942139.html
  jsplumbSourceOptions2: {
  // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
  filter: '.flow-node-drag',
  filterExclude: false,
  // anchor: 'Continuous',
  // 是否允许自己连接自己
  allowLoopback: true,
  connector: ['Flowchart', {curviness: 50}],
  connectorStyle: {
  // 线的颜色
  stroke: 'red',
  // 线的粗细，值越大线越粗
  strokeWidth: 1,
  // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
  outlineStroke: 'transparent',
  // 线外边的宽，值越大，线的点击范围越大
  outlineWidth: 10
  },
  connectorHoverStyle: {stroke: 'red', strokeWidth: 2}
  },
  jsplumbTargetOptions: {
  // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
  filter: '.flow-node-drag',
  filterExclude: false,
  // 是否允许自己连接自己
  anchor: 'Continuous',
  allowLoopback: true,
  dropOptions: {hoverClass: 'ef-drop-hover'}
  }
  }
  }
  }