From c6f041760a50da8c6f126f54a1e62ebd81342c98 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 10:47:59 +0100
Subject: [PATCH] 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)
---
 src/app/api/orders/[id]/design-spec/route.ts | 32 +++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index 558d3d3..194bc23 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -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)}°