记录--VUE使用antv X6实现流程图
安装npm install @antv/x6 --save
引入import { Graph, Addon } from "@antv/x6";
说明：如果没有自定义拖拽到画布的需求引入Graph就行了。
具体说明可查看官网
所有事件
graph.dispose() // 删除画布
graph.model.getNodes() // 获取画布中所有节点数据
graph.model.getEdges() // 获取画布中所有连接线数据
初始化代码：
<template>
<div id="container"></div>
</template>
<script>
import { Graph, Addon } from "@antv/x6";
export default {
data() {
return {
ports: { // 连接桩
groups: {
// 输入链接桩群组定义
top: {
position: "top",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#fff"
}
}
},
// 输出链接桩群组定义
bottom: {
position: "bottom",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#fff"
}
}
},
left: {
position: "left",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#fff"
}
}
},
right: {
position: "right",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#fff"
}
}
}
},
items: [
{
id: "top1",
group: "top"
},
{
id: "right1",
group: "right"
},
{
id: "bottom1",
group: "bottom"
},
{
id: "left1",
group: "left"
}
]
}
};
},
methods: {
init() {
let nodes = [
{
id:1, //节点唯一标识
x:100,
y:100,
shape:"circle", // 节点形状
height:30,
width:100,
attrs: { // 节点样式
body: {
fill: "#ffffff", // 背景颜色
stroke: "#ffffff" // 边框颜色
},
label: {
text: '节点', // 节点显示文字
fill: "#000000"
}
},
ports: this.ports // 链接桩
},
{
id:2, //节点唯一标识
x:200,
y:300,
shape:"circle", // 节点形状
height:30,
width:100,
attrs: { // 节点样式
body: {
fill: "#ffffff", // 背景颜色
stroke: "#ffffff" // 边框颜色
},
label: {
text: '节点', // 节点显示文字
fill: "#000000"
}
},
ports: this.ports // 链接桩
}
]
let esges = [{
source: 2, // 开始节点id
target:1, // 结束节点id
label: x.cond,
attrs: {
text: {
fill:"#800000",
fontSize: 14,
textAnchor: "middle",
textVerticalAnchor: "middle",
pointerEvents: "none"
},
line: {
stroke:"#800000"
}
},
router: { // 路由
name: "manhattan",
args: {} // 自定义数据
}
}]
const graph = new Graph({
container: document.getElementById("container"), // 画布
snapline: { // 对齐线
enabled: true,
className: "my-snapline" // 自定义对齐线类名
},
grid: { // 背景网格
size: 10, // 网格大小 10px
visible: true // 渲染网格背景
},
scroller: {
enabled: true,
pannable: true,
autoResize: true
},
mousewheel: { // 缩放
enabled: true,
zoomAtMousePosition: true,
modifiers: ["ctrl", "meta"],
minScale: 0.2, // 最小缩放比例
maxScale: 3 // 最大缩放比例
},
connecting: { // 连接线设置
snap: {
radius: 10
}, // 自动吸附
allowBlank: false, // 空白处不显示连接线
allowLoop: true,
allowMulti: false, // 在起始和终止节点之间只允许创建一条边
highlight: true, // 高亮
connector: "rounded",
// 创建连接线
createEdge() {
return graph.createEdge({
attrs: { // 连接线样式
text: {
fill: "#52ce60",
fontSize: 14,
textAnchor: "middle",
textVerticalAnchor: "middle",
pointerEvents: "none"
},
line: {
stroke: "#52ce60"
}
},
label: "pass"
});
},
// 判断是否可以链接
validateConnection({ edge, sourceView, targetView }) {
// 自定义逻辑，不满足连接条件返回false
return true;
}
}
});
graph.fromJSON({ // 按照指定的 JSON 数据渲染节点和边
nodes:nodes, // 节点数据
edges:esges // 连接线数据
});
graph.centerContent() // 居中
// 链接桩显示隐藏
graph.on("node:mouseenter", () => {
const ports = container.querySelectorAll(".x6-port-body");
this.showPorts(ports, true);
});
graph.on("node:mouseleave", () => {
const ports = container.querySelectorAll(".x6-port-body");
this.showPorts(ports, false);
});
// 显示删除链接线按钮
graph.on("edge:mouseenter", ({ edge }) => {
edge.addTools([
"source-arrowhead",
"target-arrowhead",
{
name: "button-remove",
args: {
distance: -30
}
}
]);
});
graph.on("edge:mouseleave", ({ edge }) => {
edge.removeTools();
});
// 显示删除节点按钮
graph.on("node:mouseenter", ({ node }) => {
node.addTools([
{
name: "button-remove",
args: {
x: "100%",
y: 0,
offset: { x: -10, y: 10 }
}
}
]);
});
graph.on("node:mouseleave", ({ node }) => {
node.removeTools();
});
},
showPorts(ports, show) {
for (let i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = show ? "visible" : "hidden";
}
}
}
};
</script>
连接线以及节点的方法