Changelog

Text Customization for Uniform Builder

Full text customization system for the uniform builder - add multiple text items with font selection, color picker, outline styling, placement presets, alignment, and arc curve support with live canvas preview.

Overview

New text step in the uniform builder allowing users to add and fully customize multiple text elements (team names, player names, slogans) that render on the 2D/3D canvas in real-time.

Features

Dynamic Text Items

  • Add / Remove - Unlimited text items via a dynamic field array, each in a collapsible card
  • Collapsible Cards - Trigger shows text preview, fill color swatch, and font family at a glance
  • Auto-ID Generation - Each item gets a sequential ID (text-1, text-2, ...) for tracking

Text Properties

  • Text Input - Uppercase text field with placeholder guidance
  • Font Family - Select from VarsityBlock, Arial, Helvetica, Impact, Oswald, and Bebas Neue with live font preview in the dropdown
  • Font Size - Numeric input for precise sizing (converted to canvas pixels via PX_PER_MM ratio)
  • Letter Spacing - Fine-tuned letter spacing control with 0.1 step increments

Color & Outline

  • Fill Color - Integrated color tabs (Teamsport Colors, Default Colors, Custom) using the shared BuilderColorTabs component
  • Outline Width - Numeric control; outline color picker only appears when width > 0
  • Outline Color - Same color tab system for consistent palette selection

Placement & Alignment

  • Placement Presets - Six placement zones mapped to canvas coordinates:
    • Back (top / center / bottom)
    • Front (chest / center / bottom)
  • Alignment - Left, center, or right alignment within the placement zone
  • Canonical Coordinate Mapping - Placement positions mapped to 2048x2048 UV texture space

Curved Text

  • Curve Type - None or Arc mode
  • Arc Radius - Adjustable radius (px) when arc mode is active
  • SVG Path Generation - Arc mode generates semicircle SVG path data for Fabric.js text path rendering

Technical Details

Architecture

  • TextStep component uses useFieldArray from react-hook-form for dynamic item management
  • BuilderColorTabs shared component provides consistent color selection across steps
  • text-placement.ts config maps placement presets to (x, y) coordinates in canonical 2048x2048 space
  • Font size conversion: fontSizeToPx() converts mm/pt units to canvas pixels

Canvas Integration

Text items are rendered on the Fabric.js 2D canvas and reflected in the Three.js 3D texture pipeline for live preview.

Previous

Graphics Library Management & Builder Integration