LogicFlow工作流在React和Vue3中的使用

duansamve 2024-09-19
58 阅读 0 评论 0 点赞
LogicFlow工作流在React和Vue3中的使用

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。

核心能力

  • 可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
  • 高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
  • 灵活易拓展: 内置提供丰富的插件，用户也可根据自身需求定制复杂插件实现业务需求。
  • 自执行引擎: 执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。
  • 数据可转换：支持 LogicFlow 数据与 BPMN、Turbo 等各种后端执行引擎数据结构转换能力。

添加 logic-flow 基础代码

$ npm install @logicflow/core --save

在 App.vue 文件中, 添加 logic-flow 核心代码;

  1. <script setup lang="ts">
  2. import { onMounted, ref } from "vue";
  3. import LogicFlow from "@logicflow/core";
  4. import "@logicflow/core/es/index.css";
  5.  
  6. const container = ref();
  7.  
  8. onMounted(() => {
  9.   const lf = new LogicFlow({
  10.     container: container.value,
  11.     grid: true,
  12.   });
  13.   lf.render();
  14. });
  15. </script>
  16.  
  17. <template>
  18.   <div class="container" ref="container"></div>
  19. </template>
  20.  
  21. <style scoped>
  22. .container {
  23.   width: 100%;
  24.   height: 100%;
  25. }
  26. </style>

使用内置拖拽面板

安装 @logicflow/extension 扩展依赖, 先看一下内置拖拽面板如何使用;

npm install @logicflow/extension --save

再次修改 App.vue 文件内容, 导入 DndPanel 对象及扩展所需要的样式模块;

  1. import { DndPanel } from "@logicflow/extension";
  2. import "@logicflow/extension/lib/style/index.css";

 在实例化 LogicFlow 对象时, 通过选项 plugins 配置 DndPanel 对象;

  1. const lf = new LogicFlow({
  2.    ...
  3.    plugins: [DndPanel],
  4. });

在实例化 LogicFlow 对象后, 通过实例对象 lf.extension.dndPanel 中的 setPatternItems 方法设置拖拽面板的内容：

  1. // icons 是一组图标对象(Base64字符串)
  2. import { icons } from "./icons";
  3.  
  4. lf.extension.dndPanel.setPatternItems([
  5.   {
  6.     label: "选区",
  7.     icon: icons.select,
  8.   },
  9.   {
  10.     type: "circle",
  11.     text: "开始",
  12.     label: "开始节点",
  13.     icon: icons.start,
  14.   },
  15.   {
  16.     type: "rect",
  17.     label: "用户任务",
  18.     icon: icons.task,
  19.   },
  20.   {
  21.     type: "rect",
  22.     label: "系统任务",
  23.     icon: icons.task,
  24.   },
  25.   {
  26.     type: "diamond",
  27.     label: "条件判断",
  28.     icon: icons.condition,
  29.   },
  30.   {
  31.     type: "circle",
  32.     text: "结束",
  33.     label: "结束节点",
  34.     icon: icons.end,
  35.   },
  36. ]);

 重新预览效果, 可以看到内置拖拽面板已经生效;

New Image

在React中的使用示例（使用CRA搭建开发环境）

package.json

  1. {
  2.   "name": "logicflow-react",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "dependencies": {
  6.     "@logicflow/core": "^2.0.0",
  7.     "@logicflow/extension": "^2.0.0",
  8.     "@testing-library/jest-dom": "^5.17.0",
  9.     "@testing-library/react": "^13.4.0",
  10.     "@testing-library/user-event": "^13.5.0",
  11.     "antd": "^5.20.1",
  12.     "insert-css": "^2.0.0",
  13.     "react": "^18.3.1",
  14.     "react-dom": "^18.3.1",
  15.     "react-scripts": "5.0.1",
  16.     "web-vitals": "^2.1.4"
  17.   },
  18.   "scripts": {
  19.     "start": "react-scripts start",
  20.     "build": "react-scripts build",
  21.     "test": "react-scripts test",
  22.     "eject": "react-scripts eject"
  23.   },
  24.   "eslintConfig": {
  25.     "extends": [
  26.       "react-app",
  27.       "react-app/jest"
  28.     ]
  29.   },
  30.   "browserslist": {
  31.     "production": [
  32.       ">0.2%",
  33.       "not dead",
  34.       "not op_mini all"
  35.     ],
  36.     "development": [
  37.       "last 1 chrome version",
  38.       "last 1 firefox version",
  39.       "last 1 safari version"
  40.     ]
  41.   }
  42. }

