ClayTop

A visual graph editor component library based on G6 and Vue.js.
基于G6和Vue的可视化图形编辑组件库。

一、 版本

开发版本
v0.1.0

二、预览

DEMO演示

三、项目依赖

• Vue.js（2.x）
• Element UI（2.x）
• AntV G6（3.x）

四、项目结构

.
├── packages  // 源码
├── examples  // 用例（开发调试用）
├── 其它
|

五、开发方式

1. 调试

npm install
npm run serve

2. 发布

npm run lib
npm pack

六、使用方式

全局注册

在 main.js 中写入以下内容：

• 完整引入：引入整个ClayTop：

import Vue from 'vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'

import App from './App.vue'

Vue.use(ElementUI)

/* 全局注册：引入整个ClayTop */
import ClayTop from '@chaincloud/ClayTop'
Vue.use(ClayTop)

Vue.config.productionTip = false

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

• 按需引入：引入需要的模块，例如Topology：

import Vue from 'vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'

import App from './App.vue'

Vue.use(ElementUI)

/* 全局注册：只加载Topology */
import { Topology } from '@chaincloud/ClayTop'
Vue.use(Topology)

Vue.config.productionTip = false

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

局部注册

在 ComponentA.vue 中进行局部注册：

<script>
import { Topology } from '@chaincloud/ClayTop'

export default {
  name: 'ComponentA',
  components: {
    'topology': Topology
  }
}
</script>

3. 开始使用

属性

TODO...

方法

TODO...

七、备注

• [已解决] 升级 G6 到 3.5.0 后，发现 G6 底层有 bug：调用addItem方法报错：p.getType is not a function。该 bug 导致编辑（连线）功能不可用，需等待下个小版本的修复。—— 2020.06.02
• [已解决] 由于 G6 在 3.3.x 版本作了 breaking change，且遗留了一些 bug。本项目先暂停更新。预计 6 月份或 G6 底层这些重要 bug 修复后，继续跟进。—— 2020.03.01