web based infinite canvas
1================================================================================
2- Build a Svelte-native editor core (TS) + renderer + UI.
3- Keep the "engine" framework-agnostic so Web + Tauri share it.
4- Defer collaboration until single-player is correct.
5
6Conventions:
7- [ ] Task
8- (DoD) Definition of Done for the milestone
9- Files shown are ideas, not requirements
10
11================================================================================
12Milestone P: Performance *wb-P*
13================================================================================
14
15Goal: the editor stays responsive with many shapes.
16
17[ ] Add spatial index:
18 - rebuild index on doc changes
19 - query nearby shapes for hit testing
20[ ] Add view culling:
21 - compute viewport bounds in world space
22 - render only shapes whose bounds intersect viewport
23[ ] Reduce redraw frequency:
24 - rAF only while dirty
25 - optionally batch multiple store updates into one redraw
26[ ] Add microbench harness:
27 - generate 10k shapes doc
28 - measure hit test and render time
29
30(DoD):
31- 10k simple shapes pans/zooms smoothly on a typical machine.
32
33================================================================================
34Milestone L: Layers *wb-L*
35================================================================================
36
37Goal:
38Add real layers: reorder, hide/show, lock, and per-layer opacity. This is now a
39baseline expectation even for "simple" editors.
40
41--------------------------------------------------------------------------------
42L1. Data model (doc)
43--------------------------------------------------------------------------------
44
45/packages/core/src/model:
46[ ] Add LayerRecord:
47 - id, boardId/pageId
48 - name
49 - order: number (or layerIds array on page)
50 - visible: boolean
51 - locked: boolean
52 - opacity: number (0..1)
53
54[ ] Attach shapes to layers:
55 - ShapeRecord.layerId: string
56 - Default layer created on new board/page
57
58(DoD): Old docs migrate to "single default layer" automatically (Dexie
59 migration).
60
61--------------------------------------------------------------------------------
62L2. Rendering order + behavior
63--------------------------------------------------------------------------------
64
65/packages/renderer-canvas2d:
66[ ] Render layers in order:
67 - skip invisible
68 - apply opacity per layer (ctx.globalAlpha)
69[ ] Selection rendering respects visibility:
70 - do not show selection UI for hidden shapes
71
72(DoD): Hiding a layer truly removes it from view and interaction.
73
74--------------------------------------------------------------------------------
75L3. Interaction rules
76--------------------------------------------------------------------------------
77
78[ ] Locked layer:
79 - shapes cannot be selected or edited
80 - marquee ignores locked shapes
81[ ] Active layer:
82 - new shapes are created into the active layer
83[ ] Reorder layers:
84 - drag to reorder, updates draw order
85
86(DoD): Lock/hide behave exactly as users expect.
87
88--------------------------------------------------------------------------------
89L4. UI panel
90--------------------------------------------------------------------------------
91
92/apps/web:
93[ ] Layers panel:
94 - list layers with eye + lock toggles
95 - rename layer
96 - new/delete layer
97 - drag reorder
98 - set active layer
99 - opacity slider per layer (optional v0, recommended v1)
100
101(DoD): Layers are discoverable and usable without shortcuts.
102
103--------------------------------------------------------------------------------
104L5. Persistence + migrations
105--------------------------------------------------------------------------------
106
107[ ] Dexie migration:
108 - add layers table and layerId field on shapes (if normalized)
109 - backfill existing shapes -> default layer
110 - ensure boards/pages have at least 1 layer
111
112(DoD): Existing boards load unchanged but now sit on a default layer.
113
114--------------------------------------------------------------------------------
115L6. Tests
116--------------------------------------------------------------------------------
117
118[ ] Hidden layer shapes not hit-testable
119[ ] Locked layer shapes not editable
120[ ] New shape inherits active layer
121[ ] Migration backfills correctly
122
123(DoD): No regressions in selection/marquee/editing across layers.
124
125================================================================================
126Milestone S: Stencils (built-in) *wb-S*
127================================================================================
128
129Goal:
130Ship a curated set of built-in stencils (flowchart + UI + dev diagrams) with a
131pleasant insertion workflow. No sharing/community libraries yet—just "your own".
132
133--------------------------------------------------------------------------------
134S2. Insert UX
135--------------------------------------------------------------------------------
136
137/apps/web:
138[ ] Placement rules:
139 - insert into active layer (when layers are added)
140 - [x] snap to grid if enabled
141
142(DoD): Inserting stencils is faster than drawing shapes manually.
143
144================================================================================
145Parking Lot *wb-pl*
146================================================================================
147
148- [ ] Opacity for shapes
149 - expose fill/stroke opacity controls so translucent layering is possible
150 without exporting.
151- [ ] Markdown layout caching
152 - cache layout per (md, w, style) to avoid re-parsing on every render
153- [ ] Bug Fix: Cursor Mapping
154 - Investigate cursor position getting stuck or offsetting after window resize.