Changelog

Graphics & Logo Upload for Uniform Builder

Complete graphics step with S3-powered logo uploads, drag-and-drop, dimension controls with aspect-ratio lock, placement presets, layer ordering, rotation, and SVG color mode override.

Overview

New graphics step enabling users to upload team logos, sponsor graphics, and badges directly to the uniform builder. Files are uploaded to AWS S3 via pre-signed URLs and rendered on the 2D/3D canvas with full control over placement, dimensions, rotation, and layer ordering.

Features

Source Tabs

  • Brand Library - Placeholder for future database-backed brand assets
  • Team Upload - Functional drag-and-drop / click-to-upload zone with S3 integration
  • Library - Placeholder for shared asset library (badges, sponsors)

File Upload

  • Drag & Drop - Drop files directly onto the upload zone
  • Click to Upload - Standard file picker fallback
  • Accepted Formats - SVG, PNG, and JPG files
  • Upload Progress - Spinner animation during upload with disabled interaction
  • Error Handling - Inline error banner with dismiss action for failed uploads
  • Parallel Processing - S3 upload and local image dimension detection run concurrently via Promise.all

Graphic Item Properties

  • Graphic Type - Categorize as Logo, Sponsor, or Badge
  • Thumbnail Preview - Shows uploaded image in both the card trigger and expanded content
  • File Name Display - Truncated file name in the collapsible trigger

Dimensions & Aspect Ratio

  • Width / Height - Numeric inputs in millimeters
  • Aspect Ratio Lock - Toggle button locks/unlocks proportional resizing
  • Auto-Detection - Raster image dimensions detected locally via createObjectURL and converted to approximate mm values
  • Unit Conversion - dimensionToPx() and mmToPx() convert mm/inch to canvas pixels in 2048x2048 space

Placement & Layout

  • 7 Placement Presets - Chest (center / left / right), Back, Back (top), Sleeve (left / right)
  • Alignment - Left, center, or right within the placement zone
  • Rotation - -360 to +360 degree rotation control
  • Canonical Coordinate Mapping - graphics-placement.ts maps presets to (x, y) positions

Layer Ordering

  • Bring Forward / Send Backward - Reorder graphics in the z-stack
  • Layer Indicator - Shows current layer position (e.g. "Layer 2 of 3")
  • Array-Based Z-Index - Later items in the array render on top

SVG Color Override

  • Color Mode - Original or Single Color (SVG only)
  • Fill Color - Color tabs picker appears when single-color mode is active on SVG assets

Technical Details

Component Structure

  • GraphicsStep manages the field array and upload state
  • GraphicItemCard renders individual graphic controls with useWatch for live trigger updates
  • useS3Upload hook handles the browser-to-S3 upload flow
  • graphics-placement.ts provides coordinate mapping utilities

Upload Pipeline

  1. User drops/selects a file
  2. MIME type validated against allowed formats
  3. useS3Upload POSTs to /api/upload/presigned-url for a pre-signed URL
  4. Browser PUTs the file directly to S3 (no server proxy)
  5. Public URL returned and stored in the form field
  6. Raster dimensions detected locally in parallel for default sizing
Previous

Graphics Library Management & Builder Integration