LogicFlow 来绘制兼容 BPMN2.0 规范的流程 (React hooks版)_vmuu78.top

Ⅰ- 壹 - 功能展示和使用需求

需求描述

使用LogicFlow来绘制兼容 BPMN2.0 规范的流程，使用react hooks 根据官方示例改的

下载图片功能只能在谷歌浏览器中使用（官方不支持其他的）

功能展示

目录结构

Ⅱ - 贰 - 封装代码

img文件

index.tsx

import LogicFlow from '@logicflow/core';
import {
  BpmnElement,
  BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect,
} from '@logicflow/extension';
import './index.css';
import '@logicflow/extension/lib/style/index.css';
import '@logicflow/core/dist/style/index.css';
import { useEffect, useRef, useState } from 'react';
import BpmnPattern from './pattern';
import BpmnIo from './io';
const config = {
  stopScrollGraph: true,
  stopZoomGraph: true,
  metaKeyMultipleSelected: true,
  grid: {
    size: 10,
    type: 'dot',
  },
  keyboard: {
    enabled: true,
  },
  snapline: true,
  width: 1500,
  height: 800,
};

const index = () => {
  const refContainer = useRef<any>();
  const [lfData, setLfData] = useState<any>(null);
  useEffect(() => {
    LogicFlow.use(BpmnElement);
    LogicFlow.use(BpmnXmlAdapter);
    LogicFlow.use(Snapshot);
    LogicFlow.use(Control);
    LogicFlow.use(Menu);
    LogicFlow.use(SelectionSelect);
    // use 必须放上面
    const lf = new LogicFlow({
      container: document.querySelector('#graph') as HTMLElement,
      // container: refContainer.current,
      ...config,
    });

    lf.render();
    setLfData(() => lf);
  }, []);
  useEffect(() => {
    if (!lfData) return;
    // setIState(() => true);
  }, [lfData]);

  return (
    <div className="bpmn-example-container">
      <div id="graph" ref={refContainer} className="viewport"></div>
      {lfData && (
        <>
          <BpmnPattern lf={lfData} />
          <BpmnIo lf={lfData} />
        </>
      )}
    </div>
  );
};
export default index;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

index.css

