feat: update pen tool with draft synchronization and frame coalescing

+4 -130

TODO.txt

··· 123 123 16. Milestone P: Desktop packaging (Tauri) *wb-P* 124 124 ================================================================================ 125 125 126 - Goal: same app works as a desktop app with filesystem access. 127 - 128 - Tauri + SvelteKit integration: 129 - [x] Configure SvelteKit for static/SPA output 130 - [x] Ensure SSR is disabled for desktop build 131 - [x] Configure Tauri to load the built assets 132 - 133 - File dialogs + FS: 134 - [x] Implement "Save As…" using Tauri dialog + fs APIs 135 - [x] Implement "Open…" using Tauri dialog + fs APIs 136 - [x] Add recent files list (v0: store paths in Tauri local storage) 137 - 138 - (DoD): 139 - - Desktop app opens/saves JSON files on disk and reopens them correctly. 126 + The Tauri build now ships the static SvelteKit bundle with native file dialogs 127 + for open/save/new/rename/delete workflows so the desktop app works end-to-end 128 + offline. 140 129 141 130 ================================================================================ 142 131 17. Milestone Q: Performance + big docs (pragmatic) *wb-Q* ··· 260 249 20. Milestone T: Sketching / Pen Tool (perfect-freehand) *wb-T* 261 250 ================================================================================ 262 251 263 - Goal: 264 - Add a pen tool that produces smooth freehand strokes using perfect-freehand. 265 - Strokes are shapes, undo/redo-able (L), persisted (M), selectable, and render on 266 - Canvas2D. 267 - 268 - Refs: 269 - - perfect-freehand getStroke returns outline polygon points. 270 - - Options: size/thinning/smoothing/streamline/simulatePressure. 271 - 272 - ------------------------------------------------------------------------------ 273 - T1. Data model: Stroke shape 274 - ------------------------------------------------------------------------------ 275 - 276 - /packages/core/src/model.ts: 277 - [x] Add ShapeType: 'stroke' 278 - [x] StrokeShape props (persisted): 279 - - points: Array<[x,y,p?]> " world coords + optional pressure 280 - - style: { color, opacity } 281 - - brush: { size, thinning, smoothing, streamline, simulatePressure } 282 - [x] Derived (NOT persisted): 283 - - outline: computed via computeOutline() from geom.ts 284 - - bounds: computed via shapeBounds() from geom.ts 285 - 286 - (DoD): stroke serializes to JSON and loads back identically. 287 - 288 - ------------------------------------------------------------------------------ 289 - T2. Tool: pen (state machine) 290 - ------------------------------------------------------------------------------ 291 - 292 - /packages/core/src/tools/pen.ts (PenTool) 293 - [x] PointerDown: start draft, push first point 294 - [x] PointerMove: append point if moved > eps; include pressure if available 295 - [x] PointerUp: create ONE history command that inserts the stroke; clear draft 296 - 297 - Perf: 298 - [ ] Coalesce draft updates (rAF) so you don't recompute per event. 299 - 300 - (DoD): one stroke == one undo step; no DB writes until finalize (via M). 301 - 302 - ------------------------------------------------------------------------------ 303 - T3. Geometry: compute outline via perfect-freehand 304 - ------------------------------------------------------------------------------ 305 - 306 - /packages/core/src/geom.ts: 307 - [x] computeOutline(points, brush) -> outlinePoints using getStroke() 308 - [x] boundsFromOutline(outline) -> Box2 309 - 310 - (DoD): outline non-empty for >= 2 points; bounds contain outline. 311 - 312 - ------------------------------------------------------------------------------ 313 - T4. Rendering: fill the outline polygon 314 - ------------------------------------------------------------------------------ 315 - 316 - /packages/renderer/src/index.ts: 317 - [x] drawStroke(ctx, stroke): 318 - - outline = computeOutline(...) (computed on each draw) 319 - - ctx.beginPath(); moveTo/lineTo...; closePath(); fill() 320 - [x] Render draft stroke inline with shapes (using same rendering path) 321 - [x] Selection outline for strokes 322 - 323 - (DoD): strokes look stable while drawing; committed strokes match preview. 324 - 325 - ------------------------------------------------------------------------------ 326 - T5. Hit testing 327 - ------------------------------------------------------------------------------ 328 - 329 - /packages/core/src/geom.ts: 330 - [x] hitTestStroke(p, stroke): 331 - - bounds check first 332 - - inside-outline polygon test (ray cast) 333 - [x] Add stroke case to hitTestPoint 334 - 335 - (DoD): clicking a stroke selects it reliably. 336 - 337 - ------------------------------------------------------------------------------ 338 - T6. Brush settings (thin UI slice) 339 - ------------------------------------------------------------------------------ 340 - 341 - /apps/web/src/lib/components/BrushPopover.svelte: 342 - [x] Sliders: size, thinning, smoothing, streamline 343 - [x] Toggle: simulatePressure 344 - (All map to perfect-freehand options.) 345 - 346 - (DoD): 347 - - settings affect newly drawn strokes immediately. 348 - - tests in BrushPopover.svelte.test.ts 349 - 350 - ------------------------------------------------------------------------------ 351 - T7. Tests 352 - ------------------------------------------------------------------------------ 353 - 354 - /packages/core/tests/geom-stroke.test.ts: 355 - [x] outline computed for simple polyline 356 - [x] bounds correctness 357 - [x] hit test inside/outside sanity 358 - [x] bounds from outline helper 359 - [x] shapeBounds for stroke shapes 360 - 361 - /packages/core/tests/pen-tool.test.ts: 362 - [x] Tool lifecycle tests 363 - [x] Drawing strokes (pointer down/move/up) 364 - [x] Keyboard interactions (Escape to cancel) 365 - [x] Edge cases 366 - 367 - (DoD): All tests passing 368 - 369 - Integration: 370 - [x] one history command per stroke (tested in pen-tool.test.ts) 371 - 372 - ------------------------------------------------------------------------------ 373 - Definition of Done 374 - ------------------------------------------------------------------------------ 375 - 376 - - Pen tool draws smooth strokes using perfect-freehand outlines. 377 - - Strokes are selectable, undo/redo-able in one step, and persisted via Dexie. 378 - - Brush controls change appearance of new strokes. 252 + Perfect-freehand pen strokes now behave like first-class shapes with frame-coalesced drafting, geometry/rendering integration, brush controls, and thorough tests across core and web layers. 379 253 380 254 ================================================================================ 381 255 References (URLs) *wb-refs*

