AntV 开发 —— x6 图编辑引擎

其实，只是想找个轮子

前序：

• AntV-官网
• x6-官网
• x6-人工智能建模 DAG 图

碎碎念：

• 此文个人笔记，官网文档搬运
• 因为官网对于vue结合Element-UI的示例就几个，本意只是看中了人工智能建模 DAG 图，但是这玩意demo是React，虽然核心的东西一样，但是傻瓜式才方便，故特意按vue2写了一次，没用ts，用ts的其实转换的成本不高
• demo 待上传中【ps：因demo已魔改，那应该是不可能上传了 →_→ 】
• 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/NodeTemplat