From 597ca0eaa78872064cdce286680087f99f83ddb1 Mon Sep 17 00:00:00 2001 From: gbanyan Date: Tue, 16 Dec 2025 11:26:31 +0800 Subject: [PATCH] Fix label and connection line positioning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move label closer to symbol (y = symbolSize/2 + 15) - Increase childDropHeight from 30 to 50 to place connection lines below labels 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/components/PedigreeCanvas/hooks/useD3Pedigree.ts | 8 +++----- src/core/renderer/ConnectionRenderer.ts | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts b/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts index bc73f14..330fedb 100644 --- a/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts +++ b/src/components/PedigreeCanvas/hooks/useD3Pedigree.ts @@ -446,15 +446,13 @@ function renderPersons( .attr('fill', 'none'); } - // Label (positioned below connection lines) - // Vertical lines to children end at childY - halfSymbol = parentY + verticalSpacing - 20 = parentY + 80 - // So label must be > 80 to avoid overlap. Using 85. + // Label (positioned just below the symbol, above connection lines) if (options.showLabels && person.metadata.label) { personGroup .append('text') .attr('class', 'person-label') .attr('x', 0) - .attr('y', options.symbolSize / 2 + 65) + .attr('y', options.symbolSize / 2 + 15) .attr('text-anchor', 'middle') .attr('font-size', '12px') .attr('font-family', 'sans-serif') @@ -467,7 +465,7 @@ function renderPersons( .append('text') .attr('class', 'person-id') .attr('x', 0) - .attr('y', options.symbolSize / 2 + 65) + .attr('y', options.symbolSize / 2 + 15) .attr('text-anchor', 'middle') .attr('font-size', '11px') .attr('font-family', 'sans-serif') diff --git a/src/core/renderer/ConnectionRenderer.ts b/src/core/renderer/ConnectionRenderer.ts index 0c6c439..4489e01 100644 --- a/src/core/renderer/ConnectionRenderer.ts +++ b/src/core/renderer/ConnectionRenderer.ts @@ -22,7 +22,7 @@ export interface ConnectionConfig { export const DEFAULT_CONNECTION_CONFIG: ConnectionConfig = { lineWidth: 2, doubleLineGap: 4, - childDropHeight: 30, + childDropHeight: 50, // Increased to leave room for labels above the connection lines symbolSize: 40, };