上传字体包 版本树页面

src/views/home/versionTree/tree/view2/tools/tools.js

@@ -8,50 +8,79 @@ import { ref } from 'vue'
  * It uses the `dagre` library to calculate the layout of the nodes and edges.
  */
 export function useLayout() {
-  const { findNode } = useVueFlow()
+	const { findNode } = useVueFlow()
 
-  const graph = ref(new dagre.graphlib.Graph())
+	const graph = ref(new dagre.graphlib.Graph())
 
-  const previousDirection = ref('LR')
+	const previousDirection = ref('LR')
 
-  function layout(nodes, edges, direction) {
-    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
-    const dagreGraph = new dagre.graphlib.Graph()
+	function layout(nodes, edges, direction = 'LR') {
+		// 验证和规范化方向参数
+		const validDirections = ['TB', 'BT', 'LR', 'RL']
+		const layoutDirection = validDirections.includes(direction) ? direction : 'LR'
 
-    graph.value = dagreGraph
+		// we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+		const dagreGraph = new dagre.graphlib.Graph()
 
-    dagreGraph.setDefaultEdgeLabel(() => ({}))
+		graph.value = dagreGraph
 
-    const isHorizontal = direction === 'LR'
-    dagreGraph.setGraph({ rankdir: direction })
+		dagreGraph.setDefaultEdgeLabel(() => ({}))
 
-    previousDirection.value = direction
+		// 根据方向判断是否为水平布局
+		const isHorizontal = layoutDirection === 'LR' || layoutDirection === 'RL'
+		dagreGraph.setGraph({ rankdir: layoutDirection })
 
-    for (const node of nodes) {
-      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
-      const graphNode = findNode(node.id)
+		previousDirection.value = layoutDirection
 
-      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
-    }
+		for (const node of nodes) {
+			// if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+			const graphNode = findNode(node.id)
 
-    for (const edge of edges) {
-      dagreGraph.setEdge(edge.source, edge.target)
-    }
+			dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
+		}
 
-    dagre.layout(dagreGraph)
+		for (const edge of edges) {
+			dagreGraph.setEdge(edge.source, edge.target)
+		}
 
-    // set nodes with updated positions
-    return nodes.map((node) => {
-      const nodeWithPosition = dagreGraph.node(node.id)
+		dagre.layout(dagreGraph)
 
-      return {
-        ...node,
-        targetPosition: isHorizontal ? Position.Left : Position.Top,
-        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
-        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
-      }
-    })
-  }
+		// set nodes with updated positions
+		return nodes.map((node) => {
+			const nodeWithPosition = dagreGraph.node(node.id)
 
-  return { graph, layout, previousDirection }
-}
+			// 根据方向动态计算连接点位置
+			let targetPosition, sourcePosition
+			switch (layoutDirection) {
+				case 'BT': // 从上到下 (Top to Bottom)
+					targetPosition = Position.Bottom   // 目标节点连接点在下方
+					sourcePosition = Position.Top // 源节点连接点在上方
+					break
+				case 'TB': // 从下到上 (Bottom to Top)
+					targetPosition = Position.Top   // 目标节点连接点在上方
+					sourcePosition = Position.Bottom // 源节点连接点在下方
+					break
+				case 'LR': // 从左到右 (Left to Right)
+					targetPosition = Position.Left
+					sourcePosition = Position.Right
+					break
+				case 'RL': // 从右到左 (Right to Left)
+					targetPosition = Position.Right
+					sourcePosition = Position.Left
+					break
+				default:
+					targetPosition = Position.Top
+					sourcePosition = Position.Bottom
+			}
+
+			return {
+				...node,
+				targetPosition,
+				sourcePosition,
+				position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+			}
+		})
+	}
+
+	return { graph, layout, previousDirection }
+}