升级logicflow 2

admin/.vscode/settings.json

@@ -13,6 +13,7 @@
         "btns",
         "daterange",
         "datetimerange",
+        "dbclick",
         "echarts",
         "execa",
         "highlightjs",

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",

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'

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)
     })
 }

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) {
             // 引入框选插件