# seven-flow

**Repository Path**: lujiayi/seven-flow

## Basic Information

- **Project Name**: seven-flow
- **Description**: seven-flow 是一个轻量级的流程设计器
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 3
- **Created**: 2019-03-26
- **Last Updated**: 2024-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# seven-flow


seven-flow 是一个轻量级的 javascript 流程设计器，可用于OA工作流程图设计等

### 示例

> **基本**

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190604164919823.gif)

> **编辑节点**

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019060416494491.gif)

> **编辑线段**

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190604165029257.gif)

### 安装使用
下载 [Seven-Flow](https://gitee.com/lujiayi/Seven-Flow/releases)

引入seven-flow
```
<link rel="stylesheet" href="seven-flow.css">
<script src="seven-flow.js"></script>
```
容器
```
<div id="seven_flow"></div>
```
配置并初始化
```
var options = {
    page: {
        width: 1000,    // 画布宽度
        height: 600     // 画布高度    
    },
    node: {     // 节点配置
       	//  width: 120,     默认120
        //  height: 60,     默认60
        onConnect: (node) => {},    // 点击连接触发
        onSetting: (node) => {},    // 点击设置触发
        onClose: (node) => {}       // 点击删除触发
    },
    path: {     // 线段配置
        // stroke: '#888',     线段颜色
        onSetting: (path) => {}     // 点击设置触发
    },
    tools: {    // 工具栏配置
        saveFn: (e) => {},          // 点击确定触发
    },
    imgPath: './assets/images/'     // 图片资源路径
    editable: true		 // 是否可编辑
}

window.onload = () => sf.init('seven_flow', options);
```
数据回显
```
var data = {
    nodes: [...,
        {
            "id":"d152a250-869a-11e9-a15a-57fd9076db4e",
            "name":"节点",
            "type":"node",
            "attr":{...},
            "x":394,
            "y":49,
            "width":120,
            "height":60
        }
    ],
    path: [...,
        {
            "id":"fad046f0-869a-11e9-a15a-57fd9076db4e",
            "name":"开始-节点",
            "type":"path",
            "from":"d1134f60-869a-11e9-a15a-57fd9076db4e",
            "to":"d152a250-869a-11e9-a15a-57fd9076db4e",
            "reverse":"0",
            "lineType":"solid"
        }
    ]
}
sf.recover(data);
```