AntV 开发 —— x6 图编辑引擎 v2

前文再续

前序：

• v1笔记

碎碎念：

• 此文个人笔记，官网文档搬运
• x6 版本：2.9.7
• x6-vue-shape 版本：2.0.11
• x6-plugin-selection 版本：2.1.7
• vue 版本：2.6.11
• vue-template-compiler 版本：2.6.11
• Element-UI 版本：2.15.13
• 示例只展示单个节点的，多节点请下载demo自行查看源码
• demo均在易水GIT

一：步骤：

1 —— 创建vue2项目：详情请看 vue开发 —— CLI(开发环境)搭建

2 —— 引入开发组件【Element-UI、antv.x6】

npm i element-ui
npm install @antv/x6 
npm install @antv/x6-vue-shape
npm install @antv/x6-plugin-selection

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 —— 修改生成的项目【编辑main.js、编辑App.vue、新增Dag.vue、OneNode.vue】

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import '@/assets/base.scss';

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

// App.vue
<template>
  <div id="app">
    <div id="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :router="true"
      >
        <el-menu-item index="/">单个节点</el-menu-item>
        <el-menu-item index="/two">两个节点</el-menu-item>
        <el-menu-item index="/more">多节点</el-menu-item>
      </el-menu>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/',
    };
  },
};
</script>

// Dag.vue
<template>
  <div class="data-processing-dag-node">
    <div
      class="main-area"
      @mouseenter="onMainMouseEnter"
      @mousele