@mocanvas/editor 4.5.1 → 4.6.0

package/dist/index.d.ts

@@ -13138,14 +13138,25 @@ declare function DefaultCanvas(): react.JSX.Element;
  */
 declare function DefaultBackground(): react.JSX.Element;
 /**
- * The grid, drawn in page space with an SVG pattern.
- *
- * Two patterns rather than one: a fine cell at the document's grid step and a
- * heavier one every fifth cell, so the eye can count without the fine grid
- * having to be dark enough to read on its own. Both fade out as the camera
- * zooms away, because a grid finer than a few screen pixels is noise.
- */
-declare function DefaultGrid({ x, y, z, size }: TLGridProps): react.JSX.Element;
+ * The 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 {@link 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.
+ */
+declare function DefaultGrid({ x, y, z, size }: TLGridProps): react.JSX.Element | null;
 /**
  * Drawn in place of one shape whose body threw.
  *

package/dist/index.js

@@ -276,16 +276,16 @@ var Vec = class _Vec {
    * The point on the segment `A`→`B` closest to `P`. With `clamp` false the
    * segment is treated as the infinite line through `A` and `B`.
    */
-  static NearestPointOnLineSegment(A, B, P, clamp3 = true) {
+  static NearestPointOnLineSegment(A, B, P, clamp4 = true) {
     const ab = _Vec.Sub(B, A);
     const l2 = _Vec.Dpr(ab, ab);
     if (l2 === 0) return _Vec.From(A);
     let t = _Vec.Dpr(_Vec.Sub(P, A), ab) / l2;
-    if (clamp3) t = Math.max(0, Math.min(1, t));
+    if (clamp4) t = Math.max(0, Math.min(1, t));
     return _Vec.Add(A, _Vec.Mul(ab, t));
   }
-  static DistanceToLineSegment(A, B, P, clamp3 = true) {
-    return _Vec.Dist(P, _Vec.NearestPointOnLineSegment(A, B, P, clamp3));
+  static DistanceToLineSegment(A, B, P, clamp4 = true) {
+    return _Vec.Dist(P, _Vec.NearestPointOnLineSegment(A, B, P, clamp4));
   }
   /** The point closest to `P` on the infinite line through `A` in direction `u`. */
   static NearestPointOnLineThroughPoint(A, u, P) {
@@ -14458,19 +14458,24 @@ function DefaultCanvas() {
 function DefaultBackground() {
   return /* @__PURE__ */ jsx("div", { className: "mocanvas-background", style: { position: "absolute", inset: 0, background: "var(--mocanvas-canvas, transparent)" } });
 }
+function clamp3(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+var GRID_SOLID_PX = 12;
+var GRID_GONE_PX = 6;
+var GRID_DOT_RATIO = 16;
+var GRID_DOT_MIN = 0.75;
+var GRID_DOT_MAX = 5;
 function DefaultGrid({ x, y, z, size }) {
   const id = useSharedSafeId("grid");
-  const step = size * z;
-  const fineOpacity = Math.min(1, Math.max(0, (step - 4) / 12));
-  const FINE = 0.7;
-  const MAJOR = 0.9;
+  const cell = size * z;
+  const opacity = clamp3((cell - GRID_GONE_PX) / (GRID_SOLID_PX - GRID_GONE_PX), 0, 1);
+  if (opacity <= 0) return null;
+  const r = clamp3(cell / GRID_DOT_RATIO, GRID_DOT_MIN, GRID_DOT_MAX);
+  const half = cell / 2;
   return /* @__PURE__ */ jsxs("svg", { className: "mocanvas-grid", style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsx("pattern", { id, width: step, height: step, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z} ${y * z})`, children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 1, fill: "var(--mocanvas-grid, currentColor)", opacity: fineOpacity * FINE }) }),
-      /* @__PURE__ */ jsx("pattern", { id: `${id}_major`, width: step * 5, height: step * 5, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z} ${y * z})`, children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 1.5, fill: "var(--mocanvas-grid, currentColor)", opacity: MAJOR }) })
-    ] }),
-    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` }),
-    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}_major)` })
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id, width: cell, height: cell, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z - half} ${y * z - half})`, children: /* @__PURE__ */ jsx("circle", { cx: half, cy: half, r, fill: "var(--mocanvas-grid, currentColor)" }) }) }),
+    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})`, opacity })
   ] });
 }
 function DefaultShapeErrorFallback({ error }) {