+13 -11

apps/web/src/lib/filebrowser/FileBrowser.svelte

··· 8 8 FileBrowserViewModel, 9 9 InkfiniteDB 10 10 } from 'inkfinite-core'; 11 - import { BoardStatsOps } from 'inkfinite-core'; 11 + import { BoardStatsOps, FileBrowserVM } from 'inkfinite-core'; 12 12 import type { Snippet } from 'svelte'; 13 13 14 14 type Props = { ··· 34 34 desktopRepo = null 35 35 }: Props = $props(); 36 36 37 - let searchQuery = $state(vm.query); 37 + let searchQuery = $derived(vm.query); 38 38 let inspectorOpen = $state(false); 39 39 let inspectorData = $state<BoardInspectorData | null>(null); 40 40 let inspectorLoading = $state(false); ··· 55 55 } 56 56 }); 57 57 58 + function applySearchQuery(nextQuery: string) { 59 + searchQuery = nextQuery; 60 + const updated = FileBrowserVM.setQuery(vm, nextQuery); 61 + vm = updated; 62 + onUpdate?.(updated); 63 + } 64 + 58 65 function handleSearchInput(event: Event) { 59 66 const target = event.target as HTMLInputElement; 60 - searchQuery = target.value; 61 - const updated = vm; 62 - onUpdate?.(updated); 67 + applySearchQuery(target.value); 63 68 } 64 69 65 70 function handleSearchChange() { 66 - const updated = { ...vm, query: searchQuery }; 67 - onUpdate?.(updated); 71 + applySearchQuery(searchQuery); 68 72 } 69 73 70 74 function closeBrowser() { ··· 238 242 {/if} 239 243 240 244 <div class="filebrowser__search"> 241 -  242 245 <input 243 246 type="search" 244 247 class="filebrowser__search-input" 245 248 placeholder="Search boards..." 246 - value={searchQuery} 249 + bind:value={searchQuery} 247 250 oninput={handleSearchInput} 248 251 onchange={handleSearchChange} 249 - aria-label="Search boards" 250 - disabled /> 252 + aria-label="Search boards" /> 251 253 </div> 252 254 253 255 {#if isCreating}

+6

apps/web/src/lib/tests/Canvas.history.test.ts

··· 59 59 update: () => {}, 60 60 set: () => {}, 61 61 }), 62 + createBrushStore: () => ({ 63 + get: () => ({ size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true }), 64 + subscribe: () => () => {}, 65 + update: () => {}, 66 + set: () => {}, 67 + }), 62 68 }), 63 69 ); 64 70

