atanasov/noteboard-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: scroling

Browse source
This commit is contained in:
Stefan 2026-09-29 22:13:03 +03:00
parent 963f6cc7ca
commit 35b8ec6790
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.tsx
View file

@ -9,7 +9,7 @@ import {
import { useApp } from './hailer/use-app'; import { useApp } from './hailer/use-app';
// ── Version ─────────────────────────────────────────────────────────────────── // ── Version ───────────────────────────────────────────────────────────────────
const VERSION = 'v2.1'; const VERSION = 'v2.2';
// Synchronous mobile check — must run before first render so we never // Synchronous mobile check — must run before first render so we never
// put touch-action:none (desktop canvas) in the DOM on a mobile device. // put touch-action:none (desktop canvas) in the DOM on a mobile device.
@ -56,7 +56,7 @@ function fmtDate(iso: string): string {
} }
// insight row: [_id, name, date_sec, content, color, pos_x, pos_y, done] // insight row: [_id, name, date_sec, content, color, pos_x, pos_y, done]
interface Note { _id: string; name: string; content: string; color: string; date: string; x: number; y: number; done: boolean; } interface Note { _id: string; name: string; content: string; color: string; date: string; ts: number; x: number; y: number; done: boolean; }
function rowToNote(row: unknown[]): Note { function rowToNote(row: unknown[]): Note {
const x = parseFloat((row[5] as string) ?? '80'); const x = parseFloat((row[5] as string) ?? '80');
@ -65,6 +65,7 @@ function rowToNote(row: unknown[]): Note {
_id: row[0] as string, _id: row[0] as string,
name: (row[1] as string) || 'Note', name: (row[1] as string) || 'Note',
date: secToLocal(row[2]), date: secToLocal(row[2]),
ts: Number(row[2]) || 0,
content: (row[3] as string) ?? '', content: (row[3] as string) ?? '',
color: (row[4] as string) || 'Yellow', color: (row[4] as string) || 'Yellow',
x: isFinite(x) ? x : 80, x: isFinite(x) ? x : 80,
@ -443,6 +444,7 @@ export default function App() {
_id: id, name, content, _id: id, name, content,
color: effectiveColor, color: effectiveColor,
date: noteDate, date: noteDate,
ts: Math.floor(dt/1000),
x: isFinite(cx) ? cx : 80, x: isFinite(cx) ? cx : 80,
y: isFinite(cy) ? cy : 80, y: isFinite(cy) ? cy : 80,
done: false, done: false,
@ -507,6 +509,9 @@ export default function App() {
}; };
const onWheel=(e:React.WheelEvent)=>{ const onWheel=(e:React.WheelEvent)=>{
// Over a note's text that can scroll: let the text scroll, don't zoom the board.
const ta=(e.target as HTMLElement).closest('textarea');
if (ta && ta.scrollHeight>ta.clientHeight) return;
e.preventDefault(); e.preventDefault();
const f=e.deltaY<0?1.1:0.9; const f=e.deltaY<0?1.1:0.9;
const r=cvs.current!.getBoundingClientRect(); const r=cvs.current!.getBoundingClientRect();
@ -955,7 +960,8 @@ export default function App() {
{/* Notes */} {/* Notes */}
<Box position="absolute" style={{transform:`translate(${offset.x}px,${offset.y}px) scale(${scale})`,transformOrigin:'0 0'}}> <Box position="absolute" style={{transform:`translate(${offset.x}px,${offset.y}px) scale(${scale})`,transformOrigin:'0 0'}}>
{notes.map(n=>( {/* Oldest first, so the newest note is drawn last and sits on top */}
{[...notes].sort((a,b)=>a.ts-b.ts).map(n=>(
<Box key={n._id} data-card> <Box key={n._id} data-card>
<CanvasCard note={n} selected={selId===n._id} scale={scale} <CanvasCard note={n} selected={selId===n._id} scale={scale}
onSelect={setSelId} onDragEnd={dragEnd} onEdit={editNote} onSelect={setSelId} onDragEnd={dragEnd} onEdit={editNote}