Add notebook draw mode to study and reader pages
Draw mode in the study page replaces all note panels with a full ruled notebook canvas (no cross-refs, observations, or text boxes) so the user has a clean writing surface. Ink strokes are saved per chunk and exported as SVG in the HTML export. The reader page gets a Draw toggle button that reveals the same notebook canvas below the verse list, with strokes persisted per book+chapter in localStorage via readerInkByPage. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
+82
-116
@@ -9,58 +9,24 @@ const INK_SIZES = [
|
||||
{ label: 'L', value: 0.025 },
|
||||
];
|
||||
|
||||
// Read-only ink overlay shown in Stacked / Split mode.
|
||||
export function InkLayer({ strokes }) {
|
||||
const canvasRef = useRef(null);
|
||||
const strokesRef = useRef(strokes);
|
||||
strokesRef.current = strokes;
|
||||
|
||||
const render = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
renderInkToCanvas(canvas, strokesRef.current);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { render(); }, [strokes, render]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const obs = new ResizeObserver(render);
|
||||
obs.observe(canvas);
|
||||
return () => obs.disconnect();
|
||||
}, [render]);
|
||||
|
||||
if (!strokes.length) return null;
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="pointer-events-none absolute inset-0 h-full w-full"
|
||||
style={{ zIndex: 5 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Interactive draw canvas overlay for Draw mode.
|
||||
export default function DrawCanvas() {
|
||||
const {
|
||||
selectedChunk,
|
||||
updateChunk,
|
||||
drawTool, setDrawTool,
|
||||
drawColor, setDrawColor,
|
||||
drawSize, setDrawSize,
|
||||
setStudyLayout,
|
||||
} = useApp();
|
||||
// Standalone notebook-style draw canvas.
|
||||
// strokes: array of saved stroke objects
|
||||
// onStrokesChange: (newStrokes) => void
|
||||
// onDone: optional () => void — shows "Done" button when provided
|
||||
export default function DrawCanvas({ strokes, onStrokesChange, onDone }) {
|
||||
const { drawTool, setDrawTool, drawColor, setDrawColor, drawSize, setDrawSize } = useApp();
|
||||
|
||||
const canvasRef = useRef(null);
|
||||
const activeStrokeRef = useRef([]);
|
||||
|
||||
// Refs prevent stale closures in ResizeObserver callback
|
||||
const strokesRef = useRef([]);
|
||||
// Refs prevent stale closures in stable callbacks
|
||||
const strokesRef = useRef(strokes);
|
||||
const onStrokesChangeRef = useRef(onStrokesChange);
|
||||
const drawToolRef = useRef(drawTool);
|
||||
const drawColorRef = useRef(drawColor);
|
||||
const drawSizeRef = useRef(drawSize);
|
||||
strokesRef.current = selectedChunk?.inkStrokes ?? [];
|
||||
strokesRef.current = strokes;
|
||||
onStrokesChangeRef.current = onStrokesChange;
|
||||
drawToolRef.current = drawTool;
|
||||
drawColorRef.current = drawColor;
|
||||
drawSizeRef.current = drawSize;
|
||||
@@ -78,7 +44,7 @@ export default function DrawCanvas() {
|
||||
);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { render(); }, [selectedChunk?.inkStrokes, drawTool, drawColor, drawSize, render]);
|
||||
useEffect(() => { render(); }, [strokes, drawTool, drawColor, drawSize, render]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
@@ -113,68 +79,47 @@ export default function DrawCanvas() {
|
||||
e.preventDefault();
|
||||
const pt = getPoint(e);
|
||||
activeStrokeRef.current = [...activeStrokeRef.current, pt];
|
||||
|
||||
if (drawToolRef.current === 'eraser') {
|
||||
const [ex, ey] = pt;
|
||||
const r = drawSizeRef.current * 3;
|
||||
const remaining = strokesRef.current.filter((s) =>
|
||||
!s.points.some(([sx, sy]) => Math.hypot(sx - ex, sy - ey) < r),
|
||||
const remaining = strokesRef.current.filter(
|
||||
(s) => !s.points.some(([sx, sy]) => Math.hypot(sx - ex, sy - ey) < r),
|
||||
);
|
||||
if (remaining.length !== strokesRef.current.length) {
|
||||
updateChunk(selectedChunk.id, { inkStrokes: remaining });
|
||||
}
|
||||
if (remaining.length !== strokesRef.current.length)
|
||||
onStrokesChangeRef.current(remaining);
|
||||
}
|
||||
render();
|
||||
}, [getPoint, render, updateChunk, selectedChunk]);
|
||||
}, [getPoint, render]);
|
||||
|
||||
const onPointerUp = useCallback((e) => {
|
||||
if (e.pointerType === 'touch') return;
|
||||
const pts = activeStrokeRef.current;
|
||||
if (drawToolRef.current !== 'eraser' && pts.length > 1) {
|
||||
updateChunk(selectedChunk.id, {
|
||||
inkStrokes: [
|
||||
...strokesRef.current,
|
||||
{
|
||||
id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
|
||||
tool: drawToolRef.current,
|
||||
color: drawColorRef.current,
|
||||
size: drawSizeRef.current,
|
||||
points: pts,
|
||||
},
|
||||
],
|
||||
});
|
||||
onStrokesChangeRef.current([
|
||||
...strokesRef.current,
|
||||
{
|
||||
id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
|
||||
tool: drawToolRef.current,
|
||||
color: drawColorRef.current,
|
||||
size: drawSizeRef.current,
|
||||
points: pts,
|
||||
},
|
||||
]);
|
||||
}
|
||||
activeStrokeRef.current = [];
|
||||
render();
|
||||
}, [render, updateChunk, selectedChunk]);
|
||||
}, [render]);
|
||||
|
||||
const strokes = selectedChunk?.inkStrokes ?? [];
|
||||
|
||||
const undo = () => {
|
||||
if (strokes.length > 0)
|
||||
updateChunk(selectedChunk.id, { inkStrokes: strokes.slice(0, -1) });
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
if (strokes.length > 0 && window.confirm('Clear all annotations on this chunk?'))
|
||||
updateChunk(selectedChunk.id, { inkStrokes: [] });
|
||||
};
|
||||
const undo = () => strokes.length > 0 && onStrokesChange(strokes.slice(0, -1));
|
||||
const clear = () =>
|
||||
strokes.length > 0 &&
|
||||
window.confirm('Clear all ink notes?') &&
|
||||
onStrokesChange([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 z-10 h-full w-full cursor-crosshair"
|
||||
style={{ touchAction: 'pan-y pinch-zoom' }}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerCancel={onPointerUp}
|
||||
/>
|
||||
|
||||
{/* Floating toolbar */}
|
||||
<div className="absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 items-center gap-1 rounded-2xl border border-slate-200 bg-white/95 px-3 py-2 shadow-xl backdrop-blur-sm">
|
||||
{/* Tool buttons */}
|
||||
<div className="overflow-hidden rounded-3xl border border-slate-200 shadow-sm">
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-1 border-b border-slate-200 bg-white px-3 py-2">
|
||||
{[
|
||||
{ id: 'pen', label: '✒', title: 'Pen' },
|
||||
{ id: 'highlighter', label: '▐', title: 'Highlighter' },
|
||||
@@ -185,10 +130,8 @@ export default function DrawCanvas() {
|
||||
type="button"
|
||||
title={t.title}
|
||||
onClick={() => setDrawTool(t.id)}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-xl text-sm font-bold transition ${
|
||||
drawTool === t.id
|
||||
? 'bg-slate-900 text-white'
|
||||
: 'text-slate-600 hover:bg-slate-100'
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold transition ${
|
||||
drawTool === t.id ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
@@ -197,7 +140,6 @@ export default function DrawCanvas() {
|
||||
|
||||
<div className="mx-1 h-5 w-px bg-slate-200" />
|
||||
|
||||
{/* Color swatches */}
|
||||
{INK_COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
@@ -205,25 +147,20 @@ export default function DrawCanvas() {
|
||||
onClick={() => { setDrawColor(c); if (drawTool === 'eraser') setDrawTool('pen'); }}
|
||||
style={{ background: c }}
|
||||
className={`h-5 w-5 rounded-full border-2 transition ${
|
||||
drawColor === c && drawTool !== 'eraser'
|
||||
? 'scale-125 border-slate-900'
|
||||
: 'border-white shadow-sm'
|
||||
drawColor === c && drawTool !== 'eraser' ? 'scale-125 border-slate-900' : 'border-white shadow-sm'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="mx-1 h-5 w-px bg-slate-200" />
|
||||
|
||||
{/* Size buttons */}
|
||||
{INK_SIZES.map((s) => (
|
||||
<button
|
||||
key={s.label}
|
||||
type="button"
|
||||
onClick={() => setDrawSize(s.value)}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-xl text-xs font-bold transition ${
|
||||
drawSize === s.value
|
||||
? 'bg-slate-900 text-white'
|
||||
: 'text-slate-600 hover:bg-slate-100'
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-lg text-xs font-bold transition ${
|
||||
drawSize === s.value ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
{s.label}
|
||||
@@ -236,7 +173,7 @@ export default function DrawCanvas() {
|
||||
type="button"
|
||||
onClick={undo}
|
||||
disabled={strokes.length === 0}
|
||||
className="rounded-xl px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-100 disabled:opacity-40"
|
||||
className="rounded-lg px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-100 disabled:opacity-40"
|
||||
>
|
||||
Undo
|
||||
</button>
|
||||
@@ -244,21 +181,50 @@ export default function DrawCanvas() {
|
||||
type="button"
|
||||
onClick={clear}
|
||||
disabled={strokes.length === 0}
|
||||
className="rounded-xl px-2.5 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 disabled:opacity-40"
|
||||
className="rounded-lg px-2.5 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 disabled:opacity-40"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
|
||||
<div className="mx-1 h-5 w-px bg-slate-200" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStudyLayout('stacked')}
|
||||
className="rounded-xl bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800"
|
||||
>
|
||||
Done ✓
|
||||
</button>
|
||||
{onDone && (
|
||||
<>
|
||||
<div className="mx-1 h-5 w-px bg-slate-200" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDone}
|
||||
className="rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800"
|
||||
>
|
||||
Done ✓
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
{/* Notebook canvas */}
|
||||
<div
|
||||
className="relative"
|
||||
style={{
|
||||
minHeight: 640,
|
||||
background: 'white',
|
||||
backgroundImage: 'repeating-linear-gradient(transparent 0px, transparent 31px, #dde3ec 31px, #dde3ec 32px)',
|
||||
}}
|
||||
>
|
||||
{/* Red margin line */}
|
||||
<div className="absolute bottom-0 left-10 top-0 w-px bg-rose-200" style={{ zIndex: 1 }} />
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 h-full w-full"
|
||||
style={{
|
||||
zIndex: 2,
|
||||
cursor: drawTool === 'eraser' ? 'cell' : 'crosshair',
|
||||
touchAction: 'pan-y pinch-zoom',
|
||||
}}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerCancel={onPointerUp}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user