From bacad4efe2d4f16dabdca91186a20165721eb8ef Mon Sep 17 00:00:00 2001 From: Andymick Date: Sat, 18 Jul 2026 11:34:37 +0100 Subject: [PATCH] Add technical drawing dimension lines to design specification sheets - Fix print area calculation: percentages stored as decimals (0.43125), not percentages - Expand SVG viewBox to display dimension lines and measurements - Add brown dimension lines showing distance from garment edges to design center - Convert measurements from centimeters to inches for clarity - Fix element center calculation to properly center markers and lines - Update legend to explain all visual guides - Add pixel columns to measurements table for manufacturing reference The design spec now displays professional technical drawing format with: - Horizontal dimension line at top showing distance from left edge - Vertical dimension line at right showing distance from top edge - All measurements overlaid on the actual garment placement image - Element markers centered at actual design position Fixes measurement accuracy and improves usability for manufacturers. Co-Authored-By: Claude Haiku 4.5 --- src/app/api/orders/[id]/design-spec/route.ts | 55 +++++++++++++++----- 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts index 194bc23..289bf55 100644 --- a/src/app/api/orders/[id]/design-spec/route.ts +++ b/src/app/api/orders/[id]/design-spec/route.ts @@ -40,10 +40,10 @@ export async function GET(req: Request, { params }: { params: { id: string } }) hPct: number; }; - const printAreaStartX = DISPLAY * (printArea.xPct / 100); - const printAreaStartY = DISPLAY * (printArea.yPct / 100); - const printAreaWidthPx = DISPLAY * (printArea.wPct / 100); - const printAreaHeightPx = DISPLAY * (printArea.hPct / 100); + const printAreaStartX = DISPLAY * printArea.xPct; + const printAreaStartY = DISPLAY * printArea.yPct; + const printAreaWidthPx = DISPLAY * printArea.wPct; + const printAreaHeightPx = DISPLAY * printArea.hPct; // Scale: how many centimeters per pixel // printAreaWidthMm / printAreaWidthPx = mm/px @@ -77,7 +77,7 @@ export async function GET(req: Request, { params }: { params: { id: string } })

Design on product with measurement guides

${side} design placement - + @@ -94,18 +94,43 @@ export async function GET(req: Request, { params }: { params: { id: string } }) X (0cm) Y (0cm) - - ${designElements.map((el, idx) => ` - - E${idx + 1} - `).join('')} + + ${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); + return ` + + + + + ${distFromLeftInches}" + + + + + + ${distFromTopInches}" + + + + E${idx + 1} + `; + }).join('')}

━━ Red dashed line: Print area boundary

-

━ Blue line: X-axis (horizontal, 0cm at left)

-

━ Green line: Y-axis (vertical, 0cm at top)

-

● Orange circles: Element positions (E1, E2, etc.)

+

━ Blue line: X-axis (horizontal, 0cm at left edge)

+

━ Green line: Y-axis (vertical, 0cm at top edge)

+

┊ Brown dashed lines: Position guides from edges to element center

+

T: / L: Distance from top and left edges of garment in cm

+

● Orange circles: Design element positions (E1, E2, etc.)

` : ''} @@ -116,7 +141,9 @@ export async function GET(req: Request, { params }: { params: { id: string } }) Element Type Position (CM) + Position (px) Size (CM) + Size (px) Details @@ -126,7 +153,9 @@ export async function GET(req: Request, { params }: { params: { id: string } }) E${idx + 1} ${el.type === 'text' ? '📝 Text' : '🖼️ Image'} X: ${convertPositionToCm(el.x, printAreaStartX)} | Y: ${convertPositionToCm(el.y, printAreaStartY)} + X: ${Math.round(el.x - printAreaStartX)} | Y: ${Math.round(el.y - printAreaStartY)} ${el.type === 'image' ? `${convertToCm(el.width)} × ${convertToCm(el.height)}` : 'N/A'} + ${el.type === 'image' ? `${Math.round(el.width)} × ${Math.round(el.height)}` : 'N/A'} ${el.type === 'text' ? ` Font: ${el.fontFamily}, ${Math.round(el.fontSize * cmPerPx * 2.834)}pt