react引入ggEditor流程圖

遇到的問題

1.propsAPI獲取不到內容：withPropsAPI包裹的組件必須是GGEditor的子組件。

2.自定義組件如何使用：正確的辦法是通過config配置，參照上面的代碼（之前我在在內部RegisterCommand以后，在onAfterExecuteCommand中截獲命令，通過函數控制圖例操作。這中間需要下鑽到內部組件調用propsAPI，我就通過setState去設置狀態傳遞到子組件。）

3.如何設置拖拽組件：太羞恥了，居然不曉得在Item雙標簽內放名稱。

4.操作流程圖后獲取數據延遲：如果獲取數據有延遲，嘗試使用setTimeout，時間間隔設為0后再調propsAPI屬性的方法操作。

 

1. 兩種不同顏色的線

用onAfterChange監聽，然后用先的更新設置不同的顏色即可。

2. 節點和線的更新

import React, { Fragment } from 'react';
import { Card, Form, Input, Select } from 'antd';
import { withPropsAPI } from 'gg-editor';
import upperFirst from 'lodash/upperFirst';

const { Item } = Form;
const { Option } = Select;

const inlineFormItemLayout = {
  labelCol: {
    sm: { span: 8 },
  },
  wrapperCol: {
    sm: { span: 16 },
  },
};

class DetailForm extends React.Component {
  get item() {
    const { propsAPI } = this.props;

    return propsAPI.getSelected()[0];
  }

  handleSubmit = (e) => {
    if (e && e.preventDefault) {
      e.preventDefault();
    }

    const { form, propsAPI } = this.props;
    const { getSelected, executeCommand, update } = propsAPI;

    setTimeout(() => {
      form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return;
        }

        const item = getSelected()[0];

        if (!item) {
          return;
        }
        console.log(item,values,'values')
        executeCommand(() => {
          update(item, {
            ...values,
          });
        });
      });
    }, 0);
  };

  renderEdgeShapeSelect = () => {
    return (
      <Select onChange={this.handleSubmit}>
        <Option value="flow-smooth">Smooth</Option>
        <Option value="flow-polyline">Polyline</Option>
        <Option value="flow-polyline-round">Polyline Round</Option>
      </Select>
    );
  };

  renderNodeDetail = () => {
    const { form } = this.props;
    const { label } = this.item.getModel();
    return (
      <Item label="Label" {...inlineFormItemLayout}>
        {form.getFieldDecorator('label', {
          initialValue: label.text ? label.text : label,
        })(<Input onBlur={this.handleSubmit} />)}
      </Item>
    );
  };

  renderEdgeDetail = () => {
    const { form } = this.props;
    const { label = '', shape = 'flow-smooth' } = this.item.getModel();

    return (
      <Fragment>
        <Item label="Label" {...inlineFormItemLayout}>
          {form.getFieldDecorator('label', {
            initialValue: label,
          })(<Input onBlur={this.handleSubmit} />)}
        </Item>
        <Item label="Shape" {...inlineFormItemLayout}>
          {form.getFieldDecorator('shape', {
            initialValue: shape,
          })(this.renderEdgeShapeSelect())}
        </Item>
      </Fragment>
    );
  };

  renderGroupDetail = () => {
    const { form } = this.props;
    const { label = '新建分組' } = this.item.getModel();

    return (
      <Item label="Label" {...inlineFormItemLayout}>
        {form.getFieldDecorator('label', {
          initialValue: label,
        })(<Input onBlur={this.handleSubmit} />)}
      </Item>
    );
  };

  render() {
    const { type } = this.props;

    if (!this.item) {
      return null;
    }

    return (
      <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
        <Form onSubmit={this.handleSubmit}>
          {type === 'node' && this.renderNodeDetail()}
          {type === 'edge' && this.renderEdgeDetail()}
          {type === 'group' && this.renderGroupDetail()}
        </Form>
      </Card>
    );
  }
}

export default Form.create()(withPropsAPI(DetailForm));

 

3. 提交數據

4. 自定義節點，注冊節點

EditorCustomFlowMap組件

import React from 'react';
import { Col } from 'antd';
import { Flow } from 'gg-editor';
import { withPropsAPI } from 'gg-editor';
import CustomNode from '../EditorCustomNode';

const FlowMap = (props) => {return (
        <Col span={21} className='editorContent'>
              <Flow 
                className='flow' 
                data={props.data} // 已有節點那數據結構
                noEndEdge={false}/>
              <CustomNode />
        </Col>
      );
};

export default withPropsAPI(FlowMap);

CustomNode 組件，注冊節點

import React from "react";
import { RegisterNode } from "gg-editor";

