From 6de063a06d8c4a3cdc0bb18a0000a82d70d5973a Mon Sep 17 00:00:00 2001
From: Vargha Csongor <Culisa1023@gmail.com>
Date: Wed, 30 Apr 2025 11:28:14 +0200
Subject: [PATCH] add edge cosmetics

---
 apps/app/src/lib/graph/FamilyEdge.svelte | 88 ++++++++++++++++--------
 1 file changed, 61 insertions(+), 27 deletions(-)

diff --git a/apps/app/src/lib/graph/FamilyEdge.svelte b/apps/app/src/lib/graph/FamilyEdge.svelte
index 3df4420..525a82c 100644
--- a/apps/app/src/lib/graph/FamilyEdge.svelte
+++ b/apps/app/src/lib/graph/FamilyEdge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { components } from '$lib/api/api.gen.ts';
 	import { child, spouse, parent, sibling } from '$lib/paraglide/messages';
-	import { getSmoothStepPath, BaseEdge, type EdgeProps } from '@xyflow/svelte';
+	import { getSmoothStepPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
 
 	let {
 		sourceX,
@@ -17,17 +17,73 @@
 		data
 	}: EdgeProps = $props();
 
-	let [edgePath, labelX, labelY] = $derived(
+
+	let edgeType = (
+		data as components['schemas']['FamilyRelationship'] & { type: string }
+	).type.toLowerCase();
+	console.log('edgeType', edgeType);
+	let edgeLabel: string = $state(edgeType);
+	let edgeColor: string;
+	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(
 		getSmoothStepPath({
 			sourceX,
 			sourceY,
-			sourcePosition,
+			sourcePosition: srcPos,
 			targetX,
 			targetY,
-			targetPosition
+			targetPosition: tgtPos
 		})
 	);
 
+	edgeColor = edgeColor +'stroke-opacity:unset; stroke-width=20;' +(style ?? '');
+
 	const onEdgeClick = () => {
 		window.dispatchEvent(
 			new CustomEvent('edge-click', {
@@ -39,28 +95,6 @@
 			})
 		);
 	};
-
-	let edgeType = (
-		data as components['schemas']['FamilyRelationship'] & { type: string }
-	).type.toLowerCase();
-	let edgeLabel: string = $state(edgeType);
-	let edgeColor: string;
-	if (edgeType === 'spouse') {
-		edgeColor = 'stroke: red;';
-		edgeLabel = spouse();
-	} else if (edgeType === 'child') {
-		edgeColor = 'stroke: blue;';
-		edgeLabel = child();
-	} else if (edgeType === 'parent') {
-		edgeColor = 'stroke: green;';
-		edgeLabel = parent();
-	} else if (edgeType === 'sibling') {
-		edgeColor = 'stroke: brown;';
-		edgeLabel = sibling();
-	} else {
-		edgeColor = 'stroke: gray;';
-		edgeLabel = edgeType;
-	}
 </script>
 
-<BaseEdge path={edgePath} {markerEnd} {style} onclick={onEdgeClick}/>
+<BaseEdge {path} {labelX} {labelY} {markerEnd} style={edgeColor} onclick={onEdgeClick}/>