public/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.     <meta name="theme-color" content="#000000" />
  8.     <meta
  9.       name="description"
  10.       content="Web site created using create-react-app"
  11.     />
  12.     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  13.     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  14.     <title>React App</title>
  15.     <style>
  16.       html, body, #root{
  17.         margin: 0;
  18.         padding: 0;
  19.         height: 100%;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <noscript>You need to enable JavaScript to run this app.</noscript>
  25.     <div id="root"></div>
  26.   </body>
  27. </html>

src/index.js

  1. import ReactDOM from ''react-dom/client'';
  2. import React, { useEffect, useRef } from "react";
  3. import { Button } from "antd";
  4. import LogicFlow from "@logicflow/core";
  5. import {
  6.   BpmnElement,
  7.   BpmnXmlAdapter,
  8.   Control,
  9.   Menu,
  10.   SelectionSelect,
  11.   DndPanel,
  12. } from "@logicflow/extension";
  13. import "@logicflow/core/es/index.css";
  14. import "@logicflow/extension/lib/style/index.css";
  15. import insertCss from ''insert-css'';
  16.  
  17. const root = ReactDOM.createRoot(document.getElementById(''root''));
  18.  
  19. const App = () => {
  20.   const container = useRef(null);
  21.   const lfRef = useRef(null);
  22.  
  23.   useEffect(() => {
  24.     lfRef.current = new LogicFlow({
  25.       container: container.current,
  26.       stopZoomGraph: true,
  27.       metaKeyMultipleSelected: true,
  28.       grid: true,
  29.       keyboard: {
  30.         enabled: true,
  31.       },
  32.       snapline: true,
  33.       plugins: [
  34.         BpmnElement,
  35.         BpmnXmlAdapter,
  36.         Control,
  37.         Menu,
  38.         SelectionSelect,
  39.         DndPanel,
  40.       ],
  41.     });
  42.  
  43.     lfRef.current.setPatternItems([
  44.       {
  45.         label: "选区",
  46.         icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=",
  47.         callback: () => {
  48.           lfRef.current.openSelectionSelect();
  49.           lfRef.current.once("selection:selected", () => {
  50.             lfRef.current.closeSelectionSelect();
  51.           });
  52.         },
  53.       },
  54.       {
  55.         type: "bpmn:startEvent",
  56.         label: "开始",
  57.         text: "开始",
  58.         icon: "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==",
  59.       },
  60.       {
  61.         type: "bpmn:userTask",
  62.         label: "用户任务",
  63.         text: "用户任务",
  64.         icon: "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==",
  65.       },
  66.       {
  67.         type: "bpmn:serviceTask",
  68.         label: "系统任务",
  69.         text: "系统任务",
  70.         icon: "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==",
  71.       },
  72.       {
  73.         type: "bpmn:exclusiveGateway",
  74.         label: "条件判断",
  75.         text: "条件判断",
  76.         icon: "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=",
  77.       },
  78.       {
  79.         type: "bpmn:endEvent",
  80.         label: "结束",
  81.         text: "结束",
  82.         icon: "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",
  83.       },
  84.     ]);
  85.  
  86.     lfRef.current.render({});
  87.   }, []);
  88.  
  89.   const download = (filename, text) => {
  90.     const element = document.createElement("a");
  91.     element.setAttribute(
  92.       "href",
  93.       "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  94.     );
  95.     element.setAttribute("download", filename);
  96.     element.style.display = "none";
  97.     document.body.appendChild(element);
  98.     element.click();
  99.     document.body.removeChild(element);
  100.   };
  101.  
  102.   const downloadXml = () => {
  103.     const data = lfRef.current.getGraphData();
  104.     download("logic-flow.xml", data);
  105.   };
  106.  
  107.   const uploadXml = (ev) => {
  108.     const file = ev.target.files[0];
  109.     const reader = new FileReader();
  110.     reader.onload = (event) => {
  111.       if (event.target) {
  112.         const xml = event.target.result;
  113.         lfRef.current.render(xml);
  114.       }
  115.     };
  116.     reader.readAsText(file);
  117.   };
  118.  
  119.   return (
  120.     <>
  121.       <div className="explain">
  122.         点击左下角下载 XML，将文件上传到
  123.         <Button type="link" href="https://demo.bpmn.io/" target="_blank">
  124.           BPMN Demo
  125.         </Button>
  126.         即可使用
  127.       </div>
  128.       <div id="graph" ref={container}></div>
  129.       <div className="graph-io">
  130.         <span title="下载 XML" onMouseDown={() => downloadXml()}>
  131.           <img
  132.             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABqUlEQVQ4T92Uv0tbURTHPyevUwc3qUshU/8DBzOYmwiFDlK6dHKwVHBwUKjUoleS4Ku0UkEHB6HSDp1cpHRwSnKz1KH/QaeAS0txcXDy5ciNL5LEF4k/oOBZHvfdcz/33O/53ivccUgvnrFaBAo95ksuFD9/Kf4LMOdCcb4UY9UAVeBWFd5XoHmnaQIKCOm21nnNko7c1LQZSp2IkvsgdT+86PLYoj6KUvzp8sGvIGCiXJLf/v9YQZ9EEd+A4fa8oMFQeVX+dgD9IG8134CvwGMV1morspDkteyyfhTlLXCYgslKKJVW3iUfxlV46Aiw40KZaocaq5+B18BBEDDZqv4CmLO6pnDS7vzxoj48PuWLwEuU7ymY8QsasIXwXGF34AGvfhTlpAUatfo0BRkxVhVwLpRc9/GM1U/AG4WfsT4ZYN2FMp+Q6w1vrgTGt2MW2IgBcy6UzSRdjdX+gH5xdlGf+W9tVfaTYPHG/QN7QbqadQ7MWj0S5ZiIXMuc/QA6YOeXoqrCgNfwqnfvuuxS04fZJd0W4QUweF1CnP9Plb3ae5nu+cDeEMwZu/TFGsleoRIAAAAASUVORK5CYII="
  133.             alt="下载XML"
  134.           />
  135.         </span>
  136.         <span id="upload-xml" title="上传 XML">
  137.           <input
  138.             type="file"
  139.             className="upload"
  140.             onChange={(ev) => uploadXml(ev)}
  141.           />
  142.           <img
  143.             className="upload-img"
  144.             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABMUlEQVQ4T+XUsUrEQBCA4X8MCD6Cr6DPIOawFiy8gE9ga62BM7D6Aj6CYOHZnaAg6h62Yqed7dmKnUUYmbARDafZwBWCWyWb2W9nZ3cjzLjJjD2iwZVdXbw7lJe2BKLANNcUSOfg+MbJ82/oN7CX64nCVhjgvZNewG6tT+FhPmH9qpBJmqtanwgTVba9k/Pq/etsdRBQhOCRKvfAI7AcYsckbFCyE94HFu+d7P8EVh/XBrpUllwCb8AZMFAlE+EUYbTwSv/iSN5DEu1gmqvNuJkkZGVJZqB3Iqt72jfU8PGBDKNBS9+yvC7kKeAVaP2GGmbPncC6vk1wSt3bl9wYZMv/zPAfgKH4qXfim7ckZlOG3okdk6gWA0ZBjaDpuxwObX3FusB276tyRP1tush/H/wANP7LFUnxl7EAAAAASUVORK5CYII="
  145.             alt="上传XML"
  146.           />
  147.         </span>
  148.       </div>
  149.     </>
  150.   );
  151. };
  152.  
  153. root.render(<App></App>);
  154.  
  155. insertCss(`
  156.   .explain {
  157.     height: 30px;  
  158.   }
  159.   #graph {
  160.     width: 100%;
  161.     height: calc(100% - 30px);
  162.   }
  163.   .graph-io {
  164.     position: absolute;
  165.     left: 10px;
  166.     bottom: 10px;
  167.     z-index: 9999;
  168.     background:rgba(255,255,255,0.8);
  169.     box-shadow: 0 1px 4px rgba(0,0,0,.3);
  170.     padding: 10px;
  171.     display: flex;
  172.   }
  173.   .graph-io > span {
  174.     margin: 0 5px;
  175.     cursor: pointer;
  176.   }
  177.   #upload-xml {
  178.     position: relative;
  179.     overflow: hidden;
  180.     display: inline-block;
  181.     cursor: pointer;
  182.   }
  183.   .upload {
  184.     position: absolute;
  185.     z-index: 99;
  186.     left: 0;
  187.     top: 0;
  188.     opacity: 0;
  189.     cursor: pointer;
  190.   }
  191.   .upload::-webkit-file-upload-button {
  192.     cursor: pointer;
  193.   }
  194.   .upload-img {
  195.     width: 26px;
  196.   }
  197.   `);

在Vue3中使用（使用Vite搭建开发环境）

package.json：

  1. {
  2.   "name": "logicflow",
  3.   "version": "0.0.0",
  4.   "private": true,
  5.   "type": "module",
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "vite build",
  9.     "preview": "vite preview"
  10.   },
  11.   "dependencies": {
  12.     "@logicflow/core": "^2.0.0",
  13.     "@logicflow/extension": "^2.0.0",
  14.     "vue": "^3.4.29"
  15.   },
  16.   "devDependencies": {
  17.     "@vitejs/plugin-vue": "^5.0.5",
  18.     "unplugin-auto-import": "^0.18.2",
  19.     "unplugin-vue-components": "^0.27.3",
  20.     "vite": "^5.3.1"
  21.   }
  22. }

