web based infinite canvas
1# Inkfinite
2
3A web-based infinite canvas application for creative visual thinking.
4
5## Architecture
6
7Inkfinite is built with reactivity, vector math, and optimized canvas rendering.
8
9The project is organized as a pnpm monorepo with the following structure:
10
11```sh
12.
13├── packages/
14│ ├── core/ # Core logic and state management
15│ └── renderer/ # Canvas rendering engine
16└── apps/
17 ├── web/ # SvelteKit web application
18 └── desktop/ # Tauri desktop wrapper
19```
20
21**Desktop App:** The desktop app shares the same codebase as the web app. The web app detects if it's running inside Tauri and uses file-based persistence instead of IndexedDB.
22
23## Packages
24
25<details>
26<summary><code>packages/core</code></summary>
27
28### Modules
29
30- **Math** (`math.ts`) - Vector mathematics and geometric operations
31 - `Vec2`: 2D vector operations (add, subtract, scale, normalize, distance, etc.)
32 - `Mat3`: 3x3 transformation matrices for 2D transforms
33 - `Box2`: Axis-aligned bounding boxes
34
35- **Camera** (`camera.ts`) - Viewport and coordinate system transforms
36 - World ↔ screen coordinate conversions
37 - Pan and zoom operations
38 - Camera state management
39
40- **Geometry** (`geom.ts`) - Shape hit testing and spatial queries
41 - Point-in-shape testing
42 - Bounding box calculations
43 - Shape picking/selection
44
45- **Reactivity** (`reactivity.ts`) - Observable state management
46 - RxJS-based reactive store
47 - State subscription and updates
48 - Computed values and derived state
49
50- **Model** (`model.ts`) - Data structures and types
51 - Shape definitions (rect, ellipse, line, arrow, text)
52 - Editor state
53 - Page management
54
55- **Actions** (`actions.ts`) - User input event system
56 - Input event normalization
57 - Pointer, keyboard, and wheel events
58 - Coordinate space conversions
59
60</details>
61
62<details>
63<summary><code>packages/renderer</code></summary>
64
65High-performance canvas renderer with:
66
67- Reactive Rendering: Subscribes to state changes and efficiently redraws
68- Optimized Drawing: Uses requestAnimationFrame with dirty flag pattern
69- HiDPI Support: Automatic pixel ratio scaling for crisp rendering
70- Camera Transforms: Applies world-to-screen transformations
71- Shape Rendering: Draws all shape types (rect, ellipse, line, arrow, text)
72- Selection Visualization: Highlights selected shapes with dashed outlines
73- Text Wrapping: Automatic text layout within bounded areas
74
75</details>
76
77<details>
78<summary><code>apps/web</code></summary>
79
80SvelteKit-based web application providing the user interface.
81
82### Tech Stack
83
84- **Testing:** Vitest with Playwright (browser tests) and Node (unit tests)
85- **Persistence:** IndexedDB (Dexie) for web, filesystem for desktop
86
87### Development
88
89```bash
90pnpm dev # Start development server
91pnpm build # Build for production
92pnpm test # Run tests
93```
94
95</details>
96
97<details>
98<summary><code>apps/desktop</code></summary>
99
100Tauri desktop wrapper that loads the web app with native file system access.
101
102### Features
103
104- Native file dialogs (Open/Save)
105- File-based document persistence (`.inkfinite.json`)
106- Recent files tracking
107- Same UI as web app with platform-specific persistence
108
109### Tech Stack
110
111- **Framework:** Tauri v2
112- **Frontend:** Shared with web app (SvelteKit)
113- **Backend:** Rust with Tauri plugins (dialog, fs, store)
114
115### Development
116
117#### Prerequisites
118
119**Standard Setup:**
120
121- Node.js 18+
122- pnpm 8+
123
124**Nix/NixOS Setup:**
125
126- Nix with flakes enabled
127- For desktop app: Rust via [rustup](https://rustup.rs) (not Nix)
128
129```bash
130cd apps/desktop
131
132# Development mode (with hot reload)
133pnpm tauri dev
134
135# Build production app
136pnpm tauri build
137```
138
139**Note:** The web app automatically detects when running in Tauri and switches from IndexedDB to file-based persistence.
140
141</details>