gg-editor flow流程图使用

2020-01-11 更新

想了想，还是提取下，百度云（）：
https://pan.baidu.com/s/12IFy8yOpINYLb8XlQKUq5A 提取码: 3ih5

---

记得安装：

npm install gg-editor

如果你使用的是antd design pro

这里是示范的是Flow，其他也差不多的。

升级umi后，我们会发现启动完项目后，右下方多了个饭团标志。
点击它，再点击资产，模块，在下方找到图形编辑 - 流程编辑器，添加到项目即可

如果不是

进入https://github.com/alibaba/GGEditor
把引入的组件全download下来（包括引入的引入。

import EditorMinimap from '../components/EditorMinimap';
import { FlowContextMenu } from '../components/EditorContextMenu';
import { FlowToolbar } from '../components/EditorToolbar';
import { FlowItemPanel } from '../components/EditorItemPanel';
import { FlowDetailPanel } from '../components/EditorDetailPanel';
import styles from './index.less';

嫌麻烦可以建一个新的pro项目，然后自己平移

API使用

把 <Flow className={styles.flow} /> 抽成组件，用withPropsAPI裹住Flow即可使用api

如下：

import React from 'react';
import { message } from 'antd'
import { Flow, withPropsAPI } from 'gg-editor';
import { ref } from 'react.eval'
import styles from './index.less';

class FlowBody extends React.Component {

  constructor(props: any) {
    super(props);
    ref(this);
  }

  save =()=>{
    const { propsAPI } = this.props;
	// 打印数据的JSON
    message.info(JSON.stringify(propsAPI.save()));
  };

  render(): React.ReactNode {
    const { data } = this.props;
    return <Flow className={styles.flow} data={data} />
  }
}

export default withPropsAPI(FlowBody);

在外层替换掉Flow即可，这里的 ref 可以参考我另外一篇文章 React父子同级传值react.eval，是用来同级通讯的。

FlowItemPanel（操作面板） 里添加个save的图标调用FlowBody的save方法即可保存。

官方Demo地址：http://ggeditor.com/demo/#/flow

我写的Demo地址：https://www.veigar.top/editorflow

我的Demo地址是用netify布的，国内访问可能慢