@mocanvas/editor 4.5.0 → 4.5.2

package/dist/index.d.ts

@@ -8241,7 +8241,20 @@ interface EditorConfig extends TldrawOptions {
     zoomMax: number;
     /** The zoom levels the zoom-in / zoom-out steps land on. */
     zoomSteps: number[];
-    /** The renderer's clear colour, as premultiplied linear RGBA. */
+    /**
+     * The page colour behind the canvas, as RGBA in 0–1.
+     *
+     * @deprecated The canvas background is a *theme* colour — the theme carries
+     * one for each colour mode and publishes it as `--mocanvas-background`,
+     * which is what the container paints. This knob is honoured when it is set
+     * to anything other than its default, so an app that configured it keeps the
+     * colour it configured; a new app should set the theme, or pass
+     * `style={{ background }}` to `<Canvas>`, either of which follows dark mode.
+     *
+     * It is no longer the renderer's clear colour: the GPU layer clears
+     * transparent, because anything it painted covered the grid and the
+     * `Background` slot beneath it.
+     */
     backgroundColor: [number, number, number, number];
     /**
      * How far the zoom must change, in octaves, before `getDebouncedZoomLevel()`
@@ -13125,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) {
@@ -7840,6 +7840,7 @@ var DEFAULT_EDITOR_CONFIG = {
 var RAD_PER_DEG = Math.PI / 180;
 var WHEEL_ZOOM_DELTA_CAP = 50;
 var MIDDLE_BUTTON = 1;
+var TRANSPARENT_CLEAR = [0, 0, 0, 0];
 var COLLABORATOR_INACTIVE_TIMEOUT = 6e4;
 var editorSequence = 0;
 var warnedKeys = /* @__PURE__ */ new Set();
@@ -10261,7 +10262,7 @@ var Editor = class extends EventEmitter {
     const vp = this.getViewportScreenBounds();
     const camState = { x: cam.x, y: cam.y, z: cam.z };
     const frame = this.engine.frame(camState, vp.w, vp.h);
-    backend.draw(frame, camState, { background: this.options.backgroundColor });
+    backend.draw(frame, camState, { background: TRANSPARENT_CLEAR });
     const overlay = EngineBridge.readOverlay(frame.overlay);
     const ids = [];
     const clips = [];
@@ -14457,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 }) {
@@ -14909,6 +14915,13 @@ function useErrorSlot(key, fallback) {
   const slot = local?.[key] !== void 0 ? local[key] : provided[key];
   return slot === void 0 ? fallback : slot;
 }
+function backgroundFor(editor) {
+  const set = editor.options.backgroundColor;
+  const dflt = DEFAULT_EDITOR_CONFIG.backgroundColor;
+  if (set.every((v, i) => v === dflt[i])) return "var(--mocanvas-background, #f9fafb)";
+  const [r, g, b, a] = set;
+  return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${a})`;
+}
 var containerStyle = {
   position: "relative",
   width: "100%",
@@ -15049,7 +15062,7 @@ function CanvasBody({ editor, className, style, children, components, indicatorO
     {
       ref: containerRef,
       className: className ? `mocanvas ${className}` : "mocanvas",
-      style: { ...containerStyle, ...themeVars, ...cameraVars, ...style, cursor },
+      style: { ...containerStyle, background: backgroundFor(editor), ...themeVars, ...cameraVars, ...style, cursor },
       tabIndex: 0,
       onPointerDown: events.onPointerDown,
       onPointerMove: events.onPointerMove,