@fieldnotes/core 0.20.0 → 0.21.0

package/dist/index.d.cts

@@ -595,6 +595,10 @@ interface ViewportOptions {
         x: number;
         y: number;
     }) => void;
+    onImageError?: (info: {
+        src: string;
+        elementIds: string[];
+    }) => void;
 }
 declare class Viewport {
     private readonly container;
@@ -695,12 +699,14 @@ declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
+    private onImageError;
     private camera;
     private canvasSize;
     private hexTileCache;
     private hexTileCacheKey;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
+    setOnImageError(callback: (src: string) => void): void;
     setCamera(camera: Camera): void;
     setCanvasSize(w: number, h: number): void;
     isDomElement(element: CanvasElement): boolean;
@@ -718,6 +724,7 @@ declare class ElementRenderer {
     private renderHexTemplate;
     private renderRadiusMarker;
     private renderImage;
+    private renderImagePlaceholder;
     private getHexTile;
     private getImage;
 }
@@ -1240,6 +1247,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.20.0";
+declare const VERSION = "0.21.0";
 
 export { type ActiveFormats, AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, isNoteContentEmpty, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -595,6 +595,10 @@ interface ViewportOptions {
         x: number;
         y: number;
     }) => void;
+    onImageError?: (info: {
+        src: string;
+        elementIds: string[];
+    }) => void;
 }
 declare class Viewport {
     private readonly container;
@@ -695,12 +699,14 @@ declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
+    private onImageError;
     private camera;
     private canvasSize;
     private hexTileCache;
     private hexTileCacheKey;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
+    setOnImageError(callback: (src: string) => void): void;
     setCamera(camera: Camera): void;
     setCanvasSize(w: number, h: number): void;
     isDomElement(element: CanvasElement): boolean;
@@ -718,6 +724,7 @@ declare class ElementRenderer {
     private renderHexTemplate;
     private renderRadiusMarker;
     private renderImage;
+    private renderImagePlaceholder;
     private getHexTile;
     private getImage;
 }
@@ -1240,6 +1247,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.20.0";
+declare const VERSION = "0.21.0";
 
 export { type ActiveFormats, AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, isNoteContentEmpty, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -2609,6 +2609,7 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  onImageError = null;
   camera = null;
   canvasSize = null;
   hexTileCache = null;
@@ -2619,6 +2620,9 @@ var ElementRenderer = class {
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setOnImageError(callback) {
+    this.onImageError = callback;
+  }
   setCamera(camera) {
     this.camera = camera;
   }
@@ -2977,6 +2981,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(
@@ -2987,6 +2995,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) {
@@ -3002,6 +3031,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;
     }
@@ -3018,6 +3048,11 @@ var ElementRenderer = class {
         });
       }
     };
+    img.onerror = () => {
+      this.imageCache.set(src, "failed");
+      this.onImageError?.(src);
+      this.onImageLoad?.();
+    };
     return null;
   }
 };
@@ -4929,6 +4964,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,
@@ -5633,6 +5679,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) {
@@ -5691,12 +5774,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);
   }
 };
 
@@ -6376,12 +6454,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);
@@ -7217,7 +7290,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.20.0";
+var VERSION = "0.21.0";
 export {
   AddElementCommand,
   ArrowTool,