diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx index 880a6f5..465a8ef 100644 --- a/src/components/DesignCanvas.tsx +++ b/src/components/DesignCanvas.tsx @@ -598,6 +598,24 @@ export default function DesignCanvas({ } }, [product.id]); + // Add custom photo as an editable image element when provided + useEffect(() => { + if (customPhoto && elementsFront.length === 0) { + const imageId = uuid(); + const newImage: DesignElement = { + id: imageId, + type: 'image', + src: customPhoto, + x: DISPLAY / 4, + y: DISPLAY / 4, + width: DISPLAY / 2, + height: DISPLAY / 2, + rotation: 0, + }; + setElementsFront([newImage]); + } + }, [customPhoto]); + useLayoutEffect(() => { const el = canvasContainerRef.current; if (!el) return; @@ -1114,11 +1132,6 @@ export default function DesignCanvas({ }; function renderPhoto(v: 'front' | 'back') { - // If a custom photo was provided (e.g., from a photo request), use it - if (customPhoto && v === 'front') { - return Custom photo; - } - const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color]; if (colorPhoto) { return {`${product.name}; @@ -1147,9 +1160,6 @@ export default function DesignCanvas({ // Same resolution logic as renderPhoto, but returns raw data instead of JSX — // used when compositing the placement-reference image for the order record. function getPhotoInfo(v: 'front' | 'back'): { url: string; tint: boolean } | null { - // If a custom photo was provided (e.g., from a photo request), use it - if (customPhoto && v === 'front') return { url: customPhoto, tint: false }; - const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color]; if (colorPhoto) return { url: colorPhoto, tint: false };