marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(stammbaum): keep dimmed nodes opaque so connectors do not bleed through (#703)

Browse Source 
Group opacity on the node <g> made the whole node translucent — including
its card fill — so the connector lines drawn beneath a dimmed node showed
through it. Render the card fill at full strength outside the dim group and
move the lineage focus+dim onto an inner content group (outline + labels)
only. The focus ring also leaves the dim group, so a dimmed-but-focused
node keeps a full-strength ring.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-31 19:12:39 +02:00
parent e5784caa9d
commit 9c12f62345
2 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/person/genealogy/StammbaumNode.svelte
View File

@@ -9,7 +9,7 @@ interface Props {
node: PersonNodeDTO;
pos: { x: number; y: number };
selected: boolean;
/** Dim the whole node when a lineage is highlighted and this person is outside it. */
/** Dim the node's outline + labels when a lineage is highlighted and this person is outside it. */
dimmed?: boolean;
onSelect: (id: string) => void;
}
@@ -38,12 +38,11 @@ const datesLabel = $derived(
aria-label="{node.displayName}{datesLabel}"
aria-expanded={selected}
transform="translate({pos.x}, {pos.y})"
opacity={dimmed ? DIMMED_OPACITY : undefined}
onclick={() => onSelect(node.id)}
onkeydown={handleKey}
onfocus={() => (focused = true)}
onblur={() => (focused = false)}
class="lineage-fade cursor-pointer focus:outline-none"
class="cursor-pointer focus:outline-none"
>
{#if focused}
<rect
@@ -57,11 +56,22 @@ const datesLabel = $derived(
stroke-width="2"
/>
{/if}
<!-- Opaque card fill — full strength even when dimmed, so the connectors
drawn beneath the node never bleed through. The lineage dim lives on the
content group below; group opacity here would make the fill translucent. -->
<rect
width={NODE_W}
height={NODE_H}
rx="4"
fill={selected ? 'var(--c-primary)' : 'var(--c-surface)'}
/>
<!-- Outline + labels carry the lineage focus+dim; the box stays opaque. -->
<g class="lineage-fade" opacity={dimmed ? DIMMED_OPACITY : undefined}>
<rect
width={NODE_W}
height={NODE_H}
rx="4"
fill="none"
stroke="var(--c-primary)"
stroke-width="1.5"
/>
@@ -91,6 +101,7 @@ const datesLabel = $derived(
{node.birthYear ?? '?'}–{node.deathYear ?? ''}
</text>
{/if}
</g>
</g>
<style>

24
frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts
View File

@@ -940,10 +940,27 @@ describe('StammbaumTree lineage highlight (#703)', () => {
edge('mutter', 'kind', 'PARENT_OF')
];
// The lineage dim lives on the inner content group (outline + labels); the
// card fill renders outside it at full strength so connectors beneath never
// bleed through a dimmed node.
function nodeOpacity(displayName: string): string | null {
const content = nodeContentGroup(displayName);
return content.getAttribute('opacity');
}
function nodeContentGroup(displayName: string): Element {
const g = document.querySelector(`g[role="button"][aria-label="${displayName}"]`);
if (!g) throw new Error(`No node group rendered for ${displayName}`);
return g.getAttribute('opacity');
const content = g.querySelector('g.lineage-fade');
if (!content) throw new Error(`No content group rendered for ${displayName}`);
return content;
}
/** The opaque card fill is a direct-child rect of the node, outside the dim group. */
function cardFillIsOpaque(displayName: string): boolean {
const g = document.querySelector(`g[role="button"][aria-label="${displayName}"]`);
if (!g) throw new Error(`No node group rendered for ${displayName}`);
const fill = g.querySelector(':scope > rect');
if (!fill) throw new Error(`No card-fill rect rendered for ${displayName}`);
return fill.getAttribute('opacity') === null && fill.getAttribute('fill-opacity') === null;
}
const DIM = '0.4';
@@ -974,8 +991,11 @@ describe('StammbaumTree lineage highlight (#703)', () => {
for (const name of ['Vater', 'Grossvater', 'Grossmutter', 'Kind', 'Mutter']) {
expect(nodeOpacity(name)).toBeNull();
}
// The collateral sibling dims.
// The collateral sibling dims — but its card fill stays opaque so the
// connectors drawn beneath it do not show through (the dim is on the
// outline + labels only).
expect(nodeOpacity('Tante')).toBe(DIM);
expect(cardFillIsOpaque('Tante')).toBe(true);
});
it('recomputes the highlight for a newly selected person and clears the previous one (AC6)', async () => {