From 8d37fc0fe38c9f3bf632d54edf7e454b38aede71 Mon Sep 17 00:00:00 2001
From: Vargha Csongor <Culisa1023@gmail.com>
Date: Fri, 27 Jun 2025 09:12:25 +0200
Subject: [PATCH] fix edge render

---
 apps/app/src/lib/graph/FamilyEdge.svelte | 209 ++++++++++++-----------
 1 file changed, 114 insertions(+), 95 deletions(-)

diff --git a/apps/app/src/lib/graph/FamilyEdge.svelte b/apps/app/src/lib/graph/FamilyEdge.svelte
index 0fba3dd..33885cb 100644
--- a/apps/app/src/lib/graph/FamilyEdge.svelte
+++ b/apps/app/src/lib/graph/FamilyEdge.svelte
@@ -1,98 +1,117 @@
 <script lang="ts">
-	import type { components } from '$lib/api/api.gen.ts';
-	import { child, spouse, parent, sibling } from '$lib/paraglide/messages';
-	import { getBezierPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
-
-	let {
-		sourceX,
-		sourceY,
-		source,
-		sourcePosition,
-		target,
-		targetX,
-		targetY,
-		targetPosition,
-		markerEnd,
-		style,
-		data
-	}: EdgeProps = $props();
-
-	let edgeType = (
-		data as components['schemas']['FamilyRelationship'] & { type: string }
-	).type.toLowerCase();
-	let edgeLabel: string = $state(edgeType);
-	let edgeColor: string = $state('stroke: gray;');
-	let srcPos;
-	let tgtPos;
-	if (edgeType === 'spouse') {
-		edgeColor = 'stroke: red;';
-		edgeLabel = spouse();
-		if (sourceX < targetX) {
-			tgtPos = Position.Right;
-			srcPos = Position.Left;
-		} else {
-			tgtPos = Position.Left;
-			srcPos = Position.Right;
-		}
-	} else if (edgeType === 'child') {
-		edgeColor = 'stroke: blue;';
-		edgeLabel = child();
-		if (sourceY < targetY) {
-			tgtPos = Position.Bottom;
-			srcPos = Position.Top;
-		} else {
-			tgtPos = Position.Bottom;
-			srcPos = Position.Top;
-		}
-	} else if (edgeType === 'parent') {
-		edgeColor = 'stroke: green;';
-		edgeLabel = parent();
-		if (sourceY < targetY) {
-			tgtPos = Position.Bottom;
-			srcPos = Position.Top;
-		} else {
-			tgtPos = Position.Bottom;
-			srcPos = Position.Top;
-		}
-	} else if (edgeType === 'sibling') {
-		edgeColor = 'stroke: brown;';
-		edgeLabel = sibling();
-		if (sourceX < targetX) {
-			tgtPos = Position.Right;
-			srcPos = Position.Left;
-		} else {
-			tgtPos = Position.Left;
-			srcPos = Position.Right;
-		}
-	} else {
-		edgeColor = 'stroke: gray;';
-		edgeLabel = edgeType;
-	}
-
-	let [path, labelX, labelY] = $derived(
-		getBezierPath({
-			sourceX,
-			sourceY,
-			sourcePosition: srcPos,
-			targetX,
-			targetY,
-			targetPosition: tgtPos
-		})
-	);
-
-	edgeColor = edgeColor + 'stroke-opacity:unset; stroke-width=20;' + (style ?? '');
-
-	const onEdgeClick = () => {
-		window.dispatchEvent(
-			new CustomEvent('edge-click', {
-				detail: {
-					start: source,
-					end: target,
-					data: data as components['schemas']['FamilyRelationship'] & { type: string }
-				}
-			})
-		);
-	};
+    import type { components } from '$lib/api/api.gen.ts';
+    import { child, spouse, parent, sibling } from '$lib/paraglide/messages';
+    import { getSmoothStepPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
+    
+    let {
+        sourceX,
+        sourceY,
+        source,
+        sourcePosition,
+        target,
+        targetX,
+        targetY,
+        targetPosition,
+        markerEnd,
+        style,
+        data
+    }: EdgeProps = $props();
+    
+    let edgeType = (
+        data as components['schemas']['FamilyRelationship'] & { type: string }
+    ).type.toLowerCase();
+    
+    let edgeLabel: string = $state(edgeType);
+    let edgeColor: string = $state('stroke: gray;');
+    let srcPos: Position = $state(sourcePosition || Position.Bottom);
+    let tgtPos: Position = $state(targetPosition || Position.Top);
+    
+    // Determine edge styling and positioning based on relationship type
+    if (edgeType === 'spouse') {
+        edgeColor = 'stroke: red;';
+        edgeLabel = spouse();
+        // Horizontal connection for spouses
+        if (sourceX < targetX) {
+            srcPos = Position.Right;
+            tgtPos = Position.Left;
+        } else {
+            srcPos = Position.Left;
+            tgtPos = Position.Right;
+        }
+    } else if (edgeType === 'child') {
+        edgeColor = 'stroke: blue;';
+        edgeLabel = child();
+        // Child relationship: from parent (top) to child (bottom)
+        srcPos = Position.Bottom;
+        tgtPos = Position.Top;
+    } else if (edgeType === 'parent') {
+        edgeColor = 'stroke: blue;';
+        edgeLabel = parent();
+        // Parent relationship: from child (top) to parent (bottom)
+        // Note: This might be the inverse of child depending on your data structure
+        srcPos = Position.Top;
+        tgtPos = Position.Bottom;
+    } else if (edgeType === 'sibling') {
+        edgeColor = 'stroke: orange;';
+        edgeLabel = sibling();
+        // Horizontal connection for siblings, but slightly different approach
+        const yDiff = Math.abs(sourceY - targetY);
+        const xDiff = Math.abs(sourceX - targetX);
+        
+        if (xDiff > yDiff) {
+            // More horizontal separation - use left/right
+            if (sourceX < targetX) {
+                srcPos = Position.Right;
+                tgtPos = Position.Left;
+            } else {
+                srcPos = Position.Left;
+                tgtPos = Position.Right;
+            }
+        } else {
+            // More vertical separation - use top/bottom
+            if (sourceY < targetY) {
+                srcPos = Position.Bottom;
+                tgtPos = Position.Top;
+            } else {
+                srcPos = Position.Top;
+                tgtPos = Position.Bottom;
+            }
+        }
+    } else {
+        edgeColor = 'stroke: gray;';
+        edgeLabel = edgeType;
+        // Keep original positions for unknown types
+        srcPos = sourcePosition || Position.Bottom;
+        tgtPos = targetPosition || Position.Top;
+    }
+    
+    let [path, labelX, labelY] = $derived(
+        getSmoothStepPath({
+            sourceX,
+            sourceY,
+            sourcePosition: srcPos,
+            targetX,
+            targetY,
+            targetPosition: tgtPos,
+            borderRadius: 20, // Add some rounding to make paths smoother
+            offset: 20 // Add offset to avoid overlapping with nodes
+        })
+    );
+    
+    // Fix the style string formatting
+    const finalStyle = `${edgeColor} stroke-width: 3; stroke-opacity: 0.8; ${style ?? ''}`;
+    
+    const onEdgeClick = () => {
+        window.dispatchEvent(
+            new CustomEvent('edge-click', {
+                detail: {
+                    start: source,
+                    end: target,
+                    data: data as components['schemas']['FamilyRelationship'] & { type: string }
+                }
+            })
+        );
+    };
 </script>
 
-<BaseEdge {path} {labelX} {labelY} {markerEnd} style={edgeColor} onclick={onEdgeClick} />
+<BaseEdge {path} {labelX} {labelY} {markerEnd} style={finalStyle} onclick={onEdgeClick} />
\ No newline at end of file