其实，只是想找个轮子
前序：
碎碎念：
- 此文个人笔记，官网文档搬运
- 因为官网对于vue结合Element-UI的示例就几个，本意只是看中了人工智能建模 DAG 图，但是这玩意demo是React，虽然核心的东西一样，但是傻瓜式才方便，故特意按vue2写了一次，没用ts，用ts的其实转换的成本不高
- demo 待上传中【ps：因demo已魔改，那应该是不可能上传了 →_→ 】
- v1版本过于繁琐，想入手还是请看v2版本
- x6 版本：1.32.8
- x6-vue-shape 版本：1.4.0
- composition-api 版本：1.7.0
- vue 版本：2.6.11
- vue-template-compiler 版本：2.6.11
- Element-UI 版本：2.15.9
一：步骤：
1 —— 创建vue2项目：详情请看 vue开发 —— CLI（开发环境）搭建
2 —— 引入开发组件【Element-UI、antv.x6】
npm i element-ui
npm install @antv/x6
npm install @antv/x6-vue-shape
// 在vue2.x 若你引入x6-vue-shape，目前这个版本是必须要的，因由在常见问题2
npm install @vue/composition-api --dev
2.1 —— 生成的项目目录如下：
Demo
├─ node_modules
├─ public
├─ favicon.ico
└─ index.html
├─ src
├─ assets
└─ logo.png
├─ components
└─ HelloWorld.vue
├─ App.vue
└─ main.js
├─ .browserslistrc
├─ .eslintrc.js
├─ babel.config.js
├─ package.json
├─ package-lock.json
└─ README.md
2.2 —— 修改生成的项目【编辑package.json、编辑main.js、编辑App.vue、新增vue.config.js】
// package.json
// 此处修改为解决常见问题一
"dependencies": {
"vue": "2.6.11"
},
"devDependencies": {
"vue-template-compiler": "2.6.11"
}
// main.js
import Vue from "vue";
import App from "./App.vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
render: (h) => h(App),
}).$mount("#app");
// App.vue
<template>
<div id="app"></div>
</template>
<script>
export default {
name: 'App',
components: {},
};
</script>
<style></style>
// vue.config.js
// 此处新增为解决常见问题二
module.exports = {
runtimeCompiler: true
}
2.3 —— 开启搬运工生涯【创建画布、创建节点模板、新增节点、新增多个节点、定时改变多个节点状态、达成官网效果、搭配Element-UI、收工】
官网效果图
2.3.1 —— 创建画布
// App.vue
<template>
<div id="app"></div>
</template>
<script>
import { Graph } from '@antv/x6';
import '@antv/x6-vue-shape'
let graph = null;
export default {
name: 'App',
components: {},
mounted() {
graph = new Graph({
container: document.getElementById('app'),
grid: true,
autoResize: true,
});
},
};
</script>
<style>
#app {
width: 100%;
min-height: 500px;
}
</style>
创建画布
2.3.2 —— 创建节点模板
// components/NodeTemplate.vue
<template>
<div :class="nodeClass" class="node">
<img :src="logo" />
<span class="label">{{ label }}</span>
<span class="status">
<img :src="statusImg" v-if="statusImg" />
</span>
</div>
</template>
<script>
export default {
inject: ['getGraph', 'getNode'],
data() {
return {
status: '',
label: '',
statusImg: '',
logo: '',
};
},
methods: {
mapper(source, target) {
for (let key in target) {
target[key] = source?.[key] ?? target[key];
}
},
},
created() {
let node = this.getNode();
// 初始化数据绑定
this.mapper(node.data, this.$data);
console.info(node);
// 节点数据变化监听，从而绑定数据
node.on('change:data', ({ current }) => this.mapper(current, this.$data));
},
computed: {
nodeClass: function () {
let clazz = {};
if (this.status) clazz[this.status] = true;
return clazz;
},
},
};
</script>
2.3.3 —— 新增节点
// App.vue
<template>
<div id="app"></div>
</template>
<script>
import { Graph } from '@antv/x6';
import '@antv/x6-vue-shape';
import nodetemplate from '@/components/NodeTemplate';
let graph = null;
export default {
name: 'App',
data() {
return {
node: {
id: '1',
shape: 'vue-shape',
component: 'nodetemplate',
width: 180,
height: 36,
x: 290,
y: 110,
data: {
label: '读数据',
status: 'success',
statusImg: '',
logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
},
ports: {
groups: {
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#C2C8D5',
strokeWidth: 1,
fill: '#fff',
},
},
},
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#C2C8D5',
strokeWidth: 1,
fill: '#fff',
},
},
},
},
items: [
{
id: '1-1',
group: 'bottom',
},
],
},
},
};
},
mounted() {
graph = new Graph({
container: document.getElementById('app'),
grid: true,
autoResize: true,
});
// 注册 nodeTemplate
Graph.registerVueComponent(
'nodetemplate',
{
template: `<nodetemplate />`,
components: {
nodetemplate,
},
},
true
);
graph.addNode(this.node);
graph.centerContent();
},
};
</script>
<style>
#app {
width: 100%;
min-height: 500px;
}
.node {
display: flex;
align-items: center;
width: 100%;
height: 100%;
background-color: #fff;
border: 1px solid #c2c8d5;
border-left: 4px solid #5f95ff;
border-radius: 4px;
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
}
.node img {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-left: 8px;
}
.node .label {
display: inline-block;
flex-shrink: 0;
width: 104px;
margin-left: 8px;
color: #666;
font-size: 12px;
}
.node .status {
flex-shrink: 0;
}
.node.success {
border-left: 4px solid #52c41a;
}
.node.failed {
border-left: 4px solid #ff4d4f;
}
.node.running .status img {
animation: spin 1s linear infinite;
}
.x6-node-selected .node {
border-color: #1890ff;
border-radius: 2px;
box-shadow: 0 0 0 4px #d4e8fe;
}
.x6-node-selected .node.success {
border-color: #52c41a;
border-radius: 2px;
box-shadow: 0 0 0 4px #ccecc0;
}
.x6-node-selected .node.failed {
border-color: #ff4d4f;
border-radius: 2px;
box-shadow: 0 0 0 4px #fedcdc;
}
.x6-edge:hover path:nth-child(2) {
stroke: #1890ff;
stroke-width: 1px;
}
.x6-edge-selected path:nth-child(2) {
stroke: #1890ff;
stroke-width: 1.5px !important;
}
@keyframes running-line {
to {
stroke-dashoffset: -1000;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
单个节点
2.3.4 —— 新增多个节点
// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据
<template>
<!-- -->
<div id="app"></div>
</template>
<script>
import { Graph } from '@antv/x6';
import '@antv/x6-vue-shape';
import nodetemplate from '@/components/NodeTemplate';
let graph = null;
export default {
name: 'App',
data() {
return {
nodeData: [
{
id: '1',
shape: 'vue-shape',
x: 290,
y: 110,
data: {
label: '读数据',
status: 'success',
},
ports: [
{
id: '1-1',
group: 'bottom',
},
],
},
{
id: '2',
shape: 'vue-shape',
x: 290,
y: 225,
data: {
label: '逻辑回归',
status: 'success',
},
ports: [
{
id: '2-1',
group: 'top',
},
{
id: '2-2',
group: 'bottom',
},
{
id: '2-3',
group: 'bottom',
},
],
},
{
id: '3',
shape: 'vue-shape',
x: 170,
y: 350,
data: {
label: '模型预测',
status: 'success',
},
ports: [
{
id: '3-1',
group: 'top',
},
{
id: '3-2',
group: 'bottom',
},
],
},
{
id: '4',
shape: 'vue-shape',
x: 450,
y: 350,
data: {
label: '读取参数',
status: 'success',
},
ports: [
{
id: '4-1',
group: 'top',
},
{
id: '4-2',
group: 'bottom',
},
],
},
{
id: '5',
shape: 'dag-edge',
source: {
cell: '1',
port: '1-1',
},
target: {
cell: '2',
port: '2-1',
},
zIndex: 0,
},
{
id: '6',
shape: 'dag-edge',
source: {
cell: '2',
port: '2-2',
},
target: {
cell: '3',
port: '3-1',
},
zIndex: 0,
},
{
id: '7',
shape: 'dag-edge',
source: {
cell: '2',
port: '2-3',
},
target: {
cell: '4',
port: '4-1',
},
zIndex: 0,
},
],
nodeImage: {
logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
success:
'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
failed:
'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
running:
'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
},
};
},
methods: {
init(data) {
let cells = [];
data.forEach((item) => {
if (item.shape === 'vue-shape') {
item.width = 180;
item.height = 36;
item.component = 'nodetemplate';
item.data.logo = this.nodeImage.logo;
item.data.statusImg = '';
if (item.ports)
item.ports = {
groups: {
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#C2C8D5',
strokeWidth: 1,
fill: '#fff',
},
},
},
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#C2C8D5',
strokeWidth: 1,
fill: '#fff',
},
},
},
},
items: item.ports,
};
cells.push(graph.createNode(item));
} else {
cells.push(graph.createEdge(item));
}
});
graph.resetCells(cells);
},
},
mounted() {
graph = new Graph({
container: document.getElementById('app'),
grid: true,
autoResize: true,
});
// 注册 nodeTemplate
Graph.registerVueComponent(
'nodetemplate',
{
template: `<nodetemplate />`,
components: {
nodetemplate,
},
},
true
);
// 注册 nodeTemplate 的链接线
Graph.registerEdge(
'dag-edge',
{
inherit: 'edge',
attrs: {
line: {
stroke: '#C2C8D5',
strokeWidth: 1,
targetMarker: null,
},
},
},
true
);
this.init(this.nodeData);
graph.centerContent();
},
};
</script>
<style>
/* 和上一节一样 */
</style>
多个节点
2.3.5 —— 定时改变多个节点状态
// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据
<template>
<div id="app"></div>
</template>
<script>
import { Graph } from '@antv/x6';
import '@antv/x6-vue-shape';
import nodetemplate from '@/components/NodeTemplate';
let graph = null;
export default {
name: 'App',
data() {
return {
// 和上节一样
nodeStatusList: [
[
{
id: '1',
status: 'running',
},
{
id: '2',
status: 'default',
},
{
id: '3',
status: 'default',
},
{
id: '4',
status: 'default',
},
],
[
{
id: '1',
status: 'success',
},
{
id: '2',
status: 'running',
},
{
id: '3',
status: 'default',
},
{
id: '4',
status: 'default',
},
],
[
{
id: '1',
status: 'success',
},
{
id: '2',
status: 'success',
},
{
id: '3',
status: 'running',
},
{
id: '4',
status: 'running',
},
],
[
{
id: '1',
status: 'success',
},
{
id: '2',
status: 'success',
},
{
id: '3',
status: 'success',
},
{
id: '4',
status: 'failed',
},
],
],
};
},
methods: {
// 和上节一样
showNodeStatus(statusList) {
let status = statusList.shift();
status?.forEach((item) => {
let { id, status } = item;
let node = graph.getCellById(id);
let data = node.getData();
node.setData({
...data,
status: status,
statusImg: this.nodeImage[status],
});
});
setTimeout(() => {
this.showNodeStatus(statusList);
}, 3000);
},
},
mounted() {
// 和上节一样
this.init(this.nodeData);
this.showNodeStatus(this.nodeStatusList);
graph.centerContent();
},
};
</script>
<style>
// 和上节一样
</style>
定时改变多个节点状态
2.3.6 —— 添加属性达成官网效果
// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据
<template>
<div id="app"></div>
</template>
<script>
import { Graph, Path } from '@antv/x6';
import '@antv/x6-vue-shape';
import nodetemplate from '@/components/NodeTemplate';
let graph = null;
export default {
name: 'App',
data() {
return {
// 和上节一样
};
},
methods: {
// 和上节一样
},
mounted() {
graph = new Graph({
container: document.getElementById('app'),
grid: true,
autoResize: true,
panning: {
enabled: true,
eventTypes: ['leftMouseDown', 'mouseWheel'],
},
mousewheel: {
enabled: true,
modifiers: 'ctrl',
factor: 1.1,
maxScale: 1.5,
minScale: 0.5,
},
highlighting: {
magnetAdsorbed: {
name: 'stroke',
args: {
attrs: {
fill: '#fff',
stroke: '#31d0c6',
strokeWidth: 4,
},
},
},
},
connecting: {
snap: true,
allowBlank: false,
allowLoop: false,
highlight: true,
connector: 'algo-connector',
connectionPoint: 'anchor',
anchor: 'center',
validateMagnet({ magnet }) {
return magnet.getAttribute('port-group') !== 'top';
},
createEdge() {
return graph.createEdge({
shape: 'dag-edge',
attrs: {
line: {
strokeDasharray: '5 5',
},
},
zIndex: -1,
});
},
},
selecting: {
enabled: true,
multiple: true,
rubberEdge: true,
rubberNode: true,
modifiers: 'shift',
rubberband: true,
},
});
// 注册 nodeTemplate
Graph.registerVueComponent(
'nodetemplate',
{
template: `<nodetemplate />`,
components: {
nodetemplate,
},
},
true
);
// 注册 nodeTemplate 的链接线
Graph.registerEdge(
'dag-edge',
{
inherit: 'edge',
attrs: {
line: {
stroke: '#C2C8D5',
strokeWidth: 1,
targetMarker: null,
},
},
},
true
);
// 注册 nodeTemplate 的链接之间的线样式
Graph.registerConnector(
'algo-connector',
(s, e) => {
const offset = 4;
const deltaY = Math.abs(e.y - s.y);
const control = Math.floor((deltaY / 3) * 2);
const v1 = { x: s.x, y: s.y + offset + control };
const v2 = { x: e.x, y: e.y - offset - control };
return Path.normalize(
`M ${s.x} ${s.y}
L ${s.x} ${s.y + offset}
C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
L ${e.x} ${e.y}
`
);
},
true
);
// 控制线链接时的样式
graph.on('edge:connected', ({ edge }) => {
edge.attr({
line: {
strokeDasharray: '',
},
});
});
// 控制节点数据变更时线的样式
graph.on('node:change:data', ({ node }) => {
let edges = graph.getIncomingEdges(node);
let { status } = node.getData();
edges?.forEach((edge) => {
if (status === 'running') {
edge.attr('line/strokeDasharray', 5);
edge.attr('line/style/animation', 'running-line 30s infinite linear');
} else {
edge.attr('line/strokeDasharray', '');
edge.attr('line/style/animation', '');
}
});
});
this.init(this.nodeData);
this.showNodeStatus(this.nodeStatusList);
graph.centerContent();
},
};
</script>
<style>
// 和上节一样
</style>
达成效果
2.3.6 —— 废话了这么多，就是和一开始引入的Element-UI无关，客官莫急，菜来也
// components/EleTemplate.vue
<template>
<el-alert title="潇风剑易水" type="warning" close-text="赛雷"> </el-alert>
</template>
// App.vue
import eletemplate from '@/components/EleTemplate';
// 注册 eletemplate
Graph.registerVueComponent(
'eletemplate',
{
template: `<eletemplate />`,
components: {
eletemplate,
},
},
true
);
graph.addNode({
id: '1',
shape: 'vue-shape',
component: 'eletemplate',
width: 180,
height: 36,
x: 290,
y: 110,
});
graph.centerContent();
搭配Element-UI效果图
2.3.7 —— 收工，翻归卖豉油
二：常见问题：
1 —— 运行时编译报错如下：
Vue packages version mismatch:
- vue@2.6.14 (D:\x6-dag\node_modules\vue\dist\vue.runtime.common.js)
- vue-template-compiler@2.7.5 (D:\x6-dag\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
Error:
Vue packages version mismatch:
- vue@2.6.14 (D:\x6-dag\node_modules\vue\dist\vue.runtime.common.js)
- vue-template-compiler@2.7.5 (D:\x6-dag\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
解决方法：
// package.json
// 仅修改 package.json的dependencies节点的vue版本和devDependencies节点的vue-template-compiler版本，
// 均需要去掉^，保持2者的版本一致，重新npm i 再启动
"dependencies": {
"vue": "2.6.11"
},
"devDependencies": {
"vue-template-compiler": "2.6.11"
}
2 —— 运行时浏览器报错如下：
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
解决方法：
// 项目根目录创建vue.config.js并添加如下内容
// vue.config.js
module.exports = {
runtimeCompiler: true
}
2 —— 编译时报错如下：
This dependency was not found:
* @vue/composition-api in ./node_modules/vue-demi/lib/index.esm.js
To install it, you can run: npm install --save @vue/composition-api
解决方法：
npm install --save @vue/composition-api
3 —— 当卸载composition-api在运行时不会报错正常运行，问题2不会在提示，同时缺失这个，导致vue-demi的判断会一直是isVue2为false，isVue3为true，从而当渲染vue模板时会一直走vue3的方法，个人认为vue-demi应该去检查运行中的vue对象，由vue对象的某些vue3特性来判断是否走vue3内容，vue-demi是x6-vue-shape的依赖非本项目的依赖：
4 —— 拖曳创建的节点，使用node.setData不触发绑定的change:data事件，但是实际上打印出来的node的data的确改动了，在数据为null的情况下，这个的确生效，但是并不是通过change:data事件触发的，暂时从源码也没法看出错误点，还没排除新版本是否已修复，源码看的新版本的，后续会更新此版本写的demo：setData为updateData
问题因由：并不是updateData还是setData的没生效的问题或者拖曳生成或者版本的问题（源码版本搜索里面也可以找到和版本有一点点的关系，毕竟之前是没加这个相同就不更新的原则），而是通过node.getData()直接操作了数据，导致setData比较了一致就不更新，其实这也是可以后期修改下，直接通知vue组件更新的同时更新node数据，脱离这种setData的内置方法，但是仅仅是一个权宜之计，也是自己写的时候太过于不顾前后导致的低级bug
解决方法：
不要直接操纵node的data数据，需要通过其自身提供的方法比如setData或者updateData，但是在考虑到x6它自身这种结合vue这种框架的事件绑定脱离了这种框架定义的东西时，其实可以适当改造，让x6更符合vue的写法，而不是遵循它自身这种数据变化的写法
