onMultiResizeHandle(ev,'w' )}/>
);
};
// ── Canvas mouse down (tool actions) ──────────────────────────────────────
const onCanvasMouseDown = (e) => {
if (e.button !== 0) return;
setShapeDropOpen(false);
if (tool === 'select') {
setSelectedIds(new Set()); setEditingTextId(null);
const startPos = screenToCanvas(e.clientX, e.clientY);
const onMove = (ev) => {
const cur = screenToCanvas(ev.clientX, ev.clientY);
setMarquee({ x: Math.min(startPos.x, cur.x), y: Math.min(startPos.y, cur.y), w: Math.abs(cur.x - startPos.x), h: Math.abs(cur.y - startPos.y) });
};
const onUp = () => {
setMarquee(prev => {
if (prev && prev.w > 4 && prev.h > 4) {
const mx1 = prev.x, my1 = prev.y, mx2 = prev.x + prev.w, my2 = prev.y + prev.h;
const hit = elements.filter(el => {
if (el.type === 'pen') {
const pts = el.points || [];
const bx1 = Math.min(...pts.map(p => p.x)), by1 = Math.min(...pts.map(p => p.y));
const bx2 = Math.max(...pts.map(p => p.x)), by2 = Math.max(...pts.map(p => p.y));
return bx1 < mx2 && bx2 > mx1 && by1 < my2 && by2 > my1;
}
const ex1 = el.x ?? 0, ey1 = el.y ?? 0, ex2 = ex1 + (el.w ?? 0), ey2 = ey1 + (el.h ?? 0);
return ex1 < mx2 && ex2 > mx1 && ey1 < my2 && ey2 > my1;
});
setSelectedIds(new Set(hit.map(el => el.id)));
}
return null;
});
activeDragRef.current = null;
window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp);
};
if (activeDragRef.current) {
window.removeEventListener('mousemove', activeDragRef.current.move);
window.removeEventListener('mouseup', activeDragRef.current.up);
}
activeDragRef.current = { move: onMove, up: onUp };
window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp);
return;
}
const pos = screenToCanvas(e.clientX, e.clientY);
if (tool === 'text') {
const id = ieUid();
addElement({ id, type:'text', x:pos.x, y:pos.y, w:300, h:60, text:'Add text here', fontSize:textFontSize, fontWeight:textFontWeight, fontFamily:textFontFamily, color:textColor, textAlign:textAlign, opacity:1 });
setTimeout(() => setEditingTextId(id), 50);
return;
}
if (tool === 'rect' || tool === 'circle' || tool === 'triangle') {
const startPos = { x: pos.x, y: pos.y };
let currentPreview = { x:pos.x, y:pos.y, w:0, h:0 };
setShapePreview(currentPreview);
const onMove = (ev) => {
const cur = screenToCanvas(ev.clientX, ev.clientY);
currentPreview = { x:Math.min(startPos.x,cur.x), y:Math.min(startPos.y,cur.y), w:Math.abs(cur.x-startPos.x), h:Math.abs(cur.y-startPos.y) };
setShapePreview(currentPreview);
};
const onUp = () => {
if (currentPreview.w > 5 && currentPreview.h > 5) {
addElement({ id:ieUid(), type:tool, x:currentPreview.x, y:currentPreview.y, w:currentPreview.w, h:currentPreview.h, fill:fillColor, stroke:shapeStrokeWidth>0?shapeStrokeColor:'transparent', strokeWidth:shapeStrokeWidth, opacity:1, borderRadius:tool==='rect'?shapeRadius:0 });
_ieAddCustomColor(fillColor);
}
setShapePreview(null);
window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp);
};
window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp);
return;
}
if (tool === 'pen') {
const startP = screenToCanvas(e.clientX, e.clientY);
let pts = [startP];
setPenPoints([startP]);
const onMove = (ev) => { const p = screenToCanvas(ev.clientX, ev.clientY); pts = [...pts, p]; setPenPoints([...pts]); };
const onUp = () => {
if (pts.length > 1) { addElement({ id:ieUid(), type:'pen', points:pts, stroke:penColor, strokeWidth:penWidth, opacity:1 }); _ieAddCustomColor(penColor); }
setPenPoints(null);
window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp);
};
window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp);
return;
}
};
// ── Viewport wheel ────────────────────────────────────────────────────────
React.useEffect(() => {
const vp = viewportRef.current;
if (!vp) return;
const onWheel = (e) => {
e.preventDefault();
if (e.ctrlKey || e.metaKey) {
const factor = e.deltaY < 0 ? 1.1 : 0.91;
setZoom(z => Math.min(5, Math.max(0.05, z * factor)));
} else {
setPan(p => ({ x: p.x - e.deltaX, y: p.y - e.deltaY }));
}
};
vp.addEventListener('wheel', onWheel, { passive: false });
return () => vp.removeEventListener('wheel', onWheel);
}, []);
// ── Keyboard shortcuts ────────────────────────────────────────────────────
React.useEffect(() => {
const onKeyDown = (e) => {
const tag = e.target.tagName;
if (tag === 'INPUT' || tag === 'TEXTAREA') return;
if (e.key === ' ') { e.preventDefault(); spaceHeldRef.current = true; setSpacePan(true); }
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); e.shiftKey ? redo() : undo(); }
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'y') { e.preventDefault(); redo(); }
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'd') { e.preventDefault(); duplicateSelected(); }
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'a') { e.preventDefault(); setSelectedIds(new Set(elements.map(el => el.id))); }
if (e.key === 'Delete' || e.key === 'Backspace') { if (editingTextId) return; deleteSelected(); }
if (e.key === 'Escape') { setSelectedIds(new Set()); setEditingTextId(null); setTool('select'); setShapeDropOpen(false); setActivePanel(null); }
if (e.key.toLowerCase() === 'v') setTool('select');
if (e.key.toLowerCase() === 't') setTool('text');
if (e.key.toLowerCase() === 'r') { setTool('rect'); setLastShape('rect'); }
if (e.key.toLowerCase() === 'c') { e.preventDefault(); setTool('circle'); setLastShape('circle'); }
if (e.key.toLowerCase() === 'p') setTool('pen');
if (e.key.toLowerCase() === 'i') document.getElementById('ie-img-upload')?.click();
if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(e.key)) {
if (selectedIds.size === 0) return;
e.preventDefault();
const delta = e.shiftKey ? 10 : 1;
const dx = e.key === 'ArrowLeft' ? -delta : e.key === 'ArrowRight' ? delta : 0;
const dy = e.key === 'ArrowUp' ? -delta : e.key === 'ArrowDown' ? delta : 0;
setElements(els => { const u = els.map(el => { if (!selectedIds.has(el.id)) return el; if (el.type === 'pen') return { ...el, points: el.points.map(p => ({ x:p.x+dx, y:p.y+dy })) }; return { ...el, x:(el.x||0)+dx, y:(el.y||0)+dy }; }); pushHistory(u); return u; });
}
};
const onKeyUp = (e) => { if (e.key === ' ') { spaceHeldRef.current = false; setSpacePan(false); } };
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
return () => { window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); };
}, [undo, redo, deleteSelected, duplicateSelected, editingTextId, elements, selectedIds]);
// ── Image upload ─────────────────────────────────────────────────────────
const handleReplaceImage = (file, elId, currentEl) => {
const reader = new FileReader();
reader.onload = (ev) => {
const src = ev.target.result;
const img = new Image();
img.onload = () => {
const cropScale = Math.max(currentEl.w / img.width, currentEl.h / img.height);
setElements(els => { const u = els.map(e => e.id === elId ? { ...e, src, naturalW: img.width, naturalH: img.height, cropScale, cropX: 0, cropY: 0 } : e); pushHistory(u); return u; });
setUploadedImages(prev => [{ id: ieUid(), src, name: file.name, w: img.width, h: img.height }, ...prev]);
};
img.src = src;
};
reader.readAsDataURL(file);
};
const handleRemoveBg = async (elId, src) => {
setRemovingBgIds(prev => new Set([...prev, elId]));
try {
while (!window.__imglyRemoveBg) await new Promise(r => setTimeout(r, 100));
const blob = await window.__imglyRemoveBg(src);
const maskedSrc = URL.createObjectURL(blob);
bgCacheRef.current[elId] = { originalSrc: src, maskedSrc };
setElements(els => { const u = els.map(e => e.id === elId ? { ...e, src: maskedSrc } : e); pushHistory(u); return u; });
setBgRemovedIds(prev => new Set([...prev, elId]));
} catch(err) {
console.error('Background removal failed:', err);
alert('Background removal failed: ' + err.message);
} finally {
setRemovingBgIds(prev => { const s = new Set(prev); s.delete(elId); return s; });
}
};
const handleRestoreBg = (elId) => {
const cache = bgCacheRef.current[elId];
if (!cache) return;
setElements(els => els.map(e => e.id === elId ? { ...e, src: cache.originalSrc } : e));
setBgRemovedIds(prev => { const s = new Set(prev); s.delete(elId); return s; });
};
const handleReRemoveBg = (elId) => {
const cache = bgCacheRef.current[elId];
if (!cache) return;
setElements(els => els.map(e => e.id === elId ? { ...e, src: cache.maskedSrc } : e));
setBgRemovedIds(prev => new Set([...prev, elId]));
};
const handleImageUpload = (file) => {
const reader = new FileReader();
reader.onload = (ev) => {
const src = ev.target.result;
const img = new Image();
img.onload = () => {
const maxW = Math.min(img.width, canvasSize.w * 0.7);
const scale = maxW / img.width;
const w = Math.round(img.width * scale), h = Math.round(img.height * scale);
addElement({ id:ieUid(), type:'image', x:Math.round(canvasSize.w/2-w/2), y:Math.round(canvasSize.h/2-h/2), w, h, src, opacity:1, borderRadius:0, naturalW: img.width, naturalH: img.height, cropScale: scale, cropX: 0, cropY: 0 });
setTool('select');
setActivePanel(null);
};
img.src = src;
// Save to library (newest first)
setUploadedImages(prev => [{ id: ieUid(), src, name: file.name, w: 0, h: 0 }, ...prev]);
};
reader.readAsDataURL(file);
};
const handleAddUploaded = (img) => {
const el = new Image();
el.onload = () => {
const maxW = Math.min(el.width, canvasSize.w * 0.7);
const scale = maxW / el.width;
const w = Math.round(el.width * scale), h = Math.round(el.height * scale);
addElement({ id:ieUid(), type:'image', x:Math.round(canvasSize.w/2-w/2), y:Math.round(canvasSize.h/2-h/2), w, h, src:img.src, opacity:1, borderRadius:0 });
setTool('select');
};
el.src = img.src;
};
// ── Fit to screen ─────────────────────────────────────────────────────────
const fitToScreen = React.useCallback(() => {
const vp = viewportRef.current;
if (!vp) return;
const rect = vp.getBoundingClientRect();
setZoom(Math.min((rect.width - 80) / canvasSize.w, (rect.height - 80) / canvasSize.h, 1));
setPan({ x: 0, y: 0 });
}, [canvasSize]);
React.useEffect(() => { setTimeout(fitToScreen, 80); }, [canvasSize]);
// ── SVG pen path ──────────────────────────────────────────────────────────
const penPath = (pts) => {
if (!pts || pts.length < 2) return '';
return `M ${pts[0].x} ${pts[0].y}` + pts.slice(1).map(p => ` L ${p.x} ${p.y}`).join('');
};
// ── Render element ────────────────────────────────────────────────────────
const elCursor = panning||spacePan ? 'grabbing' : tool==='select' ? 'move' : tool==='text' ? 'text' : (tool==='pen'||tool==='rect'||tool==='circle'||tool==='triangle') ? 'crosshair' : 'default';
const renderElement = (el) => {
const sel = selectedIds.has(el.id), editing = editingTextId === el.id, mv = tool === 'select';
const onMD = (e) => onElementMouseDown(e, el);
const onDbl = (e) => { e.stopPropagation(); if (el.type === 'text') setEditingTextId(el.id); };
const onCM = (e) => openCtxMenu(e, el);
const selStyle = { outline: sel && !editing ? '2px solid var(--accent)' : 'none', outlineOffset: 1 };
if (el.type === 'text') return (
{editing ? (
) : (
)}
{/* Delete button on hover */}
{hoveredId === proj.id && (
)}