chrisshen93/vgeditor

A visual graph editor based on G6 and Vue, inspired by GGEditor.

VGEditor

A visual graph editor based on G6 and Vue, inspired by GGEditor

Online demo

1. flow
2. koni
3. mind

Installation

yarn and npm

yarn add [email protected]
# or
npm install [email protected] -S

If you're using vue-cli v4, you must use [email protected] or later

Run demo

git clone https://github.com/ChrisShen93/VGEditor.git
cd VGEditor
yarn
yarn dev

Usage

Flow

<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

<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

vgeditor's Issues

怎么修改文字大小？？？怎么试都不行

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

How to use RegisterCommand?

I'm trying to add a new command.
I try
RegisterCommand(name="newcmd" :config="{}" :behaviour="() => console.log('CLICK!')" extend="")
but it's not working, function is not invoked and 'CLICK' is not showed in the browser console.
The documentation does not describe how to add a new command, which fields the config object should contain and demo don't use RegisterCommand.
Can you provide a working example, please?

mind节点自定义设置完之后如何设置第一层子节点和第二层子节点为我自定义的shape呢

比如GGeditor的作者在https://codesandbox.io/s/3kpn6p09xm这个示例中演示的一样，RegisterNode一个节点后可以像这样直接设置第一层子节点的shape

      <Mind className="mind" 
                  data={data} 
                  firstSubShape="custom-node" 
                  secondSubShape="custom-node"
      />
```.

是否可以更新一下g6的版本

目前g6的版本存在一个bughttps://github.com/antvis/G6/issues/726

脑图主题垂直间距设置

请问如何能修改mind图中同级主题之间垂直距离。

大佬你的API怎么打不开了

api访问不了啊

koni 连线报错,导致整个拓扑图无法连线

Describe the bug
如标题所示

且该报错会导致所有元素都无法连线

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

Additional context
能劳请解释一下报错原因,或者能提供一下解决的方案吗, 万分感谢！

可以实现 在线上显示文字和图标吗

现有的版本能实现 在线上显示文字和图标吗 @ChrisShen93

需求收集

Vue 3 大概在2020的第一个季度会正式发布，因此近期打算开始着手编写 VGEditor 的下一个版本。

目前的计划是：

1. 包含现有的所有功能（尽量兼容现有的使用方式）
2. 拆分core和components，以方便不使用Vue技术栈的同学使用
3. typescript 友好

G6 配置 modes 无法生效

Vue: 最新版
Chrome：83

  <v-g-editor>
          <Mind
            :graph="articleMindMapConfig"
            :onNodeClick="handleNodeClick"
            :data="articleMindMapData"
            :shortcut="{ zoomIn: true, zoomOut: true, drag:true }"
          />
        </v-g-editor>

articleMindMapConfig = {
        container: '',
        width: 600,
        height: 500,
        modes: {
          default: ['drag-canvas', 'zoom-canvas']
        },
      },

Mind 绑定点击事件报错

      <mind :data="mockData" :onNodeClick="handleNodeClick" :graph="{ mode: 'readOnly' }"
       />

这个语句报错了，在flow中是不会报错的。
index.js?4579:32 Uncaught (in promise) TypeError: target.on is not a function
at VueComponent.addListener (index.js?4579:32)
at eval (index.js?14e4:43)
at Array.forEach ()
at VueComponent.bindEvent (index.js?14e4:39)
希望大佬能坚持下去，这个玩意很重要非常感谢哈哈哈，感觉你可以开个群

How to load remote data?

Please advise how do I receive and render remote data?

G6 docs has example, but I don't know for sure how to correlate it with you editor? - https://g6.antv.vision/en/docs/manual/tutorial/example

That what I have, it loads data, but doesn't render.

<flow :data="mockData" :graph="customGraphConfig" :onNodeDoubleClick="showModalLocation" :onAfterChange="saveDataFromChart" />

data () { return { mockData: this.fetchData(), customGraphConfig: { layout: { type: 'radial', unitRadius: 50, center: [500, 300], }, grid: { number: 33, } } }

async fetchData () { const response = await fetch("https://api.npoint.io/2f71ed8920af3f07cd05"); const data = await response.json(); let mData = data; console.log(mData) return mData } },

思维导图可以导出成png吗

可不可以像GG-editor一样在codesandbox提供一些示例

可不可以像GG-editor一样在codesandbox提供一些示例，比如我已经在mind中自定义了节点但是我该怎么去让data按这个节点的样式去渲染，我自定义了command，但是应该怎么在MindContexMenu中调用，大概的已经了解了，只是有些细节不知道怎么引入，感谢大佬

希望能一直支撑下去，这个东西真的很需要，谢谢

希望能一直支撑下去，这个东西真的很需要，谢谢

如何自定义一些交互呢？

你好，请问有没有示例代码看看，mind如何自定义右键添加节点，我想自定义为从后端拿值，然后把数据的text赋予到要增加的节点的label上，并且节点有颜色。 并不太清楚如何利用G6上的API跟你这个编辑器结合起来

请问怎么预览（不可修改）呢？

请问怎么预览（不可修改）呢？

要怎么保存json呢？

要怎么保存json呢？

How to change shapes in canvas

I want to change all shapes on the canvas and want to add my custom element. also, I want to show sidebar form when an element is placed on the canvas.

Also if the parent element is connected to the child node then the child element will not be connected to the parent element, how can I set this type of condition on this editor.

Also, need one more thing, right now there are only 4 connections, I want to add more than 10 connection in a single element. how can I set multiple connections?

无法获取 graph 实例,下载拓扑图

Describe the bug
无法获取graph实例对象, 目前的实际需求是 想要获取下载拓扑图
能否使用 downloadImage() 、toDataURL()呢

求大佬指教 @ChrisShen93

请问PropsAPI这部分是文档还没有完成还是这部分没有实现呢

请问PropsAPI这部分是文档还没有完成还是这部分没有实现呢

文档中 Mind 里面的命令 “collaspeExpand” 拼写错误,实际是 “collapseExpand”

Describe the bug
文档中 Mind 里面的命令 “collaspeExpand” 拼写错误,实际是 “collapseExpand”

/docs/api/command.md