Workflow Designer 2

Online Demo

https://guozhaolong.github.io/wfd2/

Usage

import React, { Component } from 'react';
import Designer from 'wfd2';

const data = {
      nodes: [{ id: 'startNode1', x: 50, y: 200, label: '开始', type: 'start-node', },
        { id: 'inputNode1', x: 400, y: 320, label: '选择操作', type: 'input-node', },
        { id: 'taskNode1', x: 200, y: 200, label: '主任审批', type: 'task-node',  },
        { id: 'conditionNode1', x: 400, y: 200, label: '经理审批', type: 'condition-node',  },
        { id: 'interactionNode1', x: 600, y: 320, label: '金额大于1000', type: 'interaction-node',  },
        { id: 'waitNode1', x: 400, y: 450, label: '董事长审批', type: 'wait-node', },
        { id: 'subprocessNode1', x: 600, y: 200, label: '等待结束', type: 'subprocess-node', },
        { id: 'stopNode1', x: 800, y: 320, label: '结束', type: 'stop-node', }],
      edges: [{ id:'edge1', source: 'startNode1', target: 'taskNode1',sourceAnchor:0, targetAnchor:1,isPositive: true },
        { id:'edge2', source: 'inputNode1', target: 'interactionNode1',sourceAnchor:0, targetAnchor:1, isPositive: true },
        { id:'edge4', source: 'taskNode1', target: 'conditionNode1',sourceAnchor:0, targetAnchor:1, isPositive: true },
        { id:'edge5', source: 'conditionNode1', target: 'subprocessNode1',sourceAnchor:0, targetAnchor:1, isPositive: true },
        { id:'edge3', source: 'conditionNode1', target: 'inputNode1',sourceAnchor:0, targetAnchor:1,isPositive: false },
        { id:'edge7', source: 'inputNode1', target: 'waitNode1',sourceAnchor:0, targetAnchor:1, isPositive: true },
        { id:'edge8', source: 'interactionNode1', target: 'stopNode1',sourceAnchor:0, targetAnchor:1, isPositive: true },
        { id:'edge9', source: 'waitNode1', target: 'stopNode1',sourceAnchor:0, targetAnchor:1, isPositive: true },
        { id:'edge10', source: 'subprocessNode1', target: 'stopNode1',sourceAnchor:0, targetAnchor:1, isPositive: true }]
    };

class WFDemo extends Component {
    constructor(props) {
        super(props);
        this.wfDef = React.createRef();
    }
    
    handleSave = () => {
        const bpm = this.wfDef.current.graph.save();
    }
      
    render(){
        return (
            <>
                <a onClick={this.handleSave}>Save</a>
                <Designer data={data} ref={this.wfDef} height={600} mode={"edit"} lang="zh" />
            </>
        )
    }
}

API

Designer

属性

• data: 初始化数据
• height: 画布高度
• mode: view为只读，edit为可编辑
• lang: zh为中文，en为英文
• isView: 是否为预览模式（隐藏工具栏和属性栏）

Run Example

npm run dev

React Version

>= 16.x