Mercurial
comparison infinite_canvas/docs/entities-and-components.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 | |
| children | 49e9e591c9bb |
comparison
equal
deleted
inserted
replaced
| 277:1d99147f520c | 278:8d560f50ed4c |
|---|---|
| 1 # Entities and Components | |
| 2 | |
| 3 ## Retained data, immediate drawing | |
| 4 | |
| 5 `Canvas_Scene` stores an arena-backed array of `Canvas_Entity`. Each entity has: | |
| 6 | |
| 7 - a stable `id` for external resources such as browser views; | |
| 8 - `type`, world `position`, and world `size`; | |
| 9 - generic semantic fields: `text`, `value`, and `active`; | |
| 10 - interaction/animation state; | |
| 11 - pinning state in both world and screen coordinates. | |
| 12 | |
| 13 The scene is retained, but the draw list is rebuilt every frame. This keeps | |
| 14 interaction and context state stable while allowing normal Raylib immediate-mode | |
| 15 drawing. | |
| 16 | |
| 17 Each entity also owns lifecycle state. `visibility_amount` eases from zero to | |
| 18 one after creation. Delete and developer Clear mark entities as `removing`, ease | |
| 19 them back to zero, then compact the retained array. Raylib colors, native CEF | |
| 20 texture tints, and WebAssembly overlay opacity all consume the same eased value. | |
| 21 | |
| 22 ## Adding a component | |
| 23 | |
| 24 Wire every relevant surface, not only drawing: | |
| 25 | |
| 26 1. Add the enum value in `canvas.h`. | |
| 27 2. Set useful size, text, and state defaults in `Canvas_Scene_Add()`. | |
| 28 3. Add bounds/picking behavior in `Canvas_Entity_Bounds()` and | |
| 29 `Canvas_Entity_Contains()`. | |
| 30 4. Add click behavior in `Canvas_Scene_Activate()` and specialized update logic | |
| 31 in `Canvas_Scene_Update_Interaction()` when needed. | |
| 32 5. Draw it in `Canvas_Draw_Entity()` and support selection in | |
| 33 `Canvas_Draw_Selection()`. | |
| 34 6. Return a readable label from `Canvas_Entity_Type_Name()`. | |
| 35 7. Serialize meaningful state in `Canvas_Context_Append_Entity_State()`. | |
| 36 8. Add focused tests in `canvas_test.c`. | |
| 37 9. If it owns external pixels or DOM, extend both web-surface backends and key | |
| 38 resources by stable entity ID. | |
| 39 | |
| 40 Prefer a single entity for large compound views. The Lucide gallery is one | |
| 41 entity with virtualized internal rows, not 1,767 independently draggable scene | |
| 42 objects. | |
| 43 | |
| 44 ## Input ownership | |
| 45 | |
| 46 Input is resolved from most specialized to most general: | |
| 47 | |
| 48 - developer UI; | |
| 49 - focused native CEF content; | |
| 50 - hovered/pressed scene entity; | |
| 51 - camera. | |
| 52 | |
| 53 Open developer dropdowns are modal because Raygui draws their item list beyond | |
| 54 the panel rectangle and consumes outside clicks to close. While one is open, | |
| 55 neither native web surfaces nor canvas entities receive pointer input behind it. | |
| 56 | |
| 57 Text editing blocks WASD/arrow camera movement. Scrollable entities consume an | |
| 58 unmodified wheel. Ctrl/Cmd + wheel remains available to the camera for anchored | |
| 59 zoom; an unmodified wheel outside a scrollable entity pans vertically. | |
| 60 | |
| 61 Text areas keep cursor, selection anchor, and vertical scroll state on the | |
| 62 entity. Their visual-line layout is shared by drawing, hit testing, vertical | |
| 63 cursor movement, and caret visibility, so wrapped text and mouse selection use | |
| 64 the same geometry. Ctrl on Windows/Linux and Cmd on macOS drive select/copy/ | |
| 65 cut/paste shortcuts; Ctrl or Option performs word navigation. |