LogicFlow 来绘制兼容 BPMN2.0 规范的流程 (React hooks版)
Ⅰ- 壹 - 功能展示和使用需求
需求描述
使用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;
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;
}
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;
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;
Ⅲ - 叁 - 使用
import Bpmn from './components/bpmn/index';
const Demo = () => {
return <Bpmn></Bpmn>;
};
export default Demo;