AntV 开发 —— x6 图编辑引擎

其实，只是想找个轮子

前序：

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

碎碎念：

• 此文个人笔记，官网文档搬运
• 因为官网对于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

// vue.config.js
// 此处新增为解决常见问题二
module.exports = {
    runtimeCompiler: true
}

2.3 —— 开启搬运工生涯【创建画布、创建节点模板、新增节点、新增多个节点、定时改变多个节点状态、达成官网效果、搭配Element-UI、收工】

官网效果图

2.3.1 —— 创建画布

// App.vue

创建画布

2.3.2 —— 创建节点模板

// components/NodeTemplate.vue

2.3.3 —— 新增节点

// App.vue

单个节点

2.3.4 —— 新增多个节点

// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据

多个节点

2.3.5 —— 定时改变多个节点状态

// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据

定时改变多个节点状态

2.3.6 —— 添加属性达成官网效果

// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据

达成效果

2.3.6 —— 废话了这么多，就是和一开始引入的Element-UI无关，客官莫急，菜来也

// components/EleTemplate.vue

// App.vue
import eletemplate from '@/components/EleTemplate';
   // 注册 eletemplate
    Graph.registerVueComponent(
      'eletemplate',
      {
        template: ``,
        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:

- [email protected] (D:\x6-dag\node_modules\vue\dist\vue.runtime.common.js)
- [email protected] (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:

- [email protected] (D:\x6-dag\node_modules\vue\dist\vue.runtime.common.js)
- [email protected] (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的写法，而不是遵循它自身这种数据变化的写法

5 —— 关于html元素如何拥有链接桩的功能请看另一篇博文，待更，因由为现成的链接桩自定义过于麻烦，且那些算法排定位，其实对于html元素固有的元素布局来看并不是很适用，除非是大规模改进用自定义，那无疑回到了原始的画图状态，增加了复杂性，故简单而为是用现有的元素进行划分为链接桩，但是这无疑脱离了x6所管理链接桩的机制，后续会看看要不要对接上这种机制，还是它那个自定义链接桩就是这种玩法，我只不过在绕个圈，但是文档关于这部分很模糊，毕竟脱离了它ponts定义的机制，而是添加了成为链接桩的特征去实现链接状功能的做法

6 —— 关于右键菜单自定义问题，因为菜单这一块，很不好的是这玩意是要引入React组件，其实为何会有问题5和6，明显就是依赖过重，抽象层不应该牵扯太多具体的框架，即使明明知道这玩意靠监听事件就能处理右键菜单的问题，这一块的自定义也是基于html元素来完成，会有新的一篇博文来说明这个，待更

三：吹水：

1 首先这次的排版不是很好，毕竟本意是要循序渐进，和状态机一样，一步步到达终点，总感觉这里的makadown定制化太少了，不能尽情表达一些动态效果

2 然后是x6-vue-shape这个感觉只是意思下而已，没有x6-react-shape和React的配合好，毕竟主打的方向就不是vue的，这从数据的传递到组件可以看出，单单用注入方法是不太好的，毕竟你的data变化还需要监听一层，何不在写template时传参prop，由prop去更新里面的状态或者附加到data，通过父组件通知子组件更新的方式，减少使用者对这一层的处理，然后就是注册vue模板时，那些属性不能像普通那些传参进去，必须要addNode带进去的才符合，这明显与结构和数据分离不相符合，我觉得在addNode时，应该是各自变化的数据，而不是一些基础数据，然后节点命名那一块需要注意，大小驼峰写法都不行，仅首字母大写和全小写，因为时间有限我暂时都用全小写去规避组件名称找不到问题，还有那个ports节点，官网的数据为数组形式，但是因为注册vue模板这个玩意加了ports是没效的，为了省事，只能是addNode时进行改变ports结构进行处理了，当然也可以改节点数据，其实这短短的几个效果就需要这么多的东西支撑，还是不太好玩，后续会自行改写，以便适应生产

3 要是没浏览器的兼容考虑，还是用vue3去搭建，而且用上ts，让继承来处理这种很绕的复用关系，毕竟写出来是给人看的