vcscsvcscs/GenerationsHeritage
1
0
Fork 0
mirror of https://github.com/vcscsvcscs/GenerationsHeritage.git synced 2025-08-12 13:59:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix edge render

Browse Source
This commit is contained in:
Vargha Csongor
2025-06-27 09:12:25 +02:00
parent f801e8893a
commit 8d37fc0fe3
1 changed files with 114 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
apps/app/src/lib/graph/FamilyEdge.svelte
View File

@@ -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} />