Skip to content

alibaba/GGEditor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

68e4cb6 · Jul 10, 2020
Apr 22, 2020
Jan 9, 2020
Apr 22, 2020
Apr 21, 2020
Apr 22, 2020
Apr 21, 2020
Jul 10, 2020
Jan 9, 2020
Jan 9, 2020
Apr 21, 2020
Jan 9, 2020
Jan 9, 2020
Jan 9, 2020
Apr 22, 2020
Jul 10, 2020
Aug 24, 2018
Apr 22, 2020
Apr 22, 2020
Apr 7, 2020
Jul 10, 2020
Jan 9, 2020
Apr 7, 2020

Repository files navigation

English | 简体中文

GGEditor

基于 G6React 的可视化图编辑器

GitHub npm npm

安装

npm

npm install gg-editor --save

umd

<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>

使用

流程图

Edit GGEditor - Flow

import GGEditor, { Flow } from 'gg-editor';

const data = {
  nodes: [
    {
      id: '0',
      label: 'Node',
      x: 55,
      y: 55,
    },
    {
      id: '1',
      label: 'Node',
      x: 55,
      y: 255,
    },
  ],
  edges: [
    {
      label: 'Label',
      source: '0',
      target: '1',
    },
  ],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

脑图

Edit GGEditor - Mind

import GGEditor, { Mind } from 'gg-editor';

const data = {
  label: 'Central Topic',
  children: [
    {
      label: 'Main Topic 1',
    },
    {
      label: 'Main Topic 2',
    },
    {
      label: 'Main Topic 3',
    },
  ],
};

<GGEditor>
  <Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

示例

# 克隆仓库
$ git clone https://github.com/alibaba/GGEditor.git

# 切换目录
$ cd gg-editor

# 安装依赖
$ npm install

# 运行示例
$ npm start