# flow-view
**Repository Path**: dreamof2080/flow-view
## Basic Information
- **Project Name**: flow-view
- **Description**: 流程图展示
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-02-14
- **Last Updated**: 2022-09-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 流程图展示工具库
图形化界面展示流程图引擎的流程图信息
## 使用说明
### npm
```shell
npm install --save-dev @dreamof2080/flow-view
```
### yarn
```shell
yarn add @dreamof2080/flow-view
```
### yarn和npm方式需要配置webpack
引入如下依赖
```shell
yarn add copy-webpack-plugin --dev
// or
npm install --save-dev copy-webpack-plugin
```
在webpack.config.js中配置：
```js
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'node_modules/@dreamof2080/flow-view/dist/mxgraph'),
to: 'mxgraph',
},
]
})
],
}
```
使用
```js
import {initFlowGraph, renderFlowGraph} from '@dreamof2080/flow-view'
function view(data) {
// 流程图xml数据
const xmlData = '';
// 流程图渲染容器
const container = document.createElement('div');
// 流程图缩略图容器
const thumbnail = document.createElement('div');
// 初始化流程图
const graph = initFlowGraph({
container,
// 节点阴影颜色，若取消阴影可设置值为'none'
shadowColor: '#050505',
// 节点间连接线水流效果颜色
flowedEdgeColor: '#525050',
// 节点点击事件
onClick: (id, left, top) => {
nodeInfo.style.display = id ? 'block' : 'none'
nodeInfo.style.left = left + 'px'
nodeInfo.style.top = top + 'px'
},
thumbnail
});
// 渲染流程图
renderFlowGraph({
graph,
data: data2,
currentIds: ['ff80808177389ca401776166e46e013e', 'ff80808177389ca401775caec0b700f3'],
flowedEdgeIds: ['ff80808177389ca401775c97f23a00de', 'ff80808177389ca401776166e4990140', 'ff80808177389ca401775caec0fd00f4'],
})
}
```
详细用列： https://gitee.com/dreamof2080/flow-view-webpack-test
注意：若要显示水流效果，请增加以下样式信息
```css
.edge-flow-style {
stroke-dasharray: 8;
animation: dash 0.5s linear;
animation-iteration-count: infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -16;
}
}
```
### script标签引入的方式使用
```html
流程图展示
```
详细用例：https://gitee.com/dreamof2080/flow-view-script-test
### flowView方法的style参数说明
```markdown
style:
{
defaultVertexStyle: 多边形的默认样式
defaultNodeStyle: 节点的默认样式
defaultEdgeStyle: 连接线的默认样式
activityNodeContainerStyle: 活动节点外层泳道容器的样式
activityNodeContentStyle: 活动节点内层的样式
startNodeContainerStyle: 开始节点泳道容器的样式
startNodeContentStyle: 开始节点内层的样式
endNodeContainerStyle: 结束节点泳道容器的样式
endNodeContentStyle: 结束节点内层的样式
circleStartStyle: 圆形开始节点的样式
circleEndStyle: 圆形结束节点的样式
remarkTextStyle: 备注文字内容的样式
horizontalSwimLaneStyle: 水平泳道的样式
verticalSwimLaneStyle: 垂直泳道的样式
}
```
每个属性又包含如下信息：
```markdown
{
"shape": "swimlane", // 泳图
"perimeter": "rectanglePerimeter", // 矩形边缘样式
"strokeColor": "none", // 边框颜色
"strokeWidth": 0, // 边框宽度
"rounded": 1, // 是否圆角
"fillColor": "#0a383b", // 填充颜色
"fontColor": "#FFFFFF", // 字体颜色
"fontSize": 12, // 字体大小
"fontStyle": 1, // 字体加粗
"align": "center", // 水平对齐
"verticalAlign": "middle", // 垂直对齐
"whiteSpace": "wrap", // 文字换行
"shadow": true, // 是否阴影
"arcSize": 4, // 圆角角度
"startSize": 28, // 泳道标题大小
"swimlaneLine": 0, // 泳道边框线条粗细
}
```
可根据需要对这些属性进行调整