+6

apps/web/src/lib/tests/Canvas.keyboard.test.ts

··· 78 78 update: () => {}, 79 79 set: () => {}, 80 80 }), 81 + createBrushStore: () => ({ 82 + get: () => ({ size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true }), 83 + subscribe: () => () => {}, 84 + update: () => {}, 85 + set: () => {}, 86 + }), 81 87 }), 82 88 ); 83 89

+9 -2

apps/web/src/lib/tests/Canvas.svelte.test.ts

··· 28 28 update: () => {}, 29 29 set: () => {}, 30 30 }), 31 + createBrushStore: () => ({ 32 + get: () => ({ size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true }), 33 + subscribe: () => () => {}, 34 + update: () => {}, 35 + set: () => {}, 36 + }), 31 37 }; 32 38 }); 33 39 ··· 115 121 const { container } = render(Canvas); 116 122 const toolButtons = container.querySelectorAll(".tool-button"); 117 123 118 - expect(toolButtons.length).toBe(7); 124 + expect(toolButtons.length).toBe(8); 119 125 120 126 const toolIds = Array.from(toolButtons).map((btn) => btn.getAttribute("data-tool-id")); 121 - expect(toolIds.slice(0, 6)).toEqual(["select", "rect", "ellipse", "line", "arrow", "text"]); 127 + const coreToolIds = toolIds.filter((id) => id && id !== "history"); 128 + expect(coreToolIds).toEqual(["select", "rect", "ellipse", "line", "arrow", "text", "pen"]); 122 129 123 130 const historyButton = container.querySelector(".tool-button.history-button"); 124 131 expect(historyButton).toBeTruthy();

+78 -11

packages/core/src/tools/pen.ts

