1.2 KiB
1.2 KiB
Canvas Feature
Purpose: Infinite zoomable/pannable workspace where krates live. Starts empty.
Layout:
- Full‑viewport
position: fixed; inset: 0with background#0b0e13. - Two CSS grid overlays (fine
34pxrgba(125,145,175,.04), coarse170pxrgba(125,145,175,.075)). - World layer:
<div>sized12000×8000px, transformed viatranslate(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.5normal view (krates expanded, windows visible).zoom < 0.4collapsed 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).