/* Working photo controls: drag-to-reposition hook + zoom/adjust editor */
const { useRef: useRefP } = React;
/* Clamp pan offset so you can't drag the image off its frame */
function clampOffset(v, zoom) {
const lim = Math.max(0, (zoom - 1) * 50);
return Math.max(-lim, Math.min(lim, v));
}
/* Pointer drag handlers for repositioning the photo directly on the poster */
function usePhotoDrag(design, update) {
const drag = useRefP(null);
if (!update) return {}; // non-interactive (e.g. thumbnails)
const onPointerDown = e => {
if (!design.photo) return;
try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
const rect = e.currentTarget.getBoundingClientRect();
const pt = design.photoT || { zoom: 1, ox: 0, oy: 0 };
drag.current = { x: e.clientX, y: e.clientY, rect, ox: pt.ox, oy: pt.oy, zoom: pt.zoom };
};
const onPointerMove = e => {
if (!drag.current) return;
const { x, y, rect, ox, oy, zoom } = drag.current;
const nx = clampOffset(ox + (e.clientX - x) / rect.width * 100, zoom);
const ny = clampOffset(oy + (e.clientY - y) / rect.height * 100, zoom);
update({ photoT: { zoom, ox: nx, oy: ny } });
};
const onPointerUp = e => {
drag.current = null;
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {}
};
return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp };
}
/* hook: open a file dialog and read an image as dataURL (+ natural dimensions) */
function usePhoto(update) {
return () => {
const inp = document.createElement("input");
inp.type = "file"; inp.accept = "image/*";
inp.onchange = e => {
const file = e.target.files && e.target.files[0];
if (!file) return;
const r = new FileReader();
r.onload = () => {
const src = r.result;
const img = new Image();
img.onload = () => update({ photo: src, photoT: { zoom: 1, ox: 0, oy: 0 }, photoMeta: { w: img.naturalWidth, h: img.naturalHeight } });
img.onerror = () => update({ photo: src, photoT: { zoom: 1, ox: 0, oy: 0 }, photoMeta: null });
img.src = src;
};
r.readAsDataURL(file);
};
inp.click();
};
}
/* Photo resolution / DPI warning for the chosen size */
function PhotoQualityNote({ design, compact }) {
const q = window.PS_DATA.photoQuality(design);
if (!q || q.good) {
if (q && q.good && !compact) {
return (
Great quality for this size
);
}
return null;
}
const bad = !q.ok;
return (
{bad ? "This photo may look soft printed at " : "Photo is a little low-res for "}{(window.PS_DATA.SIZES.find(s => s.id === design.size) || {}).label} cm. Use a larger image or zoom out for a crisp print.
);
}
/* open a file dialog and store the image into a specific photo zone */
function uploadToZone(design, update, zid) {
const inp = document.createElement("input");
inp.type = "file"; inp.accept = "image/*";
inp.onchange = e => {
const file = e.target.files && e.target.files[0]; if (!file) return;
const r = new FileReader();
r.onload = () => {
const src = r.result;
const img = new Image();
const commit = meta => update({ photos: { ...(design.photos || {}), [zid]: { src, zoom: 1, ox: 0, oy: 0, meta } } });
img.onload = () => commit({ w: img.naturalWidth, h: img.naturalHeight });
img.onerror = () => commit(null);
img.src = src;
};
r.readAsDataURL(file);
};
inp.click();
}
/* editor for a single photo zone (used for custom templates incl. collages) */
function PhotoZoneEditor({ design, update, zone, index, total }) {
const ph = (design.photos || {})[zone.id];
const open = () => uploadToZone(design, update, zone.id);
const setZoom = z => {
const zoom = Math.max(1, Math.min(3, z));
update({ photos: { ...design.photos, [zone.id]: { ...ph, zoom, ox: clampOffset(ph.ox || 0, zoom), oy: clampOffset(ph.oy || 0, zoom) } } });
};
const remove = () => { const next = { ...(design.photos || {}) }; delete next[zone.id]; update({ photos: next }); };
if (!ph) {
return (
{total > 1 &&
Photo {index + 1}
}
);
}
return (
1 ? 14 : 0, borderBottom: total > 1 && index < total - 1 ? "1px solid var(--line)" : "none" }}>
);
}
/* Full photo editor used in the Photo tool tray */
function PhotoEditor({ design, update }) {
// custom template with one or more photo zones → per-zone editors
if (design.custom && design.zones) {
const photoZones = design.zones.filter(z => z.type === "photo");
if (!photoZones.length) {
return (
This template has no photo slot — just edit the Text.
);
}
return (
{photoZones.map((z, i) => )}
);
}
// builtin "photo" template → legacy single photo
const open = usePhoto(update);
const t = window.PS_DATA.TEMPLATES.find(x => x.id === design.templateId);
const supported = t && t.kind === "photo";
const pt = design.photoT || { zoom: 1, ox: 0, oy: 0 };
if (!supported) {
return (
This template is type-only. Switch to the Photo template to add and position your own image.