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
;
- }
-
const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
if (colorPhoto) {
return
;
@@ -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 };