antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match React component font sizing for SVG numbers

Browse Source 
Updated SVG text generation to use the exact same font size calculation as
the React component: Math.max(8, 14 * scaleFactor). This ensures perfect
visual consistency between live React components and generated SVG examples.

Font styling now matches exactly:
- fontSize: Math.max(8, 14 * scaleFactor)
- fontFamily: 'monospace'
- fontWeight: 'bold'

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-19 15:45:46 -05:00
parent 3ccc753a82
commit dedc0e7873
6 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/abacus-react/examples/README.md
View File

@@ -26,4 +26,4 @@ Or referenced in HTML:
---
_Generated automatically by generate-examples.js using react-dom/server_
_Last updated: 2025-09-19T20:44:02.744Z_
_Last updated: 2025-09-19T20:45:33.669Z_

2
packages/abacus-react/examples/basic-usage.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

2
packages/abacus-react/examples/custom-styling.svg
View File

@@ -49,4 +49,4 @@
.abacus-svg.hide-inactive-mode:not(.interactive) .abacus-bead.hidden-inactive {
opacity: 0 !important;
}
</style></defs><rect x="11" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="36" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" height="2" fill="black" stroke="none"></rect><g class="abacus-bead active " transform="translate(6.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 65.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(31.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 70.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="50.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="12" fill="#333">7</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="12" fill="#333">8</text><text x="62.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="12" fill="#333">9</text></svg>
</style></defs><rect x="11" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="36" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" height="2" fill="black" stroke="none"></rect><g class="abacus-bead active " transform="translate(6.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 65.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(31.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 70.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="50.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">7</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">8</text><text x="62.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">9</text></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

2
packages/abacus-react/examples/interactive.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

2
packages/abacus-react/examples/tutorial-mode.svg
View File

@@ -31,4 +31,4 @@
.abacus-svg.hide-inactive-mode:not(.interactive) .abacus-bead.hidden-inactive {
opacity: 0 !important;
}
</style></defs><rect x="11" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="36" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="50" height="2" fill="black" stroke="none"></rect><g class="abacus-bead inactive " transform="translate(4.100000000000001, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 58)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 70.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 65.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 78)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="12" fill="#333">4</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="12" fill="#333">2</text></svg>
</style></defs><rect x="11" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="36" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="50" height="2" fill="black" stroke="none"></rect><g class="abacus-bead inactive " transform="translate(4.100000000000001, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 58)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 70.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 65.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 78)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">4</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">2</text></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

6
packages/abacus-react/generate-examples.js
View File

@@ -276,7 +276,11 @@ async function generateSVGExamples() {
const x = parseFloat(xMatch[1]) + parseFloat(widthMatch[1]) / 2; // Center horizontally
const y = parseFloat(yMatch[1]) + parseFloat(heightMatch[1]) / 2 + 4; // Center vertically with slight offset
return `<text x="${x}" y="${y}" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="12" fill="#333">${textContent.trim()}</text>`;
// Calculate font size to match React component: Math.max(8, 14 * scaleFactor)
const scaleFactor = example.props.scaleFactor || 1.0;
const fontSize = Math.max(8, 14 * scaleFactor);
return `<text x="${x}" y="${y}" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="${fontSize}" fill="#333">${textContent.trim()}</text>`;
}
return match; // Return original if we can't parse
}