From e0c672657ac633de3e7ad79d6108cd43f15c9677 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Thu, 14 May 2026 15:56:34 -0700
Subject: [PATCH] =?UTF-8?q?feat(FN-4539):=20complete=20Step=201=20?=
 =?UTF-8?q?=E2=80=94=20add=20layout=20orientation=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fusion-Task-Id: FN-4539
Fusion-Task-Lineage: 90c37e7c-0691-4f15-80d6-e95bc6502e76
---
 .../src/layout.ts                              | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/plugins/fusion-plugin-dependency-graph/src/layout.ts b/plugins/fusion-plugin-dependency-graph/src/layout.ts
index f352d5d18..d8a09c2f7 100644
--- a/plugins/fusion-plugin-dependency-graph/src/layout.ts
+++ b/plugins/fusion-plugin-dependency-graph/src/layout.ts
@@ -5,6 +5,7 @@ export interface LayoutOptions {
   nodeHeight?: number;
   horizontalGap?: number;
   verticalGap?: number;
+  orientation?: "vertical" | "horizontal";
 }
 
 const DEFAULT_LAYOUT_OPTIONS: Required<LayoutOptions> = {
@@ -12,6 +13,7 @@ const DEFAULT_LAYOUT_OPTIONS: Required<LayoutOptions> = {
   nodeHeight: 100,
   horizontalGap: 40,
   verticalGap: 80,
+  orientation: "vertical",
 };
 
 export function computeAutoLayout(
@@ -77,11 +79,21 @@ export function computeAutoLayout(
   for (const depth of sortedDepths) {
     const layer = layers.get(depth) ?? [];
     layer.sort();
-    const layerWidth = layer.length * settings.nodeWidth + Math.max(0, layer.length - 1) * settings.horizontalGap;
-    const startX = -layerWidth / 2;
+    const isHorizontal = settings.orientation === "horizontal";
+    const layerSpan =
+      layer.length * (isHorizontal ? settings.nodeHeight : settings.nodeWidth) +
+      Math.max(0, layer.length - 1) * (isHorizontal ? settings.verticalGap : settings.horizontalGap);
+    const startOffset = -layerSpan / 2;
 
     layer.forEach((id, index) => {
-      const x = startX + index * (settings.nodeWidth + settings.horizontalGap);
+      if (isHorizontal) {
+        const x = depth * (settings.nodeWidth + settings.horizontalGap);
+        const y = startOffset + index * (settings.nodeHeight + settings.verticalGap);
+        positions.set(id, { x, y });
+        return;
+      }
+
+      const x = startOffset + index * (settings.nodeWidth + settings.horizontalGap);
       const y = depth * (settings.nodeHeight + settings.verticalGap);
       positions.set(id, { x, y });
     });