优化

package.json

@@ -13,6 +13,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@logicflow/core": "^2.2.0-alpha.0",
     "@logicflow/extension": "^2.2.0-alpha.0",
+    "@logicflow/layout": "^2.1.0-alpha.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "1.12.0",

src/assets/icons/AutoLayout.vue

@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765328920629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8750" width="256" height="256"><path d="M131.3 363.3c-19.2 47.3-28.9 97.3-28.9 148.7 0 51.3 9.7 101.3 28.9 148.7 7 17.2 15.1 33.8 24.3 49.7l15.8-49.1 42.8 13.8-39.8 123.8-42.8-13.9-80.9-26 13.8-42.8 52.3 16.8c-98-168.4-74.8-387.9 69.4-532.1C342.4 44.7 586.9 30.5 759.1 158.3l-32.2 32.2c-25.1-18-52.1-32.9-80.9-44.6-47.3-19.2-97.3-28.9-148.7-28.9-51.3 0-101.3 9.7-148.7 28.9-49 19.9-92.9 49.1-130.6 86.8s-66.9 81.7-86.7 130.6z m828.3-60.2l13.8-42.8-80.9-26-42.8-13.8-39.8 123.8 42.8 13.8 15-46.7c9.8 16.6 18.4 34 25.8 52.1 19.2 47.3 28.9 97.3 28.9 148.7 0 51.3-9.7 101.3-28.9 148.7-19.9 49-49.1 92.9-86.8 130.6C768.9 829 725 858.2 676 878.1c-47.3 19.2-97.3 28.9-148.7 28.9-51.3 0-101.3-9.7-148.7-28.9-28.8-11.7-55.9-26.6-80.9-44.6l-32.2 32.2c126.3 93.7 382.6 147.7 572.9-42.6 145.8-145.8 167.9-368.6 66.1-537.7l55.1 17.7zM474 241.2L295 730.4h64.8l50.5-148.2h195.3l54 148.2h70.3L539.6 241.2H474z m-45.9 288.3L479.8 386c11-30.9 19.4-62.1 25.4-93.4 6.9 26 17.9 59.9 32.8 101.5l48.2 135.5H428.1z" p-id="8751"></path></svg>
+</template>

src/views/tools/flow/index.vue

@@ -10,7 +10,8 @@
 <script setup>
 import {ref, onMounted, onUnmounted} from "vue"
 import LogicFlow from "@logicflow/core"
-import {MiniMap, Snapshot} from "@logicflow/extension"
+import {MiniMap, Snapshot, ProximityConnect} from "@logicflow/extension"
+import {Dagre} from "@logicflow/layout";
 import "@logicflow/core/lib/style/index.css"
 import "@logicflow/extension/lib/style/index.css"
 import leftPanel from "./left.vue"
@@ -53,7 +54,7 @@ function init() {
 		background: {
 			color: "#f7f8fa"
 		},
-		plugins: [MiniMap, Snapshot],
+		plugins: [MiniMap, Snapshot, ProximityConnect, Dagre],
 		pluginsOptions: {
 			miniMap: {
 				headerTitle: '小地图',
@@ -62,6 +63,10 @@ function init() {
 				isShowCloseIcon: true,
 				bottomPosition: 10,
 				rightPosition: 10
+			},
+			proximityConnect: {
+				enable: true,
+				type: 'anchor'
 			}
 		}
 	})

src/views/tools/flow/menu.vue

@@ -15,6 +15,9 @@
 		<el-icon size="18" title="位置还原" @click="lf.resetTranslate()">
 			<component :is="'el-icon-position'"/>
 		</el-icon>
+		<el-icon size="18" title="自动布线" @click="layout">
+			<component :is="'pi-icon-auto-layout'"/>
+		</el-icon>
 		<el-icon :class="{disabled: !canUndo}" size="18" title="上一步" @click="canUndo && lf.undo()">
 			<component :is="'el-icon-back'"/>
 		</el-icon>
@@ -105,6 +108,18 @@ function map() {
 function download() {
 	props.lf.getSnapshot("下载-" + (Date.now()), {backgroundColor: "#FFFFFF"})
 }
+
+function layout() {
+	const dagre = props.lf.extension.dagre as any
+	// 先应用布局
+	dagre.layout({
+		nodesep: 50,
+		ranksep: 80,
+		isDefaultAnchor: true
+	})
+	// 然后适配视图
+	props.lf.fitView()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/tools/flow/model/CustomLine.ts

@@ -7,16 +7,15 @@ export const CUSTOM_LINE = {
 // 自定义连线模型
 export class CustomLineModel extends PolylineEdgeModel {
 	initEdgeData(data) {
-		super.initEdgeData(data);
+		super.initEdgeData(data)
-
 		// 禁止编辑标签
-		this.text.editable = false;
+		this.text.editable = false
-		this.text.draggable = false;
+		this.text.draggable = false
 	}
 
 	getEdgeStyle() {
-		const style = super.getEdgeStyle();
+		const style = super.getEdgeStyle()
-		const {isSelected} = this;
+		const {isSelected} = this
 
 		if (isSelected) {
 			style.strokeWidth = 3
@@ -25,7 +24,7 @@ export class CustomLineModel extends PolylineEdgeModel {
 			style.strokeWidth = 2
 			style.stroke = "#B1B3B8"
 		}
-		return style;
+		return style
 	}
 
 	setAttributes() {