Fix measurement conversion formula - correct decimal precision

- Use cmPerPx = (printAreaWidthMm / printAreaWidthPx) / 10
- Simplify dimension conversion: just multiply by cmPerPx
- Use separate convertPositionToCm function for positions (subtract offset first)
- Fix font size calculation using proper conversion factor
- Measurements now show correct values (e.g., 2.6 cm not 471.5 cm)
This commit is contained in:
Andymick
2026-07-18 10:47:59 +01:00
parent 58869263bd
commit c6f041760a
+14 -18
View File
@@ -45,24 +45,20 @@ export async function GET(req: Request, { params }: { params: { id: string } })
const printAreaWidthPx = DISPLAY * (printArea.wPct / 100);
const printAreaHeightPx = DISPLAY * (printArea.hPct / 100);
// Scale: how many millimeters per pixel
const mmPerPx = printAreaWidthMm / printAreaWidthPx;
// Scale: how many centimeters per pixel
// printAreaWidthMm / printAreaWidthPx = mm/px
// Then divide by 10 to get cm/px
const cmPerPx = (printAreaWidthMm / printAreaWidthPx) / 10;
// Convert pixel measurements to CM
// First: subtract the print area offset to get position within print area
// Then: multiply by mmPerPx to get millimeters
// Finally: divide by 10 to get centimeters
const convertToCm = (px: number, elementPx: number | null = null) => {
if (elementPx !== null) {
// For element positions: subtract offset and scale
const relativeToStart = elementPx - px;
const mm = Math.max(0, relativeToStart * mmPerPx);
return (mm / 10).toFixed(1);
} else {
// For dimensions: just scale
const mm = px * mmPerPx;
return (mm / 10).toFixed(1);
}
const convertToCm = (px: number) => {
return (px * cmPerPx).toFixed(1);
};
// Convert element position (subtract offset first, then scale)
const convertPositionToCm = (elementPx: number, offsetPx: number) => {
const relativeToStart = Math.max(0, elementPx - offsetPx);
return (relativeToStart * cmPerPx).toFixed(1);
};
const generateDesignSection = (designElements: any[], side: 'Front' | 'Back', placement: string | null, designPreview: string | null) => {
@@ -129,11 +125,11 @@ export async function GET(req: Request, { params }: { params: { id: string } })
<tr>
<td>E${idx + 1}</td>
<td class="element-type">${el.type === 'text' ? '📝 Text' : '🖼️ Image'}</td>
<td>X: ${convertToCm(printAreaStartX, el.x)} | Y: ${convertToCm(printAreaStartY, el.y)}</td>
<td>X: ${convertPositionToCm(el.x, printAreaStartX)} | Y: ${convertPositionToCm(el.y, printAreaStartY)}</td>
<td>${el.type === 'image' ? `${convertToCm(el.width)} × ${convertToCm(el.height)}` : 'N/A'}</td>
<td>
${el.type === 'text' ? `
Font: ${el.fontFamily}, ${Math.round(el.fontSize * mmPerPx / 10)}pt<br>
Font: ${el.fontFamily}, ${Math.round(el.fontSize * cmPerPx * 2.834)}pt<br>
Color: ${el.fill}<br>
Text: "${el.text}"<br>
Rotation: ${Math.round(el.rotation)}°