Mercurial

comparison infinite_canvas/README.md @ 278:8d560f50ed4c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
277:1d99147f520c 278:8d560f50ed4c
33 override. The developer panel also includes a live light/dark mode toggle. 33 override. The developer panel also includes a live light/dark mode toggle.
34 34
35 ## Controls 35 ## Controls
36 36
37 - Middle-mouse drag, or Space + left-mouse drag: pan 37 - Middle-mouse drag, or Space + left-mouse drag: pan
38 - Mouse wheel: zoom around the cursor 38 - Mouse wheel: scroll vertically
39 - Ctrl/Cmd + mouse wheel: zoom around the cursor
39 - WASD or arrow keys: pan (disabled while a text area has keyboard focus) 40 - WASD or arrow keys: pan (disabled while a text area has keyboard focus)
40 - Left-mouse drag on an entity: select and move it 41 - Left-mouse drag on an entity: select and move it
41 - `P`: pin or unpin the selected entity in screen space so it remains visible 42 - `P`: pin or unpin the selected entity in screen space so it remains visible
42 while the camera pans and zooms; pinned entities show a blue pin badge 43 while the camera pans and zooms; pinned entities show a Lucide pin glyph
44 - `Delete`/`Backspace`: fade out and remove the selected entity
43 - Development toolbar: spawn/clear entities, reset the camera, or restore the 45 - Development toolbar: spawn/clear entities, reset the camera, or restore the
44 deterministic demo scene 46 deterministic demo scene; spawned entities fade in and Clear fades all
47 entities out before removal
45 - `View camera context`: open a live, scrollable snapshot of entities 48 - `View camera context`: open a live, scrollable snapshot of entities
46 intersecting the camera viewport and their current semantic values 49 intersecting the camera viewport and their current semantic values
50 - `Lucide icon gallery`: create or revisit a dedicated canvas region containing
51 the complete searchable, scrollable Lucide 1.31.0 icon set and fit the camera
52 to it
47 - `10 browser stress scene`: lay out ten compact independent browser views for 53 - `10 browser stress scene`: lay out ten compact independent browser views for
48 performance testing 54 performance testing
49 - `White`/`Grid`: toggle the optional grid; the default canvas is pure white 55 - `White`/`Grid`: toggle the optional grid; the default canvas is pure white
50 56
51 Canvas primitives include shapes, lines, text, buttons, editable text areas, 57 Canvas primitives include shapes, lines, text, buttons, editable text areas,
56 and thumb position when toggled. The default browser build embeds 62 and thumb position when toggled. The default browser build embeds
57 `https://mrjunejune.com` in a camera-tracked iframe. Native builds open 63 `https://mrjunejune.com` in a camera-tracked iframe. Native builds open
58 `https://www.google.com` in a CEF off-screen browser whose pixel buffer is 64 `https://www.google.com` in a CEF off-screen browser whose pixel buffer is
59 uploaded into a Raylib texture. It remains inside the canvas and participates 65 uploaded into a Raylib texture. It remains inside the canvas and participates
60 in pan, zoom, clipping, and entity dragging on Windows, macOS, and Linux. Web 66 in pan, zoom, clipping, and entity dragging on Windows, macOS, and Linux. Web
61 views have no simulated browser toolbar: drag their narrow outer edge to move 67 views show a Raylib-rendered Lucide back/forward toolbar and current URL only
62 them and drag the bottom-right handle to resize them. Multiple web entities have independent 68 while selected. The toolbar eases open by pushing the page viewport downward
69 and reverses the transition when deselected. Click the URL field to edit it;
70 Enter navigates, Escape cancels, and standard Ctrl/Cmd clipboard and selection
71 shortcuts work. Drag the remaining outer edge to move the view and drag the
72 bottom-right handle to resize it. Embedded pages inherit the selected canvas
73 light or dark color scheme where the browser backend supports it. Multiple web entities have independent
63 browser instances, URLs, focus, input, and rendering. Browser resources are 74 browser instances, URLs, focus, input, and rendering. Browser resources are
64 assigned only to visible entities, off-screen views are suspended, and the 75 assigned only to visible entities, off-screen views are suspended, and the
65 native CEF pool supports up to twelve live browsers. Small background views 76 native CEF pool supports up to twelve live browsers. Small background views
66 render at a reduced frame rate, larger views receive a moderate frame budget, 77 render at a reduced frame rate, larger views receive a moderate frame budget,
67 and the focused view runs at 30 FPS so scenes with ten compact browsers remain 78 and the focused view runs at 30 FPS so scenes with ten compact browsers remain
68 responsive without giving every page the maximum rendering budget. Native 79 responsive without giving every page the maximum rendering budget. Native
69 browser viewport and texture resolution follow the displayed view size in 80 browser viewport and texture resolution follow the displayed view size in
70 64-pixel buckets, capped at 1280x800, so resized views become sharper without 81 64-pixel buckets, capped at 1280x800, so resized views become sharper without
71 reallocating continuously during a drag. 82 reallocating continuously during a drag.
83
84 The Lucide gallery is one scalable Raylib-rendered canvas entity rather than
85 thousands of individual scene entities or an embedded browser. Reopening it
86 reuses the existing entity and moves the camera back to its fitted bounds. Its
87 ISC-licensed vector data is generated from Lucide 1.31.0 and the visible grid
88 rows are drawn directly with Raylib primitives.
72 89
73 Tables support row selection, and notifications behave as bottom-right toast 90 Tables support row selection, and notifications behave as bottom-right toast
74 cards: multiple toasts overlap compactly, fan into a spaced stack on hover, 91 cards: multiple toasts overlap compactly, fan into a spaced stack on hover,
75 and slide/fade away from either Undo or close. Position, size, stack expansion, 92 and slide/fade away from either Undo or close. Position, size, stack expansion,
76 and dismissal all use eased frame-rate-independent transitions. Scrollable areas consume the 93 and dismissal all use eased frame-rate-independent transitions. Scrollable areas consume the
85 `~/.cache/zenbu/infinite-canvas/cef-151`; application state and the RGBA paint 102 `~/.cache/zenbu/infinite-canvas/cef-151`; application state and the RGBA paint
86 buffer remain owned by the Dowa arena, while CEF owns its browser internals. 103 buffer remain owned by the Dowa arena, while CEF owns its browser internals.
87 104
88 Buttons animate on hover/press and toggle when clicked. Dropdowns open a real 105 Buttons animate on hover/press and toggle when clicked. Dropdowns open a real
89 option menu with hover and selection states. Selected text areas accept typing, 106 option menu with hover and selection states. Selected text areas accept typing,
90 Enter, and Backspace. Dragging still moves every primitive. 107 wrap text, support click/drag selection and scrolling, and provide
108 Ctrl/Cmd+A/C/X/V clipboard shortcuts plus Shift selection, word navigation,
109 Home/End, Backspace, and Delete. Drag a text area's narrow outer padding to
110 move it without changing the selection.
91 111
92 Camera context is derived from the visible world rather than a hidden 112 Camera context is derived from the visible world rather than a hidden
93 conversation store. Panning entities outside the viewport removes them; 113 conversation store. Panning entities outside the viewport removes them;
94 zooming out includes and concatenates newly visible entities. Each entry 114 zooming out includes and concatenates newly visible entities. Each entry
95 contains identity, type, placement, pin state, and type-specific state such as 115 contains identity, type, placement, pin state, and type-specific state such as
98 intentionally provisional so it can later be replaced by the final API 118 intentionally provisional so it can later be replaced by the final API
99 contract. 119 contract.
100 120
101 The prototype uses the Inter variable font under the SIL Open Font License. 121 The prototype uses the Inter variable font under the SIL Open Font License.
102 122
123 Agent-oriented architecture and extension notes live in
124 [`docs/README.md`](docs/README.md).
125
103 ## Memory ownership 126 ## Memory ownership
104 127
105 The application creates one Dowa arena. Application state and the fixed-capacity 128 The application creates one Dowa arena. Application state and the fixed-capacity
106 entity array are arena-owned, there are no per-frame first-party allocations, 129 entity array are arena-owned, there are no per-frame first-party allocations,
107 and the arena is released once during native shutdown. Browser lifetime memory 130 and the arena is released once during native shutdown. Browser lifetime memory