27 lines
1.2 KiB
Markdown
27 lines
1.2 KiB
Markdown
# Canvas Feature
|
||
|
||
**Purpose**: Infinite zoomable/pannable workspace where krates live. Starts empty.
|
||
|
||
**Layout**:
|
||
- Full‑viewport `position: fixed; inset: 0` with background `#0b0e13`.
|
||
- Two CSS grid overlays (fine `34px` rgba(125,145,175,.04), coarse `170px` rgba(125,145,175,.075)).
|
||
- World layer: `<div>` sized `12000×8000px`, transformed via `translate(camX, camY) scale(zoom)`; all krates/windows are absolutely positioned children.
|
||
- Top bar (`height ~56px`, `z-index:10`).
|
||
- Bottom hint bar (`right:18px; bottom:18px`).
|
||
- Zoom pill (`left:18px; bottom:18px`).
|
||
- Minimap (`right:18px; bottom:64px; width:180px; height:120px`).
|
||
|
||
**Navigation**:
|
||
- Scroll wheel → pan.
|
||
- Ctrl/⌘ + scroll → zoom.
|
||
- Space + drag → pan (global capture, works even when a shell has focus).
|
||
- Click empty canvas → open Spotlight.
|
||
- Typing any key (when no input focused) → open Spotlight pre‑seeded with that character.
|
||
|
||
**LOD**:
|
||
- `zoom > 0.5` normal view (krates expanded, windows visible).
|
||
- `zoom < 0.4` collapsed view (krates become 230 px overview cards, windows hidden).
|
||
- Hysteresis: collapse @0.4, expand @0.5.
|
||
|
||
**Camera fly**: on programmatic open, animate to center krate with `zoom:0.92` using `transform .52s cubic‑bezier(.22,.8,.28,1)`.
|