@fieldnotes/core 0.20.0 → 0.21.0

package/dist/index.cjs

@@ -2719,6 +2719,7 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  onImageError = null;
   camera = null;
   canvasSize = null;
   hexTileCache = null;
@@ -2729,6 +2730,9 @@ var ElementRenderer = class {
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setOnImageError(callback) {
+    this.onImageError = callback;
+  }
   setCamera(camera) {
     this.camera = camera;
   }
@@ -3087,6 +3091,10 @@ var ElementRenderer = class {
     ctx.restore();
   }
   renderImage(ctx, image) {
+    if (this.imageCache.get(image.src) === "failed") {
+      this.renderImagePlaceholder(ctx, image);
+      return;
+    }
     const img = this.getImage(image.src);
     if (!img) return;
     ctx.drawImage(
@@ -3097,6 +3105,27 @@ var ElementRenderer = class {
       image.size.h
     );
   }
+  renderImagePlaceholder(ctx, image) {
+    const { x, y } = image.position;
+    const { w, h } = image.size;
+    ctx.save();
+    ctx.fillStyle = "#eeeeee";
+    ctx.fillRect(x, y, w, h);
+    ctx.strokeStyle = "#bdbdbd";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, w, h);
+    const glyph = Math.min(24, w / 2, h / 2);
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    ctx.strokeStyle = "#9e9e9e";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(cx, cy, glyph / 2, 0, Math.PI * 2);
+    ctx.moveTo(cx - glyph / 2, cy + glyph / 2);
+    ctx.lineTo(cx + glyph / 2, cy - glyph / 2);
+    ctx.stroke();
+    ctx.restore();
+  }
   getHexTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
     const key = `${cellSize}:${orientation}:${strokeColor}:${strokeWidth}:${opacity}:${scale}`;
     if (this.hexTileCacheKey === key && this.hexTileCache) {
@@ -3112,6 +3141,7 @@ var ElementRenderer = class {
   getImage(src) {
     const cached = this.imageCache.get(src);
     if (cached) {
+      if (cached === "failed") return null;
       if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
       return cached;
     }
@@ -3128,6 +3158,11 @@ var ElementRenderer = class {
         });
       }
     };
+    img.onerror = () => {
+      this.imageCache.set(src, "failed");
+      this.onImageError?.(src);
+      this.onImageLoad?.();
+    };
     return null;
   }
 };
@@ -5039,6 +5074,17 @@ var Viewport = class {
       this.renderLoop.markAllLayersDirty();
       this.requestRender();
     });
+    this.renderer.setOnImageError((src) => {
+      const elementIds = [];
+      for (const el of this.store.getAll()) {
+        if (el.type === "image" && el.src === src) elementIds.push(el.id);
+      }
+      if (options.onImageError) {
+        options.onImageError({ src, elementIds });
+      } else {
+        console.warn(`[fieldnotes] image failed to load: ${src}`);
+      }
+    });
     this.noteEditor = new NoteEditor({
       fontSizePresets: options.fontSizePresets,
       toolbar: options.toolbar,
@@ -5743,6 +5789,43 @@ var PencilTool = class {
   }
 };
 
+// src/elements/stroke-hit.ts
+function distSqToSegment(p, a, b) {
+  const abx = b.x - a.x;
+  const aby = b.y - a.y;
+  const apx = p.x - a.x;
+  const apy = p.y - a.y;
+  const lenSq = abx * abx + aby * aby;
+  if (lenSq === 0) {
+    return apx * apx + apy * apy;
+  }
+  const t = Math.max(0, Math.min(1, (apx * abx + apy * aby) / lenSq));
+  const dx = p.x - (a.x + t * abx);
+  const dy = p.y - (a.y + t * aby);
+  return dx * dx + dy * dy;
+}
+function hitTestStroke(stroke, point, radius) {
+  const bounds = getElementBounds(stroke);
+  if (!bounds) return false;
+  if (point.x < bounds.x - radius || point.x > bounds.x + bounds.w + radius || point.y < bounds.y - radius || point.y > bounds.y + bounds.h + radius) {
+    return false;
+  }
+  const radiusSq = radius * radius;
+  const local = { x: point.x - stroke.position.x, y: point.y - stroke.position.y };
+  const { segments } = getStrokeRenderData(stroke);
+  if (segments.length === 0) {
+    const p = stroke.points[0];
+    if (!p) return false;
+    const dx = p.x - local.x;
+    const dy = p.y - local.y;
+    return dx * dx + dy * dy <= radiusSq;
+  }
+  for (const seg of segments) {
+    if (distSqToSegment(local, seg.start, seg.end) <= radiusSq) return true;
+  }
+  return false;
+}
+
 // src/tools/eraser-tool.ts
 var DEFAULT_RADIUS = 20;
 function makeEraserCursor(radius) {
@@ -5801,12 +5884,7 @@ var EraserTool = class {
     if (erased) ctx.requestRender();
   }
   strokeIntersects(stroke, point) {
-    const radiusSq = this.radius * this.radius;
-    return stroke.points.some((p) => {
-      const dx = p.x + stroke.position.x - point.x;
-      const dy = p.y + stroke.position.y - point.y;
-      return dx * dx + dy * dy <= radiusSq;
-    });
+    return hitTestStroke(stroke, point, this.radius);
   }
 };
 
@@ -6486,12 +6564,7 @@ var SelectTool = class {
       return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
     }
     if (el.type === "stroke") {
-      const HIT_RADIUS = 10;
-      return el.points.some((p) => {
-        const dx = p.x + el.position.x - point.x;
-        const dy = p.y + el.position.y - point.y;
-        return dx * dx + dy * dy <= HIT_RADIUS * HIT_RADIUS;
-      });
+      return hitTestStroke(el, point, 10);
     }
     if (el.type === "arrow") {
       return isNearBezier(point, el.from, el.to, el.bend, 10);
@@ -7327,7 +7400,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.20.0";
+var VERSION = "0.21.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,