@principal-ai/principal-view-react 0.6.11 → 0.6.13

package/src/stories/GraphRenderer.stories.tsx

@@ -577,6 +577,7 @@ const EditableTemplate = () => {
         width={800}
         height={500}
         editable={true}
+        autoUpdateEdgeSides={true}
         onPendingChangesChange={setHasChanges}
       />
     </div>

package/src/utils/graphConverter.ts

@@ -52,6 +52,23 @@ export interface EdgeStateWithHandles extends EdgeState {
   targetHandle?: string;
 }
 
+/**
+ * Map canvas side to source handle ID
+ * Source handles use '-out' suffix
+ */
+function sideToSourceHandle(side?: string): string | undefined {
+  if (!side) return undefined;
+  return `${side}-out`;
+}
+
+/**
+ * Map canvas side to target handle ID
+ * Target handles use the side name directly
+ */
+function sideToTargetHandle(side?: string): string | undefined {
+  return side;
+}
+
 /**
  * Convert our EdgeState to xyflow Edge format
  */
@@ -71,6 +88,12 @@ export function convertToXYFlowEdges(
     const hasViolations = violations.some((v) => v.context?.edgeId === edge.id);
     const edgeWithHandles = edge as EdgeStateWithHandles;
 
+    // Get handle IDs from edge data (fromSide/toSide) or explicit handles
+    const fromSide = edge.data?.fromSide as string | undefined;
+    const toSide = edge.data?.toSide as string | undefined;
+    const sourceHandle = edgeWithHandles.sourceHandle || sideToSourceHandle(fromSide);
+    const targetHandle = edgeWithHandles.targetHandle || sideToTargetHandle(toSide);
+
     // Add arrow marker if edge type is directed
     // Color priority: edge data color > type definition color > default
     const edgeColor = edge.data?.color as string | undefined;
@@ -88,8 +111,8 @@ export function convertToXYFlowEdges(
       id: edge.id,
       source: edge.from,
       target: edge.to,
-      sourceHandle: edgeWithHandles.sourceHandle,
-      targetHandle: edgeWithHandles.targetHandle,
+      sourceHandle,
+      targetHandle,
       type: 'custom',
       animated: typeDefinition?.style === 'animated',
       markerEnd,
@@ -97,6 +120,7 @@ export function convertToXYFlowEdges(
         typeDefinition,
         hasViolations,
         data: edge.data,
+        edgeType: edge.type,
       },
     };
   });
@@ -234,3 +258,75 @@ function applyCircularLayout<T extends Record<string, unknown>>(nodes: Node<T>[]
     };
   });
 }
+
+/**
+ * Check if there is a cycle between two nodes (i.e., a path from target back to source).
+ * Returns true if adding an edge from `from` to `to` would complete a cycle.
+ */
+export function hasCycleBetweenNodes(
+  from: string,
+  to: string,
+  edges: Array<{ from: string; to: string }>
+): boolean {
+  // Check if there's already a path from `to` back to `from`
+  // using BFS/DFS from `to` node
+  const visited = new Set<string>();
+  const queue = [to];
+
+  while (queue.length > 0) {
+    const current = queue.shift()!;
+    if (current === from) {
+      return true; // Found a path back, there would be a cycle
+    }
+    if (visited.has(current)) {
+      continue;
+    }
+    visited.add(current);
+
+    // Find all outgoing edges from current node
+    for (const edge of edges) {
+      if (edge.from === current && !visited.has(edge.to)) {
+        queue.push(edge.to);
+      }
+    }
+  }
+
+  return false;
+}
+
+export type CanvasSide = 'top' | 'right' | 'bottom' | 'left';
+
+/**
+ * Compute optimal edge sides based on relative node positions.
+ * Returns the best fromSide and toSide for connecting two nodes.
+ */
+export function computeOptimalEdgeSides(
+  fromPosition: { x: number; y: number },
+  toPosition: { x: number; y: number }
+): { fromSide: CanvasSide; toSide: CanvasSide } {
+  const dx = toPosition.x - fromPosition.x;
+  const dy = toPosition.y - fromPosition.y;
+
+  // Determine primary direction based on which axis has larger delta
+  const isHorizontalDominant = Math.abs(dx) > Math.abs(dy);
+
+  if (isHorizontalDominant) {
+    // Horizontal connection
+    if (dx > 0) {
+      // Target is to the right of source
+      return { fromSide: 'right', toSide: 'left' };
+    } else {
+      // Target is to the left of source
+      return { fromSide: 'left', toSide: 'right' };
+    }
+  } else {
+    // Vertical connection
+    if (dy > 0) {
+      // Target is below source
+      return { fromSide: 'bottom', toSide: 'top' };
+    } else {
+      // Target is above source
+      return { fromSide: 'top', toSide: 'bottom' };
+    }
+  }
+}