// GetContent — profielfoto-cropper. Modal die na het kiezen van een afbeelding // verschijnt: verschuiven (slepen), in-/uitzoomen (slider, scroll of knijpen) en // een ronde crop-preview. Wat binnen de cirkel valt wordt de ronde profielfoto. // Werkt op desktop én mobiel (pointer events + touch-action: none). function AvatarCropper({ file, onCancel, onCropped }) { const NS = window.GetContentDesignSystem_aa0f52; const { Button } = NS; // vierkant crop-venster; op smalle schermen kleiner zodat het past const vp = React.useMemo(() => Math.max(220, Math.min(320, (typeof window !== 'undefined' ? window.innerWidth : 360) - 72)), []); const OUT = 512; // uitvoer-resolutie (vierkant, wordt rond getoond) const [url, setUrl] = React.useState(''); const [nat, setNat] = React.useState(null); // { w, h } natuurlijke afmetingen const [base, setBase] = React.useState(1); // minimale schaal (venster vullen) const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const imgElRef = React.useRef(null); // geladen HTMLImageElement (voor canvas) const natRef = React.useRef(null); // natuurlijke afmetingen (voor handlers/save; geen stale state) const t = React.useRef({ scale: 1, tx: 0, ty: 0 }); const [, force] = React.useReducer((x) => x + 1, 0); // interactie-state const pointers = React.useRef(new Map()); const pinchPrev = React.useRef(0); // afbeelding laden React.useEffect(() => { if (!file) return; const u = URL.createObjectURL(file); setUrl(u); const im = new Image(); im.onload = () => { imgElRef.current = im; const w = im.naturalWidth, h = im.naturalHeight; const b = Math.max(vp / w, vp / h); natRef.current = { w, h }; setNat({ w, h }); setBase(b); t.current = { scale: b, tx: (vp - w * b) / 2, ty: (vp - h * b) / 2 }; force(); }; im.onerror = () => setErr('Kon de afbeelding niet laden. Kies een andere.'); im.src = u; return () => URL.revokeObjectURL(u); }, [file, vp]); // body-scroll blokkeren terwijl de modal open is React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, []); const clampT = (tx, ty, scale) => { const n = natRef.current; if (!n) return { tx, ty }; const w = n.w * scale, h = n.h * scale; return { tx: Math.min(0, Math.max(vp - w, tx)), ty: Math.min(0, Math.max(vp - h, ty)), }; }; const zoomAt = (ns, px, py) => { if (!natRef.current) return; const cur = t.current, cs = cur.scale; const ix = (px - cur.tx) / cs, iy = (py - cur.ty) / cs; const c = clampT(px - ix * ns, py - iy * ns, ns); t.current = { scale: ns, tx: c.tx, ty: c.ty }; force(); }; const clampScale = (s) => Math.max(base, Math.min(base * 4, s)); // ---- pointer / touch ---- const onPointerDown = (e) => { e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pointers.current.size === 2) { const [a, b] = [...pointers.current.values()]; pinchPrev.current = Math.hypot(a.x - b.x, a.y - b.y); } }; const onPointerMove = (e) => { const p = pointers.current.get(e.pointerId); if (!p) return; const prevX = p.x, prevY = p.y; p.x = e.clientX; p.y = e.clientY; if (pointers.current.size >= 2) { const [a, b] = [...pointers.current.values()]; const d = Math.hypot(a.x - b.x, a.y - b.y); if (pinchPrev.current > 0) { const ns = clampScale(t.current.scale * (d / pinchPrev.current)); const rect = e.currentTarget.getBoundingClientRect(); zoomAt(ns, (a.x + b.x) / 2 - rect.left, (a.y + b.y) / 2 - rect.top); } pinchPrev.current = d; } else { const c = clampT(t.current.tx + (e.clientX - prevX), t.current.ty + (e.clientY - prevY), t.current.scale); t.current = Object.assign({}, t.current, c); force(); } }; const onPointerUp = (e) => { pointers.current.delete(e.pointerId); if (pointers.current.size < 2) pinchPrev.current = 0; }; const onWheel = (e) => { e.preventDefault(); const rect = e.currentTarget.getBoundingClientRect(); const ns = clampScale(t.current.scale * (e.deltaY < 0 ? 1.08 : 0.92)); zoomAt(ns, e.clientX - rect.left, e.clientY - rect.top); }; const save = () => { if (!natRef.current || !imgElRef.current) return; setBusy(true); try { const cur = t.current; const srcSize = vp / cur.scale; // zichtbaar deel in natuurlijke px const srcX = -cur.tx / cur.scale; const srcY = -cur.ty / cur.scale; const canvas = document.createElement('canvas'); canvas.width = OUT; canvas.height = OUT; const ctx = canvas.getContext('2d'); ctx.imageSmoothingQuality = 'high'; ctx.drawImage(imgElRef.current, srcX, srcY, srcSize, srcSize, 0, 0, OUT, OUT); canvas.toBlob((blob) => { setBusy(false); if (!blob) { setErr('Bijsnijden is niet gelukt. Probeer het opnieuw.'); return; } onCropped(blob); }, 'image/jpeg', 0.9); } catch (e2) { setBusy(false); setErr('Bijsnijden is niet gelukt. Probeer het opnieuw.'); } }; const ready = !!(nat && url); return (
{ if (e.target === e.currentTarget) onCancel(); }}>

Profielfoto bijsnijden

Versleep om te verplaatsen, zoom met de balk of scroll.

{ready && ( )} {/* ronde crop-indicator: dimt alles buiten de cirkel */}
{/* zoom-slider (fijn op mobiel) */} {ready && (
zoomAt(clampScale(parseFloat(e.target.value)), vp / 2, vp / 2)} aria-label="Zoomen" style={{ flex: 1, accentColor: 'var(--accent)' }} />
)} {err &&

{err}

}
); } window.AvatarCropper = AvatarCropper;