@mocanvas/editor · function
declare function DefaultGrid({ x, y, z, size }: TLGridProps): react.JSX.Element | nullThe grid: one lattice of dots on the document's own grid step, drawn with an SVG pattern in page space.
**The dot scales with the world, and the lattice fades as a whole.** Those
are the two rules, and each fixes a direction the old grid got backwards. A
fixed 1px dot vanishes as you zoom in — the cell grows to 80 screen pixels
and what is left is a speck every 80px, which reads as no grid at all — so
the radius is a fraction of the cell, floored and capped so it never
disappears and never becomes a blob. And a second, heavier lattice every
fifth cell at a fixed opacity is exactly the dense sheen a zoomed-out canvas
must not have: one lattice, one opacity, gone below GRID_GONE_PX.
**No re-levelling**, deliberately: the spacing is always the document's step rather than a power of it chosen per zoom. Dots are then magnets — a corner on a multiple of the step sits on a dot at *every* zoom — and re-levelling breaks that on the intermediate steps, which is worse than a grid that bows out when it gets too dense to mean anything.
mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.