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

add edge cosmetics

Browse Source
This commit is contained in:
Vargha Csongor
2025-04-30 11:28:14 +02:00
parent 9c08b39800
commit 6de063a06d
1 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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