jsPlumb的学习使用(四):个人总结在开发流程图的思路和API使用

之前的文章给大家Api中文文档和英文官网的链接了,希望大家去参考,这里自己写了一个文档,是自己在开发中总结的,并不全面,但是完成自己上一篇的那个图形,绝对是够用了,自己后面也会不断完善,更新的博客里面.

这里就不展示代码,上一篇就是完整代码,这里相当于是对上篇文章的代码进行一个解读

使用的库

vue 开发框架

jsplumb 流程图插件

vuedraggable 拖拽插件

uuid 绑定唯一id值

整体思路

1.左侧菜单栏嵌套可拖拽插件,移动到画布之后需要进行位置判定,确定拖拽到画布之中

2.拖拽到画布中,节点列表添加一个元素,根据元素得config属性,合并jsplumb基础配置,形成新的节点数据,渲染dom

3.dom渲染完毕后,绘制节点之间的关联关系

4.点击节点或者连线,根据绑定事件获取具体的信息,可进行修改或者删除操作,完毕之后修改全量信息,重新绘制节点.

API方法

(一)jsplumb的方法:

引入jsplumb     import { jsPlumb } from ‘jsplumb’
新建jsplumb实例     let plumbInit = jsPlumb.getInstance()
直属方法调用格式   plumbInit.ready((=>{}))

加载: ready((=>{}))

引入默认配置: importDefaults({自己的配置})(*1)

立即重绘: setSuspendDrawing(false, true)

节点设置为起始点: makeSource(节点||id,配置)(*2)

节点设置为终点: makeTarget(节点||id,配置)(*3)

节点设置可拖拽: draggable(节点id,{配置})(*6)

配置节点的连线关系: connect({节点关系},{连线配置})(*4,*5)

设置画布节点: setContainer(id)

缩放: setZoom()

设置连线条件: getConnections({起点,终点})

删除连线关系: deleteConnection(上面连线关系的结果)

删除所有端点: removeAllEndpoints(节点)

(二)实例监听回调函数

方法调用格式: plumbInit.bind(‘节点被触发方式‘,()=>{回调函数})

点击连接线: plumbInit.bind(‘click‘,(con,originalevent)=>{})
连线完成之前: plumbInit.bind(‘beforeDrop‘,(con)=>{})
连线完毕方法: plumbInit.bind(‘connection‘,(con)=>{})
删除连线回调之前: plumbInit.bind(‘beforeDetach‘,(con)=>{})
删除连线回调: plumbInit.bind(‘connectionDetached‘,(con)=>{})
改变线的连接节点: plumbInit.bind(‘connectionMoved’,(con)=>{})
连线右击:  plumbInit.bind(‘contextmenu‘,(con)=>{})

(三)api的具体配置

1.($1)初始化配置:
  Anchors: 节点上可以用来连接的锚点  [“Top“,”TopLeft“,”RightMiddle”,[0.5,1,0.5,1]]  –左,左上,右中,自定义的一个点
  Container: 画布容器  ‘plumbBox‘ –节点的id值
  Connector: 连线的样式 [‘Bezier’,{curviness:150}]  –贝塞尔曲线,曲率
             [‘Straight’,{stub:20,gap:1}]  —直线
             [‘Flowchart’, {stub: 30, gap: 1, alwaysRespectStubs: false, midpoint: 0.5, cornerRadius: 10}]  — 90度转角机
             [‘StateMachine’, {margin: 5, curviness: 10, proximityLimit: 80}] —状态机

  ConnectionsDetachable: 鼠标不能拖动删除线 false
  DeleteEndpointsOnDetach: 删除线的时候节点不删除 false
  Endpoint: 端点 [‘Dot’,{{radius: 5, cssClass: ‘ef-dot‘, hoverClass: ‘ef-dot–hover‘}]  — 原点
            [‘Rectangle’, {height: 20, width: 20, cssClass: ‘ef-rectangle’, hoverClass: ‘ef-rectangle-hover’}]  –矩形
            [‘Image’, {src: ‘路径‘, cssClass: ‘ef-img‘, hoverClass: ‘ef-img–hover’}]  —图片
            [‘Blank‘, { Overlays: ” }]  –空白
  EndpointStyle: 线两端的样式 { fill: ‘#1879ffa1′, outlineWidth: 1 }
  LogEnabled: 是否打开jsplumb内部日志 true
  PaintStyle: 连线的样式  {stroke:’#000′,strokeWidth:1,outlineStroke:’transparent‘,outlineWidth:10}  — 颜色,粗细,外边线颜色,边的粗细
  DragOptions: 拖拽时的样式 { cursor: ‘pointer‘, zIndex: 2000 } //小手,层级
  Overlays: 连线上的配置 [[‘Arrow‘,{width:10,length:8,location:1,direction:1,foldback:0.5}],[‘Diamond’,{event:{dbclick:(diamondOverlay,originalEvent)=>{}}}],[
     ‘Label‘,{label:”,location:0.1,cssClass:’aLabel‘}]]   — 箭头,文字说明
  RenderMode: 绘制图的模式 ‘svg‘ — svg或者canvas
  HoverPaintStyle: 鼠标滑过线的效果 { stroke: ‘#b0b2b5’, strokeWidth: 1 }
  Scope: 连接范围 ‘jsPlumb_DefaultScope’ 具有相同的scope才能连接
2.($2)作为起点:
  filter: 可拖拽类名 ‘.flow–node-drag‘,
  filterExclude: 过滤排除 false
  anchor: 锚点 ‘Continuous’ — 动态锚点,上下左右看位置变动
  connector: 连接线的类型 [‘Flowchart’,{curviness:50}],
  connectorStyle: 连接线样式,同上
  connectorHoverStyle: 鼠标路过线上的效果
  allowLoopback: 允许自己连接自己  true
  maxConnections: 最大连接限制  3   如果设置为-1,则为不限制数量
  onMaxConnections: 超出限制的回调函数 (info)=>{超过info了}
3.($3)作为终点:
  同$2几乎一样
4.($4)连线关系(在$1里基本上都有)
  source: 起点id或节点
  target: 终点id或节点
  label: ‘连线文字说明‘
  connector: ‘连线类型‘
  anchor: ‘锚点’
  paintStyle: ‘连线的样式‘
5.($5)连线配置
  isSource:true
  isTarget:true
  aceo老四样
6.($6)拖拽完成后设置
  containment: “parent“, ‘相对于父组件中’,
  stop: function(el){  //停止拖动
  item.left = el.pos[0]
  item.top = el.pos[1]
}

(四) draggable的Api

vue2: vuedraggable  import ‘draggable’ from ‘vuedraggable’
vue3:

import { VueDraggableNext } from ‘vue-draggable-next‘    

const draggable = VueDraggableNext

<draggable @start=”start” @end=”end” v-model=”list” options=”draggableOptions”>
 <div v-for=”(item,index) in list” :key=”index” @mousedown=”mouseDownFun”>{{item.name}}</div>
</draggable>

开始拖动: start
拖动完毕: end
拖动元素集合: v-model [list]
节点配置: options

start方法:(evt)=>{console.log(evt.item.attributes.type.nodeValue)}
end方法: (evt)=>{evt}
mouseDownFun函数: (event)=>{
console.log(event) //总信息
event.clientX event.clientY 鼠标位置信息
event.target.getBoundingClientRect() 盒子具体的位置 (x,y)

}

这些方法都是具体额使用方法,大部分在代码中都有使用.

代码007普通

打赏 收藏 海报 链接