fix(stammbaum): keep dimmed nodes opaque so connectors do not bleed through (#703)
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:
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user