@mocanvas/editor 4.11.1 → 4.12.0

package/dist/index.d.ts

@@ -898,7 +898,6 @@ interface TransformedGeometry2dOptions {
     debugColor?: string | undefined;
     excludeFromShapeBounds?: boolean | undefined;
 }
-/** Base class for shape geometry. */
 declare abstract class Geometry2d {
     readonly isFilled: boolean;
     readonly isClosed: boolean;
@@ -8317,6 +8316,12 @@ interface EditorConfig extends TldrawOptions {
 }
 declare const DEFAULT_EDITOR_CONFIG: EditorConfig;
 interface HitTestOptions {
+    /**
+     * Extra tolerance around the shape, in page units — a caller working from a
+     * screen distance divides it by the zoom level itself, as tldraw's callers do.
+     * Defaults to the hit-test margin for the current pointer, which is a screen
+     * distance and is converted here.
+     */
     margin?: number;
     hitInside?: boolean;
     hitLocked?: boolean;
@@ -12786,6 +12791,16 @@ interface CanvasComponents {
      * `TLComponents.Grid`. `null` draws none; omitted uses {@link DefaultGrid}.
      */
     Grid: ((props: TLGridProps) => ReactNode) | null;
+    /**
+     * Drawn over the canvas, in screen space, under whatever chrome the app puts
+     * on top. The layer itself takes no pointer events and its children take
+     * them normally, so a badge pinned to a shape is clickable while the empty
+     * space around it still pans the canvas.
+     *
+     * It belongs to the canvas rather than to the chrome, which is what makes it
+     * survive `hideUi` — an app with no panels still gets its own overlay.
+     */
+    InFrontOfTheCanvas: (() => ReactNode) | null;
     /**
      * Rendered in place of the whole editor once it has thrown. `null` renders
      * nothing — the choice a host with its own error UI outside the canvas

package/dist/index.js

@@ -1582,6 +1582,7 @@ var Geometry2dFilters = {
   EXCLUDE_LABELS: { includeInternal: true, includeLabels: false },
   EXCLUDE_NON_STANDARD: { includeInternal: false, includeLabels: false }
 };
+var HIT_TEST_EPSILON = 1e-9;
 var Geometry2d = class {
   isFilled;
   isClosed;
@@ -1716,7 +1717,7 @@ var Geometry2d = class {
    */
   hitTestPoint(point, margin = 0, hitInside = false, _filters) {
     if ((hitInside || this.isFilled) && this.isClosed && pointInPolygon(point, this.vertices)) return true;
-    return Vec.Dist(point, this.nearestPoint(point)) <= margin;
+    return Vec.Dist(point, this.nearestPoint(point)) <= margin + HIT_TEST_EPSILON;
   }
   /** Whether `point` lies within the bounding box, which is the cheap pre-test. */
   isPointInBounds(point, margin = 0) {
@@ -1905,7 +1906,7 @@ var TransformedGeometry2d = class extends Geometry2d {
   }
   hitTestPoint(point, margin = 0, hitInside = false, filters) {
     if ((hitInside || this.isFilled) && this.isClosed && pointInPolygon(point, this.vertices)) return true;
-    return Vec.Dist(point, this.nearestPoint(point, filters)) <= margin;
+    return Vec.Dist(point, this.nearestPoint(point, filters)) <= margin + HIT_TEST_EPSILON;
   }
   ignoreHit(point) {
     return this.geometry.ignoreHit(this.toLocal(point));
@@ -5340,7 +5341,7 @@ function faceSet(font) {
   const local = LOCAL_SOURCES[font];
   const face = (style, weight) => ({
     family,
-    src: `local("${local}")`,
+    src: weight === "bold" ? `local("${local} Bold"), local("${local}")` : `local("${local}")`,
     style,
     weight,
     display: "swap"
@@ -8731,7 +8732,7 @@ var Editor = class extends EventEmitter {
   }
   getShapeAtPoint(point, opts = {}) {
     this.flushEngine();
-    const margin = (opts.margin ?? this.getHitTestMargin()) / this.getZoomLevel();
+    const margin = opts.margin ?? this.getHitTestMargin() / this.getZoomLevel();
     const filter = this.hitFilter(opts);
     if (!filter && !opts.hitInside) {
       const h = this.engine.hitTest(point.x, point.y, margin, this.hitFilterBits(opts));
@@ -8743,7 +8744,7 @@ var Editor = class extends EventEmitter {
   /** Shapes under a point, topmost first. */
   getShapesAtPoint(point, opts = {}) {
     this.flushEngine();
-    const margin = (opts.margin ?? this.getHitTestMargin()) / this.getZoomLevel();
+    const margin = opts.margin ?? this.getHitTestMargin() / this.getZoomLevel();
     const filter = this.hitFilter(opts);
     const out = [];
     let candidates;
@@ -15084,6 +15085,7 @@ function CanvasBody({ editor, className, style, children, components, indicatorO
   const Indicators = components?.Indicators ?? DefaultIndicators;
   const Brush = components?.Brush ?? (hasOverlay(editor, "brush") ? null : DefaultBrush);
   const Background = components?.Background;
+  const InFrontOfTheCanvas = components?.InFrontOfTheCanvas;
   return /* @__PURE__ */ jsx(EditorProvider, { editor, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -15108,7 +15110,8 @@ function CanvasBody({ editor, className, style, children, components, indicatorO
           hasOverlay(editor, "snapIndicator") ? null : /* @__PURE__ */ jsx(SnapLines, { editor }),
           Brush ? /* @__PURE__ */ jsx(Brush, { editor }) : null
         ] }),
-        children
+        children,
+        InFrontOfTheCanvas ? /* @__PURE__ */ jsx("div", { className: "mocanvas-in-front-of-canvas", style: { ...layerStyle, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(InFrontOfTheCanvas, {}) }) : null
       ]
     }
   ) });