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

use a helper string as anode id and use data.id where it is required

Browse Source
This commit is contained in:
Vargha Csongor
2025-04-30 12:53:27 +02:00
parent 37d54f3873
commit 5cdaa03636
5 changed files with 36 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<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, Position } from '@xyflow/svelte';
import { getBezierPath, BaseEdge, type EdgeProps, Position } from '@xyflow/svelte';
let {
sourceX,
sourceY,
@@ -72,7 +72,7 @@
}
let [path, labelX, labelY] = $derived(
getSmoothStepPath({
getBezierPath({
sourceX,
sourceY,
sourcePosition: srcPos,

7
apps/app/src/lib/graph/layout.ts
View File

@@ -15,7 +15,6 @@ export class FamilyTree extends dagre.graphlib.Graph {
nodeHeight: number,
direction = 'TB'
): Layout {
const isHorizontal = direction === 'LR';
this.setGraph({ rankdir: direction });
this.setDefaultEdgeLabel(() => ({}));
nodes.forEach((node) => {
@@ -23,7 +22,7 @@ export class FamilyTree extends dagre.graphlib.Graph {
});
edges.forEach((edge) => {
if (edge.data!.type === 'child') {
if (String(edge.data!.type).toLowerCase() === 'child') {
this.setEdge(edge.source, edge.target);
}
});
@@ -33,7 +32,7 @@ export class FamilyTree extends dagre.graphlib.Graph {
let newEdges: Edge[] = [];
edges.forEach((edge) => {
let newEdge = { ...edge };
if (edge.data?.type === 'child') {
if (String(edge.data?.type).toLowerCase() === 'child') {
newEdge.sourceHandle = 'child';
newEdge.targetHandle = 'parent';
}
@@ -44,7 +43,7 @@ export class FamilyTree extends dagre.graphlib.Graph {
return;
}
if (edge.data?.type === 'spouse') {
if (String(edge.data?.type).toLowerCase() === 'spouse') {
const padding = 50; // distance between spouse and source
const spouseWidth = nodeWidth;

1
apps/app/src/lib/graph/node_click.ts
View File

@@ -6,7 +6,6 @@ export function handleNodeClick(
): NodeEventWithPointer<MouseEvent | TouchEvent> {
return ({ event, node }) => {
event.preventDefault();
node.data.id = Number(node.id);
set_panel_options(node.data as components['schemas']['PersonProperties'] & { id: number });
};
}

8
apps/app/src/lib/graph/parse_family_tree.ts
View File

@@ -15,9 +15,9 @@ export function parseFamilyTree(data: components['schemas']['FamilyTree']): Layo
const nodes: Node[] = data.people.map((person) => {
let newNode = { data: { ...person } } as Node;
if (person.id !== null && person.id !== undefined) {
newNode.id = person.id.toString();
newNode.id = "help"+person.id.toString();
}
newNode.data.id = person.id;
return newNode;
});
@@ -27,10 +27,10 @@ export function parseFamilyTree(data: components['schemas']['FamilyTree']): Layo
const newEdge = { data: { ...relationship.Props } } as Edge;
newEdge.data!.type = relationship.Type?.toLowerCase();
if (relationship.StartElementId !== null && relationship.StartElementId !== undefined) {
newEdge.source = relationship.StartElementId;
newEdge.source = "help"+relationship.StartId!.toString();
}
if (relationship.EndElementId !== null && relationship.EndElementId !== undefined) {
newEdge.target = relationship.EndElementId;
newEdge.target = "help"+relationship.EndId!.toString();
}
return newEdge;

43
apps/app/src/routes/+page.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { onMount } from 'svelte';
import { nodeTypes, edgeTypes } from '$lib/graph/model';
import { title, family_tree } from '$lib/paraglide/messages.js';
@@ -6,8 +7,7 @@
SvelteFlowProvider,
SvelteFlow,
Controls,
MiniMap,
ConnectionLineType
MiniMap
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
import type { OnConnectEnd, Node, Edge, NodeEventWithPointer } from '@xyflow/svelte';
@@ -44,8 +44,8 @@
'TB'
);
console.log('layout', layout);
let nodes = $state.raw<Node[]>(layout.Nodes);
let edges = $state.raw<Edge[]>(layout.Edges);
let nodes = $state.raw<Node[]>([] as Node[]);
let edges = $state.raw<Edge[]>([] as Edge[]);
let relationshipStart: number | null = $state(null);
let createPerson = $state(false);
@@ -66,13 +66,13 @@
openPersonMenu = undefined;
},
deleteNode: () => {
if (Number(data.id) === Number(node.id)) {
if (Number(data.id) === Number(node.data.id)) {
relationshipStart = null;
openPersonMenu = undefined;
return;
}
fetch('/api/person/' + node.id, {
fetch('/api/person/' + node.data.id, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
@@ -80,8 +80,8 @@
})
.then((response) => {
if (response.ok) {
nodes = nodes.filter((n) => n.id !== node.id);
edges = edges.filter((e) => e.source !== node.id && e.target !== node.id);
nodes = nodes.filter((n) => n.data.id !== node.data.id);
edges = edges.filter((e) => e.source !== "help"+node.data.id && e.target !== "help"+node.data.id);
} else {
alert('Error deleting person');
}
@@ -92,23 +92,23 @@
openPersonMenu = undefined;
},
createRelationshipAndNode: () => {
relationshipStart = Number(node.id);
relationshipStart = Number(node.data.id);
createPerson = true;
openPersonMenu = undefined;
},
addRelationship: () => {
relationshipStart = Number(node.id);
relationshipStart = Number(node.data.id);
openPersonMenu = undefined;
},
addAdmin: () => {
relationshipStart = Number(node.id);
relationshipStart = Number(node.data.id);
openPersonMenu = undefined;
},
addRecipe: () => {
relationshipStart = Number(node.id);
relationshipStart = Number(node.data.id);
openPersonMenu = undefined;
},
id: node.id,
id: String(node.data.id),
top: event.clientY < clientHeight - 200 ? event.clientY : undefined,
left: event.clientX < clientWidth - 200 ? event.clientX : undefined,
right: event.clientX >= clientWidth - 200 ? clientWidth - event.clientX : undefined,
@@ -125,6 +125,11 @@
edges = [...edges, ...newEdges];
}
console.log('newnodes', newNodes![0].id);
console.log('newedges', newEdges![0].id);
console.log('newnodes', newNodes);
console.log('newedges', newEdges);
let newLayout = familyTreeDAG.getLayoutedElements(
nodes,
edges,
@@ -132,8 +137,8 @@
tailwindClassToPixels('h-40') || 160,
'TB'
);
edges = newLayout.Edges;
nodes = newLayout.Nodes;
edges = [...newLayout.Edges];
nodes = [...newLayout.Nodes];
};
let handleNodeClickFunc = handleNodeClick(
@@ -176,17 +181,21 @@
const handleConnectEnd: OnConnectEnd = (event, connectionState) => {
if (connectionState.isValid) return;
const sourceNodeId = connectionState.fromNode?.id;
const sourceNodeId = connectionState.fromNode?.data.id;
if (sourceNodeId === undefined) return;
relationshipStart = Number(sourceNodeId);
createPerson = true;
};
onMount(() => {
nodes = [...layout.Nodes];
edges = [...layout.Edges]
});
</script>
<svelte:head>
<title>{title({ page: family_tree() })}</title>
</svelte:head>
<div style="height:100vh;" class="!bg-base-200 drawer-content flex flex-col">
<div style="height:100vh;" class="!bg-base-200 flex flex-col">
<SvelteFlowProvider>
<SvelteFlow
bind:nodes={nodes}