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>
This commit is contained in:
Khalid A
2026-04-21 01:03:30 -05:00
parent 1af0e6152d
commit e67017b259
10 changed files with 476 additions and 28 deletions

View File

@@ -11,7 +11,10 @@
},
"dependencies": {
"react": "^19.2.5",
"react-dom": "^19.2.5"
"react-dom": "^19.2.5",
"react-konva": "^18.2.10",
"konva": "^9.3.18",
"use-image": "^1.1.1"
},
"devDependencies": {
"@eslint/js": "^9.39.4",