.bpmn-example-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.pattern {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 111;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  padding: 10px 0;
  color: #676768;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: node;
}
.pattern-selection {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=')
    center center no-repeat;
  cursor: pointer;
  opacity: 0.99;
}
.pattern-start {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==')
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-end {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC')
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-user {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==')
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-condition {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=')
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-circle {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,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')
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}

.pattern-rect {
  width: 36px;
  height: 36px;
  background: url('data:image/png;base64,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')
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.graph-io {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 9999;
  display: flex;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.graph-io > span {
  margin: 0 5px;
  cursor: pointer;
}
#upload-xml {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.upload {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  cursor: pointer;
  opacity: 0;
}
.upload::-webkit-file-upload-button {
  cursor: pointer;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

io.tsx

import React from 'react';
import LogicFlow from '@logicflow/core';
import { Input, Image } from 'antd';

const downloadImg = require('./img/download.png');
const photo = require('./img/img.png');
const uploadImg = require('./img/upload.png');

type IProps = {
  lf: LogicFlow;
};

function download(filename: string, text: string) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

type FileEventTarget = EventTarget & { files: FileList };

const BpmnIo: any = (props: IProps) => {
  const { lf } = props;
  const downloadXml = () => {
    const data = lf.getGraphData() as string;
    download('logic-flow.xml', data);
  };
  const uploadXml = (ev: React.ChangeEvent<HTMLInputElement>) => {
    const file = (ev.target as FileEventTarget).files[0];
    const reader = new FileReader();
    reader.onload = (event: ProgressEvent<FileReader>) => {
      if (event.target) {
        const xml = event.target.result as string;
        lf.render(xml);
      }
    };
    reader.readAsText(file); // you could also read images and other binaries
  };

  const downloadImage = async () => {
    const { lf } = props;
    lf.getSnapshot('', '#fff');
    // lf.extension.snapshot.getSnapshot();
  };
  return (
    <div className="graph-io">
      <span title="下载 XML" onMouseDown={() => downloadXml()}>
        <Image preview={false} width={'10'} height={'10'} src={downloadImg} alt="下载XML" />
      </span>
      <span id="download-img" title="下载图片" onMouseDown={() => downloadImage()}>
        <Image preview={false} width={'10'} height={'10'} src={photo} alt="下载图片" />
      </span>
      <span id="upload-xml" title="上传 XML">
        <Input type="file" className="upload" onChange={(ev) => uploadXml(ev)} />
        <Image preview={false} width={'10'} height={'10'} src={uploadImg} alt="上传XML" />
      </span>
    </div>
  );
};

export default BpmnIo;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

pattern.tsx

import React, { useEffect } from 'react';
import LogicFlow from '@logicflow/core';

type IProps = {
  lf: LogicFlow;
};

const BpmnPattern = (props: IProps) => {
  const { lf } = props;
  useEffect(() => {
    lf &&
      lf.on('selection:selected', () => {
        lf.updateEditConfig({
          stopMoveGraph: false,
        });
      });
  }, [lf]);
  const addStartNode = () => {
    lf.dnd.startDrag({
      type: 'bpmn:startEvent',
      text: '开始',
    });
  };
  const addUserTask = () => {
    lf.dnd.startDrag({
      type: 'bpmn:userTask',
    });
  };
  const addServiceTask = () => {
    lf.dnd.startDrag({
      type: 'bpmn:serviceTask',
    });
  };
  const addGateWay = () => {
    lf.dnd.startDrag({
      type: 'bpmn:exclusiveGateway',
    });
  };
  const addEndNode = () => {
    lf.dnd.startDrag({
      type: 'bpmn:endEvent',
      text: '结束',
    });
  };
  const openSelection = () => {
    lf.updateEditConfig({
      stopMoveGraph: true,
    });
  };

  const onMouseDownFun = (type: any) => {
    switch (type) {
      case 'openSelection':
        lf.updateEditConfig({
          stopMoveGraph: true,
        });
        break;
      case 'addStartNode':
        lf.dnd.startDrag({
          type: 'bpmn:startEvent',
          text: '开始',
        });
        break;
      case 'addUserTask':
        lf.dnd.startDrag({
          type: 'bpmn:userTask',
        });
        break;
      case 'addServiceTask':
        lf.dnd.startDrag({
          type: 'bpmn:serviceTask',
        });
        break;
      case 'addGateWay':
        lf.dnd.startDrag({
          type: 'bpmn:exclusiveGateway',
        });
        break;
      case 'addEndNode':
        lf.dnd.startDrag({
          type: 'bpmn:endEvent',
          text: '结束',
        });
        break;
      case 'circle':
        lf.dnd.startDrag({
          type: 'circle',
          text: '圆形',
        });
        break;
      case 'rect':
        lf.dnd.startDrag({
          type: 'rect',
          text: '矩形',
        });
        break;

      default:
        break;
    }
  };

  return (
    <div className="pattern">
      <div className="pattern-selection" onMouseDown={() => onMouseDownFun('openSelection')} />
      <div>选区</div>
      <div className="pattern-start" onMouseDown={() => onMouseDownFun('addStartNode')} />
      <div>开始</div>
      <div className="pattern-user" onMouseDown={() => onMouseDownFun('addUserTask')}></div>
      <div>用户任务</div>
      <div className="pattern-user" onMouseDown={() => onMouseDownFun('addServiceTask')}></div>
      <div>系统任务</div>
      <div className="pattern-circle" onMouseDown={() => onMouseDownFun('circle')}></div>
      <div>圆形</div>
      <div className="pattern-rect" onMouseDown={() => onMouseDownFun('rect')}></div>
      <div>矩形</div>
      <div className="pattern-condition" onMouseDown={() => onMouseDownFun('addGateWay')}></div>
      <div>条件判断</div>
      <div className="pattern-end" onMouseDown={() => onMouseDownFun('addEndNode')}></div>
      <div>结束</div>
    </div>
  );
};

export default BpmnPattern;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

Ⅲ - 叁 - 使用

import Bpmn from './components/bpmn/index';
const Demo = () => {
  return <Bpmn></Bpmn>;
};

export default Demo;
1
2
3
4
5
6