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

implement person node component

Browse Source
This commit is contained in:
Vargha Csongor
2025-04-26 22:28:54 +02:00
parent 001732bee6
commit 8e51cc6e15
1 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/app/src/lib/graph/PersonNode.svelte
View File

@@ -17,27 +17,45 @@
$: isTarget = connection.current.toHandle?.id !== id;
</script>
<div class="rounded-badge card card-compact bg-base-content">
<div class="card card-compact bg-primary-content text-primary rounded-full w-40 h-40 flex flex-col items-center justify-center shadow-lg">
{#if !isConnecting}
<Handle class="customHandle" position={Position.Right} type="source" style="z-index: 1;" />
{/if}
<!-- <Handle class="customHandle" position={Position.Right} type="source" /> -->
<Handle class="customHandle" position={Position.Left} type="target" isConnectableStart={false} />
<div class="card-body w-30 items-center text-center">
<div class="avatar">
<figure class="mask mask-squircle w-24">
<img src={data.profile_picture} alt="Picture of {data.last_name} {data.first_name}" />
</figure>
<div class="avatar mb-2">
{#if isConnecting && isTarget}
<Handle position={Position.Left} type="target" isConnectableStart={false} style="z-index: 1;" />
{/if}
<div class="w-24 rounded-full ring ring-accent ring-offset-accent ring-offset-1 border-0 bg-accent">
{#if isConnecting && isTarget}
<Handle position={Position.Left} type="target" isConnectableStart={false} style="z-index: 1;" />
{/if}
<img src={data.profile_picture||'https://cdn-icons-png.flaticon.com/512/10628/10628885.png'} alt="Picture of {data.last_name} {data.first_name}" />
</div>
<h2 class="card-title text-base-content">
{data.first_name}
{data.middle_name ? data.middle_name : ''}
{data.last_name}
</div>
<div class="text-center px-2">
<h2 class="font-semibold text-sm leading-tight">
{data.first_name} {data.middle_name ? data.middle_name : ''} {data.last_name}
</h2>
<h3 class="card-title text-base-content">
{data.born}
{data.death ? ' - ' + data.death : ''}
<h3 class="text-xs opacity-70">
{data.born}{data.death ? ' - ' + data.death : ''}
</h3>
</div>
</div>
<style>
:global(div.customHandle) {
width: 100%;
height: 100%;
background: blue;
position: absolute;
top: 0;
left: 0;
border-radius: 0;
transform: none;
border: none;
opacity: 0;
}
</style>