diff --git a/src/api/badge.js b/src/api/badge.js index 14fa3fc..14eea55 100644 --- a/src/api/badge.js +++ b/src/api/badge.js @@ -42,8 +42,9 @@ router.get('/badge', async (req, res) => { const iconSize = size; const fontSize = calcFontSize(iconSize); const textPadding = Math.round(iconSize * 0.4); + const textHpad = Math.round(fontSize * 0.6); // horizontal padding inside text rect const radius = style === 'flat' ? 3 : 0; - const textWidth = estimateTextWidth(effectiveLabel, fontSize); + const textWidth = estimateTextWidth(effectiveLabel, fontSize) + textHpad * 2; // Kinyerjük az ikon SVG-ből a width és height attribútumokat (ha vannak) let iconViewBoxWidth = iconSize; @@ -54,8 +55,9 @@ router.get('/badge', async (req, res) => { if (heightMatch) iconViewBoxHeight = parseFloat(heightMatch[1]); // Ikon doboz mérete - const iconBoxWidth = iconViewBoxWidth + 5; - const iconBoxHeight = iconViewBoxHeight + 5; + const iconPad = 5; + const iconBoxWidth = iconViewBoxWidth + iconPad; + const iconBoxHeight = iconViewBoxHeight + iconPad; // Ha a color paraméter nincs megadva, próbáljuk kinyerni az ikon színét let effectiveColor = color; @@ -79,12 +81,12 @@ router.get('/badge', async (req, res) => { const fontWeight = safeFontWeight; // paraméterből if (labelpos === 'left') { - // Külön dobozok: padding csak a széleken kell, a dobozokon belül nem! + // Külön dobozok: padding a szöveg körül! textElem = ` ${safeLabel}`; iconGroup = ` - - ${iconSVG} + + ${iconSVG} `; } else if (labelpos === 'above' || labelpos === 'below') { // Felső vagy alsó label: ikon doboz magassága = iconSize + 5, szélessége = szöveg doboz szélessége diff --git a/src/lib/svg-utils.js b/src/lib/svg-utils.js index 07ac730..e2c1922 100644 --- a/src/lib/svg-utils.js +++ b/src/lib/svg-utils.js @@ -7,10 +7,11 @@ const FONT_FAMILY = 'Verdana,Geneva,DejaVu Sans,sans-serif'; const calcFontSize = (size) => Math.round(size * 0.6); /** - * Rough text-width estimate based on font-size and character count. - * Uses a 0.6 coefficient which works well for Verdana / sans-serif. + * Text-width estimate based on font-size and character count. + * Uses a 0.65 coefficient with Verdana which has wider letterforms. + * Adds extra padding so the text never touches the rect edges. */ const estimateTextWidth = (text, fontSize) => - text.length * fontSize * 0.6; + text.length * fontSize * 0.65 + fontSize * 0.8; module.exports = { FONT_FAMILY, calcFontSize, estimateTextWidth }; diff --git a/test/svg-utils.test.js b/test/svg-utils.test.js index 61f4f1f..41d431a 100644 --- a/test/svg-utils.test.js +++ b/test/svg-utils.test.js @@ -29,17 +29,21 @@ describe('svg-utils', () => { describe('estimateTextWidth', () => { it('should estimate width based on text length and font size', () => { const width = estimateTextWidth('Hello', 14); - expect(width).toBe(5 * 14 * 0.6); // 42 + // formula: text.length * fontSize * 0.65 + fontSize * 0.8 + expect(width).toBe(5 * 14 * 0.65 + 14 * 0.8); // 56.7 }); - it('should return 0 for empty string', () => { - expect(estimateTextWidth('', 14)).toBe(0); + it('should include padding for empty string', () => { + // Even empty strings get the base padding + expect(estimateTextWidth('', 14)).toBe(14 * 0.8); // 11.2 }); - it('should scale linearly with font size', () => { + it('should scale with font size', () => { const w1 = estimateTextWidth('test', 10); const w2 = estimateTextWidth('test', 20); - expect(w2).toBe(w1 * 2); + // w1 = 4*10*0.65 + 10*0.8 = 34 + // w2 = 4*20*0.65 + 20*0.8 = 68 + expect(w2).toBe(68); }); }); });