Hooke / logic-flow2

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7ae260cc 1 parent f246b24d

新增功能测试

Inline Side-by-side
Showing 6 changed files with 248 additions and 5 deletions
1 /* 1 /*
2 * @Date: 2025-03-10 13:07:05 2 * @Date: 2025-03-10 13:07:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-10 15:50:42 4 + * @LastEditTime: 2025-03-10 18:07:51
5 * @FilePath: /logic-flow2/src/main.js 5 * @FilePath: /logic-flow2/src/main.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -15,8 +15,13 @@ import ElementPlus from 'element-plus' ...@@ -15,8 +15,13 @@ import ElementPlus from 'element-plus'
15 import 'element-plus/dist/index.css' 15 import 'element-plus/dist/index.css'
16 16
17 import LogicFlow from '@logicflow/core'; 17 import LogicFlow from '@logicflow/core';
18 -import { Menu } from "@logicflow/extension"; 18 +import { Menu, DndPanel, SelectionSelect, Control, InsertNodeInPolyline, Highlight } from "@logicflow/extension";
19 LogicFlow.use(Menu) // 右键菜单 19 LogicFlow.use(Menu) // 右键菜单
20 +LogicFlow.use(DndPanel) // 拖拽面板
21 +LogicFlow.use(SelectionSelect) // 选中元素
22 +LogicFlow.use(Control) // 控制面板
23 +LogicFlow.use(InsertNodeInPolyline) // 边上插入节点
24 +LogicFlow.use(Highlight) // 高亮
20 25
21 const app = createApp(App) 26 const app = createApp(App)
22 app.use(ElementPlus) 27 app.use(ElementPlus)
......
1 /* 1 /*
2 * @Date: 2025-03-10 13:15:30 2 * @Date: 2025-03-10 13:15:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-10 15:49:17 4 + * @LastEditTime: 2025-03-10 17:13:56
5 * @FilePath: /logic-flow2/src/router/index.js 5 * @FilePath: /logic-flow2/src/router/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -20,6 +20,16 @@ const router = createRouter({ ...@@ -20,6 +20,16 @@ const router = createRouter({
20 name: 'menu', 20 name: 'menu',
21 component: () => import('../views/menu.vue') 21 component: () => import('../views/menu.vue')
22 }, 22 },
23 + {
24 + path: '/DndPanel',
25 + name: 'DndPanel',
26 + component: () => import('../views/DndPanel.vue')
27 + },
28 + {
29 + path: '/control',
30 + name: 'control',
31 + component: () => import('../views/control.vue')
32 + },
23 ] 33 ]
24 }) 34 })
25 35
......
1 +<!--
2 + * @Date: 2025-03-10 16:52:35
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-03-10 17:40:05
5 + * @FilePath: /logic-flow2/src/views/DndPanel.vue
6 + * @Description: 拖拽面板
7 +-->
8 +<template>
9 + <div class="container">
10 + <div ref="container" class="flow-container"></div>
11 + </div>
12 +</template>
13 +
14 +<script setup>
15 +import LogicFlow from '@logicflow/core';
16 +import { ProximityConnect } from "@logicflow/extension";
17 +const container = ref(null);
18 +let lf = null;
19 +
20 +onMounted(() => {
21 + lf = new LogicFlow({
22 + container: container.value,
23 + grid: true,
24 + plugins: [ProximityConnect],
25 + pluginsOptions: {
26 + proximityConnect: {
27 + enable: true, // 插件是否启用
28 + // distance, // 渐进连线阈值
29 + // reverseDirection, // 连线方向
30 + // virtualEdgeStyle, // 虚拟线样式
31 + }
32 + },
33 + });
34 +
35 + lf.extension.dndPanel.setPatternItems([
36 + {
37 + label: '选区',
38 + icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
39 + callback: () => {
40 + lf.extension.selectionSelect.openSelectionSelect();
41 + lf.once('selection:selected', () => {
42 + lf.extension.selectionSelect.closeSelectionSelect();
43 + });
44 + }
45 + },
46 + {
47 + type: 'circle',
48 + text: '开始',
49 + label: '开始节点',
50 + 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==',
51 + },
52 + {
53 + type: 'rect',
54 + label: '用户任务',
55 + 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==',
56 + className: 'important-node'
57 + },
58 + {
59 + type: 'rect',
60 + label: '系统任务',
61 + 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==',
62 + className: 'import_icon'
63 + },
64 + {
65 + type: 'diamond',
66 + label: '条件判断',
67 + 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=',
68 + },
69 + {
70 + type: 'circle',
71 + text: '结束',
72 + label: '结束节点',
73 + 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',
74 + }
75 + ]);
76 +
77 + lf.render({
78 + nodes: [
79 + { id: 'node1', type: 'rect', x: 200, y: 100 },
80 + { id: 'node2', type: 'circle', x: 400, y: 100 },
81 + ],
82 + edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }],
83 + });
84 +
85 +});
86 +</script>
87 +
88 +
89 +<style scoped>
90 +.container {
91 + width: 100vw;
92 + height: 100vh;
93 + display: flex;
94 + flex-direction: column;
95 +}
96 +
97 +.flow-container {
98 + flex: 1;
99 + width: 100%;
100 + height: 100%;
101 +}
102 +</style>
1 +<!--
2 + * @Date: 2025-03-10 16:52:35
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-03-10 17:16:39
5 + * @FilePath: /logic-flow2/src/views/control.vue
6 + * @Description: 拖拽面板
7 +-->
8 +<template>
9 + <div class="container">
10 + <div ref="container" class="flow-container"></div>
11 + </div>
12 +</template>
13 +
14 +<script setup>
15 +import LogicFlow from '@logicflow/core';
16 +import { MiniMap } from "@logicflow/extension";
17 +const container = ref(null);
18 +let lf = null;
19 +
20 +onMounted(() => {
21 + lf = new LogicFlow({
22 + container: container.value,
23 + grid: true,
24 + plugins: [MiniMap]
25 + });
26 +
27 + lf.extension.control.addItem({
28 + key: 'mini-map',
29 + iconClass: 'custom-minimap',
30 + title: '',
31 + text: '导航',
32 + onMouseEnter: (lf, ev) => {
33 + const position = lf.getPointByClient(ev.x, ev.y)
34 + lf.extension.miniMap.show(
35 + position.domOverlayPosition.x - 120,
36 + position.domOverlayPosition.y + 35,
37 + )
38 + },
39 + onClick: (lf, ev) => {
40 + const position = lf.getPointByClient(ev.x, ev.y)
41 + lf.extension.miniMap.show(
42 + position.domOverlayPosition.x - 120,
43 + position.domOverlayPosition.y + 35,
44 + )
45 + },
46 + });
47 +
48 + // lf.extension.control.removeItem('mini-map')
49 +
50 + lf.render({
51 + nodes: [
52 + { id: 'node1', type: 'rect', x: 200, y: 100 },
53 + { id: 'node2', type: 'circle', x: 400, y: 100 },
54 + ],
55 + edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }],
56 + });
57 +});
58 +</script>
59 +
60 +
61 +<style scoped>
62 +.container {
63 + width: 100vw;
64 + height: 100vh;
65 + display: flex;
66 + flex-direction: column;
67 +}
68 +
69 +.flow-container {
70 + flex: 1;
71 + width: 100%;
72 + height: 100%;
73 +}
74 +</style>
1 <!-- 1 <!--
2 * @Date: 2025-03-10 14:37:31 2 * @Date: 2025-03-10 14:37:31
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-10 15:47:42 4 + * @LastEditTime: 2025-03-10 17:14:06
5 - * @FilePath: /logic-flow2/src/views/Home.vue 5 + * @FilePath: /logic-flow2/src/views/home.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div>插件</div> 9 <div>插件</div>
10 <el-button type="primary" @click="goTo('menu')">Menu</el-button> 10 <el-button type="primary" @click="goTo('menu')">Menu</el-button>
11 + <el-button type="primary" @click="goTo('DndPanel')">DndPanel</el-button>
12 + <el-button type="primary" @click="goTo('control')">control</el-button>
11 </template> 13 </template>
12 14
13 <script setup> 15 <script setup>
......
1 +<!--
2 + * @Date: 2025-03-10 16:52:35
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-03-10 16:58:14
5 + * @FilePath: /logic-flow2/src/views/temp.vue
6 + * @Description: 拖拽面板
7 +-->
8 +<template>
9 + <div class="container">
10 + <div ref="container" class="flow-container"></div>
11 + </div>
12 +</template>
13 +
14 +<script setup>
15 +import LogicFlow from '@logicflow/core';
16 +
17 +const container = ref(null);
18 +let lf = null;
19 +
20 +onMounted(() => {
21 + lf = new LogicFlow({
22 + container: container.value,
23 + grid: true,
24 + });
25 +
26 + lf.render({
27 + nodes: [
28 + { id: 'node1', type: 'rect', x: 200, y: 100 },
29 + { id: 'node2', type: 'circle', x: 400, y: 100 },
30 + ],
31 + edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }],
32 + });
33 +});
34 +</script>
35 +
36 +
37 +<style scoped>
38 +.container {
39 + width: 100vw;
40 + height: 100vh;
41 + display: flex;
42 + flex-direction: column;
43 +}
44 +
45 +.flow-container {
46 + flex: 1;
47 + width: 100%;
48 + height: 100%;
49 +}
50 +</style>