andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dimension line positioning to display near design badge

Browse Source 
- 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>
This commit is contained in:
Andymick
2026-07-18 11:38:51 +01:00
co-authored by Claude Haiku 4.5
parent bacad4efe2
commit 3975c9964f
1 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/orders/[id]/design-spec/route.ts
+13 -15
View File
@@ -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 + 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> <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) => { ${designElements.map((el, idx) => {
const elWidth = el.width || 58; const elWidth = el.width || 58;
const elHeight = el.height || 58; const elHeight = el.height || 58;
const elCenterX = el.x + elWidth / 2; const elCenterX = el.x + elWidth / 2;
const elCenterY = el.y + elHeight / 2; const elCenterY = el.y + elHeight / 2;
const distFromLeftCm = elCenterX * cmPerPx; const distToTopCm = elCenterY * cmPerPx;
const distFromTopCm = elCenterY * cmPerPx; const distToRightCm = (DISPLAY - elCenterX) * cmPerPx;
const distFromLeftInches = (distFromLeftCm / 2.54).toFixed(2); const distToTopInches = (distToTopCm / 2.54).toFixed(2);
const distFromTopInches = (distFromTopCm / 2.54).toFixed(2); const distToRightInches = (distToRightCm / 2.54).toFixed(2);
return ` return `
<!-- Horizontal dimension line at top of image (from left edge to element center) --> <!-- Distance to top (above badge) -->
<line x1="5" y1="10" x2="${elCenterX}" y2="10" stroke="brown" stroke-width="2" opacity="0.8"/> <line x1="${elCenterX}" y1="${elCenterY - 30}" x2="${elCenterX}" y2="${elCenterY}" 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 - 8}" y1="${elCenterY - 30}" x2="${elCenterX + 8}" y2="${elCenterY - 30}" 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 - 15}" y="${elCenterY - 35}" font-size="13" fill="brown" font-weight="bold" font-family="Arial" text-anchor="end">T: ${distToTopInches}"</text>
<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>
<!-- Vertical dimension line on right side of image (from top edge to element center) --> <!-- Distance to right (right of badge) -->
<line x1="540" y1="5" x2="540" y2="${elCenterY}" stroke="brown" stroke-width="2" opacity="0.8"/> <line x1="${elCenterX}" y1="${elCenterY}" x2="${elCenterX + 40}" 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="${elCenterX + 40}" y1="${elCenterY - 8}" x2="${elCenterX + 40}" y2="${elCenterY + 8}" 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="${elCenterX + 50}" y="${elCenterY + 5}" font-size="13" fill="brown" font-weight="bold" font-family="Arial" text-anchor="start">R: ${distToRightInches}"</text>
<text x="548" y="${elCenterY / 2}" font-size="14" fill="brown" font-weight="bold" font-family="Arial" text-anchor="start">${distFromTopInches}"</text>
<!-- Element marker at center --> <!-- Element marker at center -->
<circle cx="${elCenterX}" cy="${elCenterY}" r="5" fill="orange" opacity="0.9" stroke="white" stroke-width="1"/> <circle cx="${elCenterX}" cy="${elCenterY}" r="5" fill="orange" opacity="0.9" stroke="white" stroke-width="1"/>