From 2fd2e0d850e6c287b2779b50f875b75780382df1 Mon Sep 17 00:00:00 2001 From: boyongjiong Date: Thu, 16 May 2024 20:24:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20engine-browser-examples=20bpmn=20demo?= =?UTF-8?q?=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/engine-browser-examples/package.json | 6 +- .../src/assets/bpmn/delete.png | Bin 0 -> 735 bytes .../src/assets/bpmn/end-event-none.png | Bin 0 -> 914 bytes .../src/assets/bpmn/export.png | Bin 0 -> 2783 bytes .../src/assets/bpmn/gateway-xor.png | Bin 0 -> 751 bytes .../src/assets/bpmn/image.png | Bin 0 -> 2919 bytes .../src/assets/bpmn/select.png | Bin 0 -> 668 bytes .../src/assets/bpmn/service-task.png | Bin 0 -> 998 bytes .../src/assets/bpmn/service.png | Bin 0 -> 1000 bytes .../src/assets/bpmn/start-event-none.png | Bin 0 -> 894 bytes .../src/assets/bpmn/subprocess-collapsed.png | Bin 0 -> 717 bytes .../src/assets/bpmn/subprocess-expanded.png | Bin 0 -> 718 bytes .../src/assets/bpmn/task-none.png | Bin 0 -> 593 bytes .../src/assets/bpmn/upload.png | Bin 0 -> 2784 bytes .../src/assets/bpmn/user-task.png | Bin 0 -> 853 bytes .../engine-browser-examples/src/index.css | 7 +- examples/engine-browser-examples/src/main.tsx | 11 + .../src/pages/extension/bpmn/bpmn.json | 255 +++++++++++++ .../src/pages/extension/bpmn/diagram.xml | 92 +++++ .../src/pages/extension/bpmn/index.less | 49 +++ .../src/pages/extension/bpmn/index.tsx | 353 ++++++++++++++++++ .../src/pages/extension/bpmn/svgIcons.ts | 23 ++ .../src/pages/extension/bpmn/tips.ts | 90 +++++ .../src/pages/extension/bpmn/util.ts | 14 + .../src/routes/root.tsx | 4 + examples/engine-browser-examples/src/utls.ts | 4 + .../engine-browser-examples/tsconfig.json | 5 +- .../engine-browser-examples/vite.config.ts | 6 + 28 files changed, 909 insertions(+), 10 deletions(-) create mode 100644 examples/engine-browser-examples/src/assets/bpmn/delete.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/end-event-none.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/export.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/gateway-xor.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/image.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/select.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/service-task.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/service.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/start-event-none.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/subprocess-collapsed.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/subprocess-expanded.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/task-none.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/upload.png create mode 100644 examples/engine-browser-examples/src/assets/bpmn/user-task.png create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/bpmn.json create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/diagram.xml create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/index.less create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/index.tsx create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/svgIcons.ts create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/tips.ts create mode 100644 examples/engine-browser-examples/src/pages/extension/bpmn/util.ts create mode 100644 examples/engine-browser-examples/src/utls.ts diff --git a/examples/engine-browser-examples/package.json b/examples/engine-browser-examples/package.json index fcb617fa4..a93c9f208 100755 --- a/examples/engine-browser-examples/package.json +++ b/examples/engine-browser-examples/package.json @@ -11,9 +11,9 @@ }, "dependencies": { "@ant-design/icons": "^5.0.1", - "@logicflow/core": "workspace:*", - "@logicflow/engine": "workspace:*", - "@logicflow/extension": "1.2.19", + "@logicflow/core": "workspace:latest", + "@logicflow/engine": "workspace:latest", + "@logicflow/extension": "workspace:latest", "antd": "^5.4.0", "localforage": "^1.10.0", "match-sorter": "^6.3.1", diff --git a/examples/engine-browser-examples/src/assets/bpmn/delete.png b/examples/engine-browser-examples/src/assets/bpmn/delete.png new file mode 100644 index 0000000000000000000000000000000000000000..c08e1a33e0d30dcd99e8c31d1f4dfb8093361893 GIT binary patch literal 735 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 US^Vey+aD`9Wom6wX5@MGKZV``S^xk5 literal 0 HcmV?d00001 diff --git a/examples/engine-browser-examples/src/assets/bpmn/gateway-xor.png b/examples/engine-browser-examples/src/assets/bpmn/gateway-xor.png new file mode 100644 index 0000000000000000000000000000000000000000..0c023daabfb4c9a2d21f50d2397a8b25e826c50c GIT binary patch literal 751 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 RSrGsL002ovPDHLkV1kSEUfloy literal 0 HcmV?d00001 diff --git a/examples/engine-browser-examples/src/assets/bpmn/select.png b/examples/engine-browser-examples/src/assets/bpmn/select.png new file mode 100644 index 0000000000000000000000000000000000000000..254c2c5603a9d4b203d7ce1af54a8cd97b28e47a GIT binary patch literal 668 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 literal 0 HcmV?d00001 diff --git a/examples/engine-browser-examples/src/assets/bpmn/start-event-none.png b/examples/engine-browser-examples/src/assets/bpmn/start-event-none.png new file mode 100644 index 0000000000000000000000000000000000000000..c2e56035f01e323e69de8e900c352678b0013535 GIT binary patch literal 894 zcmV-^1A+XBP)Px&I7vi7RCr$Pn^A7tFbsyJzU5R)fpxc9yL7i&2h2TH-s*ut>@qSbQzWI@f%0g} z68-5XDLGUO{WlYcoy8}C4g;y7I*cEu^Dh{0jNw}d;YcWPn6AY!ynj4|;qTAGe66K& ztH1yNV+=3G7a7JFPA$Q>!9WVILZBEn0b_>o{rCC!@DYxj65<$6@OC-*Lm$Xh04C*5 z(4;C96AaEBCIEk44wrbL`2nCfUR-Sf2Ku-3&Do=Z!5Lb^$PAR>?fLMi0qq8ZQbP?0 zslgnSF@{I4AX}u2uL6O=)U-higD}Efrc%jYRq_wF_fUukMhc>ZTdaYh+{OxI6-GJ> zTL6JUJ-wbmA#=ugdp@kblRAJVgMFE6a4+CFSy_sydswKi$=-6`%Z*tWDRHYmT3%N2 ztjEN$FtB@UElzN7o?g!*TGkh@Qb`!8Dz@q#DHN+ZNEmxm#RLWeDOL0W#$Hu1!LZoB zfU)&dDha0A*pY>?^$fy+(YneF42#4hGuE;VR);hJT7evt<4Mq2|oz`cCW??No7p z>_2LIREPGfcvczHO>5^Z6{5``B4t3M)Lpjv^~=l7)xr+XVvrh2X;z;>xeFAgdY2q( zArZA*Cfin(0fth8wyx_=fz>Fu6Tx7Bz)1nO8q5-PQ00#v`zSFC4oK_$OASScQY$rE zR1IeB0(UC2U6#+zHRMIgz;MzmbG_$Y^?y~u;^2-q2zGBG^#QdAqN0m0Hl{Xw&+=p}{M^gzPzbb(vvN?15}!2O-|`X?tqs#R_lU*e2f6 z(7Gbvh=9ro78cJ53QP);R+AJQSsaXx_SID8hxw;(o@6n{^!$Q~u9P{Z>^nbxUc0KB zg~2?vxyII{I{hr4!FLg%tq!qF8Db|GJGw0o&bYsZL;v-ehsoh@mq)C$^EEvov52L* z&giSqYI*w}edEMsXLy5IgP69StNF=ZaBWRKV}kevgL9X+1=-3U+PSLJ?6{l4uimF> zid7Pc&(6H`()B3k-C~!!+BAuE`4tYax@{Gc6%KEiSKNBMfiKoFyehqM&(&KJ&isz& zM2#K$Hr5sBI|`-PGcGebA&cst5*5cLj)s&M9!+o56wWzpIBDxpXW`!Vd`5D^vw2pw zIv$pdnyi}Y_gE@zBjtusHB-X=Bumew>h58SxGy1k z;?lN#A|4mNHh$g8`RvWDrG<;%so*7rK&CHjatYsQ}Y|7gcn$0`YbDLP!$~g+DbTD|d^{IFWFizl+MM)iq&}0#0 nIC)_r3#Sspq=m|k3iS-x()Z#QTq^DXrcVY>S3j3^P6Px%h)G02RCr$P+g(z_AP@)erEfWvb;f!t`{k{yGsaW(tvG0?JD7GCvLUhk`{n>! z@?#;2t0R1w2so1{2tt4~N&-Lv(n!E43^EdsMgm4*iZk-*^|)M|Xc^|=9X%M$rznhf zvm6+jK6{K1Z9ts@Gz;+@-$Z!Kw3K?#^0omQG54jUu?T;Rifc)Kv{DwUDk~E%?$Vegrr0#Sd z^oRLYo#4Y(> zAo;JRLw@v$kM{3DIk-|xvYiH$-uO)DkDqF`f5X# z&T|N09IJv%vod_IIWKEM_7%d`tlCvWc4y_ePLi$SwX)|}mOP|1I>gX?#(7GbMYhPo z?3WE6F!N%3)lRWS{NAA@LBmh@aAeB&3H$X~4%6331p`>nrl!TP+fK)GDcb?5gp#@eQW8?O15ybkbpxa% zq-+PI5=!a@NJ&W94oD@G)D4i5kg^?+N+_w@7d$wsU+4~kH2?qr07*qoM6N<$f(b4` AJOBUy literal 0 HcmV?d00001 diff --git a/examples/engine-browser-examples/src/assets/bpmn/task-none.png b/examples/engine-browser-examples/src/assets/bpmn/task-none.png new file mode 100644 index 0000000000000000000000000000000000000000..a1e1e184f77ba6c0f8b5e57789a6beedd5c7222a GIT binary patch literal 593 zcmV-X0Px%3rR#lRCr$Po7qmoFc3w@kNGO7MENVa@mCay@Kt#okJQR6SwxPAfvWI*EtPy%Zc;N^XIUi+IpzyJBx^=q!TC<9)v!$m84BBHFt&xH3{ z(bc?90f_<_g`d|D&F#BN)Ai%rT|(m$0hlybnvC#LBA()IGeXLS2LPk^ugE|4O4E1h zihF-PmZ-UGFlbuQfkSuzaJ&s#7`zo7OQpR9$F3L4;QOibG<$E3x4}f-Bbch8oP_hS zNIi_}nE*(sFQrV*f~B#gAWQ&+==b+icPLHpLI{&K3qXoKua(k4@ZRS1g#c6&eHS=h z3a%Ge0Q|!mYCqKwJpjD^YXrc{JPM$;`ghsD`hYESTLL@-0D#SwO1}dj14aTU0e_u? z9)Ko@y8v#3ml@P#w0QLjCgI{cjU_%5O zBG?f5-4JQvY*07>|7(JwlhaCW|5iryY_J6Yp#$K#L&P&j)wUqw1_^fp9<<1mY>wik z8?*mR08(b6Qu{&5{N>r?YJ(84`g-=C#YV}H)ilSiM#+$4jES^%^o;GY|Fg=@ zAhc-K{{bBXY00000NkvXXu0mjf_&pGO literal 0 HcmV?d00001 diff --git a/examples/engine-browser-examples/src/assets/bpmn/upload.png b/examples/engine-browser-examples/src/assets/bpmn/upload.png new file mode 100644 index 0000000000000000000000000000000000000000..cdac4ff45e84240fa6293e7a0673cd4cd6c77a52 GIT binary patch literal 2784 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, + }, + ], + }, { path: '/engine', children: [ diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/bpmn.json b/examples/engine-browser-examples/src/pages/extension/bpmn/bpmn.json new file mode 100644 index 000000000..ebc33ae50 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/bpmn.json @@ -0,0 +1,255 @@ +{ + "bpmn:definitions": { + "-xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance", + "-xmlns:bpmn": "http://www.omg.org/spec/BPMN/20100524/MODEL", + "-xmlns:bpmndi": "http://www.omg.org/spec/BPMN/20100524/DI", + "-xmlns:dc": "http://www.omg.org/spec/DD/20100524/DC", + "-xmlns:di": "http://www.omg.org/spec/DD/20100524/DI", + "-id": "Definitions_06hsjbb", + "-targetNamespace": "http://bpmn.io/schema/bpmn", + "-exporter": "bpmn-js (https://demo.bpmn.io)", + "-exporterVersion": "7.3.0", + "bpmn:process": { + "-id": "Process_0zfyzey", + "-isExecutable": "false", + "bpmn:startEvent": { + "-id": "StartEvent_072hx11", + "bpmn:outgoing": "Flow_17mk55x" + }, + "bpmn:exclusiveGateway": { + "-id": "Gateway_11dyzcj", + "bpmn:incoming": "Flow_00um71v", + "bpmn:outgoing": ["Flow_1iy6wvy", "Flow_05w5m1i"] + }, + "bpmn:sequenceFlow": [ + { + "-id": "Flow_17mk55x", + "-sourceRef": "StartEvent_072hx11", + "-targetRef": "Activity_00hpzik" + }, + { + "-id": "Flow_00um71v", + "-sourceRef": "Activity_00hpzik", + "-targetRef": "Gateway_11dyzcj" + }, + { + "-id": "Flow_1iy6wvy", + "-sourceRef": "Gateway_11dyzcj", + "-targetRef": "Activity_1r8wi1d" + }, + { + "-id": "Flow_091o1xz", + "-sourceRef": "Activity_1r8wi1d", + "-targetRef": "Event_0e2j3bl" + }, + { + "-id": "Flow_05w5m1i", + "-sourceRef": "Gateway_11dyzcj", + "-targetRef": "Activity_0pbgbgt" + }, + { + "-id": "Flow_1hzglvd", + "-sourceRef": "Activity_0pbgbgt", + "-targetRef": "Event_1s9e2ln" + } + ], + "bpmn:endEvent": [ + { + "-id": "Event_0e2j3bl", + "bpmn:incoming": "Flow_091o1xz" + }, + { + "-id": "Event_1s9e2ln", + "bpmn:incoming": "Flow_1hzglvd" + } + ], + "bpmn:serviceTask": { + "-id": "Activity_1r8wi1d", + "bpmn:incoming": "Flow_1iy6wvy", + "bpmn:outgoing": "Flow_091o1xz" + }, + "bpmn:userTask": [ + { + "-id": "Activity_00hpzik", + "bpmn:incoming": "Flow_17mk55x", + "bpmn:outgoing": "Flow_00um71v" + }, + { + "-id": "Activity_0pbgbgt", + "bpmn:incoming": "Flow_05w5m1i", + "bpmn:outgoing": "Flow_1hzglvd" + } + ] + }, + "bpmndi:BPMNDiagram": { + "-id": "BPMNDiagram_1", + "bpmndi:BPMNPlane": { + "-id": "BPMNPlane_1", + "-bpmnElement": "Process_0zfyzey", + "bpmndi:BPMNEdge": [ + { + "-id": "Flow_091o1xz_di", + "-bpmnElement": "Flow_091o1xz", + "di:waypoint": [ + { + "-x": "580", + "-y": "130" + }, + { + "-x": "632", + "-y": "130" + } + ] + }, + { + "-id": "Flow_1iy6wvy_di", + "-bpmnElement": "Flow_1iy6wvy", + "di:waypoint": [ + { + "-x": "435", + "-y": "130" + }, + { + "-x": "480", + "-y": "130" + } + ] + }, + { + "-id": "Flow_00um71v_di", + "-bpmnElement": "Flow_00um71v", + "di:waypoint": [ + { + "-x": "340", + "-y": "130" + }, + { + "-x": "385", + "-y": "130" + } + ] + }, + { + "-id": "Flow_17mk55x_di", + "-bpmnElement": "Flow_17mk55x", + "di:waypoint": [ + { + "-x": "188", + "-y": "130" + }, + { + "-x": "240", + "-y": "130" + } + ] + }, + { + "-id": "Flow_05w5m1i_di", + "-bpmnElement": "Flow_05w5m1i", + "di:waypoint": [ + { + "-x": "410", + "-y": "155" + }, + { + "-x": "410", + "-y": "240" + }, + { + "-x": "480", + "-y": "240" + } + ] + }, + { + "-id": "Flow_1hzglvd_di", + "-bpmnElement": "Flow_1hzglvd", + "di:waypoint": [ + { + "-x": "580", + "-y": "240" + }, + { + "-x": "632", + "-y": "240" + } + ] + } + ], + "bpmndi:BPMNShape": [ + { + "-id": "Gateway_11dyzcj_di", + "-bpmnElement": "Gateway_11dyzcj", + "-isMarkerVisible": "true", + "dc:Bounds": { + "-x": "385", + "-y": "105", + "-width": "50", + "-height": "50" + } + }, + { + "-id": "Event_0e2j3bl_di", + "-bpmnElement": "Event_0e2j3bl", + "dc:Bounds": { + "-x": "632", + "-y": "112", + "-width": "36", + "-height": "36" + } + }, + { + "-id": "Activity_09ucrnv_di", + "-bpmnElement": "Activity_1r8wi1d", + "dc:Bounds": { + "-x": "480", + "-y": "90", + "-width": "100", + "-height": "80" + } + }, + { + "-id": "Activity_13bhmg8_di", + "-bpmnElement": "Activity_00hpzik", + "dc:Bounds": { + "-x": "240", + "-y": "90", + "-width": "100", + "-height": "80" + } + }, + { + "-id": "Activity_015rcjo_di", + "-bpmnElement": "Activity_0pbgbgt", + "dc:Bounds": { + "-x": "480", + "-y": "200", + "-width": "100", + "-height": "80" + } + }, + { + "-id": "Event_1s9e2ln_di", + "-bpmnElement": "Event_1s9e2ln", + "dc:Bounds": { + "-x": "632", + "-y": "222", + "-width": "36", + "-height": "36" + } + }, + { + "-id": "_BPMNShape_StartEvent_2", + "-bpmnElement": "StartEvent_072hx11", + "dc:Bounds": { + "-x": "152", + "-y": "112", + "-width": "36", + "-height": "36" + } + } + ] + } + } + } +} diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/diagram.xml b/examples/engine-browser-examples/src/pages/extension/bpmn/diagram.xml new file mode 100644 index 000000000..0fcf16999 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/diagram.xml @@ -0,0 +1,92 @@ + + + + + Flow_17mk55x + + + Flow_00um71v + Flow_1iy6wvy + Flow_05w5m1i + + + + + + Flow_091o1xz + + + + Flow_1iy6wvy + Flow_091o1xz + + + Flow_17mk55x + Flow_00um71v + + + + Flow_05w5m1i + Flow_1hzglvd + + + Flow_1hzglvd + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/index.less b/examples/engine-browser-examples/src/pages/extension/bpmn/index.less new file mode 100644 index 000000000..940299d06 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/index.less @@ -0,0 +1,49 @@ +.viewport { + position: relative; + height: 75vh; + overflow: hidden; +} + +.bpmn-container { + .lf-dnd-shape { + background-size: contain; + } + + .graph-io { + position: absolute; + right: 15px; + bottom: 10px; + z-index: 9999; + display: flex; + padding: 10px; + background: rgb(255 255 255 / 80%); + border-radius: 5px; + box-shadow: 0 1px 4px rgb(0 0 0 / 30%); + } + + .graph-io a { + margin: 0 5px; + } + + .graph-io a img { + height: 24px; + } + + .custom-minimap { + background-image: url('data:image/png;base64,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'); + background-size: contain; + } + + .upload { + position: absolute; + top: 0; + left: 0; + z-index: 99; + cursor: pointer; + opacity: 0; + } + + .upload::-webkit-file-upload-button { + cursor: pointer; + } +} diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/index.tsx b/examples/engine-browser-examples/src/pages/extension/bpmn/index.tsx new file mode 100644 index 000000000..21140b635 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/index.tsx @@ -0,0 +1,353 @@ +import LogicFlow from '@logicflow/core' +import { + AutoLayout, + BpmnElement, + BpmnXmlAdapter, + ContextMenu, + Control, + DndPanel, + FlowPath, + Menu, + Group, + MiniMap, + SelectionSelect, + Snapshot, +} from '@logicflow/extension' +import type { ShapeItem } from '@logicflow/extension' + +import { Button, Card, Divider, Flex } from 'antd' +import { useEffect, useRef } from 'react' +import { getImageUrl } from '@/utls' +import { download } from './util' + +import '@logicflow/core/es/index.css' +import '@logicflow/extension/es/index.css' +import './index.less' +import NodeData = LogicFlow.NodeData +import GraphConfigData = LogicFlow.GraphConfigData + +const config: Partial = { + edgeTextDraggable: true, + nodeTextDraggable: true, + // adjustNodePosition: false, + // stopMoveGraph: true, + // multipleSelectedKey: 'meta', // alt, shift + hideAnchors: false, + plugins: [ + BpmnElement, + MiniMap, + FlowPath, + AutoLayout, + DndPanel, + Menu, + ContextMenu, + Group, + Control, + BpmnXmlAdapter, + Snapshot, + SelectionSelect, + ], + // isSilentMode: true, + grid: { + type: 'dot', + size: 20, + }, + keyboard: { + enabled: true, + }, + snapline: true, +} + +const menuConfig: Record = { + nodeMenu: [ + { + text: '分享', + callback() { + console.log('分享成功！') + }, + }, + { + text: '复制', + callback() { + console.log('分享成功！') + }, + }, + { + text: '修改', + callback() { + console.log('分享成功！') + }, + }, + ], + graphMenu: [ + { + text: '分111享', + callback() { + console.log('分享成功22！') + }, + }, + ], +} + +const defaultIconConfig: ShapeItem[] = [ + { + type: 'bpmn:startEvent', + label: '开始', + text: '开始', + icon: getImageUrl('/bpmn/start-event-none.png'), + }, + { + type: 'bpmn:userTask', + label: '用户任务', + icon: getImageUrl('/bpmn/user-task.png'), + properties: { + actived: true, + }, + }, + { + type: 'bpmn:serviceTask', + label: '系统任务', + icon: getImageUrl('/bpmn/service-task.png'), + cls: 'import_icon', + }, + { + type: 'bpmn:exclusiveGateway', + label: '条件判断', + icon: getImageUrl('/bpmn/gateway-xor.png'), + }, + { + type: 'bpmn:endEvent', + label: '结束', + icon: getImageUrl('/bpmn/end-event-none.png'), + }, + { + type: 'group', + label: '分组', + icon: getImageUrl('/bpmn/task-none.png'), + }, +] + +const getDndPanelConfig = (lf: LogicFlow): ShapeItem[] => [ + { + label: '选区', + icon: getImageUrl('/bpmn/select.png'), + callback: () => { + lf.openSelectionSelect() + lf.once('selection:selected', () => { + lf.closeSelectionSelect() + }) + }, + }, + ...defaultIconConfig, +] + +export default function BPMNExtension() { + const lfRef = useRef() + const containerRef = useRef(null) + + const renderXml = (xml: unknown) => { + const lf = lfRef.current + if (!lf) { + return + } + lf.renderByXml(xml) + } + + useEffect(() => { + if (!lfRef.current) { + const lf = new LogicFlow({ + ...config, + container: containerRef.current as HTMLElement, + }) + + lf.setMenuConfig(menuConfig) + + const commonMenuConfig = { + icon: getImageUrl('/bpmn/delete.png'), + callback: (data: NodeData) => { + lf.deleteElement(data.id) + lf.hideContextMenu() + }, + } + lf.setContextMenuItems([commonMenuConfig]) + lf.setContextMenuByType('bpmn:userTask', defaultIconConfig) + // TODO: 待确认具体功能 + // lf.setContextMenuByType('bpmn:serviceTask', defaultIconConfig); + + const dndPanelConfig = getDndPanelConfig(lf) + lf.setPatternItems(dndPanelConfig) + + // TODO: 解决 lf extension 插件注册之后，类型仍然是 Extension 的问题，需要注册后定义对应类型，以方便访问其属性 or 方法 + const { control, miniMap } = lf.extension + + ;(control as Control).addItem({ + iconClass: 'custom-minimap', + title: '', + text: '导航', + onMouseEnter: (lf: LogicFlow, ev: MouseEvent) => { + const position = lf.getPointByClient(ev.x, ev.y) + ;(miniMap as MiniMap).show( + position.domOverlayPosition.x - 120, + position.domOverlayPosition.y + 35, + ) + }, + onClick: (lf: LogicFlow, ev: MouseEvent) => { + // console.log(MiniMap, ev); + const position = lf.getPointByClient(ev.x, ev.y) + // console.log(position); + ;(miniMap as MiniMap).show( + position.domOverlayPosition.x - 120, + position.domOverlayPosition.y + 35, + ) + }, + }) + + // 获取渲染数据 + let lfData: GraphConfigData + + const sessionStorageData = window.sessionStorage.getItem('lf-data') + if (sessionStorageData) { + lfData = JSON.parse(sessionStorageData) + renderXml(lfData) + } else { + const lfJsonData = window.sessionStorage.getItem('lf-json-data') + if (!lfJsonData) { + lfData = { + nodes: [], + edges: [], + } + } else { + lfData = JSON.parse(lfJsonData) + } + lf.render(lfData as GraphConfigData) + } + const pathes = window.sessionStorage.getItem('lf-pathes') + if (pathes) { + lf.setRawPathes(JSON.parse(pathes)) + } + + lfRef.current = lf + } + }, []) + + const handleDownloadData = () => { + const data = lfRef.current?.getGraphData() + const dataString = JSON.stringify(data) + download('logicflow.xml', dataString) + window.sessionStorage.setItem('lf-data', dataString) + } + + const handleUploadData = (e: React.ChangeEvent) => { + const file = e.target.files?.[0] + const reader = new FileReader() + reader.onload = (event) => { + const xml = event.target?.result + + renderXml(xml) + } + reader.onerror = (error) => console.log(error) + + file && reader.readAsText(file) // you could also read images and other binaries + } + + const getPath = () => { + const lf = lfRef.current + if (lf) { + lf.setStartNodeType('bpmn:startEvent') + const paths = lf.getPathes() + console.log('paths', paths) + window.sessionStorage.setItem('lf-paths', JSON.stringify(paths)) + // console.log(JSON.parse(window.sessionStorage.getItem('lf-pathes') ?? '')) + } + } + + const autoLayout = () => { + const nextData = lfRef.current?.layout('bpmn:startEvent') + console.log('after layout:', nextData) + } + + const getSelectElements = () => { + const data = lfRef.current?.getSelectElements(true) + console.log('selected elements: ', data) + } + + const showContextMenu = () => { + const lf = lfRef.current + if (lf) { + const { nodes } = lf.getSelectElements() + console.log(nodes[0]) + lf.showContextMenu(nodes[0]) + } + } + + return ( + +

兼容BPMN官方DEMO，此处仅实现了bpmn中的一部分节点

+

此页面绘制的图可以在BPMN官方DEMO中正常使用

+

+ 点击左下角下载xml，将文件上传到{' '} + + https://demo.bpmn.io/ + + 即可使用。 +

+ + + + + + + + + +
+ + + ) +} diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/svgIcons.ts b/examples/engine-browser-examples/src/pages/extension/bpmn/svgIcons.ts new file mode 100644 index 000000000..6982fb5b5 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/svgIcons.ts @@ -0,0 +1,23 @@ +export const startEventIcon: string = + '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==' + +export const endEventIcon: string = + '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' + +export const userTaskIcon: string = + '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==' + +export const serviceTaskIcon: string = + '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==' + +export const exclusiveGatewayIcon: string = + '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=' + +export const groupIcon: string = + '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' + +export const selectionIcon: string = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=' + +export const deleteMenuIcon = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAVhJREFUOE/VlLFKA0EQhmewEazshVjGJlgKWkSLNAGdveMqEayt4hMY9AXyCIKVhuy/TSwCFnZ2Jp1vIRaWZmTCBc6LF86ooNvcz+38383tzw7TnCUi68xcyZao6ksIYVhk46KNFPZIRKNcjX2k473vfOadB6wzcxtAPWsUEWHmVv79tIadc4GIDub9etk9Zj4t7LAsJF/3ARhFUcsKis4nbxaRTWY+BjDx2coD2ylw8ozjuNrr9Z5Mm3mabhRFW977BxGZOedCoHMuIaITALvOuT0i6gCoxXFcU9Vb7/3aIsAbABacAe9MG3A8Ho9MLwI8BCC/BTwHsJN2aJ1Xv9vh/wL+nVCuACz/WMqqehRC2Degql6EELbTlK8BbHwpZbtuSZIsdbvdN9ONRmNlMBi8mm42m6v9fv+5LLCiqpdlpo2q2nBw2dk4c5dV9SyF3ZeBEtEwO23eAUh+SIoWcATkAAAAAElFTkSuQmCC' diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/tips.ts b/examples/engine-browser-examples/src/pages/extension/bpmn/tips.ts new file mode 100644 index 000000000..1db729e28 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/tips.ts @@ -0,0 +1,90 @@ +import LogicFlow from '@logicflow/core' +import NodeData = LogicFlow.NodeData + +const nodeWidth = 100 +const nodeHeight = 80 + +export interface ITipsProps { + lf: LogicFlow +} + +export class Tips { + static pluginName = 'tips' + + private lf: LogicFlow + tipsWrap: HTMLDivElement + container?: HTMLElement + isDragging: boolean = false + currentData?: NodeData + isCurrentLeaveId?: string + + constructor({ lf }: ITipsProps) { + this.lf = lf + const tipsWrap = document.createElement('div') + tipsWrap.className = 'custom-tips' + this.tipsWrap = tipsWrap + } + + render(lf: LogicFlow, container: HTMLElement) { + this.container = container + this.container.appendChild(this.tipsWrap) + + // TODO: 解决 lf 事件监听 callback 函数的类型定义问题（是否需要统一，比如 {data: NodeData | EdgeData | undefined, ev: MouseEvent | xxxDOMEvent}） + // eslint-disable-next-line + this.lf.on('node:mouseenter', ({ data }: any) => { + const model = this.lf.graphModel.getNodeModelById(data.id) + // 没有model可以认为是fakernode, 也就是正在外部拖入的节点。 + if (!model) return + this.showTip(data) + }) + // eslint-disable-next-line + this.lf.on('node:mouseleave', ({ data }: any) => { + const model = this.lf.graphModel.getNodeModelById(data.id) + // 没有model可以认为是fakernode, 也就是正在外部拖入的节点。 + if (!model) return + this.isCurrentLeaveId = data.id + setTimeout(() => { + if (this.isCurrentLeaveId === data.id) { + this.hideTips() + } + }, 200) + }) + this.lf.on('node:dragstart', () => { + this.isDragging = true + this.hideTips() + }) + + // TODO: 解决 callback 函数的类型问题 + // eslint-disable-next-line + this.lf.on('node:drop', ({ data }: any) => { + this.isDragging = false + this.showTip(data) + }) + this.tipsWrap.addEventListener('click', () => { + this.currentData && lf.graphModel.deleteNode(this.currentData.id) + this.hideTips() + }) + this.tipsWrap.addEventListener('mouseenter', () => { + this.isCurrentLeaveId = undefined + }) + this.tipsWrap.addEventListener('mouseleave', () => { + this.hideTips() + }) + } + + showTip(data: NodeData) { + if (this.isDragging) return + this.currentData = data + const [x, y] = this.lf.graphModel.transformModel.CanvasPointToHtmlPoint([ + data.x + nodeWidth / 2 + 4, + data.y - nodeHeight / 2, + ]) + this.tipsWrap.style.display = 'block' + this.tipsWrap.style.top = `${y}px` + this.tipsWrap.style.left = `${x}px` + } + + hideTips() { + this.tipsWrap.style.display = 'none' + } +} diff --git a/examples/engine-browser-examples/src/pages/extension/bpmn/util.ts b/examples/engine-browser-examples/src/pages/extension/bpmn/util.ts new file mode 100644 index 000000000..9221b4f16 --- /dev/null +++ b/examples/engine-browser-examples/src/pages/extension/bpmn/util.ts @@ -0,0 +1,14 @@ +export function download(filename: string, text: string) { + const 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) +} diff --git a/examples/engine-browser-examples/src/routes/root.tsx b/examples/engine-browser-examples/src/routes/root.tsx index 498da43a1..8d37a00f3 100755 --- a/examples/engine-browser-examples/src/routes/root.tsx +++ b/examples/engine-browser-examples/src/routes/root.tsx @@ -28,6 +28,10 @@ export default function Root() {
  • Get Started
    • +
    Extension
    +
  • + BPMN +
    • Engine
  • Start Engine diff --git a/examples/engine-browser-examples/src/utls.ts b/examples/engine-browser-examples/src/utls.ts new file mode 100644 index 000000000..6815e900a --- /dev/null +++ b/examples/engine-browser-examples/src/utls.ts @@ -0,0 +1,4 @@ +export const getImageUrl = (name: string): string => { + const assetPath = `/src/assets${name}` + return new URL(assetPath, import.meta.url).href +} diff --git a/examples/engine-browser-examples/tsconfig.json b/examples/engine-browser-examples/tsconfig.json index a7fc6fbf2..c7e6e0884 100755 --- a/examples/engine-browser-examples/tsconfig.json +++ b/examples/engine-browser-examples/tsconfig.json @@ -18,7 +18,10 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + "paths": { + "@/*": ["src/*"] + } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] diff --git a/examples/engine-browser-examples/vite.config.ts b/examples/engine-browser-examples/vite.config.ts index 5a33944a9..03b62585a 100755 --- a/examples/engine-browser-examples/vite.config.ts +++ b/examples/engine-browser-examples/vite.config.ts @@ -1,7 +1,13 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import { fileURLToPath } from 'node:url' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + }, + }, })