jsplumb 流程图,常用功能配置记录
前言:
jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本)。Toolkit Edition版本功能集成的比较丰富,社区版本的就差好多,很多功能都没有,需要我们自己去添加,当然了自己添加多多少少有些麻烦,而且也不完善。但是我们还是用Community Edition(社区版本),毕竟不收费,没办法,下边所说的版本默认都是以社区版。
最近公司项目有用到这个流程图,所以也就看到了这个框架,这个框架是英文版本的,地址:https://jsplumbtoolkit.com/community/doc/home.html(可以用浏览器翻译了看)。他的缺陷就是文档不全,api感觉也有点乱,实例交代的也不清楚,github地址是:https://github.com/jsplumb/jsplumb (里面有demo,自己可以下载运行,多动手试试)。如果只是简单的画个图,这个框架是没有什么问题的,demo里也有,但是如果要实现高级的动能呢鞥,还是得多多尝试。此文也是记录一下我自己用到的一些功能,很多我还没用到,用到了在慢慢补充。
![](http://upload-images.jianshu.io/upload_images/7579449-a3e456a580e5b450.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/846/format/webp)
上图也就是我这次用到的jsplumb实现的功能,连接线能够拖拽生成,也可以删除,编辑label。
1、数据结构
{
"nodes": [{ //节点集合
"icon": "el-icon-loading",
"id": "start",
"nodeStyle": {
"top": 100,
"left": 200
},
"text": "开始",
"type": "circle"
}, {
"icon": "el-icon-upload",
"id": "end",
"nodeStyle": {
"top": 300,
"left": 400
},
"text": "结束",
"type": "circle"
}] ,
"connections": [{ //连接线集合
"sourceId": "start",
"targetId": "end",
"label":"编辑"
}]
}
jsplumb实例里面的数据结构就是这样的,这里我们沿用他的数据结构,你也可以自己定义自己想的数据结构,但是对比起来这个结构是最清晰也最方便的。
2、初始化
jsplumb在DOM渲染完毕之后才会执行,所以需要为jsplumb的执行代码绑定一个ready事件:
jsPlumb.ready(function() {
// your jsPlumb related init code goes here
});
jsplumb默认是注册在浏览器窗口的,将整个页面提供给我们作为一个实例,但我们也可以使用getInstance方法建立页面中一个独立的实例:
var _instance = jsPlumb.getInstance();
3、功能实现(允许哪些元素拖拽,允许拆卸连接)
let instance = jsPlumb.getInstance({
PaintStyle:{
strokeWidth:2,
stroke:"#567567",
}
})
//拖拽功能
var els = document.querySelectorAll(".box");//.box是允许拖拽的元素class类名
instance.draggable(els,{
containment:true,
filter: ".ep",//除去不能拖拽的,这里是个class类名
});
//不允许拆卸连接,不设置的话默认是可以的
instance.importDefaults({
ConnectionsDetachable:false
});
4、连线监听事件(拖动connection 事件)
// 监听拖动connection 事件,判断是否有重复链接
instance.bind("beforeDrop", function(info) {
// info.connection.getOverlay("label").setLabel(info.connection.id);
// 判断是否已有该连接
let isSame = true;
//下边的forEach循环就是处理数据结构里的connections不能自己跟自己连线。当然你也可以处理其他
_this.chartData.connections.forEach(item => {
if ((item.targetId === info.targetId && item.sourceId === info.sourceId) || (item.targetId === info.sourceId && item.sourceId === info.targetId)) {
isSame = false;
}
});
if (isSame) {
//允许连线后处理的情况
} else {
alert("不允许重复连接!");
}
return isSame;//这里返回了ture就会自定进行连线。
});
5、上图实现的完整代码
下边代码就是实现上图的,需要指出的是运用了vue,但是里面掺杂了jquery,和jquery-ui,其实不想用这2个的,但是项目紧,之前项目也用到了,所以就延续了。还有就是上面代码是我自己的测试代码,写的可能有些杂乱,就是测试一个一个功能而写,写的有点乱。
还有一个想说的就是之前想实现,缩放,引入了panzoom.js,流程图也实现了滚动鼠标放大放小,但是有个问题就是滚动鼠标放大放小后如果拖动单个元素或者连线,你就会发现鼠标点对不齐了,这点还没有解决,如果有好的方案,可以告知我下。Toolkit Edition(付费版)的这些功能都有,就不会出现这样的问题。
<template>
<div id="test6" style="height:100%;position:relative">
<section id="focal" style="position:relative;overflow:hidden;width:610px;height:610px;background:#fff;border:1px solid red">
<div class="parent" id="parent" style="height:100%;">
<div class="panzoom" id="panzoom" style="border:1px solid blue;width:6000px;height:6000px; transform:translate(-50%, -50%);position:absolute;">
<div class="box" :id="item.id" :style="{'top':item.nodeStyle.top+'px','left':item.nodeStyle.left+'px'}" v-for="item in chartData.nodes" :key="item.id">
<i :class="item.icon" class="oldIcon" :title="item.text"></i>
<i class="el-icon-circle-close" style="display:none" :title="item.text" :id="item.id"></i>
<div class="ep"></div>
</div>
</div>
</div>
</section>
<div class="source">
<ul>
<li v-for="(item,index) in list" :id="item.id" :key="index" class="sourceLi" :disabled="true" :data-icon="item.icon" :data-text="item.text" :data-type="item.type">{{item.text}}</li>
</ul>
</div>
<el-dialog
title="修改label名称"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-input v-model="labelName" placeholder="请输入"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="changeNote">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import ChartNode from "@/components/ChartNode";
export default {
name: "test6",
data() {
return {
dialogVisible:false,
labelName:"",
curSourceId:'',
curTargetId:'',
addLabelText:'',//拖拽后生成的连线label文字
jsp:null,
myscale:1,
curScreen:[],//当前屏幕宽高
chartData: {
nodes: [],
connections: [],//{ "targetId": "box2", "sourceId": "box1" }
props: {},
screen:[610,610]//提交屏幕宽高
},
list: [
{
icon: "el-icon-goods",
text: "伴随车牌",
type: "circle",
id:'li1'
},
{
icon: "el-icon-bell",
text: "常住人口筛选",
type: "diamond",
id:"li2"
},
{
icon: "el-icon-date",
text: "伴随imsi",
type: "circle",
id:"li3"
}
]
};
},
mounted() {
let _this = this
jsPlumb.ready(function() {
var $section = $('#focal');
var $panzoom = $section.find('.panzoom').panzoom({
minScale: 0.3,
maxScale:2,
eventNamespace: ".panzoom",
$zoomRange: $(".jtk-endpoint"),
$set: $section.find('.jtk-overlay'),
eventsListenerElement: document.querySelector('.box')
});
$(document).on('mouseover','.box,.jtk-draggable,.jtk-overlay,.ep',function(){
$('.panzoom').panzoom("disable");
})
$(document).on(