Canvas · Plane: an endless canvas, its grid, rulers, zoom and map

A new chapter, src/canvas. InfiniteCanvas lays artboards, shapes and
guides on an endless plane over a dot grid whose step, one, two or five
times a power of ten, keeps the dots apart as it zooms out. Rulers run
along the top and left in canvas units. A drag on empty space pans from
the press, a wheel scrolls, and Command or Control with the wheel zooms
about the pointer; the owner keeps the viewport, seeded, so its own
zoom shows at once. Layers lie over the plane in view pixels.

Shapes are rectangles, ellipses, regular polygons, lines, arrows, text,
paths and notes, each in a chart hue, painted to scale; text and notes
scale their type. Artboards carry their names above them.

ZoomControls step out and in through fixed stops, fit on request, and
hold ZoomIndicator, whose press sets 100%. MiniMap draws what lies on
the canvas and the view's box, and centers the view where it is pressed
or dragged. The viewport math, the steps and the map's fit are tested
without gpui.
This commit is contained in:
ZacharyZhang-NY committed 2026-09-27 06:58:59 -04:00
1 parent 384872cbf0
commit e5a0c19611
15 files changed
+1530 -14

No files matched your search

+47
View File
@@ -0,0 +1,47 @@
use gpui::{Pixels, Rems, px};
use super::{Theme, tokens::px_to_rems};
/// Canvas measures.
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct CanvasSizes {
/// The top ruler, tall.
pub ruler: Rems,
/// The left ruler, wide enough for four figures.
pub side: Rems,
/// Grid dots at least this far apart on screen.
pub grid: Rems,
/// Ruler labels at least this far apart on screen.
pub label: Rems,
/// A grid dot, square.
pub dot: Pixels,
/// Lines, wide.
pub stroke: Rems,
/// Frames and outlines, wide.
pub hairline: Pixels,
/// A note's inset and corner at a zoom of one.
pub note_inset: Rems,
pub note_corner: Rems,
/// A minimap, wide and tall.
pub map: (Rems, Rems),
/// A handle, square.
pub handle: Rems,
}
impl Theme {
pub fn canvas(&self) -> CanvasSizes {
CanvasSizes {
ruler: px_to_rems(20.0),
side: px_to_rems(32.0),
grid: px_to_rems(16.0),
label: px_to_rems(64.0),
dot: px(1.5),
stroke: px_to_rems(1.5),
hairline: px(1.0),
note_inset: px_to_rems(12.0),
note_corner: px_to_rems(4.0),
map: (px_to_rems(200.0), px_to_rems(140.0)),
handle: px_to_rems(8.0),
}
}
}
+2
View File
@@ -1,4 +1,5 @@
mod calendar;
mod canvas;
mod chart;
mod files;
mod generative;
@@ -14,6 +15,7 @@ use gpui::{App, Global, SharedString, WindowAppearance};
use crate::motion;
pub use calendar::CalendarSizes;
pub use canvas::CanvasSizes;
pub use chart::ChartSizes;
pub use files::FileSizes;
pub use generative::GenerativeSizes;