Commit Graph

3 Commits

Author SHA1 Message Date
Khalid A
fd11a36d93 Phase 3: Sidebar & Properties Panel
Implemented full editor UI with three-column layout:
- Sidebar with 4 tabs (Upload, Stickers, Text, Templates)
- UploadTab with drag-and-drop file upload, wires to POST /api/upload
- StickersTab with 96 emoji stickers across 6 categories
- TextTab with font picker (20 Google Fonts), size slider, color picker
- TemplatesTab placeholder for future template system
- LayersPanel showing all elements with select/delete
- PropertiesPanel with position, size, rotation controls

Also added:
- Constants for fonts and stickers
- Enhanced CSS with editor-layout, sidebar, properties-panel classes
- Updated App.jsx to integrate all components
2026-04-21 01:27:59 -05:00
Khalid A
e67017b259 Phase 2: Canvas Editor Core
Implements the core canvas editor with react-konva:

- Added dependencies: react-konva, konva, use-image
- DesignCanvas component: 300×300px Stage with T-shirt SVG overlay
- TShirtSVG component: Visual t-shirt outline with print zone indicator
- ImageElement: Draggable/resizable image with Transformer handles
- TextElement: Draggable/resizable text with Transformer handles
- useDesignEditor hook: Element CRUD, selection, reordering
- Keyboard shortcut: Delete/Backspace removes selected element
- Test image added on mount for Phase 2 verification

Canvas info bar shows: "Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:03:33 -05:00
Khalid A
01702c397f Initial commit: Phase 1 scaffolding complete
- Root package.json with concurrently for dev server
- Client: Vite + React 18 with design tokens and proxy config
- Server: Express with CORS, multer (20MB), Sharp resize
- Upload endpoint with preview generation
- Dockerfile (multi-stage) and docker-compose.yml
- Canvas deferred to Phase 8 (export functionality)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 00:29:50 -05:00