From 2891e9be92b7525a5c7ee1dfda3595201261d2ab Mon Sep 17 00:00:00 2001
From: xiangheng <11675084@qq.com>
Date: Fri, 25 Oct 2024 16:27:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7logicflow=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/.vscode/settings.json                   |  1 +
 admin/package.json                            |  6 ++--
 .../flow/flowEdit/PropertyPanel/UserTask.vue  |  2 +-
 admin/src/components/flow/flowEdit/index.vue  | 29 +++++++++++++----
 admin/src/components/flow/flowEdit/view.vue   | 32 +++----------------
 5 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/admin/.vscode/settings.json b/admin/.vscode/settings.json
index 3713d23..f70f220 100644
--- a/admin/.vscode/settings.json
+++ b/admin/.vscode/settings.json
@@ -13,6 +13,7 @@
         "btns",
         "daterange",
         "datetimerange",
+        "dbclick",
         "echarts",
         "execa",
         "highlightjs",
diff --git a/admin/package.json b/admin/package.json
index 4125471..c26a34d 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -16,8 +16,8 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
         "@highlightjs/vue-plugin": "^2.1.0",
-        "@logicflow/core": "^1.2.28",
-        "@logicflow/extension": "^1.2.28",
+        "@logicflow/core": "^2.0.6",
+        "@logicflow/extension": "^2.0.10",
         "@vueuse/core": "^10.11.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
@@ -33,7 +33,7 @@
         "pinia": "^2.2.1",
         "query-string": "^9.1.0",
         "vform3-builds": "^3.0.10",
-        "vue": "^3.5.8",
+        "vue": "^3.5.12",
         "vue-clipboard3": "^2.0.0",
         "vue-echarts": "^7.0.1",
         "vue-router": "^4.4.5",
diff --git a/admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue b/admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue
index a93725d..9e413ca 100644
--- a/admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue
+++ b/admin/src/components/flow/flowEdit/PropertyPanel/UserTask.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { adminListAll } from '@/api/perms/admin'
 import { deptAll } from '@/api/org/department'
 import { postAll } from '@/api/org/post'
diff --git a/admin/src/components/flow/flowEdit/index.vue b/admin/src/components/flow/flowEdit/index.vue
index 6dec4a5..17880a6 100644
--- a/admin/src/components/flow/flowEdit/index.vue
+++ b/admin/src/components/flow/flowEdit/index.vue
@@ -25,10 +25,13 @@
 // Importing necessary functions and components
 import { ref, onMounted } from 'vue'
 import LogicFlow from '@logicflow/core'
-import { SelectionSelect, Menu, BpmnElement } from '@logicflow/extension'
+import { SelectionSelect, Menu, BpmnElement, MiniMap } from '@logicflow/extension'
 
-import '@logicflow/core/dist/style/index.css'
+// import '@logicflow/core/dist/style/index.css'
+// import '@logicflow/extension/lib/style/index.css'
+import '@logicflow/core/lib/style/index.css'
 import '@logicflow/extension/lib/style/index.css'
+
 import DiagramToolbar from './DiagramToolbar.vue'
 import DiagramSidebar from './DiagramSidebar.vue'
 import PropertyPanel from './PropertyPanel/index.vue'
@@ -70,12 +73,15 @@ function initLogicFlow(data) {
     LogicFlow.use(SelectionSelect)
     LogicFlow.use(Menu)
     LogicFlow.use(BpmnElement)
-
+    LogicFlow.use(MiniMap)
     // Creating a new LogicFlow instance
     const logicFlowInstance = new LogicFlow({
         container: diagramRef.value, // Setting the container where LogicFlow will be rendered
         overlapMode: 1,
+        // allowResize: true,
         autoWrap: true,
+        adjustEdge: true,
+        adjustEdgeStartAndEnd: true,
         metaKeyMultipleSelected: true,
         keyboard: {
             enabled: true
@@ -99,14 +105,25 @@ function initLogicFlow(data) {
 
     // Setting default edge type and rendering initial data
     logicFlowInstance.setDefaultEdgeType('pro-polyline')
+    logicFlowInstance.extension.menu.addMenuConfig({
+        nodeMenu: [
+            {
+                text: '属性配置',
+                callback(node) {
+                    // alert('分享成功！')
+                    PropertyPanelRef.value.open(node, props.fieldList)
+                }
+            }
+        ]
+    })
     logicFlowInstance.render(data)
-
+    logicFlowInstance.extension.miniMap.show()
     // Assigning the LogicFlow instance to the 'lf' ref
     lf.value = logicFlowInstance
 
     // Event listener for node clicks
-    lf.value.on('node:click', (e) => {
-        console.log('Click on node', e.data, props.fieldList)
+    lf.value.on('node:dbclick', (e) => {
+        console.log('dbclick on node', e.data, props.fieldList)
         PropertyPanelRef.value.open(e.data, props.fieldList)
     })
 }
diff --git a/admin/src/components/flow/flowEdit/view.vue b/admin/src/components/flow/flowEdit/view.vue
index cae515a..6d580a1 100644
--- a/admin/src/components/flow/flowEdit/view.vue
+++ b/admin/src/components/flow/flowEdit/view.vue
@@ -13,8 +13,8 @@
 <script>
 import LogicFlow from '@logicflow/core'
 import { BpmnElement } from '@logicflow/extension'
-// import { SelectionSelect, Menu } from "@logicflow/extension";
-import '@logicflow/core/dist/style/index.css'
+
+import '@logicflow/core/lib/style/index.css'
 import '@logicflow/extension/lib/style/index.css'
 
 import { registerCustomElement } from './node'
@@ -27,36 +27,14 @@ export default {
             lf: null,
             activeNodes: [],
             activeEdges: [],
-            properties: {},
-
-            timer: null,
-            time: 60000
+            properties: {}
         }
     },
-    watch: {
-        // appStore: {
-        //   handler() {
-        //     if (this.lf) {
-        //       // this.lf.graphModel.resize();
-        //       // this.lf.fitView();
-        //       // 侧栏有动画，所以要加延时
-        //       setTimeout(() => {
-        //         this.lf.graphModel.resize();
-        //         this.lf.fitView();
-        //       }, 500);
-        //     }
-        //   },
-        //   deep: true,
-        // },
-    },
+
     mounted() {
         // this.initLogicFlow(exportInfo);
     },
-    beforeUnmount() {
-        if (this.timer) {
-            clearInterval(this.timer)
-        }
-    },
+
     methods: {
         initLogicFlow(data) {
             // 引入框选插件