# VGEditor
A visual graph editor based on G6 and Vue, inspired by [GGEditor](https://github.com/alibaba/GGEditor)
### Online demo
1. [flow](https://chrisshen93.github.io/VGEditor/demo/build/#/flow)
2. [koni](https://chrisshen93.github.io/VGEditor/demo/build/#/koni)
3. [mind](https://chrisshen93.github.io/VGEditor/demo/build/#/mind)
## Installation
### yarn and npm
```shell
yarn add vg-editor@2.7.2
# or
npm install vg-editor@2.7.2 -S
```
> If you're using vue-cli v4, you must use vg-editor@2.7.1 or later
### Run demo
```shell
git clone https://github.com/ChrisShen93/VGEditor.git
cd VGEditor
yarn
yarn dev
```
## Usage
### Flow
```html
<template>
<v-g-editor>
<flow :data="data"/>
</v-g-editor>
</template>
<script>
import VGEditor, { Flow } from 'vg-editor'
const data = {
nodes: [{
type: 'node',
size: '70*70',
shape: 'flow-circle',
color: '#FA8C16',
label: '起止节点',
x: 55,
y: 55,
id: 'ea1184e8',
index: 0,
}, {
type: 'node',
size: '70*70',
shape: 'flow-circle',
color: '#FA8C16',
label: '结束节点',
x: 55,
y: 255,
id: '481fbb1a',
index: 2,
}],
edges: [{
source: 'ea1184e8',
sourceAnchor: 2,
target: '481fbb1a',
targetAnchor: 0,
id: '7989ac70',
index: 1,
}],
};
export default {
data () {
return { data }
},
components: { VGEditor, Flow }
}
</script>
```
### Mind
```html
<template>
<v-g-editor>
<mind :data="data">
</v-g-editor>
</template>
<script>
import VGEditor, { Mind } from 'vg-editor'
const data = {
roots: [{
label: '中心主题',
children: [{
label: '分支主题 1',
}, {
label: '分支主题 2',
}, {
label: '分支主题 3',
}],
}],
};
export default {
data () {
return { data }
},
components: { VGEditor, Mind }
}
</script>
```
### Documentation
[API](https://chrisshen93.github.io/VGEditor/docs/)
vg-editor-基于G6和Vue的可视化图形编辑器，灵感来自GGEditor-Vue.js开发 （200个子文件） 
.eslintignore 12B .gitignore 29B
index.html 714B template.html 541B 0.4a1ffaccc3b94a099e60.js 561KB bundle.js 482KB shared.js 117KB 1.4a1ffaccc3b94a099e60.js 31KB iconfont.js 17KB index.js 4KB constants.js 4KB index.js 3KB mind-data.js 3KB index.js 3KB index.js 3KB index.js 3KB constants.js 2KB index.js 2KB 4.4a1ffaccc3b94a099e60.js 2KB constants.js 2KB demo.4a1ffaccc3b94a099e60.js 2KB index.js 2KB index.js 2KB 6.4a1ffaccc3b94a099e60.js 2KB index.js 2KB Item.js 2KB data.js 2KB index.js 2KB 5.4a1ffaccc3b94a099e60.js 1KB index.js 1KB index.js 1KB Item.js 1KB index.js 1KB index.js 1KB ContextMenu.js 1KB index.js 1KB index.js 1KB BaseRegister.js 1KB index.js 1KB index.js 1KB index.js 1KB DetailPanel.js 1KB index.js 1KB index.js 1KB PropsAPI.js 1KB index.js 1KB ContextMenu.js 1KB DetailPanel.js 1KB index.js 1KB Item.js 1020B BaseRegister.js 1004B index.js 967B index.js 967B index.js 958B index.js 930B ContextMenu.js 927B PropsAPI.js 888B index.js 824B index.js 824B DetailPanel.js 820B BaseRegister.js 814B webpack.config.demo.dev.js 800B index.js 795B webpack.config.prod.js 759B Editor.js 733B babel.config.js 687B webpack.config.demo.prod.js 663B index.js 643B server.js 621B webpack.config.demo.base.js 600B BasePanel.js 526B BaseMenu.js 506B index.js 502B webpack.config.base.js 490B RegisterBehaviour.js 464B RegisterCommand.js 460B webpack.config.dev.js 457B RegisterGuide.js 456B RegisterGroup.js 456B RegisterNode.js 454B RegisterEdge.js 454B Editor.js 453B PropsAPI.js 446B app.js 435B CanvasPanel.js 424B GroupPanel.js 422B MultiPanel.js 422B EdgePanel.js 420B NodePanel.js 420B CanvasMenu.js 420B MultiMenu.js 418B GroupMenu.js 418B NodeMenu.js 416B EdgeMenu.js 416B bundle.js 395B BasePanel.js 392B index.js 389B index.js 382B BaseMenu.js 372B index.js 368B共 200 条
- 1
- 2
评论0