# Infinite Canvas

Native and WebAssembly Raylib 6 prototype for a world-space, immediate-mode
infinite canvas.

## Build and run

```bash
# Native development build with Raygui controls
bazel run //infinite_canvas:dev

# Start directly in the ten-browser stress scene
INFINITE_CANVAS_BROWSER_STRESS=1 bazel run //infinite_canvas:dev

# Native build without development UI
bazel run //infinite_canvas:app

# Browser build and local server
bazel build //infinite_canvas:infinite_canvas_wasm
bazel run //infinite_canvas:serve
```

Open `http://127.0.0.1:4343/index.html` after starting the server. Pass a
different port as an argument only when needed.

The native development target opens at 1920x1200 and starts with a gallery
layout containing one non-overlapping example of every entity type.

Theme mode defaults to `auto`, which follows the OS light/dark preference at
startup. Rendering consumes a shared semantic `Canvas_Theme` palette for the
canvas, developer controls, and camera-pinned notifications. Until the planned
config file lands, `INFINITE_CANVAS_THEME=light|dark|auto` provides an explicit
override. The developer panel also includes a live light/dark mode toggle.

## Controls

- Middle-mouse drag, or Space + left-mouse drag: pan
- Mouse wheel: zoom around the cursor
- WASD or arrow keys: pan (disabled while a text area has keyboard focus)
- Left-mouse drag on an entity: select and move it
- `P`: pin or unpin the selected entity in screen space so it remains visible
  while the camera pans and zooms; pinned entities show a blue pin badge
- Development toolbar: spawn/clear entities, reset the camera, or restore the
  deterministic demo scene
- `View camera context`: open a live, scrollable snapshot of entities
  intersecting the camera viewport and their current semantic values
- `10 browser stress scene`: lay out ten compact independent browser views for
  performance testing
- `White`/`Grid`: toggle the optional grid; the default canvas is pure white

Canvas primitives include shapes, lines, text, buttons, editable text areas,
dropdowns, accordions, cards, calendars, switches, tables, notifications,
scrollable areas, images, and web content. Accordions
expand with eased height, chevron, divider, and content transitions; cards
toggle emphasis, calendars select dates, and switches animate their track color
and thumb position when toggled. The default browser build embeds
`https://mrjunejune.com` in a camera-tracked iframe. Native builds open
`https://www.google.com` in a CEF off-screen browser whose pixel buffer is
uploaded into a Raylib texture. It remains inside the canvas and participates
in pan, zoom, clipping, and entity dragging on Windows, macOS, and Linux. Web
views have no simulated browser toolbar: drag their narrow outer edge to move
them and drag the bottom-right handle to resize them. Multiple web entities have independent
browser instances, URLs, focus, input, and rendering. Browser resources are
assigned only to visible entities, off-screen views are suspended, and the
native CEF pool supports up to twelve live browsers. Small background views
render at a reduced frame rate, larger views receive a moderate frame budget,
and the focused view runs at 30 FPS so scenes with ten compact browsers remain
responsive without giving every page the maximum rendering budget. Native
browser viewport and texture resolution follow the displayed view size in
64-pixel buckets, capped at 1280x800, so resized views become sharper without
reallocating continuously during a drag.

Tables support row selection, and notifications behave as bottom-right toast
cards: multiple toasts overlap compactly, fan into a spaced stack on hover,
and slide/fade away from either Undo or close. Position, size, stack expansion,
and dismissal all use eased frame-rate-independent transitions. Scrollable areas consume the
mouse wheel without zooming the camera. Image
entities render HTTPS URLs or native filesystem paths through CEF; browser
builds render URLs or paths available in the Emscripten filesystem. Override
the demo image in native development with
`INFINITE_CANVAS_IMAGE_SOURCE=/path/to/image.png`.

The first native build downloads the platform CEF 151 minimal distribution.
Linux stages its runtime once under
`~/.cache/zenbu/infinite-canvas/cef-151`; application state and the RGBA paint
buffer remain owned by the Dowa arena, while CEF owns its browser internals.

Buttons animate on hover/press and toggle when clicked. Dropdowns open a real
option menu with hover and selection states. Selected text areas accept typing,
Enter, and Backspace. Dragging still moves every primitive.

Camera context is derived from the visible world rather than a hidden
conversation store. Panning entities outside the viewport removes them;
zooming out includes and concatenates newly visible entities. Each entry
contains identity, type, placement, pin state, and type-specific state such as
text content, dropdown selection, switch value, selected calendar date or table
row, scroll position, image source, and browser URL. The current text format is
intentionally provisional so it can later be replaced by the final API
contract.

The prototype uses the Inter variable font under the SIL Open Font License.

## Memory ownership

The application creates one Dowa arena. Application state and the fixed-capacity
entity array are arena-owned, there are no per-frame first-party allocations,
and the arena is released once during native shutdown. Browser lifetime memory
is reclaimed with the WebAssembly runtime when the page closes.