Docker/InkNote
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let a drawing run over as many pages as the note

Browse Source 
The ink was stuck on page one while the writing carried on without it,
which stopped making sense the moment a note could run to four pages.
Every page is exported anyway, so every page can be drawn on.

Pages are numbered the way the PDF reader numbers them, and only pages
that carry ink are stored, so the keys are the drawn pages. While drawing
there is always one blank page past the end: pages otherwise come from
how far the writing runs, and to draw on page three you would first have
had to write three pages.

A drawing that lives entirely on page one is still written in the old
single-page shape. Nothing requires that — it means an ordinary note is
stored exactly as it always was, and a device running an older build
still shows it.

The bin clears the page being looked at. Undo and redo work on the
drawing as a whole, because one Undo button that means four different
things depending on where you scrolled is not a button anyone can use.

And a real bug found on the way out: the exporter has written
drawings/<note>.png since the interface was put into English, while the
importer was still looking for zeichnungen/<note>.png. A drawing exported
by this very app came back from its own archive as nothing at all. Both
names are read now, and so are the further pages.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-11 19:25:56 +02:00
1 parent b8c5c42217
commit 228552d453
9 files changed
+671 -136
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/notes/NoteEditor.jsx
+149 -75
View File
@@ -14,7 +14,11 @@ import {
MIN_POINT_DIST,
newSaveToken,
strokeDocOf,
docStrokes,
sheetDocOf,
noteSheets,
sheetStrokes,
sheetsWith,
drawnSheets,
paintStroke,
paintStrokeDoc,
sizeCanvas,
@@ -36,7 +40,6 @@ export function NoteEditor({
backlinks,
}) {
const [mode, setMode] = useState("text");
const canvasRef = useRef(null);
const [tool, setTool] = useState("pen");
const [penColor, setPenColor] = useState(dark ? "#e6edf3" : "#1a1a2e");
const [penSizeIdx, setPenSizeIdx] = useState(DEFAULT_PEN_SIZE);
@@ -63,16 +66,20 @@ export function NoteEditor({
const scrollerRef = useRef(null);
/* ── DRAWING STATE ──
* strokesRef is what the pointer handlers read and write synchronously;
* `strokes` mirrors it so React can repaint the read-only layer. */
const strokesRef = useRef([]);
const [strokes, setStrokes] = useState([]);
* sheetsRef is what the pointer handlers read and write synchronously;
* `sheets` mirrors it so React can repaint the read-only layers. Both are the
* drawing's pages: page number → strokes, with drawn-on pages only. */
const sheetsRef = useRef({});
const [sheets, setSheets] = useState({});
const liveRef = useRef(null); // stroke currently under the pointer
const drawingRef = useRef(false);
const committedRef = useRef(null); // offscreen canvas holding all finished strokes
const drawPageRef = useRef(1); // the page that stroke is being drawn on
const canvasesRef = useRef(new Map()); // page number → its canvas
const committedRef = useRef(null); // offscreen copy of the page being drawn on
const appliedDocRef = useRef(undefined);
const pendingTokenRef = useRef(null);
const hasStrokes = strokes.length > 0;
const drawnPages = useMemo(() => drawnSheets({ sheets }), [sheets]);
const hasStrokes = drawnPages.length > 0;
// Old notes may still carry a raster drawing. It stays visible underneath any
// new vector strokes so migrating a note never loses what was already drawn.
const legacyRaster = note.drawingData && !hideDrawing;
@@ -86,10 +93,11 @@ export function NoteEditor({
* be — and plain text is simply text. */
const needsPage = mode === "draw" || hasStrokes || !!legacyRaster;
const commitStrokes = (next) => {
strokesRef.current = next;
setStrokes(next);
const commitSheets = (next) => {
sheetsRef.current = next;
setSheets(next);
};
const pageStrokes = (page) => sheetsRef.current[String(page)] ?? [];
const T = useMemo(
() => ({
@@ -198,7 +206,7 @@ export function NoteEditor({
const saveDrawingNow = () => {
if (!dirtyRef.current) return;
const token = newSaveToken();
const doc = strokeDocOf(strokesRef.current, token);
const doc = sheetDocOf(sheetsRef.current, token);
appliedDocRef.current = doc; // ignore the echo coming straight back through props
pendingTokenRef.current = token; // ...and any server read still in flight
dirtyRef.current = false;
@@ -223,7 +231,11 @@ export function NoteEditor({
if (!el || !pageH) return;
const height = el.scrollHeight;
const scroller = scrollerRef.current;
const count = Math.max(1, Math.ceil(height / pageH));
/* Drawn pages count too. Ink put on page four of a two-page note is on the
* note, and a count that ignored it would report two pages while showing
* four — and the fourth would have no canvas to be redrawn on. */
const written = Math.max(1, Math.ceil(height / pageH));
const count = Math.max(written, drawnPages[drawnPages.length - 1] ?? 1);
/* The page under the middle of the viewport is the one you are reading —
* the same rule the PDF reader uses. Measuring from the top instead said
* "page 1" while you were looking at the foot of a two-page note, because
@@ -244,11 +256,14 @@ export function NoteEditor({
scroller?.removeEventListener("scroll", recount);
textEditor.off("transaction", recount);
};
}, [textEditor, stageSize.h, mode]);
}, [textEditor, stageSize.h, mode, drawnPages]);
/* ── DRAWING: painting ── */
/* ── DRAWING: painting ──
* Only the page under the pointer is repainted while a stroke is being drawn;
* the others cannot have changed, and repainting four canvases per pointer
* move on a phone is felt. */
const renderFrame = () => {
const c = canvasRef.current;
const c = canvasesRef.current.get(drawPageRef.current);
if (!c) return;
const ctx = c.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -264,23 +279,30 @@ export function NoteEditor({
ctx.restore();
}
};
// Repaint the offscreen canvas from scratch, then show it. Cheap enough at
// stroke boundaries, and it keeps eraser strokes ordered correctly.
const repaintAll = () => {
const c = canvasRef.current;
// Repaint one page's offscreen canvas from scratch, then show it. Cheap enough
// at stroke boundaries, and it keeps eraser strokes ordered correctly.
const repaintPage = (page) => {
const c = canvasesRef.current.get(page);
if (!c) return;
const { bw, bh } = sizeCanvas(c, stageSize.w, stageSize.h);
let off = committedRef.current;
if (!off) {
off = document.createElement("canvas");
committedRef.current = off;
if (page === drawPageRef.current) {
let off = committedRef.current;
if (!off) {
off = document.createElement("canvas");
committedRef.current = off;
}
if (off.width !== bw || off.height !== bh) {
off.width = bw;
off.height = bh;
}
paintStrokeDoc(off.getContext("2d"), strokeDocOf(pageStrokes(page)), bw, bh);
renderFrame();
return;
}
if (off.width !== bw || off.height !== bh) {
off.width = bw;
off.height = bh;
}
paintStrokeDoc(off.getContext("2d"), strokeDocOf(strokesRef.current), bw, bh);
renderFrame();
paintStrokeDoc(c.getContext("2d"), strokeDocOf(pageStrokes(page)), bw, bh);
};
const repaintAll = () => {
for (const page of canvasesRef.current.keys()) repaintPage(page);
};
/* Adopt strokes arriving from props (note switch, or a sync push from another
@@ -297,7 +319,7 @@ export function NoteEditor({
pendingTokenRef.current = null; // our own save echoed back; in sync again
return;
}
commitStrokes(docStrokes(doc));
commitSheets(noteSheets(doc));
setUndoStack([]);
setRedoStack([]);
repaintAll();
@@ -305,11 +327,15 @@ export function NoteEditor({
useEffect(() => {
if (mode === "draw") repaintAll();
}, [mode, stageSize.w, stageSize.h]);
}, [mode, stageSize.w, stageSize.h, pages.count]);
/* ── DRAWING: input ── */
const canonPos = (e) => {
const r = canvasRef.current.getBoundingClientRect();
/* ── DRAWING: input ──
* Coordinates are canonical *within the page drawn on*, so a stroke at the top
* of page three is at the top of page three on every other screen too. */
const canonPos = (e, page) => {
const c = canvasesRef.current.get(page);
if (!c) return { x: 0, y: 0 };
const r = c.getBoundingClientRect();
const t = e.touches ? e.touches[0] : e;
return { x: (t.clientX - r.left) * (CANON_W / r.width), y: (t.clientY - r.top) * (CANON_H / r.height) };
};
@@ -321,10 +347,18 @@ export function NoteEditor({
};
const r1 = (n) => Math.round(n * 10) / 10;
const startDraw = (e) => {
const startDraw = (page) => (e) => {
if (mode !== "draw") return;
e.preventDefault();
const p = canonPos(e);
// The offscreen copy belongs to whichever page is being drawn on, so it has
// to be rebuilt before the first frame — otherwise the previous page's ink
// would appear on this one.
if (drawPageRef.current !== page) {
drawPageRef.current = page;
committedRef.current = null;
repaintPage(page);
}
const p = canonPos(e, page);
liveRef.current = { t: tool, c: penColor, s: r1(currentStrokeWidth()), p: [r1(p.x), r1(p.y)] };
drawingRef.current = true;
renderFrame();
@@ -332,7 +366,7 @@ export function NoteEditor({
const doDraw = (e) => {
if (!drawingRef.current) return;
e.preventDefault();
const p = canonPos(e),
const p = canonPos(e, drawPageRef.current),
live = liveRef.current,
n = live.p.length;
const dx = p.x - live.p[n - 2],
@@ -351,10 +385,11 @@ export function NoteEditor({
renderFrame();
return;
}
const page = drawPageRef.current;
pushUndo();
commitStrokes([...strokesRef.current, live]);
commitSheets(sheetsWith({ sheets: sheetsRef.current }, page, [...pageStrokes(page), live]));
dirtyRef.current = true;
repaintAll();
repaintPage(page);
scheduleDrawingSave();
};
@@ -388,12 +423,15 @@ export function NoteEditor({
setTableMenu({ x: e.clientX, y: e.clientY, items });
};
/* History holds whole drawings, not single pages. Undo after a stroke on page
* three has to be able to put page three back exactly as it was, and a stack
* kept per page would also make one Undo button mean four different things. */
const pushUndo = () => {
setUndoStack((p) => [...p.slice(-30), strokesRef.current]);
setUndoStack((p) => [...p.slice(-30), sheetsRef.current]);
setRedoStack([]);
};
const applyHistory = (next) => {
commitStrokes(next);
commitSheets(next);
dirtyRef.current = true;
repaintAll();
scheduleDrawingSave();
@@ -402,19 +440,21 @@ export function NoteEditor({
if (!undoStack.length) return;
const prev = undoStack[undoStack.length - 1];
setUndoStack((p) => p.slice(0, -1));
setRedoStack((p) => [...p, strokesRef.current]);
setRedoStack((p) => [...p, sheetsRef.current]);
applyHistory(prev);
};
const redo = () => {
if (!redoStack.length) return;
const next = redoStack[redoStack.length - 1];
setRedoStack((p) => p.slice(0, -1));
setUndoStack((p) => [...p, strokesRef.current]);
setUndoStack((p) => [...p, sheetsRef.current]);
applyHistory(next);
};
/* Clears the page being looked at, not the whole drawing. Emptying four pages
* because the bin was pressed on one of them is not what anyone means by it. */
const clearCanvas = () => {
pushUndo();
applyHistory([]);
applyHistory(sheetsWith({ sheets: sheetsRef.current }, pages.current, []));
};
/* Save drawing on mode switch and debounced stroke-end updates. */
@@ -482,6 +522,18 @@ export function NoteEditor({
</button>
);
/* While drawing there is always one blank page past the end.
*
* Pages otherwise come from how far the writing runs, which would leave a
* drawing with nowhere to go: to draw on page three you would first have to
* write three pages. The spare page costs an empty canvas and becomes a real
* page the moment something is drawn on it. */
const canvasPages = mode === "draw" ? pages.count + 1 : pages.count;
const registerCanvas = (page) => (el) => {
if (el) canvasesRef.current.set(page, el);
else canvasesRef.current.delete(page);
};
return (
<div
style={{
@@ -678,7 +730,12 @@ export function NoteEditor({
)}
</div>
<div style={{ flex: 1 }} />
<button style={{ ...tb(), color: "#e5534b" }} onClick={clearCanvas}>
<button
data-clear-page
title={`Clear page ${pages.current}`}
style={{ ...tb(), color: "#e5534b" }}
onClick={clearCanvas}
>
{I.trash}
</button>
</>
@@ -724,7 +781,7 @@ export function NoteEditor({
// The text caps its own width in the stylesheet, so this is only
// the page when there is one.
width: needsPage ? stageSize.w : "100%",
minHeight: needsPage ? stageSize.h : undefined,
minHeight: needsPage ? canvasPages * stageSize.h : undefined,
margin: "0 auto",
background: needsPage ? T.bg : "transparent",
border: needsPage && !isMobileViewport ? `1px solid ${T.border}` : "none",
@@ -735,7 +792,7 @@ export function NoteEditor({
{/* A hairline where each page ends, so the count in the toolbar
corresponds to something you can see. Drawn behind the text and
deaf to the pointer — it marks the paper, it is not part of it. */}
{pages.count > 1 && mode === "text" && (
{canvasPages > 1 && (
<div
aria-hidden
style={{
@@ -784,33 +841,50 @@ export function NoteEditor({
}}
/>
)}
{/* Saved drawing — re-rendered from vectors, so identical on every screen */}
{hasStrokes && mode !== "draw" && (
<DrawingLayer strokes={strokes} width={stageSize.w} height={stageSize.h} zIndex={2} />
)}
{mode === "draw" && (
<canvas
ref={canvasRef}
onMouseDown={startDraw}
onMouseMove={doDraw}
onMouseUp={stopDraw}
onMouseLeave={stopDraw}
onTouchStart={startDraw}
onTouchMove={doDraw}
onTouchEnd={stopDraw}
style={{
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: stageSize.h,
touchAction: "none",
cursor: "crosshair",
background: "transparent",
zIndex: 3,
}}
/>
)}
{/* Saved drawing — re-rendered from vectors, so identical on every
screen. One layer per drawn page; a page nobody has drawn on
needs no canvas at all. */}
{mode !== "draw" &&
drawnPages.map((page) => (
<div
key={page}
data-drawn-page={page}
style={{ position: "absolute", left: 0, right: 0, top: (page - 1) * stageSize.h, height: stageSize.h }}
>
<DrawingLayer
strokes={sheetStrokes({ sheets }, page)}
width={stageSize.w}
height={stageSize.h}
zIndex={2}
/>
</div>
))}
{mode === "draw" &&
Array.from({ length: canvasPages }, (_, i) => i + 1).map((page) => (
<canvas
key={page}
ref={registerCanvas(page)}
data-draw-page={page}
onMouseDown={startDraw(page)}
onMouseMove={doDraw}
onMouseUp={stopDraw}
onMouseLeave={stopDraw}
onTouchStart={startDraw(page)}
onTouchMove={doDraw}
onTouchEnd={stopDraw}
style={{
position: "absolute",
left: 0,
top: (page - 1) * stageSize.h,
width: "100%",
height: stageSize.h,
touchAction: "none",
cursor: "crosshair",
background: "transparent",
zIndex: 3,
}}
/>
))}
</div>
</div>
</div>