Keep draw pen settings inside DrawCanvas

Only the Reader's canvas uses them now. A module-level lastPen keeps the
chosen tool/color/size when Draw mode is toggled off and on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Opus 5.5 committed 2026-09-22 14:53:17 -04:00
1 parent a7e00a76b5
commit 365fb1b567
2 files changed
+7 -8

No files matched your search

-6
View File
@@ -147,9 +147,6 @@ const App = () => {
const saved = localStorage.getItem('studyLayout');
return saved === 'stacked' ? 'stacked' : 'split'; // 'annotate' (Draw) was removed
}); // 'stacked' | 'split'
const [drawTool, setDrawTool] = useState('pen');
const [drawColor, setDrawColor] = useState('#0f172a');
const [drawSize, setDrawSize] = useState(0.003);
const [activeStudyTab, setActiveStudyTab] = useState(
() => localStorage.getItem('activeStudyTab') || 'notes',
);
@@ -1676,9 +1673,6 @@ const App = () => {
selectedChunkVerses,
selectedChunkGlobalIndex,
studyLayout, setStudyLayout,
drawTool, setDrawTool,
drawColor, setDrawColor,
drawSize, setDrawSize,
activeStudyTab, setActiveStudyTab,
mobileStudyTab, setMobileStudyTab,
collapsedSections, setCollapsedSections,
+7 -2
View File
@@ -1,5 +1,4 @@
import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
import { useApp } from '../context/AppContext.js';
import { renderInkToCanvas } from '../utils/inkRender.js';
const INK_COLORS = ['#0f172a', '#ef4444', '#3b82f6', '#16a34a', '#f59e0b', '#a855f7'];
@@ -11,6 +10,9 @@ const INK_SIZES = [
];
const PAGE_HEIGHT = 640; // px per notebook page
// The last pen settings, so toggling Draw mode off and on keeps your choice.
let lastPen = { tool: 'pen', color: INK_COLORS[0], size: INK_SIZES[0].value };
// Page count is persisted as a hidden metadata stroke at strokes[0]
// so the canvas size survives navigation without a separate state key.
function extractMeta(strokes) {
@@ -30,7 +32,10 @@ function packStrokes(realStrokes, pageCount) {
// headerContent: optional JSX rendered above the notebook area.
// The canvas extends over it so you can draw directly on the content.
export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerContent }) {
const { drawTool, setDrawTool, drawColor, setDrawColor, drawSize, setDrawSize } = useApp();
const [drawTool, setDrawTool] = useState(lastPen.tool);
const [drawColor, setDrawColor] = useState(lastPen.color);
const [drawSize, setDrawSize] = useState(lastPen.size);
useEffect(() => { lastPen = { tool: drawTool, color: drawColor, size: drawSize }; }, [drawTool, drawColor, drawSize]);
const { pageCount: initPages } = extractMeta(strokes);
const [pageCount, setPageCount] = useState(initPages);