@mocanvas/mocanvas 4.1.0 → 4.2.0

package/MIGRATION.md

@@ -253,6 +253,40 @@ during the zero-rename step. Under pnpm's strict `node_modules` that means
 adding `@mocanvas/mocanvas` to your own dependencies alongside
 `@mocanvas/compat`.
 
+**If your own CSS reads tldraw's custom properties, add a second line:**
+
+```ts
+import "@mocanvas/compat/compat.css"
+```
+
+This is the half of the compat layer that nothing checks for you. The package
+alias covers the symbols TypeScript sees; it cannot cover the `--tl-*` names in
+your stylesheets. Without it a migration goes green — build, types, tests — and
+the damage shows up only to the eye, because a `var()` that resolves to nothing
+does not fail, it deletes the declaration it sits in (and inside `calc()`, the
+whole property). One consumer found it as a cursor whose white outline had
+quietly stopped being drawn.
+
+`compat.css` maps tldraw's tokens onto mocanvas's and gives **every** one a
+literal fallback, so a token with no counterpart cannot take a rule down with
+it. Two groups are worth knowing about:
+
+| tldraw token | What you get |
+| --- | --- |
+| `--tl-zoom`, `--tl-scale` | Real values. mocanvas now stamps `--mocanvas-zoom` and `--mocanvas-scale` on the canvas container and restamps them on zoom, so `calc()` rules that hold a constant on-screen size keep working. |
+| `--tl-color-overlay`, `--tl-color-background-overlay`, `--tl-color-warn` | A static fallback. mocanvas has no equivalent, so these do not follow your theme — set them yourself if they matter. |
+
+Everything else maps onto a themed mocanvas variable and follows a theme swap
+or a flip to dark. The stylesheet is scoped to `.mocanvas` rather than `:root`,
+so a page that still renders a real tldraw editor somewhere keeps its own
+values.
+
+**Next.js**: an app coming from tldraw almost certainly lists it in
+`serverExternalPackages`. Next matches that by package name, so leaving
+`@mocanvas/mocanvas` in the list turns `…/mocanvas.css` into a request Node has
+to resolve — and Node has no loader for `.css`. Take mocanvas out of the list
+entirely; there is nothing in it that needs to be external.
+
 ### Step 2 — drop the prefixes
 
 Once the app builds and runs against `@mocanvas/compat`, rename `TLFoo` →
@@ -663,6 +697,8 @@ aspirational.
 | `ShapeUtil.toSvg`, `ShapeUtil.toBackgroundSvg` | Not `ShapeUtil` members. Custom shapes contribute to SVG export through `registerShapeSvgRenderer(type, renderer)`; without one they fall back to `geometryFallbackSvg`. |
 | Sync protocol | Wire compatibility with tldraw's own sync protocol is not planned. `@mocanvas/sync` is a working transport of its own — presence records, `store.mergeRemoteChanges`, and a relay — but it does not speak tldraw's wire format. |
 | `image` shape on the GPU | The texture path exists in the engine (`StyleWords.texture` + `uploadTexture`) but the `image` shape still draws an `<img>` in the DOM overlay. |
+| `FrameShapeUtil` default size | mocanvas creates a frame at **160×90**; tldraw creates one at 320×180. Same aspect, half the size. It only bites code that creates a frame *programmatically* without passing `w`/`h` — drawing one with the tool sizes it from the drag either way. Pass explicit dimensions if the size matters to you. Aligning the default is a behaviour change and is not being made in a patch release. |
+| An unregistered shape type in `store.put()` | Accepted, deliberately, and confirmed rather than fixed. A `.tldr` written by a build that knows a shape type this one does not must survive a load/save round trip instead of being dropped on the next save, so an unknown `type` passes its props through untouched. Its *other* fields are still validated — `x` must be a number whatever the type is — and a type you did register is validated in full. See `COMPAT.md`. |
 | Text rendering | DOM overlay. Glyph-atlas text in WASM is phase 3. |
 | GPU frame clipping | The `CLIP` flag and `isClipShape` hook are wired end to end, but no built-in shape enables it yet (phase 3). |
 | WebGPU backend | Phase 3. WebGL2 is the only backend today, behind `RenderBackend`. |

package/dist/index.d.ts

@@ -445,12 +445,25 @@ declare class ZoomBrushOverlayUtil extends BaseBrushOverlayUtil<TLZoomBrushOverl
  * the same person on every screen in the room.
  */
 
-/** Shared configuration: how a person who has gone quiet is dimmed. */
+/**
+ * Shared configuration for the collaborator painters.
+ *
+ * These exist so a subclass that redraws a cursor can read the label's
+ * measurements instead of hard-coding them next to a `super.render` it does not
+ * control. `zIndex` is not here because it is a static on the util itself —
+ * `class Mine extends CollaboratorCursorOverlayUtil { static override zIndex = 1100 }`.
+ */
 interface CollaboratorOverlayUtilOptions {
     /** Opacity applied to everything drawn for an idle collaborator. */
     idleOpacity: number;
+    /** Point size of the name and chat chips. */
+    fontSize: number;
+    /** Widest a name chip may draw before its text is clipped with an ellipsis. */
+    nameMaxWidth: number;
+    /** The same, for a chat message, which is usually allowed more room. */
+    chatMaxWidth: number;
 }
