@dreamof2080/flow-view NPM

流程图展示工具库

图形化界面展示流程图引擎的流程图信息

使用说明

npm

npm install --save-dev @dreamof2080/flow-view

yarn

yarn add @dreamof2080/flow-view

yarn和npm方式需要配置webpack

引入如下依赖

yarn add copy-webpack-plugin --dev
// or
npm install --save-dev copy-webpack-plugin

在webpack.config.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',
        },
      ]
    })
  ],
}

使用

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,
    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

注意：若要显示水流效果，请增加以下样式信息

.edge-flow-style {
stroke-dasharray: 8;
animation: dash 0.5s linear;
animation-iteration-count: infinite;
}

@keyframes dash {
to {
stroke-dashoffset: -16;
}
}

script标签引入的方式使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程图展示</title>
    <script src="https://unpkg.com/@dreamof2080/flow-view"></script>
    <style>
        #container {
            width: 100%;
            height: 90vh;
            background-color: #000000cf;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script>
      const data = ''; // 流程图xml数据
      // 初始化流程图
      const graph = flowView.initFlowGraph({
          container: document.getElementById('container'),
          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
      });
      // 渲染流程图
      flowView.renderFlowGraph({
          graph,
          data,,
          currentIds: ['ff80808177389ca401776166e46e013e', 'ff80808177389ca401775caec0b700f3'],
          flowedEdgeIds: ['ff80808177389ca401775c97f23a00de', 'ff80808177389ca401776166e4990140', 'ff80808177389ca401775caec0fd00f4'],
      })
    </script>
</body>
</html>

详细用例：https://gitee.com/dreamof2080/flow-view-script-test

flowView方法的style参数说明

style:
    {
        defaultVertexStyle: 多边形的默认样式
        defaultNodeStyle: 节点的默认样式
        defaultEdgeStyle: 连接线的默认样式
        activityNodeContainerStyle: 活动节点外层泳道容器的样式
        activityNodeContentStyle: 活动节点内层的样式
        startNodeContainerStyle: 开始节点泳道容器的样式
        startNodeContentStyle: 开始节点内层的样式
        endNodeContainerStyle: 结束节点泳道容器的样式
        endNodeContentStyle: 结束节点内层的样式
        circleStartStyle: 圆形开始节点的样式
        circleEndStyle: 圆形结束节点的样式
        remarkTextStyle: 备注文字内容的样式
        horizontalSwimLaneStyle: 水平泳道的样式
        verticalSwimLaneStyle: 垂直泳道的样式
    }

每个属性又包含如下信息：

{
  "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, // 泳道边框线条粗细
}

可根据需要对这些属性进行调整

@dreamof2080/flow-style mxgraph

@infinitebrahmanuniverse/nolb-_dre @everything-registry/sub-chunk-256

3 years ago

3 years ago

3 years ago

3 years ago