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