开源流程图设计器

一个小机灵 2017-07-14 10:07:57
有没有推荐的流程图设计器的插件呢?我想在web页面上,可以让用户自己去设计流程图,通过左边的一些图形拖拉到画布上。。。类似Visio那样。。。。要可以自定义图形,自定义点击事件之类的监听事件,,,,一定要开源的
...全文
542 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
ll7425 2018-11-07
  • 打赏
  • 举报
回复
<template>
<div id="labelManage">
<div id="main">
<ul class="flowchart-demo" id="flowchart-demo" ref="demo">
<li class="circle" id="flowchartWindow1" ref="dd" @mouseenter="handleCircle1"><span>开始</span></li>
<li class="window" id="flowchartWindow2" ref="qq" @mouseenter="handleWindow"><span>流程</span></li>
<li class="diamond" id="flowchartWindow3" ref="dia" @mouseenter="handleDiamond"><span>判断</span></li>
<li class="circle" id="flowchartWindow4" ref="cir" @mouseenter="handleCircle2"><span>结束</span></li>
</ul>
</div>
</div>
</template>
<script>
import {jsPlumb} from 'jsplumb';
import draggable from 'vuedraggable';
//基本连接线样式
let connectorPaintStyle = {
lineWidth: 4,
strokeStyle: '#61B7CF',
joinstyle: 'round',
outlineColor: 'white',
outlineWidth: 2
};
// 鼠标悬浮在连接线上的样式
let connectorHoverStyle = {
lineWidth: 4,
strokeStyle: '#216477',
outlineWidth: 2,
outlineColor: 'white'
};
let hollowCircle = {
endpoint: ['Dot', {radius: 8}], //端点的形状
connectorStyle: connectorPaintStyle,//连接线的颜色,大小样式
connectorHoverStyle: connectorHoverStyle,
paintStyle: {
strokeStyle: '#1e8151',
fillStyle: 'transparent',
radius: 2,
lineWidth: 2
}, //端点的颜色样式
anchor: 'AutoDefault',
isSource: true, //是否可以拖动(作为连线起点)
Connector: ['Flowchart', {curviness: 70}],
isTarget: true, //是否可以放置(连线终点)
maxConnections: -1, // 设置连接点最多可以连接几条线
connectorOverlays: [['Arrow', {width: 10, length: 10, location: 1}]]
};
export default {
components: {
draggable
},
data () {
return {
count1: 1,
count2: 1,
count3: 1,
count4: 1
};
},
methods: {
handleCircle1 () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.dd.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'circle' + vm.count1;
vm.count1++;
// vm.jsPlumbSet(l);
jsPlumb.addEndpoint(l.id, {anchors: 'TopCenter'}, vm.hollowCircle);
jsPlumb.addEndpoint(l.id, {anchors: 'RightMiddle'}, vm.hollowCircle);
jsPlumb.addEndpoint(l.id, {anchors: 'BottomCenter'}, vm.hollowCircle);
jsPlumb.addEndpoint(l.id, {anchors: 'LeftMiddle'}, vm.hollowCircle);
jsPlumb.draggable(l.id, {
containment: 'flowchart-demo'
});
}
;
};
},
handleCircle2 () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.cir.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'cir' + vm.count2;
vm.count2++;
vm.jsPlumbSet(l);
}
};
},
handleWindow () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.qq.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'window' + vm.count3;
vm.count3++;
vm.jsPlumbSet(l);
}
};
},
handleDiamond () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.dia.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'diamond' + vm.count4;
vm.count4++;
vm.jsPlumbSet(l);
}
};
},
jsPlumbSet (element) {
// 基本连接线样式
let connectorPaintStyle = {
lineWidth: 4,
strokeStyle: '#61B7CF',
joinstyle: 'round',
outlineColor: 'white',
outlineWidth: 2
};
// 鼠标悬浮在连接线上的样式
let connectorHoverStyle = {
lineWidth: 4,
strokeStyle: '#216477',
outlineWidth: 2,
outlineColor: 'white'
};
jsPlumb.ready(function () {
let j = jsPlumb.getInstance({
DragOptions: {cursor: 'pointer', zIndex: 2000},
PaintStyle: {stroke: 'red', strokeWidth: 1}, // 配置自己拖拽小点的时候连接线的默认样式
Endpoint: 'Dot', // 这个是控制连线终端那个小点的半径
EndpointStyle: {fill: 'gray', radius: 4}, // 这个是控制连线终端那个小点的样式
EndpointHoverStyle: {fill: 'blue'}, // 这个是控制连线终端那个小点的样式
isSource: true,
isTarget: true,
Connector: ['Flowchart', {curviness: 70}],
maxConnections: -1, // 不限条数
connectorStyle: connectorPaintStyle,// 连接线的颜色,大小样式
connectorHoverStyle: connectorHoverStyle,
ConnectionOverlays: [
['Arrow', {
location: 1,
events: {
click: function (arrow, evt) {
}
}
}],
['Label', {
location: 0.5,
id: 'label',
cssClass: 'aLabel', //hover时label的样式名
events: {
click: function (label, evt) {
}
},
visible: true
}]
],
Container: 'flowchart-demo'
});
j.draggable(element.id, {
containment: 'flowchart-demo'
});
j.addEndpoint(element.id, {anchor: 'Bottom'}, j);
j.addEndpoint(element.id, {anchor: 'TopCenter'}, j);
j.addEndpoint(element.id, {anchor: 'Left'}, j);
j.addEndpoint(element.id, {anchor: 'Right'}, j);
// j.repaintEverything(); // 节点跟着元素一起移动
j.bind('dblclick', function (conn, event) {
j.deleteConnection(conn);
return false;
});

// 自动避免连线源锚点和目标锚点在同一节点上
j.bind('beforeDrop', function (conn) {
if (conn.sourceId === conn.targetId) {
return false;
} else {
return true;
}
});
});
}
},
mounted () {
// jsPlumb.ready(function () {
// let j = jsPlumb.getInstance({
// DragOptions: {cursor: 'pointer', zIndex: 2000},
// PaintStyle: {stroke: 'red', strokeWidth: 1}, //配置自己拖拽小点的时候连接线的默认样式
// Endpoint: 'Dot', //这个是控制连线终端那个小点的半径
// EndpointStyle: {fill: 'gray', radius: 4}, //这个是控制连线终端那个小点的样式
// EndpointHoverStyle: {fill: 'blue'}, //这个是控制连线终端那个小点的样式
// isSource: true,
// isTarget: true,
// Connector: ['Flowchart', {curviness: 70}],
// maxConnections: -1, // 不限条数
// ConnectionOverlays: [
// ['Arrow', {
// location: 1,
// events: {
// click: function (arrow, evt) {
// }
// }
// }],
// ['Label', {
// location: 0.5,
// id: 'label',
// cssClass: 'aLabel', //hover时label的样式名
// events: {
// click: function (label, evt) {
// }
// },
// visible: true
// }]
// ],
// Container: 'flowchart-demo',
// });
//
请问我这样写为什么连接不上
红尘丿 2017-08-08
  • 打赏
  • 举报
回复
楼主。。。找到了吗。。给我也留个。。

5,006

社区成员

发帖
与我相关
我的任务
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