src/App.vue：

  1. <template>
  2.   <div class="root" ref="rootRef"></div>
  3.   <div class="graph"></div>
  4.   <div class="graph-io">
  5.     <span title="下载 XML" @mousedown="downloadXml">
  6.       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABqUlEQVQ4T92Uv0tbURTHPyevUwc3qUshU/8DBzOYmwiFDlK6dHKwVHBwUKjUoleS4Ku0UkEHB6HSDp1cpHRwSnKz1KH/QaeAS0txcXDy5ciNL5LEF4k/oOBZHvfdcz/33O/53ivccUgvnrFaBAo95ksuFD9/Kf4LMOdCcb4UY9UAVeBWFd5XoHmnaQIKCOm21nnNko7c1LQZSp2IkvsgdT+86PLYoj6KUvzp8sGvIGCiXJLf/v9YQZ9EEd+A4fa8oMFQeVX+dgD9IG8134CvwGMV1morspDkteyyfhTlLXCYgslKKJVW3iUfxlV46Aiw40KZaocaq5+B18BBEDDZqv4CmLO6pnDS7vzxoj48PuWLwEuU7ymY8QsasIXwXGF34AGvfhTlpAUatfo0BRkxVhVwLpRc9/GM1U/AG4WfsT4ZYN2FMp+Q6w1vrgTGt2MW2IgBcy6UzSRdjdX+gH5xdlGf+W9tVfaTYPHG/QN7QbqadQ7MWj0S5ZiIXMuc/QA6YOeXoqrCgNfwqnfvuuxS04fZJd0W4QUweF1CnP9Plb3ae5nu+cDeEMwZu/TFGsleoRIAAAAASUVORK5CYII="
  7.         alt="下载XML" />
  8.     </span>
  9.     <span id="upload-xml" title="上传 XML">
  10.       <input type="file" class="upload" @change="uploadXml" />
  11.       <img class="upload-img"
  12.         src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABMUlEQVQ4T+XUsUrEQBCA4X8MCD6Cr6DPIOawFiy8gE9ga62BM7D6Aj6CYOHZnaAg6h62Yqed7dmKnUUYmbARDafZwBWCWyWb2W9nZ3cjzLjJjD2iwZVdXbw7lJe2BKLANNcUSOfg+MbJ82/oN7CX64nCVhjgvZNewG6tT+FhPmH9qpBJmqtanwgTVba9k/Pq/etsdRBQhOCRKvfAI7AcYsckbFCyE94HFu+d7P8EVh/XBrpUllwCb8AZMFAlE+EUYbTwSv/iSN5DEu1gmqvNuJkkZGVJZqB3Iqt72jfU8PGBDKNBS9+yvC7kKeAVaP2GGmbPncC6vk1wSt3bl9wYZMv/zPAfgKH4qXfim7ckZlOG3okdk6gWA0ZBjaDpuxwObX3FusB276tyRP1tush/H/wANP7LFUnxl7EAAAAASUVORK5CYII="
  13.         alt="上传XML" />
  14.     </span>
  15.   </div>
  16. </template>
  17.  
  18. <script setup>
  19. import { ref, onMounted } from "vue";
  20. import LogicFlow from "@logicflow/core";
  21. import {
  22.   BpmnElement,
  23.   BpmnXmlAdapter,
  24.   Control,
  25.   Menu,
  26.   SelectionSelect,
  27.   DndPanel,
  28. } from "@logicflow/extension";
  29. import "@logicflow/core/es/index.css";
  30. import "@logicflow/extension/lib/style/index.css";
  31.  
  32. const rootRef = ref(null)
  33. const lfRef = ref(null);
  34.  
  35. const download = (filename, text) => {
  36.   const element = document.createElement("a");
  37.   element.setAttribute(
  38.     "href",
  39.     "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  40.   );
  41.   element.setAttribute("download", filename);
  42.   element.style.display = "none";
  43.   document.body.appendChild(element);
  44.   element.click();
  45.   document.body.removeChild(element);
  46. };
  47.  
  48. const downloadXml = () => {
  49.   const data = lfRef.value.getGraphData();
  50.   download("logic-flow.xml", data);
  51. };
  52.  
  53. const uploadXml = (ev) => {
  54.   const file = ev.target.files[0];
  55.   const reader = new FileReader();
  56.   reader.onload = (event) => {
  57.     if (event.target) {
  58.       const xml = event.target.result;
  59.       lfRef.value.render(xml);
  60.     }
  61.   };
  62.   reader.readAsText(file);
  63. };
  64.  
  65. onMounted(() => {
  66.   lfRef.value = new LogicFlow({
  67.     container: rootRef.value,
  68.     stopZoomGraph: true,
  69.     metaKeyMultipleSelected: true,
  70.     grid: true,
  71.     keyboard: {
  72.       enabled: true,
  73.     },
  74.     snapline: true,
  75.     plugins: [
  76.       BpmnElement,
  77.       BpmnXmlAdapter,
  78.       Control,
  79.       Menu,
  80.       SelectionSelect,
  81.       DndPanel,
  82.     ],
  83.   });
  84.  
  85.   lfRef.value.setPatternItems([
  86.     {
  87.       label: "选区",
  88.       icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=",
  89.       callback: () => {
  90.         lfRef.current.openSelectionSelect();
  91.         lfRef.current.once("selection:selected", () => {
  92.           lfRef.current.closeSelectionSelect();
  93.         });
  94.       },
  95.     },
  96.     {
  97.       type: "bpmn:startEvent",
  98.       label: "开始",
  99.       text: "开始",
  100.       icon: "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==",
  101.     },
  102.     {
  103.       type: "bpmn:userTask",
  104.       label: "用户任务",
  105.       text: "用户任务",
  106.       icon: "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==",
  107.     },
  108.     {
  109.       type: "bpmn:serviceTask",
  110.       label: "系统任务",
  111.       text: "系统任务",
  112.       icon: "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==",
  113.     },
  114.     {
  115.       type: "bpmn:exclusiveGateway",
  116.       label: "条件判断",
  117.       text: "条件判断",
  118.       icon: "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=",
  119.     },
  120.     {
  121.       type: "bpmn:endEvent",
  122.       label: "结束",
  123.       text: "结束",
  124.       icon: "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",
  125.     },
  126.   ]);
  127.  
  128.   lfRef.value.render({});
  129. });
  130. </script>
  131.  
  132. <style scoped>
  133. .root {
  134.   width: 100%;
  135.   height: 100%;
  136. }
  137.  
  138. .explain {
  139.   height: 30px;
  140. }
  141.  
  142. .graph {
  143.   width: 100%;
  144.   height: calc(100% - 30px);
  145. }
  146.  
  147. .graph-io {
  148.   position: absolute;
  149.   left: 10px;
  150.   bottom: 10px;
  151.   z-index: 9999;
  152.   background: rgba(255, 255, 255, 0.8);
  153.   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  154.   padding: 10px;
  155.   display: flex;
  156. }
  157.  
  158. .graph-io>span {
  159.   margin: 0 5px;
  160.   cursor: pointer;
  161. }
  162.  
  163. #upload-xml {
  164.   position: relative;
  165.   overflow: hidden;
  166.   display: inline-block;
  167.   cursor: pointer;
  168. }
  169.  
  170. .upload {
  171.   position: absolute;
  172.   z-index: 99;
  173.   left: 0;
  174.   top: 0;
  175.   opacity: 0;
  176.   cursor: pointer;
  177. }
  178.  
  179. .upload::-webkit-file-upload-button {
  180.   cursor: pointer;
  181. }
  182.  
  183. .upload-img {
  184.   width: 26px;
  185. }
  186. </style>

效果：

New Image

官网：https://site.logic-flow.cn/

www.hhzai.top

标签： 技术社区

相关文章