From 3975c9964f110fe9012662089bbbfb9671ad758c Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 11:38:51 +0100
Subject: [PATCH] Fix dimension line positioning to display near design badge

- Reposition dimension lines to start from badge center instead of extending to image edges
- Vertical line extends upward 30px above badge showing distance to top
- Horizontal line extends rightward 40px from badge showing distance to right
- Labels now clearly visible adjacent to design element on garment image

Measurements now display correctly:
- T: 1.27" (center to top of garment)
- R: 11.70" (center to right edge of garment)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/api/orders/[id]/design-spec/route.ts | 28 +++++++++-----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index 289bf55..bdfb0bb 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -94,28 +94,26 @@ export async function GET(req: Request, { params }: { params: { id: string } })
                 <text x="${printAreaStartX + 5}" y="${printAreaStartY - 5}" font-size="12" fill="blue" font-weight="bold">X (0cm)</text>
                 <text x="${printAreaStartX - 25}" y="${printAreaStartY + 15}" font-size="12" fill="green" font-weight="bold">Y (0cm)</text>
 
-                <!-- Design elements with markers and position dimensions in INCHES (overlaid on image) -->
+                <!-- Design elements with markers and position dimensions in INCHES (from center) -->
                 ${designElements.map((el, idx) => {
                   const elWidth = el.width || 58;
                   const elHeight = el.height || 58;
                   const elCenterX = el.x + elWidth / 2;
                   const elCenterY = el.y + elHeight / 2;
-                  const distFromLeftCm = elCenterX * cmPerPx;
-                  const distFromTopCm = elCenterY * cmPerPx;
-                  const distFromLeftInches = (distFromLeftCm / 2.54).toFixed(2);
-                  const distFromTopInches = (distFromTopCm / 2.54).toFixed(2);
+                  const distToTopCm = elCenterY * cmPerPx;
+                  const distToRightCm = (DISPLAY - elCenterX) * cmPerPx;
+                  const distToTopInches = (distToTopCm / 2.54).toFixed(2);
+                  const distToRightInches = (distToRightCm / 2.54).toFixed(2);
                   return `
-                    <!-- Horizontal dimension line at top of image (from left edge to element center) -->
-                    <line x1="5" y1="10" x2="${elCenterX}" y2="10" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <line x1="5" y1="5" x2="5" y2="15" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <line x1="${elCenterX}" y1="5" x2="${elCenterX}" y2="15" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <text x="${elCenterX / 2 + 5}" y="25" font-size="14" fill="brown" font-weight="bold" font-family="Arial" text-anchor="middle" style="background: rgba(255,255,255,0.8); padding: 2px 4px;">${distFromLeftInches}"</text>
+                    <!-- Distance to top (above badge) -->
+                    <line x1="${elCenterX}" y1="${elCenterY - 30}" x2="${elCenterX}" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/>
+                    <line x1="${elCenterX - 8}" y1="${elCenterY - 30}" x2="${elCenterX + 8}" y2="${elCenterY - 30}" stroke="brown" stroke-width="2" opacity="0.8"/>
+                    <text x="${elCenterX - 15}" y="${elCenterY - 35}" font-size="13" fill="brown" font-weight="bold" font-family="Arial" text-anchor="end">T: ${distToTopInches}"</text>
 
-                    <!-- Vertical dimension line on right side of image (from top edge to element center) -->
-                    <line x1="540" y1="5" x2="540" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <line x1="535" y1="5" x2="545" y2="5" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <line x1="535" y1="${elCenterY}" x2="545" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/>
-                    <text x="548" y="${elCenterY / 2}" font-size="14" fill="brown" font-weight="bold" font-family="Arial" text-anchor="start">${distFromTopInches}"</text>
+                    <!-- Distance to right (right of badge) -->
+                    <line x1="${elCenterX}" y1="${elCenterY}" x2="${elCenterX + 40}" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/>
+                    <line x1="${elCenterX + 40}" y1="${elCenterY - 8}" x2="${elCenterX + 40}" y2="${elCenterY + 8}" stroke="brown" stroke-width="2" opacity="0.8"/>
+                    <text x="${elCenterX + 50}" y="${elCenterY + 5}" font-size="13" fill="brown" font-weight="bold" font-family="Arial" text-anchor="start">R: ${distToRightInches}"</text>
 
                     <!-- Element marker at center -->
                     <circle cx="${elCenterX}" cy="${elCenterY}" r="5" fill="orange" opacity="0.9" stroke="white" stroke-width="1"/>