/* global React, ReactDOM */ // ───────────────────────────────────────────────────────────────── // Annotate tool — arm (cursor tooltip) → drag (marquee capture) → // annotate modal (pencil / text tools) → save or discard. // ───────────────────────────────────────────────────────────────── const { useState, useEffect, useRef, useCallback, useLayoutEffect } = React; const ANN_COLORS = [ { key: "black", value: "#171717", label: "Black" }, { key: "teal", value: "#3C8480", label: "Teal" }, { key: "blue", value: "#007BE5", label: "Blue" }, { key: "purple", value: "#4338CA", label: "Purple" } ]; const ANN_FONT = '700 24px/30px "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'; const TEXT_MAX = 400, LINE_H = 30; const AnnIcons = { x: , undo: , redo: , pencil: , text: , trash: }; // Composite the marquee area: canvas-area background + the WebGL canvas. function captureRect(rect) { const area = document.querySelector(".canvas-area"); if (!area || rect.w < 4 || rect.h < 4) return null; const ab = area.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, 2); const c = document.createElement("canvas"); c.width = Math.round(rect.w * dpr); c.height = Math.round(rect.h * dpr); const ctx = c.getContext("2d"); const offY = (rect.y - ab.top) * dpr; const g = ctx.createLinearGradient(0, -offY, 0, -offY + ab.height * dpr); g.addColorStop(0, "#F5F5F5"); g.addColorStop(1, "#E6E6E6"); ctx.fillStyle = g; ctx.fillRect(0, 0, c.width, c.height); const gl = area.querySelector("canvas"); if (gl) { const gb = gl.getBoundingClientRect(); const kx = gl.width / gb.width, ky = gl.height / gb.height; ctx.drawImage(gl, (rect.x - gb.left) * kx, (rect.y - gb.top) * ky, rect.w * kx, rect.h * ky, 0, 0, c.width, c.height); } return c.toDataURL("image/png"); } // A stroke is a list of points with nulls marking gaps (cursor left the image). function subpaths(points) { const out = []; let cur = []; points.forEach((p) => { if (p === null) { if (cur.length) out.push(cur); cur = []; } else cur.push(p); }); if (cur.length) out.push(cur); return out; } function pathBox(points) { const pts = points.filter(Boolean); if (!pts.length) return null; const xs = pts.map((p) => p[0]), ys = pts.map((p) => p[1]); const x = Math.min(...xs), y = Math.min(...ys); return { x, y, w: Math.max(...xs) - x, h: Math.max(...ys) - y }; } // Wrap a text layer the way the DOM does (word wrap, 400px max) so the // flattened PNG matches what the user saw. function wrapLines(ctx, text, max) { const out = []; text.split("\n").forEach((para) => { const words = para.split(" "); let line = ""; words.forEach((w) => { const next = line ? line + " " + w : w; if (ctx.measureText(next).width > max && line) { out.push(line); line = w; } else line = next; }); out.push(line); }); return out; } // Flatten screenshot + annotation layers into a single PNG. function flatten(shot, layers, size) { return new Promise((resolve) => { const im = new Image(); im.onload = () => { const dpr = 2; const c = document.createElement("canvas"); c.width = size.w * dpr; c.height = size.h * dpr; const ctx = c.getContext("2d"); ctx.scale(dpr, dpr); ctx.drawImage(im, 0, 0, size.w, size.h); ctx.lineWidth = 4; ctx.lineCap = "round"; ctx.lineJoin = "round"; layers.forEach((l) => { if (l.type === "path") { ctx.strokeStyle = l.color; subpaths(l.points).forEach((seg) => { ctx.beginPath(); seg.forEach((p, i) => i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])); if (seg.length === 1) ctx.lineTo(seg[0][0] + 0.01, seg[0][1]); ctx.stroke(); }); } else { ctx.fillStyle = l.color; ctx.font = ANN_FONT.replace("/30px", "").replace("700 24px", "700 24px"); ctx.textBaseline = "alphabetic"; const lines = wrapLines(ctx, l.text, TEXT_MAX); lines.forEach((line, i) => ctx.fillText(line, l.x, l.y - 15 + LINE_H * i + 22)); } }); resolve(c.toDataURL("image/png")); }; im.src = shot; }); } function AnnotateTool({ onExit, onCapturingChange, onSave, initialShot }) { const [step, setStep] = useState(initialShot ? "review" : "arm"); // arm | drag | review const [cursor, setCursor] = useState(null); const [hoverToolbar, setHoverToolbar] = useState(false); const [rect, setRect] = useState(null); const [shot, setShot] = useState(initialShot || null); const [discard, setDiscard] = useState(false); const startRef = useRef(null); // ── editor state ── const [tool, setTool] = useState("pencil"); // null | pencil | text const [color, setColor] = useState(ANN_COLORS[0].value); const [layers, setLayers] = useState([]); const [history, setHistory] = useState([]); // undo stack: a full layers snapshot per distinct action const [redoStack, setRedoStack] = useState([]); // redo stack: same shape as history const [draft, setDraft] = useState(null); // in-progress stroke const [editing, setEditing] = useState(null); // { x, y, text } const [selected, setSelected] = useState(null); // index of a selected text layer const [nat, setNat] = useState(null); // natural screenshot size const [fit, setFit] = useState(null); // displayed size const stageRef = useRef(null); const canvasRef = useRef(null); const editRef = useRef(null); const dragRef = useRef(null); const caretRef = useRef(null); // Pre-edit snapshot, set only when re-editing an existing text layer (see // onLayerUp/commitText) so the whole edit — old text to new — is one step. const editOrigLayersRef = useRef(null); const capturing = step === "drag"; useEffect(() => { onCapturingChange(capturing); }, [capturing]); const norm = (a, b) => ({ x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), w: Math.abs(a.x - b.x), h: Math.abs(a.y - b.y) }); // ── Arm / marquee ── useEffect(() => { if (step === "review") return; const inCanvas = (e) => !!e.target.closest && !!e.target.closest(".canvas-area"); // The bottom viewport toolbar (view presets, annotate toggle, etc.) sits // visually inside .canvas-area, so without this the arm/marquee logic // below would treat clicking it as "start a capture" instead of letting // the click reach the toolbar's own buttons. const overToolbar = (e) => !!e.target.closest && !!e.target.closest(".vpt-wrap"); const onMove = (e) => { setCursor({ x: e.clientX, y: e.clientY }); setHoverToolbar(overToolbar(e)); if (startRef.current) setRect(norm(startRef.current, { x: e.clientX, y: e.clientY })); }; const onDown = (e) => { if (step !== "arm" || (e.pointerType === "mouse" && e.button !== 0) || !inCanvas(e) || overToolbar(e)) return; e.preventDefault(); startRef.current = { x: e.clientX, y: e.clientY }; setRect({ x: e.clientX, y: e.clientY, w: 0, h: 0 }); setStep("drag"); }; const onUp = () => { if (!startRef.current) return; const r = rect; startRef.current = null; if (!r || r.w < 8 || r.h < 8) { setRect(null); setStep("arm"); return; } requestAnimationFrame(() => { const data = captureRect(r); setRect(null); if (!data) { setStep("arm"); return; } setShot(data); setStep("review"); }); }; // Pointer events (not mouse) so the marquee works under touch too. window.addEventListener("pointermove", onMove); window.addEventListener("pointerdown", onDown, true); window.addEventListener("pointerup", onUp, true); window.addEventListener("pointercancel", onUp, true); return () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerdown", onDown, true); window.removeEventListener("pointerup", onUp, true); window.removeEventListener("pointercancel", onUp, true); }; }, [step, rect]); // Natural screenshot size, then fit it into the stage. useEffect(() => { if (!shot) { setNat(null); return; } const im = new Image(); im.onload = () => setNat({ w: im.width, h: im.height }); im.src = shot; }, [shot]); useLayoutEffect(() => { const measure = () => { const st = stageRef.current; if (!st || !nat) return; const s = Math.min(st.clientWidth / nat.w, st.clientHeight / nat.h); setFit({ w: Math.round(nat.w * s), h: Math.round(nat.h * s) }); }; measure(); window.addEventListener("resize", measure); return () => window.removeEventListener("resize", measure); }, [nat, step]); // Esc: cancel the tool, close a text edit, or ask before dropping a capture. useEffect(() => { const onKey = (e) => { if ((e.key === "Delete" || e.key === "Backspace") && selected != null && !editing) { e.preventDefault(); deleteSelected(); return; } if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z" && !editing) { e.preventDefault(); if (e.shiftKey) redo(); else undo(); return; } if (e.key !== "Escape") return; if (editing) { commitText(); return; } if (selected != null) { setSelected(null); return; } if (step === "review") { if (!discard) askDiscard(); return; } onExit(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [step, onExit, editing, discard, selected, history.length, redoStack.length]); const retake = useCallback(() => { setShot(null); setLayers([]); setHistory([]); setRedoStack([]); setEditing(null); setSelected(null); setTool("pencil"); setStep("arm"); }, []); // Every distinct user action (draw a stroke, delete a layer, recolor a // layer, finish dragging one) snapshots the layers array as it stood right // before that action onto `history`, so undo/redo step through actions one // at a time instead of only ever reverting whole-layer additions. const mutate = (fn) => { setLayers((ls) => { const next = fn(ls); setHistory((h) => h.concat([ls])); setRedoStack([]); return next; }); }; const undo = () => { setHistory((h) => { if (!h.length) return h; const prev = h[h.length - 1]; setLayers((ls) => { setRedoStack((r) => r.concat([ls])); return prev; }); return h.slice(0, -1); }); }; const redo = () => { setRedoStack((r) => { if (!r.length) return r; const next = r[r.length - 1]; setLayers((ls) => { setHistory((h) => h.concat([ls])); return next; }); return r.slice(0, -1); }); }; const pickTool = (name) => { setTool((t) => t === name ? null : name); setSelected(null); }; // Picking a color implies you want to mark up: arm the pencil if no tool is // active. With a text frame selected, the color re-styles that frame. const pickColor = (value) => { setColor(value); if (selected != null) mutate((ls) => ls.map((l, i) => i === selected ? { ...l, color: value } : l)); else if (editing) setEditing((ed) => ed && { ...ed, color: value }); else if (!tool) setTool("pencil"); }; const localPt = (e, clamp) => { const r = canvasRef.current.getBoundingClientRect(); let x = e.clientX - r.left, y = e.clientY - r.top; if (clamp) { x = Math.max(0, Math.min(r.width, x)); y = Math.max(0, Math.min(r.height, y)); } return { x, y }; }; const commitText = () => { const ed = editing; if (!ed) return null; const text = (editRef.current ? editRef.current.innerText : ed.text).replace(/\u00a0/g, " ").replace(/\n+$/, ""); setEditing(null); // Re-editing an existing layer provisionally removed it (see onLayerUp) // without touching history, so the whole edit — old text to new text, or // old text to gone if cleared — lands as a single undoable step here. const before = editOrigLayersRef.current; editOrigLayersRef.current = null; if (!text.trim()) { if (before === null) return null; setLayers((ls) => { setHistory((h) => h.concat([before])); setRedoStack([]); return ls; }); return null; } const layer = { type: "text", x: ed.x, y: ed.y, color: ed.color, text }; setLayers((ls) => { setHistory((h) => h.concat([before !== null ? before : ls])); setRedoStack([]); return ls.concat([layer]); }); return layer; }; // ── Drawing on the screenshot ── const shiftRef = useRef(false); useEffect(() => { const down = (e) => { if (e.key === "Shift") shiftRef.current = true; }; const up = (e) => { if (e.key === "Shift") shiftRef.current = false; }; window.addEventListener("keydown", down); window.addEventListener("keyup", up); window.addEventListener("blur", up); return () => { window.removeEventListener("keydown", down); window.removeEventListener("keyup", up); window.removeEventListener("blur", up); }; }, []); const onCanvasDown = (e) => { if (e.button !== 0) return; setSelected(null); if (editing) { commitText(); return; } if (tool === "pencil") { e.preventDefault(); const p = localPt(e); setDraft({ type: "path", color, points: [[p.x, p.y]] }); try { canvasRef.current.setPointerCapture(e.pointerId); } catch (err) { /* no active pointer */ } } else if (tool === "text") { // preventDefault keeps the browser's default mousedown focus/selection // from stealing focus back off the caret we're about to mount. e.preventDefault(); const p = localPt(e); setEditing({ x: p.x, y: p.y, text: "", color }); } }; const onCanvasMove = (e) => { if (!draftRef.current) return; const r = canvasRef.current.getBoundingClientRect(); const x = e.clientX - r.left, y = e.clientY - r.top; const outside = x < 0 || y < 0 || x > r.width || y > r.height; setDraft((d) => { if (!d) return d; const last = d.points[d.points.length - 1]; if (outside) return last === null ? d : { ...d, points: d.points.concat([null]) }; // Shift held: snap to a perfectly straight horizontal/vertical line from // the stroke's start point, dropping any freehand wobble already drawn. if (shiftRef.current) { const start = d.points[0]; if (start) { const dx = x - start[0], dy = y - start[1]; const p = Math.abs(dx) >= Math.abs(dy) ? [x, start[1]] : [start[0], y]; return { ...d, points: [start, p] }; } } return { ...d, points: d.points.concat([[x, y]]) }; }); }; // Stroke ends are handled by the window-level listeners below so a pointer // release outside the image (or a lost capture) can never leave it drawing. const onCanvasUp = () => {}; const draftRef = useRef(null); draftRef.current = draft; useEffect(() => { if (!draft) return; const end = () => { const d = draftRef.current; draftRef.current = null; if (d && subpaths(d.points).length) mutate((ls) => ls.concat([d])); setDraft(null); }; const move = (e) => { if (e.buttons === 0) end(); }; window.addEventListener("pointerup", end, true); window.addEventListener("pointercancel", end, true); window.addEventListener("lostpointercapture", end, true); window.addEventListener("blur", end); window.addEventListener("pointermove", move, true); return () => { window.removeEventListener("pointerup", end, true); window.removeEventListener("pointercancel", end, true); window.removeEventListener("lostpointercapture", end, true); window.removeEventListener("blur", end); window.removeEventListener("pointermove", move, true); }; }, [draft]); useEffect(() => { if (editing && editRef.current) { const el = editRef.current; el.focus(); const sel = window.getSelection(); const pt = caretRef.current; caretRef.current = null; let r = null; if (pt && document.caretRangeFromPoint) r = document.caretRangeFromPoint(pt.x, pt.y); if (!r || !el.contains(r.startContainer)) { r = document.createRange(); r.selectNodeContents(el); r.collapse(false); } sel.removeAllRanges(); sel.addRange(r); } }, [editing]); // Select / drag any placed markup — text frames and pencil strokes alike. // Grabbing an existing layer takes priority over the active tool (pencil // included), so the user doesn't have to switch to the text tool just to // move or restyle something they already placed. const onLayerDown = (i) => (e) => { e.stopPropagation(); e.preventDefault(); const l = layers[i]; if (selected !== i) { setSelected(i); setColor(l.color); } dragRef.current = { i, sx: e.clientX, sy: e.clientY, orig: l, moved: 0, wasSelected: selected === i }; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) { /* no active pointer */ } }; const onLayerMove = (e) => { const d = dragRef.current; if (!d) return; const dx = e.clientX - d.sx, dy = e.clientY - d.sy; d.moved = Math.max(d.moved, Math.abs(dx) + Math.abs(dy)); setLayers((ls) => ls.map((l, idx) => { if (idx !== d.i) return l; if (d.orig.type === "text") return { ...l, x: d.orig.x + dx, y: d.orig.y + dy }; return { ...l, points: d.orig.points.map((p) => p === null ? null : [p[0] + dx, p[1] + dy]) }; })); }; const onLayerUp = (e) => { const d = dragRef.current; dragRef.current = null; if (!d) return; if (d.moved >= 3) { // A real drag: record the pre-drag position as its own undo step — // onLayerMove itself never touches history, or every intermediate // pixel of the drag would count as a separate action. setLayers((ls) => { const before = ls.map((l, idx) => idx === d.i ? d.orig : l); setHistory((h) => h.concat([before])); setRedoStack([]); return ls; }); return; } if (d.wasSelected && d.orig.type === "text") { // Second click on an already-selected frame drops a caret where clicked. const l = layers[d.i]; caretRef.current = { x: e.clientX, y: e.clientY }; setSelected(null); setLayers((ls) => { editOrigLayersRef.current = ls; return ls.filter((_, idx) => idx !== d.i); }); setEditing({ x: l.x, y: l.y, text: l.text, color: l.color }); } }; // Re-editing a saved annotation with no new markup: nothing to lose, so // close without the discard prompt. const askDiscard = () => { if (initialShot && !layers.length) onExit(); else setDiscard(true); }; const deleteSelected = () => { if (selected == null) return; mutate((ls) => ls.filter((_, i) => i !== selected)); setSelected(null); }; // A text edit in progress is committed inline, so fold it in here too — // React state won't have caught up by the time we flatten. const doSave = async (pending) => { const all = pending ? layers.concat([pending]) : layers; const data = await flatten(shot, all, fit || { w: nat.w, h: nat.h }); onSave && onSave(data); onExit(); }; const strokes = draft ? layers.concat([draft]) : layers; return ( {step === "arm" && cursor && !hoverToolbar &&

Click and drag to capture an area ESC

} {(step === "arm" || step === "drag") &&

Touch and drag to capture an area

} {rect &&

} {step === "review" && ReactDOM.createPortal(

{initialShot ? "Edit Annotation" : "Annotate Screenshot"}

Use the annotation tools to mark up the design with any notes and comments.

{shot && fit &&

{layers.map((l, i) => l.type === "text" &&

{l.text}

)} {editing &&

e.stopPropagation()} onBlur={commitText}>{editing.text}

}

{ANN_COLORS.map((c) => )}

{discard &&

setDiscard(false)}>

}

, document.querySelector(".app") || document.body)} ); } Object.assign(window, { AnnotateTool });