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
开始拖动: 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)
}
这些方法都是具体额使用方法,大部分在代码中都有使用.