@mocanvas/editor 4.3.0 → 4.4.1

package/dist/index.d.ts

@@ -943,6 +943,24 @@ declare abstract class Geometry2d {
     ignoreHit(_point: VecLike): boolean;
     nearestPoint(point: VecLike, _filters?: Geometry2dFilters): Vec;
     distanceToPoint(point: VecLike, hitInside?: boolean, filters?: Geometry2dFilters): number;
+    /**
+     * Whether `point` hits this geometry, within `margin`.
+     *
+     * The interior counts when the shape is **filled**, or when the caller asks
+     * for `hitInside` — the two are alternatives, not a requirement and a
+     * refinement. `hitInside` means "count the interior of a HOLLOW shape too",
+     * which is what a marquee or a drop target wants; it is not the only way the
+     * interior is ever reachable.
+     *
+     * This used to test `hitInside` alone, so a solid rectangle could not be
+     * selected by clicking its middle — only its outline answered. Nothing failed
+     * and nothing warned: every feature built on hit testing simply returned
+     * nothing, which reads as several unrelated bugs rather than one.
+     *
+     * An unfilled shape still misses in the middle. A hollow rectangle is a frame
+     * around empty space, and clicking the space inside it should reach whatever
+     * is behind.
+     */
     hitTestPoint(point: VecLike, margin?: number, hitInside?: boolean, _filters?: Geometry2dFilters): boolean;
     /** Whether `point` lies within the bounding box, which is the cheap pre-test. */
     isPointInBounds(point: VecLike, margin?: number): boolean;
@@ -8273,10 +8291,6 @@ declare const COLLABORATOR_INACTIVE_TIMEOUT = 60000;
  * all in a raw-ESM browser page, hence the guard rather than a bare read.
  */
 declare function warnOnce(key: string, message: string): void;
-/**
- * The editor: document access, selection, camera, tool dispatch, and the
- * bridge that mirrors the current page into the WASM engine.
- */
 declare class Editor extends EventEmitter<EditorEvents> {
     readonly store: EditorStore;
     readonly engine: EngineBridge;
@@ -8725,7 +8739,16 @@ declare class Editor extends EventEmitter<EditorEvents> {
     getSharedStyles(): SharedStyleMap;
     /** Move shapes by a page-space offset. */
     nudgeShapes(ids: readonly ShapeId[], offset: VecLike): this;
-    /** Rotate shapes by `delta` radians around the center of their common page bounds. */
+    /**
+     * Rotate shapes by `delta` radians around the center of their common page
+     * bounds.
+     *
+     * The resulting rotation is canonicalized into `[0, 2π)`. Without that, an
+     * angle that only ever accumulates leaves two documents that look identical
+     * carrying different numbers — and `rotation` is persisted and sent over the
+     * wire, so a diff, a parity check and a sync merge all see a difference that
+     * is not on screen.
+     */
     rotateShapesBy(ids: readonly ShapeId[], delta: number, center?: VecLike): this;
     /** Mirror shapes across the center of their common bounds. Positions flip; geometry is not mirrored. */
     flipShapes(ids: readonly ShapeId[], operation: "horizontal" | "vertical"): this;

package/dist/index.js

@@ -1696,8 +1696,26 @@ var Geometry2d = class {
     if (hitInside && this.isClosed && this.isFilled && pointInPolygon(point, this.vertices)) return -d;
     return d;
   }
+  /**
+   * Whether `point` hits this geometry, within `margin`.
+   *
+   * The interior counts when the shape is **filled**, or when the caller asks
+   * for `hitInside` — the two are alternatives, not a requirement and a
+   * refinement. `hitInside` means "count the interior of a HOLLOW shape too",
+   * which is what a marquee or a drop target wants; it is not the only way the
+   * interior is ever reachable.
+   *
+   * This used to test `hitInside` alone, so a solid rectangle could not be
+   * selected by clicking its middle — only its outline answered. Nothing failed
+   * and nothing warned: every feature built on hit testing simply returned
+   * nothing, which reads as several unrelated bugs rather than one.
+   *
+   * An unfilled shape still misses in the middle. A hollow rectangle is a frame
+   * around empty space, and clicking the space inside it should reach whatever
+   * is behind.
+   */
   hitTestPoint(point, margin = 0, hitInside = false, _filters) {
-    if (hitInside && this.isClosed && pointInPolygon(point, this.vertices)) return true;
+    if ((hitInside || this.isFilled) && this.isClosed && pointInPolygon(point, this.vertices)) return true;
     return Vec.Dist(point, this.nearestPoint(point)) <= margin;
   }
   /** Whether `point` lies within the bounding box, which is the cheap pre-test. */
@@ -1886,7 +1904,7 @@ var TransformedGeometry2d = class extends Geometry2d {
     return d;
   }
   hitTestPoint(point, margin = 0, hitInside = false, filters) {
-    if (hitInside && this.isClosed && pointInPolygon(point, this.vertices)) return true;
+    if ((hitInside || this.isFilled) && this.isClosed && pointInPolygon(point, this.vertices)) return true;
     return Vec.Dist(point, this.nearestPoint(point, filters)) <= margin;
   }
   ignoreHit(point) {
@@ -7834,6 +7852,12 @@ function warnOnce(key, message) {
   warnedKeys.add(key);
   console.warn(message);
 }
+function assertUtilMapPresent(map, name) {
+  if (map) return;
+  throw new Error(
+    `editor.${name} is undefined, which the constructor never leaves it. The usual cause is a subclass redeclaring \`${name}\` without an initializer: at ES2022 that DEFINES the field as undefined after the base constructor ran. Write \`declare readonly ${name}: ...\` instead, or drop the redeclaration.`
+  );
+}
 var Editor = class extends EventEmitter {
   store;
   engine;
@@ -8415,6 +8439,7 @@ var Editor = class extends EventEmitter {
    */
   getShapeUtil(shape) {
     const type = typeof shape === "string" ? shape : shape.type;
+    assertUtilMapPresent(this.shapeUtils, "shapeUtils");
     const util = this.shapeUtils[type];
     if (!util) throw new Error(`No ShapeUtil registered for type "${type}"`);
     return util;
@@ -8677,29 +8702,34 @@ var Editor = class extends EventEmitter {
   getShapeAtPoint(point, opts = {}) {
     this.flushEngine();
     const margin = (opts.margin ?? this.getHitTestMargin()) / this.getZoomLevel();
-    const bits = this.hitFilterBits(opts) | (opts.hitInside ? 0 : 4);
     const filter = this.hitFilter(opts);
-    if (!filter) {
-      const h = this.engine.hitTest(point.x, point.y, margin, bits);
+    if (!filter && !opts.hitInside) {
+      const h = this.engine.hitTest(point.x, point.y, margin, this.hitFilterBits(opts));
       const id = this.handles.id(h);
       return id ? this.getShape(id) : void 0;
     }
-    for (const shape of this.getShapesAtPoint(point, opts)) {
-      if (filter(shape)) return shape;
-    }
-    return void 0;
+    return this.getShapesAtPoint(point, opts)[0];
   }
   /** Shapes under a point, topmost first. */
   getShapesAtPoint(point, opts = {}) {
     this.flushEngine();
     const margin = (opts.margin ?? this.getHitTestMargin()) / this.getZoomLevel();
-    const handles = this.engine.queryBox(point.x - margin, point.y - margin, point.x + margin, point.y + margin, 0, this.hitFilterBits(opts));
     const filter = this.hitFilter(opts);
     const out = [];
-    for (let i = handles.length - 1; i >= 0; i--) {
-      const id = this.handles.id(handles[i]);
-      const shape = id ? this.getShape(id) : void 0;
-      if (!shape) continue;
+    let candidates;
+    if (opts.hitInside) {
+      candidates = this.getCurrentPageShapesSorted().filter((s) => this.getShapePageBounds(s)?.containsPoint(point, margin));
+      candidates.reverse();
+    } else {
+      const handles = this.engine.queryBox(point.x - margin, point.y - margin, point.x + margin, point.y + margin, 0, this.hitFilterBits(opts));
+      candidates = [];
+      for (let i = handles.length - 1; i >= 0; i--) {
+        const id = this.handles.id(handles[i]);
+        const shape = id ? this.getShape(id) : void 0;
+        if (shape) candidates.push(shape);
+      }
+    }
+    for (const shape of candidates) {
       if (filter && !filter(shape)) continue;
       const local = this.getPointInShapeSpace(shape, point);
       const geo = this.getShapeGeometry(shape);
@@ -8886,6 +8916,7 @@ var Editor = class extends EventEmitter {
   );
   getBindingUtil(binding) {
     const type = typeof binding === "string" ? binding : binding.type;
+    assertUtilMapPresent(this.bindingUtils, "bindingUtils");
     const util = this.bindingUtils[type];
     if (!util) throw new Error(`No BindingUtil registered for type "${type}"`);
     return util;
@@ -9203,7 +9234,16 @@ var Editor = class extends EventEmitter {
     }
     return this.updateShapes(updates);
   }
-  /** Rotate shapes by `delta` radians around the center of their common page bounds. */
+  /**
+   * Rotate shapes by `delta` radians around the center of their common page
+   * bounds.
+   *
+   * The resulting rotation is canonicalized into `[0, 2π)`. Without that, an
+   * angle that only ever accumulates leaves two documents that look identical
+   * carrying different numbers — and `rotation` is persisted and sent over the
+   * wire, so a diff, a parity check and a sync merge all see a difference that
+   * is not on screen.
+   */
   rotateShapesBy(ids, delta, center) {
     const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
     if (shapes.length === 0) return this;
@@ -9214,7 +9254,7 @@ var Editor = class extends EventEmitter {
       const m = this.getShapePageTransform(shape);
       const newPagePos = Vec.RotWith(new Vec(m.e, m.f), c, delta);
       const parentPoint = this.getPointInParentSpace(shape, newPagePos);
-      updates.push({ id: shape.id, type: shape.type, x: parentPoint.x, y: parentPoint.y, rotation: shape.rotation + delta });
+      updates.push({ id: shape.id, type: shape.type, x: parentPoint.x, y: parentPoint.y, rotation: canonicalizeRotation(shape.rotation + delta) });
     }
     return this.updateShapes(updates);
   }