··· 15 15 draftPoints: StrokePoint[]; 16 16 /** ID of the shape being created */ 17 17 draftShapeId: string | null; 18 + /** Whether draft points are unsynced with document */ 19 + draftNeedsSync: boolean; 20 + /** Frame bucket when draft was last synced */ 21 + lastUpdateFrame: number | null; 18 22 }; 19 23 20 24 /** ··· 26 30 * Minimum distance (in world units) between points to avoid redundant data 27 31 */ 28 32 const MIN_POINT_DISTANCE = 1; 33 + 34 + /** 35 + * Duration for a render frame (~60 FPS) 36 + */ 37 + const FRAME_DURATION_MS = 1000 / 60; 29 38 30 39 /** 31 40 * Default brush configuration ··· 52 61 private getBrush: () => BrushConfig; 53 62 54 63 constructor(getBrush?: () => BrushConfig) { 55 - this.toolState = { isDrawing: false, draftPoints: [], draftShapeId: null }; 64 + this.toolState = { 65 + isDrawing: false, 66 + draftPoints: [], 67 + draftShapeId: null, 68 + draftNeedsSync: false, 69 + lastUpdateFrame: null, 70 + }; 56 71 this.getBrush = getBrush ?? (() => DEFAULT_BRUSH); 57 72 } 58 73 ··· 108 123 this.toolState.isDrawing = true; 109 124 this.toolState.draftPoints = [firstPoint]; 110 125 this.toolState.draftShapeId = shapeId; 126 + this.toolState.draftNeedsSync = false; 127 + this.toolState.lastUpdateFrame = frameFromTimestamp(action.timestamp); 111 128 112 129 const newPage = { ...currentPage, shapeIds: [...currentPage.shapeIds, shapeId] }; 113 130 ··· 140 157 141 158 const newPoint: StrokePoint = [action.world.x, action.world.y]; 142 159 this.toolState.draftPoints.push(newPoint); 160 + this.toolState.draftNeedsSync = true; 143 161 144 - const updatedShape = { ...shape, props: { ...shape.props, points: [...this.toolState.draftPoints] } }; 162 + if (this.shouldSyncNow(action.timestamp)) { 163 + return this.syncDraftShape(state); 164 + } 145 165 146 - return { 147 - ...state, 148 - doc: { ...state.doc, shapes: { ...state.doc.shapes, [this.toolState.draftShapeId]: updatedShape } }, 149 - }; 166 + return state; 150 167 } 151 168 152 169 private handlePointerUp(state: EditorState, action: Action): EditorState { 153 170 if (action.type !== "pointer-up" || !this.toolState.draftShapeId) return state; 154 171 155 - const shape = state.doc.shapes[this.toolState.draftShapeId]; 156 - if (!shape || shape.type !== "stroke") return state; 172 + let newState = this.syncDraftShape(state); 157 173 158 - let newState = state; 174 + const shape = newState.doc.shapes[this.toolState.draftShapeId]; 175 + if (!shape || shape.type !== "stroke") { 176 + this.resetToolState(); 177 + return newState; 178 + } 159 179 160 180 if (this.toolState.draftPoints.length < MIN_POINTS) { 161 - newState = this.cancelStroke(state); 181 + newState = this.cancelStroke(newState); 162 182 } 163 183 184 + this.toolState.lastUpdateFrame = frameFromTimestamp(action.timestamp); 164 185 this.resetToolState(); 165 186 return newState; 166 187 } ··· 202 223 } 203 224 204 225 private resetToolState(): void { 205 - this.toolState = { isDrawing: false, draftPoints: [], draftShapeId: null }; 226 + this.toolState = { 227 + isDrawing: false, 228 + draftPoints: [], 229 + draftShapeId: null, 230 + draftNeedsSync: false, 231 + lastUpdateFrame: null, 232 + }; 206 233 } 234 + 235 + private shouldSyncNow(timestamp: number): boolean { 236 + const frame = frameFromTimestamp(timestamp); 237 + if (this.toolState.lastUpdateFrame === null) { 238 + this.toolState.lastUpdateFrame = frame; 239 + return true; 240 + } 241 + if (frame !== this.toolState.lastUpdateFrame) { 242 + this.toolState.lastUpdateFrame = frame; 243 + return true; 244 + } 245 + return false; 246 + } 247 + 248 + private syncDraftShape(state: EditorState): EditorState { 249 + if (!this.toolState.draftShapeId || !this.toolState.draftNeedsSync) { 250 + return state; 251 + } 252 + 253 + const shape = state.doc.shapes[this.toolState.draftShapeId]; 254 + if (!shape || shape.type !== "stroke") { 255 + this.toolState.draftNeedsSync = false; 256 + return state; 257 + } 258 + 259 + const updatedShape = { ...shape, props: { ...shape.props, points: [...this.toolState.draftPoints] } }; 260 + this.toolState.draftNeedsSync = false; 261 + 262 + return { 263 + ...state, 264 + doc: { ...state.doc, shapes: { ...state.doc.shapes, [this.toolState.draftShapeId]: updatedShape } }, 265 + }; 266 + } 267 + } 268 + 269 + function frameFromTimestamp(timestamp: number): number { 270 + if (!Number.isFinite(timestamp) || timestamp < 0) { 271 + return 0; 272 + } 273 + return Math.floor(timestamp / FRAME_DURATION_MS); 207 274 }

+83 -9

packages/core/tests/pen-tool.test.ts

··· 1 - import { describe, expect, it } from "vitest"; 1 + import { beforeEach, describe, expect, it } from "vitest"; 2 2 import { PageRecord, Store } from "../src"; 3 3 import type { Action } from "../src/actions"; 4 4 import { Modifiers, PointerButtons } from "../src/actions"; 5 5 import { PenTool } from "../src/tools/pen"; 6 6 7 - function createPointerDownAction(worldX: number, worldY: number): Action { 7 + let currentTimestamp = 1_000; 8 + 9 + function resetTimestamp(): void { 10 + currentTimestamp = 1_000; 11 + } 12 + 13 + function nextTimestamp(step = 17): number { 14 + currentTimestamp += step; 15 + return currentTimestamp; 16 + } 17 + 18 + function createPointerDownAction(worldX: number, worldY: number, timestamp = nextTimestamp()): Action { 8 19 return { 9 20 type: "pointer-down", 10 21 world: { x: worldX, y: worldY }, ··· 12 23 button: 0, 13 24 buttons: PointerButtons.create(true, false, false), 14 25 modifiers: Modifiers.create(false, false, false, false), 15 - timestamp: Date.now(), 26 + timestamp, 16 27 }; 17 28 } 18 29 19 - function createPointerMoveAction(worldX: number, worldY: number): Action { 30 + function createPointerMoveAction(worldX: number, worldY: number, timestamp = nextTimestamp()): Action { 20 31 return { 21 32 type: "pointer-move", 22 33 world: { x: worldX, y: worldY }, 23 34 screen: { x: worldX, y: worldY }, 24 35 buttons: PointerButtons.create(true, false, false), 25 36 modifiers: Modifiers.create(false, false, false, false), 26 - timestamp: Date.now(), 37 + timestamp, 27 38 }; 28 39 } 29 40 30 - function createPointerUpAction(worldX: number, worldY: number): Action { 41 + function createPointerUpAction(worldX: number, worldY: number, timestamp = nextTimestamp()): Action { 31 42 return { 32 43 type: "pointer-up", 33 44 world: { x: worldX, y: worldY }, ··· 35 46 button: 0, 36 47 buttons: PointerButtons.create(false, false, false), 37 48 modifiers: Modifiers.create(false, false, false, false), 38 - timestamp: Date.now(), 49 + timestamp, 39 50 }; 40 51 } 41 52 42 - function createKeyDownAction(key: string): Action { 53 + function createKeyDownAction(key: string, timestamp = nextTimestamp()): Action { 43 54 return { 44 55 type: "key-down", 45 56 key, 46 57 code: key, 47 58 modifiers: Modifiers.create(false, false, false, false), 48 59 repeat: false, 49 - timestamp: Date.now(), 60 + timestamp, 50 61 }; 51 62 } 52 63 53 64 describe("PenTool", () => { 65 + beforeEach(() => { 66 + resetTimestamp(); 67 + }); 68 + 54 69 describe("Tool lifecycle", () => { 55 70 it("should have correct id", () => { 56 71 const tool = new PenTool(); ··· 147 162 expect(shape.type).toBe("stroke"); 148 163 if (shape.type === "stroke") { 149 164 expect(shape.props.points.length).toBe(3); 165 + } 166 + }); 167 + 168 + it("coalesces pointer updates within the same frame", () => { 169 + const tool = new PenTool(); 170 + const store = new Store(); 171 + const page = PageRecord.create("Page 1", "page:1"); 172 + 173 + store.setState((state) => ({ 174 + ...state, 175 + doc: { ...state.doc, pages: { [page.id]: page } }, 176 + ui: { ...state.ui, currentPageId: page.id }, 177 + })); 178 + 179 + let state = store.getState(); 180 + 181 + const downTimestamp = nextTimestamp(); 182 + state = tool.onAction(state, createPointerDownAction(100, 100, downTimestamp)); 183 + 184 + state = tool.onAction(state, createPointerMoveAction(110, 110, downTimestamp)); 185 + let shape = state.doc.shapes[Object.keys(state.doc.shapes)[0]]; 186 + if (shape?.type === "stroke") { 187 + expect(shape.props.points.length).toBe(1); 188 + } 189 + 190 + state = tool.onAction(state, createPointerMoveAction(120, 120, nextTimestamp())); 191 + shape = state.doc.shapes[Object.keys(state.doc.shapes)[0]]; 192 + if (shape?.type === "stroke") { 193 + expect(shape.props.points.length).toBe(3); 194 + } 195 + }); 196 + 197 + it("flushes pending points on pointer up even without a new frame", () => { 198 + const tool = new PenTool(); 199 + const store = new Store(); 200 + const page = PageRecord.create("Page 1", "page:1"); 201 + 202 + store.setState((state) => ({ 203 + ...state, 204 + doc: { ...state.doc, pages: { [page.id]: page } }, 205 + ui: { ...state.ui, currentPageId: page.id }, 206 + })); 207 + 208 + let state = store.getState(); 209 + 210 + const downTimestamp = nextTimestamp(); 211 + state = tool.onAction(state, createPointerDownAction(100, 100, downTimestamp)); 212 + 213 + state = tool.onAction(state, createPointerMoveAction(110, 110, downTimestamp)); 214 + 215 + state = tool.onAction(state, createPointerUpAction(110, 110, downTimestamp)); 216 + 217 + const shapeId = Object.keys(state.doc.shapes)[0]; 218 + const shape = state.doc.shapes[shapeId]; 219 + 220 + expect(shape?.type).toBe("stroke"); 221 + if (shape?.type === "stroke") { 222 + expect(shape.props.points.length).toBe(2); 223 + expect(shape.props.points[1]).toEqual([110, 110]); 150 224 } 151 225 }); 152 226

Configure Feed

Configure Feed