fix(fe): customEdge auto layout logic (#573)

Co-authored-by: Hu Yueh-Wei <[email protected]>
TEN-framework · Jan 20, 2025 · 34e2672 · 34e2672
1 parent c567ae5
commit 34e2672
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 17 deletions.
diff --git a/core/src/ten_manager/designer_frontend/src/flow/CustomEdge.tsx b/core/src/ten_manager/designer_frontend/src/flow/CustomEdge.tsx
@@ -6,7 +6,6 @@
 //
 import {
   type EdgeProps,
-  getBezierPath,
   type Edge,
   BaseEdge,
   getEdgeCenter,
@@ -27,27 +26,44 @@ export type CustomEdgeType = Edge<
   "customEdge"
 >;
 
+const OFFSET_Y = -200;
+
+const getSpecialPath = (
+  {
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  }: {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+  },
+  offset: number
+) => {
+  const centerX = (sourceX + targetX) / 2;
+  const centerY = (sourceY + targetY) / 2;
+
+  // eslint-disable-next-line max-len
+  return `M ${sourceX} ${sourceY} Q ${centerX} ${centerY + offset} ${targetX} ${targetY}`;
+};
+
 export function CustomEdge({
   sourceX,
   sourceY,
   targetX,
   targetY,
-  sourcePosition,
-  targetPosition,
   id,
   style,
   selected,
   source,
   target,
 }: EdgeProps<CustomEdgeType>) {
-  const [edgePath] = getBezierPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-  });
+  const edgePath = getSpecialPath(
+    { sourceX, sourceY, targetX, targetY },
+    sourceX < targetX ? 0 : OFFSET_Y
+  );
   const [edgeCenterX, edgeCenterY] = getEdgeCenter({
     sourceX,
     sourceY,
@@ -87,7 +103,7 @@ export function CustomEdge({
         width={80}
         height={60}
         x={edgeCenterX - 40}
-        y={edgeCenterY - 30}
+        y={edgeCenterY + (sourceX < targetX ? 0 : OFFSET_Y) / 2 - 30}
         className="pointer-events-all nodrag nopan"
         requiredExtensions="http://www.w3.org/1999/xhtml"
       >

diff --git a/core/src/ten_manager/designer_frontend/src/flow/graph.ts b/core/src/ten_manager/designer_frontend/src/flow/graph.ts
@@ -18,33 +18,75 @@ import {
 } from "@/types/graphs";
 
 const NODE_WIDTH = 172;
-const NODE_HEIGHT = 36;
+const NODE_HEIGHT = 48;
 
 export const getLayoutedElements = (
   nodes: CustomNodeType[],
-  edges: CustomEdgeType[],
-  direction = "TB"
+  edges: CustomEdgeType[]
 ) => {
   const dagreGraph = new dagre.graphlib.Graph();
   dagreGraph.setDefaultEdgeLabel(() => ({}));
-  dagreGraph.setGraph({ rankdir: direction });
 
+  // Find all bidirectional pairs.
+  const nodePairs = new Map<string, Set<string>>();
+  edges.forEach((edge) => {
+    const hasReverse = edges.some(
+      (e) => e.source === edge.target && e.target === edge.source
+    );
+    if (hasReverse) {
+      if (!nodePairs.has(edge.source)) {
+        nodePairs.set(edge.source, new Set());
+      }
+      nodePairs.get(edge.source)?.add(edge.target);
+    }
+  });
+
+  // Set graph to flow top to bottom-right.
+  dagreGraph.setGraph({
+    rankdir: "TB",
+    nodesep: NODE_WIDTH * 2,
+    ranksep: NODE_HEIGHT * 2,
+  });
+
+  // Add nodes to graph.
   nodes.forEach((node) => {
     dagreGraph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
   });
 
+  // Process pairs in order of first appearance.
+  const processedPairs = new Set<string>();
+  let currentX = 0;
+  const nodeXPositions = new Map<string, number>();
+
   edges.forEach((edge) => {
     dagreGraph.setEdge(edge.source, edge.target);
+
+    // Check if this forms a pair and hasn't been processed.
+    const pairKey = [edge.source, edge.target].sort().join("-");
+    if (
+      nodePairs.has(edge.source) &&
+      nodePairs.get(edge.source)?.has(edge.target) &&
+      !processedPairs.has(pairKey)
+    ) {
+      processedPairs.add(pairKey);
+      nodeXPositions.set(edge.source, currentX);
+      nodeXPositions.set(edge.target, currentX + NODE_WIDTH * 2);
+      currentX += NODE_WIDTH * 4;
+    }
   });
 
   dagre.layout(dagreGraph);
 
   const layoutedNodes = nodes.map((node) => {
     const nodeWithPosition = dagreGraph.node(node.id);
+    const xPos = nodeXPositions.has(node.id)
+      ? nodeXPositions.get(node.id)
+      : nodeWithPosition.x;
+
     return {
       ...node,
       position: {
-        x: nodeWithPosition.x - NODE_WIDTH / 2,
+        x: (xPos ?? nodeWithPosition.x) - NODE_WIDTH / 2,
         y: nodeWithPosition.y - NODE_HEIGHT / 2,
       },
     };