React+GGEditor搭建可视化图编辑器项目

React

发布日期: 2019-11-11

更新日期: 2021-10-04

文章字数: 294

阅读时长: 1 分

阅读次数:

介绍

GG-editor 插件基于 React 框架，可以创建编辑思维导图、流程图、拓扑图等图形

项目依赖： react-router-dom, gg-editor, antd

安装所需依赖

// 初始化项目
create-react-app ggeditore
// 安装依赖
npm i react-router-dom
npm i gg-editor
npm i antd
// or
yarn add react-router-dom
yarn add gg-editor
yarn add antd

// 安装 gg-editor
// 不要安装 bate 的版本
npm i gg-editor@2.0.4
// or
yarn add gg-editor@2.0.4

使用

// Flow
import GGEditor, { Flow } from 'gg-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,
  }],
};

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

// Mind
import GGEditor, { Mind } from 'gg-editor';
const data = {
  roots: [{
    label: '中心主题',
    children: [{
      label: '分支主题 1',
    }, {
      label: '分支主题 2',
    }, {
      label: '分支主题 3',
    }],
  }],
};
<GGEditor>
  <Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>