Fabric.js design canvas implementation and supporting infrastructure

Design Canvas (Primary)
- FabricDesignCanvasV2: Fabric.js-based product customization canvas
  - Lazy-loads Fabric.js to minimize bundle impact
  - Renders product mockup with print area guide (magenta dashed box)
  - Supports front/back view switching with correct product images
  - Color swatch selection for garment customization
  - Text element creation with selection handles and transform controls
  - Fixed React dependency array to prevent infinite renders

Support Components
- DesignCanvasWrapper: Client-side wrapper for SSR compatibility
- DesignCanvasErrorBoundary: Error boundary for canvas failures
- ThemeInitializer: Theme detection and application

Configuration
- Updated .claude/launch.json with dev server settings
- Updated .claude/settings.local.json with local preferences
- Updated next.config.mjs for production build optimization
- Dependency updates in package.json and package-lock.json

Known Issues & TODO
- Image element rendering disabled (Fabric.js compatibility investigation)
- Text editing UI controls needed (font, size, color pickers)
- Delete/undo functionality pending
- Print area alignment needs visual verification
- "Add to Cart" integration with design serialization pending

Testing Artifacts
- check_*.js: Product verification scripts for debugging

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-22 16:20:40 +01:00
co-authored by Claude Haiku 4.5
parent d41aebc4f1
commit e23f201d3d
61 changed files with 3071 additions and 312 deletions
+4 -3
View File
@@ -1,14 +1,15 @@
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
export async function POST(_req: Request, { params }: { params: { id: string } }) {
const proof = await prisma.designProof.findUnique({ where: { id: params.id } });
export async function POST(_req: Request, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const proof = await prisma.designProof.findUnique({ where: { id } });
if (!proof) {
return NextResponse.json({ error: 'Not found' }, { status: 404 });
}
await prisma.designProof.update({
where: { id: params.id },
where: { id },
data: { status: 'APPROVED' },
});