-
-
+
+
+
+
{{ props.data.id }}
diff --git a/src/views/home/versionTree/tree/view2/tools/tools.js b/src/views/home/versionTree/tree/view2/tools/tools.js
index d28814d..e758cd0 100644
--- a/src/views/home/versionTree/tree/view2/tools/tools.js
+++ b/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 }
+}
\ No newline at end of file
diff --git a/src/views/home/versionTree/tree/view2/tools/versionsData.js b/src/views/home/versionTree/tree/view2/tools/versionsData.js
index 63d043f..5050f32 100644
--- a/src/views/home/versionTree/tree/view2/tools/versionsData.js
+++ b/src/views/home/versionTree/tree/view2/tools/versionsData.js
@@ -4,27 +4,29 @@ export const versionsList = [
name:'V1',
child:[
{
- id: '1-1',
- name:'V1-1',
- child:[
- {
- id: '1-1-1',
- name:'V1-1-1',
- }
- ]
- },{
+ id: '1-1',
+ name:'V1-1',
+ child:[
+ {
+ id: '1-1-1',
+ name:'V1-1-1',
+ }
+ ]
+ },
+ {
id: '1-2',
name:'V1-2',
child:[
- {
- id: '1-2-1',
- name:'V1-2-1',
- },{
- id: '1-2-2',
- name:'V1-2-2',
- }
+ {
+ id: '1-2-1',
+ name:'V1-2-1',
+ },{
+ id: '1-2-2',
+ name:'V1-2-2',
+ }
]
- },{
+ },
+ {
id: '1-2',
name:'V1-2',
child:[
@@ -51,7 +53,8 @@ export const versionsList = [
]
},
]
- },{
+ },
+ {
id: '1-3',
name:'V1-3',
}