annotate infinite_canvas/README.md @ 278:8d560f50ed4c

Improve infinite canvas interactions and browser chrome Render Lucide icons directly with Raylib, add searchable icon browsing, robust text editing, entity lifecycle animations, z-order-safe input, semantic themes, and animated editable browser controls. Document rendering, pinning, context, and component extension for future agents. Co-authored-by: Copilot <[email protected]> Copilot-Session: f68442b1-fa8f-46a0-9689-81710613bbd4
author MrJuneJune <me@mrjunejune.com>
date Mon, 17 Aug 2026 22:16:14 -0700
parents b55c22cff335
children 49e9e591c9bb
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 # Infinite Canvas
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 Native and WebAssembly Raylib 6 prototype for a world-space, immediate-mode
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 infinite canvas.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 ## Build and run
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 ```bash
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 # Native development build with Raygui controls
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 bazel run //infinite_canvas:dev
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 # Start directly in the ten-browser stress scene
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 INFINITE_CANVAS_BROWSER_STRESS=1 bazel run //infinite_canvas:dev
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 # Native build without development UI
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 bazel run //infinite_canvas:app
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 # Browser build and local server
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 bazel build //infinite_canvas:infinite_canvas_wasm
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 bazel run //infinite_canvas:serve
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 ```
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 Open `http://127.0.0.1:4343/index.html` after starting the server. Pass a
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 different port as an argument only when needed.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 The native development target opens at 1920x1200 and starts with a gallery
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 layout containing one non-overlapping example of every entity type.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 Theme mode defaults to `auto`, which follows the OS light/dark preference at
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 startup. Rendering consumes a shared semantic `Canvas_Theme` palette for the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 canvas, developer controls, and camera-pinned notifications. Until the planned
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 config file lands, `INFINITE_CANVAS_THEME=light|dark|auto` provides an explicit
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 override. The developer panel also includes a live light/dark mode toggle.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 ## Controls
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 - Middle-mouse drag, or Space + left-mouse drag: pan
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
38 - Mouse wheel: scroll vertically
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
39 - Ctrl/Cmd + mouse wheel: zoom around the cursor
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 - WASD or arrow keys: pan (disabled while a text area has keyboard focus)
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 - Left-mouse drag on an entity: select and move it
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 - `P`: pin or unpin the selected entity in screen space so it remains visible
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
43 while the camera pans and zooms; pinned entities show a Lucide pin glyph
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
44 - `Delete`/`Backspace`: fade out and remove the selected entity
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 - Development toolbar: spawn/clear entities, reset the camera, or restore the
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
46 deterministic demo scene; spawned entities fade in and Clear fades all
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
47 entities out before removal
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 - `View camera context`: open a live, scrollable snapshot of entities
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 intersecting the camera viewport and their current semantic values
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
50 - `Lucide icon gallery`: create or revisit a dedicated canvas region containing
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
51 the complete searchable, scrollable Lucide 1.31.0 icon set and fit the camera
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
52 to it
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 - `10 browser stress scene`: lay out ten compact independent browser views for
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 performance testing
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 - `White`/`Grid`: toggle the optional grid; the default canvas is pure white
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 Canvas primitives include shapes, lines, text, buttons, editable text areas,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 dropdowns, accordions, cards, calendars, switches, tables, notifications,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 scrollable areas, images, and web content. Accordions
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 expand with eased height, chevron, divider, and content transitions; cards
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 toggle emphasis, calendars select dates, and switches animate their track color
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 and thumb position when toggled. The default browser build embeds
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 `https://mrjunejune.com` in a camera-tracked iframe. Native builds open
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 `https://www.google.com` in a CEF off-screen browser whose pixel buffer is
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 uploaded into a Raylib texture. It remains inside the canvas and participates
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 in pan, zoom, clipping, and entity dragging on Windows, macOS, and Linux. Web
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
67 views show a Raylib-rendered Lucide back/forward toolbar and current URL only
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
68 while selected. The toolbar eases open by pushing the page viewport downward
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
69 and reverses the transition when deselected. Click the URL field to edit it;
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
70 Enter navigates, Escape cancels, and standard Ctrl/Cmd clipboard and selection
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
71 shortcuts work. Drag the remaining outer edge to move the view and drag the
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
72 bottom-right handle to resize it. Embedded pages inherit the selected canvas
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
73 light or dark color scheme where the browser backend supports it. Multiple web entities have independent
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 browser instances, URLs, focus, input, and rendering. Browser resources are
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 assigned only to visible entities, off-screen views are suspended, and the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 native CEF pool supports up to twelve live browsers. Small background views
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 render at a reduced frame rate, larger views receive a moderate frame budget,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 and the focused view runs at 30 FPS so scenes with ten compact browsers remain
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 responsive without giving every page the maximum rendering budget. Native
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 browser viewport and texture resolution follow the displayed view size in
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 64-pixel buckets, capped at 1280x800, so resized views become sharper without
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 reallocating continuously during a drag.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
84 The Lucide gallery is one scalable Raylib-rendered canvas entity rather than
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
85 thousands of individual scene entities or an embedded browser. Reopening it
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
86 reuses the existing entity and moves the camera back to its fitted bounds. Its
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
87 ISC-licensed vector data is generated from Lucide 1.31.0 and the visible grid
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
88 rows are drawn directly with Raylib primitives.
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
89
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 Tables support row selection, and notifications behave as bottom-right toast
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 cards: multiple toasts overlap compactly, fan into a spaced stack on hover,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 and slide/fade away from either Undo or close. Position, size, stack expansion,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 and dismissal all use eased frame-rate-independent transitions. Scrollable areas consume the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 mouse wheel without zooming the camera. Image
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 entities render HTTPS URLs or native filesystem paths through CEF; browser
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 builds render URLs or paths available in the Emscripten filesystem. Override
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 the demo image in native development with
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 `INFINITE_CANVAS_IMAGE_SOURCE=/path/to/image.png`.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 The first native build downloads the platform CEF 151 minimal distribution.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 Linux stages its runtime once under
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 `~/.cache/zenbu/infinite-canvas/cef-151`; application state and the RGBA paint
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 buffer remain owned by the Dowa arena, while CEF owns its browser internals.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 Buttons animate on hover/press and toggle when clicked. Dropdowns open a real
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 option menu with hover and selection states. Selected text areas accept typing,
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
107 wrap text, support click/drag selection and scrolling, and provide
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
108 Ctrl/Cmd+A/C/X/V clipboard shortcuts plus Shift selection, word navigation,
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
109 Home/End, Backspace, and Delete. Drag a text area's narrow outer padding to
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
110 move it without changing the selection.
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 Camera context is derived from the visible world rather than a hidden
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 conversation store. Panning entities outside the viewport removes them;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 zooming out includes and concatenates newly visible entities. Each entry
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 contains identity, type, placement, pin state, and type-specific state such as
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 text content, dropdown selection, switch value, selected calendar date or table
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 row, scroll position, image source, and browser URL. The current text format is
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 intentionally provisional so it can later be replaced by the final API
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 contract.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 The prototype uses the Inter variable font under the SIL Open Font License.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122
278
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
123 Agent-oriented architecture and extension notes live in
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
124 [`docs/README.md`](docs/README.md).
8d560f50ed4c Improve infinite canvas interactions and browser chrome
MrJuneJune <me@mrjunejune.com>
parents: 276
diff changeset
125
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 ## Memory ownership
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 The application creates one Dowa arena. Application state and the fixed-capacity
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 entity array are arena-owned, there are no per-frame first-party allocations,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 and the arena is released once during native shutdown. Browser lifetime memory
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 is reclaimed with the WebAssembly runtime when the page closes.