wan-flow

wan-flow Components build with react

Installation

With npm:

If React is not installed

npm install react react-dom --save 
npm install wan-flow --save 

With React Installed

npm install wan-flow --save

To use the development version (API might changes on realese version)

npm install react-weui@alpha --save

Example

We will have several examples on the documentation. Here is the first one to get you started now:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Flow, ToolBar, FitView } from 'wan-flow';
class App extends Component {
    constructor() {
        super()
        this.state = {
            initConfig: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight,
                data: {
                    source: {
                        nodes: [],
                        edges: []
                    }
                },
                mode: "add",
                grid: true
            },
            toolBar: {
                config: {
                    "back": true,
                    "redo": true,
                    "square-oeps": true,
                    "circle-oeps": true,
                    "square-ling": true,
                    "word-oepsfuben": true,
                    "picture": true,
                    "zhixian": true,
                    "quxian": true,
                    "jiantouzhixian": true,
                    "jiantouquxian": true,
                    "file": true,
                    "chose": true,
                    "move": true,
                    "zhongzhi": false,
                    "arrowsalt": true,
                    "delete": true
                },
                styles: {
                    left: "200px",
                    top: "65px",
                }


            },
            fitView: {
                config: {
                    autoSize: true,
                    autoZoom: true,
                    tl: true,
                    lc: true,
                    bl: true,
                    cc: true,
                    tc: true,
                    tr: true,
                    rc: true,
                    br: true,
                    bc: false
                },
                styles: {
                    left: "200px",
                    top: "20px"
                }

            },

        }
        this.saveData = this.saveData.bind(this);
    }
    saveData(newData) {
        this.state.initConfig.data = newData;
        this.setState(this.state);
    }
    componentDidMount() {

    }

    render() {
        return (
            <div>
                <Flow
                    data={this.state.initConfig.data}
                    width={this.state.initConfig.width}
                    height={this.state.initConfig.height}
                    mode={this.state.initConfig.mode}
                    grid={this.state.initConfig.grid}
                    onSave={this.saveData}
                >
                    <ToolBar data={this.state.toolBar.config} styles={this.state.toolBar.styles} onSave={this.saveData}></ToolBar>
                    <FitView data={this.state.fitView.config} styles={this.state.fitView.styles}></FitView>
                </Flow>
            </div>
        );
    }
}

App.propTypes = {

};

export default App;

Contributing

We hope you like it.

1.0.4