-/** The one dial every collaborator overlay has. */
+/** The dials every collaborator overlay has. */
 declare const DEFAULT_COLLABORATOR_OVERLAY_OPTIONS: CollaboratorOverlayUtilOptions;
 /**
  * The half every collaborator painter shares: who to draw, and how faded.
@@ -484,7 +497,7 @@ declare class CollaboratorCursorOverlayUtil extends CollaboratorOverlayUtil {
     static options: CollaboratorOverlayUtilOptions;
     isActive(): boolean;
     getOverlays(): TLCollaboratorCursorOverlay[];
-    render(ctx: CanvasRenderingContext2D): void;
+    render(ctx: CanvasRenderingContext2D, given?: TLCollaboratorCursorOverlay[]): void;
 }
 /** Another person's selection brush, in their colour. */
 declare class CollaboratorBrushOverlayUtil extends CollaboratorOverlayUtil {
@@ -878,14 +891,6 @@ declare function traceTaperedStroke(ctx: CanvasRenderingContext2D, points: reado
  * go with the rest of the guide.
  */
 declare function traceCross(ctx: CanvasRenderingContext2D, x: number, y: number, arm: number): void;
-/**
- * Draw a short text label on a filled, rounded chip — a collaborator's name,
- * a zoom read-out.
- *
- * Returns the chip's width so a caller can lay several out in a row. Measuring
- * costs a `measureText`, which is why the result is handed back rather than
- * recomputed.
- */
 declare function drawLabelChip(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, opts: {
     background: string;
     color: string;
@@ -893,6 +898,13 @@ declare function drawLabelChip(ctx: CanvasRenderingContext2D, text: string, x: n
     paddingX: number;
     paddingY: number;
     radius: number;
+    /**
+     * Widest the whole chip may draw. Text that does not fit is cut and ends
+     * with an ellipsis. Omitted means no cap, which is what every caller did
+     * before — and is why one long collaborator name could draw a chip across
+     * the board it was labelling.
+     */
+    maxWidth?: number;
 }): number;
 
 /** Side of the drawing grid. */

package/dist/index.js

@@ -393,10 +393,25 @@ function traceCross(ctx, x, y, arm) {
   ctx.moveTo(x - arm, y + arm);
   ctx.lineTo(x + arm, y - arm);
 }
+function truncateToWidth(ctx, text, maxWidth) {
+  if (maxWidth === void 0 || maxWidth <= 0) return text;
+  if (ctx.measureText(text).width <= maxWidth) return text;
+  const ellipsis = "\u2026";
+  if (ctx.measureText(ellipsis).width > maxWidth) return "";
+  let lo = 0;
+  let hi = text.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (ctx.measureText(text.slice(0, mid) + ellipsis).width <= maxWidth) lo = mid;
+    else hi = mid - 1;
+  }
+  return text.slice(0, lo) + ellipsis;
+}
 function drawLabelChip(ctx, text, x, y, opts) {
   ctx.font = opts.font;
   ctx.textBaseline = "top";
   ctx.textAlign = "left";
+  text = truncateToWidth(ctx, text, opts.maxWidth === void 0 ? void 0 : opts.maxWidth - opts.paddingX * 2);
   const metrics = ctx.measureText(text);
   const ascent = metrics.actualBoundingBoxAscent;
   const descent = metrics.actualBoundingBoxDescent;
@@ -643,8 +658,14 @@ var ZoomBrushOverlayUtil = class extends BaseBrushOverlayUtil {
   }
 };
 var DEFAULT_COLLABORATOR_OVERLAY_OPTIONS = {
-  idleOpacity: 0.5
+  idleOpacity: 0.5,
+  fontSize: 12,
+  nameMaxWidth: 120,
+  chatMaxWidth: 200
 };
+function chipFont(fontSize) {
+  return `${fontSize}px system-ui, -apple-system, "Segoe UI", sans-serif`;
+}
 var CollaboratorOverlayUtil = class extends OverlayUtil {
   /** Everybody present and on this page. Never the local user. */
   getPeople() {
@@ -686,11 +707,11 @@ var CollaboratorCursorOverlayUtil = class extends CollaboratorOverlayUtil {
     }
     return out;
   }
-  render(ctx) {
-    const overlays = this.getOverlays();
+  render(ctx, given) {
+    const overlays = given ?? this.getOverlays();
     if (overlays.length === 0) return;
     const editor = this.editor;
-    const idleOpacity = this.options.idleOpacity;
+    const { idleOpacity, fontSize, nameMaxWidth, chatMaxWidth } = this.options;
     isolate(ctx, (c) => {
       for (const overlay of overlays) {
         const at = editor.pageToViewport(overlay.point);
@@ -713,6 +734,7 @@ var CollaboratorCursorOverlayUtil = class extends CollaboratorOverlayUtil {
         c.fill();
         c.stroke();
         c.restore();
+        const isChat = !!overlay.chatMessage;
         const label = overlay.chatMessage || overlay.userName;
         if (label) {
           drawLabelChip(c, label, at.x + 12, at.y + 16, {
@@ -720,10 +742,13 @@ var CollaboratorCursorOverlayUtil = class extends CollaboratorOverlayUtil {
             // White reads on all eight presence colours, which are chosen to be
             // dark enough for exactly this.
             color: "#ffffff",
-            font: '12px system-ui, -apple-system, "Segoe UI", sans-serif',
+            font: chipFont(fontSize),
             paddingX: 6,
             paddingY: 3,
-            radius: 4
+            radius: 4,
+            // Without a cap a long name drew a chip as wide as the name, which
+            // on a zoomed-out board covered the drawing it was labelling.
+            maxWidth: isChat ? chatMaxWidth : nameMaxWidth
           });
         }
       }