AntV X6（流程图的制作dome）
- JQuery/js
- Bootstrap
- HTML/CSS
通过拖拽图形到画布，可以删除和修改图形标签，并且加入了导入和导出功能。
图片展示：
代码：
HTML部分：
<!-- HTML 部分 -->
<div class="app-btns">
<div>
<div id="head">
<div data-type="rect" class="dnd-rect" onmousedown="drag(event)">
</div>
<div data-type="rect" class="dnd-polygon" onmousedown="polygon(event)">
</div>
<div style="margin-left: 60px;">
<p class="walert" style="font-size: 18px">
提示:拖动图标到画布(双击图形或线可修改名称/导入为上一次导出的数据)！</p>
</div>
<div style="margin-left: 100px;">
<button type="button" class="btn btn-default" id="btnExportBoxOne" data-toggle="dropdown">
一键导出
</button>
</div>
<div style="margin-left: 10px;">
<button type="button" class="btn btn-default" id="btnImportBoxOne" data-toggle="dropdown">
一键导入
</button>
</div>
</div>
<div id="container">
</div>
</div>
</div>
<!-- HTML 部分 -->
<!--修改名称 模态框_开始-->
<div class="modal fade in" tabindex="-1" role="dialog" id="TextModal">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title">编辑名称</h4>
</h4>
</div>
<div class="modal-body">
<div class="container-fluid" style="padding-left: 0px">
<div class="row">
<div class="col-md-12 font20 pdtopbtm25">
<form class="form-horizontal form-top10">
<div class="row">
<div class="form-group">
<label style="height: 34px;font-size: 16px;"
class="col-sm-2 control-label required-after">名称</label></label>
<div class="col-sm-10">
<input class="form-control" name="name" type="text" data-tagname="名称"
required>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary Text_Okbtn">保存</button>
</div>
</div>
</div>
</div>
<!--修改名称 模态框_结束-->
CSS部分：
///其他Bootstrap自己去官网下载或者联系作者
<!-- import Antv X6 -->
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<script src="https://unpkg.com/@antv/x6@1.17.2/dist/x6.js"></script>
<style>
body {
margin: 0px auto;
}
#container {
margin-top: 16px;
box-shadow: 0 0 10px 1px #e9e9e9;
margin: 0px auto;
}
.dnd-rect {
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
margin: 16px;
cursor: move;
color: white;
background-color: #1ABB9C;
}
#head div {
display: inline-block;
}
#head {
margin-top: 60px;
margin-left: 150px;
}
.dnd-polygon {
width: 100px;
height: 100px;
background: url(media/img/squareRectbg_green.png) no-repeat;
background-size: 100% 100%;
line-height: 100px;
color: white;
text-align: center;
}
.app-btns {
margin-top: 60px;
width: 1500px;
height: 1500px;
margin: 0px auto;
}
</style>
JS部分：
<script>
// 定义节点
X6.Graph.registerNode(
'algo-node', {
inherit: 'rect',
width: 100,
height: 50,
ports: {
groups: {
in: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
out: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
},
},
},
true,
)
// 定义节点
X6.Graph.registerNode(
'polygon', {
inherit: 'polygon',
ports: {
groups: {
in: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
out: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#31d0c6',
strokeWidth: 2,
fill: '#fff',
},
},
},
},
},
},
true,
)
// 初始化画布
const graph = new X6.Graph({
container: document.getElementById('container'),
width: 1200,
height: 1200,
history: {
enabled: true,
beforeAddCommand(event, args) {
if (args.options) {
return args.options.ignore !== false
}
},
},
selecting: true, //点选/框选
background: {
color: '#fffbe6', // 设置画布背景颜色
},
grid: {
type: 'mesh', //网格类型
size: 25, // 网格大小 10px
visible: true, // 渲染网格背景
},
// panning: true,
// mousewheel: true,
// resizing: true, // 选中调整大小
connecting: {
snap: true, //当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
allowBlank: false, //是否允许连接到画布空白位置的点
allowLoop: false, //是否允许创建循环连线，即边的起始节点和终止节点为同一节点
highlight: true,
sourceAnchor: 'bottom', //当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。
targetAnchor: 'center', //当连接到节点时，通过 targetAnchor 来指定目标节点的锚点。
connectionPoint: 'anchor',
// 设置连接线的样式
router: {
// 样式名
name: 'manhattan',
args: {
startDirections: ['top', 'right', 'bottom', 'left'], //支持从哪些方向开始路由。
endDirections: ['top', 'right', 'bottom', 'left'], //支持从哪些方向结束路由。
},
},
// 设置连接线的样式
// 连接线
createEdge() {
return graph.createEdge({
attrs: {
line: {
stroke: '#808080',
strokeWidth: 2,
targetMarker: {
name: 'block',
args: {
size: '6',
},
},
},
},
})
},
// 验证连接
validateConnection({
sourceView,
targetView,
sourceMagnet,
targetMagnet
}) {
// 只能从输出链接桩创建连接
if (!sourceMagnet) {
return false
}
// 只能连接到输入链接桩
if (!targetMagnet) {
return false
}
// 判断目标链接桩是否可连接
const portId = targetMagnet.getAttribute('port');
const node = targetView.cell
const port = node.getPort(portId)
if (port && port.connected) {
return false
}
return true
}
},
// 禁止节点移动到画布外面
translating: {
restrict: true,
},
});
// 拖拽时使用----新增节点
const dnd = new X6.Addon.Dnd({
target: graph,
scaled: false,
animation: true,
})
//节点双击事件
graph.on('node:dblclick', ({ e, x, y, node, view, cell }) => {
$('#TextModal').data({ row: cell, method: 'node' }).modal('show').find('#modal-title').html('编辑元素');
})
//边双击事件
graph.on('edge:dblclick', ({ e, x, y, edge, view, cell }) => {
$('#TextModal').data({ row: cell, method: 'edge' }).modal('show').find('#modal-title').html('编辑线');
})
// 保存按钮
$('.Text_Okbtn').on('click', function () {
var name = $('#TextModal').find('input').val();
var method = $('#TextModal').data('method');
var cell = $('#TextModal').data('row');
if (method == 'node') {
cell.attr('label', {
text: name,
})
} else {
cell.setLabels([name])
}
$('#TextModal').modal('hide');
})
// 模态框
$('#TextModal').on('hide.bs.modal', function () {
$('#TextModal').find('input').val('');
});
// 拖入节点
function drag(e) {
var node = graph.createNode({
shape: 'algo-node',
x: 120,
y: 50,
label: 'Hello',
attrs: {
label: {
text: '',
fill: '#6a6c8a',
},
body: {
fill: '#fff',
stroke: '#d9d9d9',
},
},
data: {
tag: "edit-node",
},
ports: [{
group: 'in',
},
{
group: 'right',
},
{
group: 'left',
},
{
group: 'out',
attrs: {
circle: {
magnet: true,
connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边
}
}
},
],
})
dnd.start(node, e)
}
// 拖入节点
// 菱形拖入节点
function polygon(e) {
var node = graph.createNode({
shape: 'polygon',
x: 180,
y: 40,
width: 100,
height: 100,
attrs: {
label: {
text: '',
fill: '#6a6c8a',
},
body: {
fill: '#fff',
stroke: '#d9d9d9',
refPoints: '0,10 10,0 20,10 10,20'
},
},
data: {
tag: "edit-polygon",
},
ports: [{
group: 'in',
},
{
group: 'right',
},
{
group: 'left',
},
{
group: 'out',
attrs: {
circle: {
magnet: true,
connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边
}
}
},
],
})
dnd.start(node, e)
}
// 拖入节点
// 移入显示连接桩
const changePortsVisible = (visible) => {
const ports = container.querySelectorAll(
'.x6-port-body',
)
for (let i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = visible ? 'visible' : 'hidden'
}
}
graph.on('node:mouseenter', () => {
changePortsVisible(true)
})
graph.on('node:mouseleave', () => {
changePortsVisible(false)
})
// 节点和边的移入删除按钮
// 节点
graph.on('node:mouseenter', ({
node
}) => {
// node：该元素节点 node.data.tag：是该节点的名称
if (node.data.tag === "edit-node") {
node.addTools({
name: 'button-remove',
args: {
x: 0,
y: 0,
offset: {
x: 96,
y: 10
},
},
})
}
})
graph.on('node:mouseleave', ({
node
}) => {
if (node.data.tag === "edit-node") {
node.removeTools()
}
})
graph.on('node:mouseenter', ({
node
}) => {
// node：该元素节点 node.data.tag：是该节点的名称
if (node.data.tag === "edit-polygon") {
node.addTools({
name: 'button-remove',
args: {
x: 0,
y: 0,
offset: {
x: 70,
y: 22
},
},
})
}
})
graph.on('node:mouseleave', ({
node
}) => {
if (node.data.tag === "edit-polygon") {
node.removeTools()
}
})
// 边线
graph.on('edge:mouseenter', ({
edge
}) => {
edge.addTools({
name: 'button-remove',
args: {
x: 0,
y: 0,
offset: {
x: 0,
y: 0
},
},
})
})
graph.on('edge:mouseleave', ({
edge
}) => {
edge.removeTools()
})
// 节点和边的移入删除按钮
graph.drawBackground({
color: '#f5f5f5',
})
var a;
// 导出
$('#btnExportBoxOne').on('click', function () {
a = graph.toJSON();
// 清除画布
graph.clearCells()
})
// 导入
$('#btnImportBoxOne').on('click', function () {
graph.fromJSON(a)
})
</script>