class CustomNode extends React.Component {
  render() {
    const config = {
      draw(item) {
        const keyShape = this.drawKeyShape(item);

        // 繪制圖標
        const group = item.getGraphicGroup();
        const model = item.getModel();

        group.addShape("image", {
          attrs: {
            x: -35,
            y: -10,
            width: 20,
            height: 20,
            img: model.icon
          }
        });

        // 繪制標簽
        this.drawLabel(item);

        return keyShape;
      },

      anchor: [
        [0.5, 0], // 上邊中點
        [1, 0.5], // 右邊中點
        [0.5, 1], // 底邊中點
        [0, 0.5] // 左邊中點
      ]
    };

    return (
      <RegisterNode name="custom-node" config={config} extend={"flow-circle"} />
    );
  }
}

export default CustomNode;

 

5.已有節點的數據結構

{
    "nodes": [
    {
      "id": "1",
      "flowType":"flow-circle", // 節點使用的形狀
      "label":"開始",
      "x": 100, // 節點X軸坐標位置
      "y": 50，// 節點Y軸坐標位置
      "color":"blue", // 節點的顏色
      "size ": "80*48", // 節點的寬度和高度
      "shape ": "flow-rect"
    }
  ],
  "edges": [
    {
      "source":"1",
      "sourceAnchor": 1, 
      "target":"2",
      "targetAnchor": 3,
      "id": "d1",
　　　 "color":"red" // 連線的顏色
    }
  ]
}

6.左側待拖動的節點

這里的節點和flow圖里面的節點樣式控制不一樣，這里的節點樣式是靠css來控制。

flow圖里面的節點樣式，1，已有節點，靠的是已有節點的數據來控制，2，即將拖拽到flow區域的節點，是靠這里的Item屬性來控制樣式。

import React from 'react';
import { Card } from 'antd';
import { ItemPanel, Item } from 'gg-editor';
import './index.less'; 6 
const FlowItemPanel = () => {
  return (
    <ItemPanel className='itemPanel'>
      <Card bordered={false}>        
        <Item
          type="node"
          size="72*72"15           shape="custom-node" // 自定義注冊節點名稱
          model={{
            icon:'//img.alicdn.com/tfs/TB1OzAmyyLaK1RjSZFxXXamPFXa-200-200.svg',
            color: '#FA8C16',
            label:{
              text:'流程',
              fill: 'green'
            },
          }}
        >
          <div className="flow-node">流程</div>
        </Item>
        
        <Item
          type="node"
          size="80*48"31           shape="flow-rect"
          model={{
            color: '#1890FF',
            label:{
              text:'文檔',
              fill: '#000'
            },
          }}
        >
          <div className="document-node">文檔</div>
        </Item>
      </Card>
    </ItemPanel>
  );
};

export default FlowItemPanel;

.flow-node{
  border: 1px solid #fed49a;
  background-color: #fef6e7;
  border-radius: 50%;
  padding: 20px;
  color: green;
  -webkit-user-select: none; 
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.document-node{
  border-radius: 10%;
  border: 1px solid #a7dafe;
  background-color: #e7f6fe;
  padding: 15px 20px;
  -webkit-user-select: none; 
  -ms-user-select: none; /* Internet Explorer/Edge */
}

7.操作欄的設置

import React from 'react';
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import './index.less';

const FlowToolbar = () => {
  return (
    <Toolbar className='toolbar'>
      <ToolbarButton command="undo" text="回退一步" />
      <ToolbarButton command="redo" text="前進一步" />
      <Divider type="vertical" />
      <ToolbarButton command="copy" text="復制" />
      <ToolbarButton command="paste" text="粘貼" />
      <ToolbarButton command="delete" text="刪除" />
      <Divider type="vertical" />
      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
      <Divider type="vertical" />
      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
      <Divider type="vertical" />
      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
    </Toolbar>
  );
};

export default FlowToolbar;

 

8. 總

import React from 'react';
import { Row, Col } from 'antd';
import GGEditor from 'gg-editor';
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 './index.less';
import EditorCustomDetailPanel from '../components/EditorCustomDetailPanel';
import EditorCustomFlowMap from '../components/EditorCustomFlowMap';
const flowData = {nodes:[],edges:[]};

const FlowPage = (props) => {return (
        <GGEditor  className='editor' style={{height:props.height}}>
          <Row type="flex" className='editorHd'>
            <Col span={24}>
              <FlowToolbar />
            </Col>
          </Row>
          <Row type="flex" className='editorBd'>
            <Col span={3} className='editorSidebar'>
              <FlowItemPanel />
            </Col>
            <EditorCustomFlowMap 
              data={flowData} 
              onNodeClick={props.handleNodeClick}
              onNodeDragEnd    ={props.handleNodeDragEnd}
              handleAfterChange={props.handleAfterChange}
            />
            <Col span={4} className='editorSidebar'>
              <FlowDetailPanel />
              <EditorMinimap />
            </Col></Row>
          <FlowContextMenu />
          <EditorCustomDetailPanel
            visibleDetailPanel={props.visibleDetailPanel}
            hideVisibleDetailPanel={props.hideVisibleDetailPanel}
            detailPanel={props.detailPanel}
            currentNode={props.currentNode}
            changeDetailPanel={props.changeDetailPanel}
            submitCurrentNode={props.submitCurrentNode}
          /> 
        </GGEditor>
      );
};

export default FlowPage;