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

fix: perfect crop mark detection and SVG dimension consistency

Browse Source 
- Fix crop mark detection to use tiny 0.1pt markers instead of dashed lines
- Update SVG width/height attributes to match cropped viewBox dimensions
- Remove CSS max-width constraint to show actual size differences
- Improve horizontal/vertical cropping visualization in gallery
- Now both crop mark positioning and size reduction are clearly visible

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-16 12:57:21 -05:00
parent 397c86f287
commit 79f38c13e7
3 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/templates/build-unified-gallery.js
View File

@@ -171,11 +171,22 @@ function buildUnifiedGallery() {
const originalViewBoxMatch = svgContent.match(/viewBox="([^"]*)"/);
const originalViewBox = originalViewBoxMatch ? originalViewBoxMatch[1] : 'unknown';
const croppedSVG = svgContent.replace(
let croppedSVG = svgContent.replace(
/viewBox="[^"]*"/,
`viewBox="${result.viewBox}"`
);
// Update width and height to match the viewBox dimensions for correct aspect ratio
croppedSVG = croppedSVG.replace(
/width="[^"]*"/,
`width="${result.width}pt"`
);
croppedSVG = croppedSVG.replace(
/height="[^"]*"/,
`height="${result.height}pt"`
);
cropData = {
originalViewBox,
croppedViewBox: result.viewBox,
@@ -497,11 +508,13 @@ function buildUnifiedGallery() {
}
.svg-container svg {
max-width: 100%;
max-height: 300px;
width: auto;
height: auto;
max-height: 400px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 8px;
background: white;
/* Maintain actual proportions to show cropping effect */
}
.viewbox-info {

21
packages/templates/extract-viewbox.js
View File

@@ -42,8 +42,10 @@ function parseSVGWithTransforms(svgContent) {
stack.push({ indent, transform, finalTransform });
// Check if this contains a crop mark
if (i + 1 < lines.length && lines[i + 1].includes('fill="#ff4136"')) {
// Check if this contains a tiny crop mark point (not the dashed lines)
if (i + 1 < lines.length &&
lines[i + 1].includes('fill="#ff4136"') &&
lines[i + 1].includes('0.1 0.1')) {
elements.push({
type: 'crop-mark',
finalTransform,
@@ -125,12 +127,23 @@ function updateSVGViewBox(inputPath, outputPath = null) {
const svgContent = fs.readFileSync(inputPath, 'utf8');
// Update the viewBox attribute
const updatedSVG = svgContent.replace(
// Update the viewBox attribute and SVG dimensions to match aspect ratio
let updatedSVG = svgContent.replace(
/viewBox="[^"]*"/,
`viewBox="${result.viewBox}"`
);
// Update width and height to match the viewBox dimensions for correct aspect ratio
updatedSVG = updatedSVG.replace(
/width="[^"]*"/,
`width="${result.width}pt"`
);
updatedSVG = updatedSVG.replace(
/height="[^"]*"/,
`height="${result.height}pt"`
);
const output = outputPath || inputPath.replace('.svg', '-cropped-correct.svg');
fs.writeFileSync(output, updatedSVG);

12
packages/templates/flashcards.typ
View File

@@ -384,28 +384,28 @@
#place(
dx: leftmost-x,
dy: heaven-earth-gap + bar-thickness / 2 - crop-mark-size / 2,
link("crop-mark://left", rect(width: crop-mark-size, height: crop-mark-size, fill: none, stroke: none))
link("crop-mark://left", rect(width: 0.1pt, height: 0.1pt, fill: red, stroke: none))
)
// Right crop mark (small point for algorithm)
#place(
dx: rightmost-x - crop-mark-size,
dx: rightmost-x,
dy: heaven-earth-gap + bar-thickness / 2 - crop-mark-size / 2,
link("crop-mark://right", rect(width: crop-mark-size, height: crop-mark-size, fill: none, stroke: none))
link("crop-mark://right", rect(width: 0.1pt, height: 0.1pt, fill: red, stroke: none))
)
// Top crop mark (small point for algorithm)
#place(
dx: bar-left + (bar-right - bar-left) / 2 - crop-mark-size / 2,
dy: topmost-y,
link("crop-mark://top", rect(width: crop-mark-size, height: crop-mark-size, fill: none, stroke: none))
link("crop-mark://top", rect(width: 0.1pt, height: 0.1pt, fill: red, stroke: none))
)
// Bottom crop mark (small point for algorithm)
#place(
dx: bar-left + (bar-right - bar-left) / 2 - crop-mark-size / 2,
dy: bottommost-y - crop-mark-size,
link("crop-mark://bottom", rect(width: crop-mark-size, height: crop-mark-size, fill: none, stroke: none))
dy: bottommost-y,
link("crop-mark://bottom", rect(width: 0.1pt, height: 0.1pt, fill: red, stroke: none))
)
]