Add Draw mode for Apple Pencil annotation on scripture panel

Adds a third layout option alongside Stacked and Split. In Draw mode a
canvas overlay covers the scripture panel; the Pointer Events API routes
Apple Pencil input to perfect-freehand strokes while letting finger
touches fall through for normal scrolling. A floating toolbar provides
pen, highlighter, and eraser tools, six color swatches, S/M/L sizes,
undo, clear, and a Done button to return to Stacked view.

Strokes are stored as inkStrokes[] on each chunk and rendered as a
read-only transparent canvas overlay (InkLayer) in Stacked/Split modes.
migrateChunk is updated so all existing chunks get inkStrokes: [] on
first load.

Also adds a simple in-memory rate limiter on auth endpoints (10 attempts
per 15 min per IP).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
2026-08-12 08:29:20 -04:00
parent 96b6e840a3
commit 791e809222
7 changed files with 390 additions and 10 deletions
+9 -1
View File
@@ -168,6 +168,7 @@ export function migrateChunk(chunk) {
episodeTitle: chunk.episodeTitle ?? '',
finalScript: chunk.finalScript ?? '',
tags: chunk.tags ?? [],
inkStrokes: chunk.inkStrokes ?? [],
}; // already new format
}
return {
@@ -177,6 +178,7 @@ export function migrateChunk(chunk) {
application: '',
crossReferences: [],
tags: [],
inkStrokes: [],
spilloverEndVerse: null,
generalNotes: '',
episodeNumber: '',
@@ -1283,7 +1285,10 @@ const App = () => {
}, []);
const [studyLayout, setStudyLayout] = useState(
() => localStorage.getItem('studyLayout') || 'stacked',
); // 'stacked' | 'split'
); // 'stacked' | 'split' | 'annotate'
const [drawTool, setDrawTool] = useState('pen');
const [drawColor, setDrawColor] = useState('#0f172a');
const [drawSize, setDrawSize] = useState(0.012);
const [activeStudyTab, setActiveStudyTab] = useState(
() => localStorage.getItem('activeStudyTab') || 'notes',
);
@@ -3751,6 +3756,9 @@ const deleteProject = (id) => {
selectedChunkVerses,
selectedChunkGlobalIndex,
studyLayout, setStudyLayout,
drawTool, setDrawTool,
drawColor, setDrawColor,
drawSize, setDrawSize,
activeStudyTab, setActiveStudyTab,
mobileStudyTab, setMobileStudyTab,
collapsedSections, setCollapsedSections,