基于G6-Editor的流程图编辑器

一、介绍

一个基于G6-Editor的流程图编辑器组件

二、依赖

AntV-G6
G6-Editor
antd

三、组件目录结构

  	-  Flow
  	--  images // 组件使用相关图片
  		--  error.svg  //未编辑
  		--  success.svg // 编辑成功
  		--  type.svg // 节点类型
  	--  model // 分离小组件
  		--  ContextMenu.js // 右键菜单
  		--  DetailPannel.js // 详情面板
  		--  ItemPannel.js // 左侧节点列表
  		--  Minimap.js // 导航器
  		--  Page.js // Canvas
  		--  Toolbar.js // 顶部toolbar
  	--  style // 组件样式
  		--  index.css
  	--  Flow.js
  	--  index.js

四、组件使用

import React, { Component } from 'react';
import { Button,Divider,Modal } from 'antd';
import Flow from './components/Flow'; // 编辑器组件

import "./App.css";

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      visible: false,
      currentModel: {},
      relation: {nodes: []}
    }
  };

  onNodeClick = (model,relation) => {
    console.log(model,relation);
    this.setState({ currentModel: model,relation })
  }

  onNodeDbClick = (model) => {
    console.log(model);
    this.openEditNodeModal()
  }

  onPublish = (relation) => {
    console.log("保存",relation);
  }

  editNode = () => {
    console.log("编辑节点");
    this.openEditNodeModal()

    // 打开编辑模态框
    // 通过表单提交修改的节点信息
    // 并修改relation
    // 通过 this.flow.renderData(relation)
    // 重新渲染流程图数据
  }

  closeEditNodeModal = () => {
    this.setState({
      visible:false
    })
  };

  openEditNodeModal = () => {
    this.setState({
      visible: true
    })
  }

  render (){
    const { currentModel,visible } = this.state;

    return <div className="App">
        <Flow 
          className="process-flow"
          ref={(node) => this.flow = node}
          onNodeDbClick={this.onNodeDbClick}
          onNodeClick={this.onNodeClick}
          onPublish={this.onPublish}
          nodeDetailPannel={<>
              流程节点名称: {currentModel.flowNodeName}
              <Divider />
              流程角色名称: {currentModel.flowNodeRole}
              <Divider />
              <Button type="primary" onClick={this.editNode}>编辑节点</Button>
          </>}
          >
        </Flow>
        <Modal title="编辑节点" 
          forceRender={true}
          style={{top: 20}}
          width={ 1000 }
          visible={visible} 
          onCancel={this.closeEditNodeModal}
          footer={null}>
          编辑节点表单
        </Modal>
    </div>
  };
}

export default App;

五、展示