@fieldnotes/core 0.19.0 → 0.21.0

package/README.md

@@ -401,6 +401,15 @@ new Viewport(container, {
     spacing: 24, // grid spacing in px (default: 24)
     color: '#d0d0d0', // dot/line color (default: '#d0d0d0')
   },
+  // Called for every drop; replaces the built-in image-drop handling
+  onDrop: (event, worldPosition) => {
+    /* handle drop */
+  },
+  // Called when an image element fails to load; failed images render a gray
+  // placeholder. Falls back to console.warn when unset.
+  onImageError: ({ src, elementIds }) => {
+    /* handle broken image */
+  },
 });
 ```
 

package/dist/index.cjs

@@ -92,6 +92,7 @@ __export(index_exports, {
   getHexDistance: () => getHexDistance,
   isBindable: () => isBindable,
   isNearBezier: () => isNearBezier,
+  isNoteContentEmpty: () => isNoteContentEmpty,
   parseState: () => parseState,
   sanitizeNoteHtml: () => sanitizeNoteHtml,
   setFontSize: () => setFontSize,
@@ -382,6 +383,12 @@ function sanitizeNode(node) {
     sanitizeNode(el);
   }
 }
+function isNoteContentEmpty(html) {
+  if (!html) return true;
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const text = doc.body.textContent ?? "";
+  return text.replace(/\u00a0/g, " ").trim().length === 0;
+}
 function sanitizeAttributes(el, tag) {
   const attrs = Array.from(el.attributes);
   for (const attr of attrs) {
@@ -2712,6 +2719,7 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  onImageError = null;
   camera = null;
   canvasSize = null;
   hexTileCache = null;
@@ -2722,6 +2730,9 @@ var ElementRenderer = class {
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setOnImageError(callback) {
+    this.onImageError = callback;
+  }
   setCamera(camera) {
     this.camera = camera;
   }
@@ -3080,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(
@@ -3090,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) {
@@ -3105,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;
     }
@@ -3121,6 +3158,11 @@ var ElementRenderer = class {
         });
       }
     };
+    img.onerror = () => {
+      this.imageCache.set(src, "failed");
+      this.onImageError?.(src);
+      this.onImageLoad?.();
+    };
     return null;
   }
 };
@@ -3473,17 +3515,36 @@ var FORMAT_SHORTCUTS = {
   i: toggleItalic,
   u: toggleUnderline
 };
+function ensureEditorStyles() {
+  if (document.querySelector("style[data-fieldnotes-editor]")) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-fieldnotes-editor", "");
+  style.textContent = `[data-fn-placeholder][data-fn-empty='true']::before {
+  content: attr(data-fn-placeholder);
+  color: #9e9e9e;
+  position: absolute;
+  pointer-events: none;
+}`;
+  document.head.appendChild(style);
+}
+function isNodeEmpty(node) {
+  const text = node.textContent ?? "";
+  return text.replace(/\u00a0/g, " ").trim().length === 0;
+}
 var NoteEditor = class {
   editingId = null;
   editingNode = null;
   blurHandler = null;
   keyHandler = null;
   pointerHandler = null;
+  inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
   toolbar;
+  placeholder;
   constructor(options) {
     this.toolbar = options?.toolbar === false ? null : new NoteToolbar(options?.fontSizePresets);
+    this.placeholder = options?.placeholder ?? "Type\u2026";
   }
   get isEditing() {
     return this.editingId !== null;
@@ -3518,6 +3579,11 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    if (this.inputHandler) {
+      this.editingNode.removeEventListener("input", this.inputHandler);
+    }
+    this.editingNode.removeAttribute("data-fn-placeholder");
+    this.editingNode.removeAttribute("data-fn-empty");
     const text = sanitizeNoteHtml(this.editingNode.innerHTML);
     store.update(this.editingId, { text });
     this.editingNode.contentEditable = "false";
@@ -3534,6 +3600,7 @@ var NoteEditor = class {
     this.blurHandler = null;
     this.keyHandler = null;
     this.pointerHandler = null;
+    this.inputHandler = null;
   }
   destroy(store) {
     this.pendingEditId = null;
@@ -3564,6 +3631,13 @@ var NoteEditor = class {
       selection.removeAllRanges();
       selection.addRange(range);
     }
+    ensureEditorStyles();
+    node.setAttribute("data-fn-placeholder", this.placeholder);
+    node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+    this.inputHandler = () => {
+      node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+    };
+    node.addEventListener("input", this.inputHandler);
     this.toolbar?.show(node);
     this.blurHandler = (e) => {
       const related = e.relatedTarget;
@@ -5000,9 +5074,21 @@ 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
+      toolbar: options.toolbar,
+      placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.onHtmlElementMount = options.onHtmlElementMount;
@@ -5348,7 +5434,16 @@ var Viewport = class {
   }
   onTextEditStop(elementId) {
     const element = this.store.getById(elementId);
-    if (!element || element.type !== "text") return;
+    if (!element) return;
+    if (element.type === "note") {
+      if (isNoteContentEmpty(element.text)) {
+        this.historyRecorder.begin();
+        this.store.remove(elementId);
+        this.historyRecorder.commit();
+      }
+      return;
+    }
+    if (element.type !== "text") return;
     if (!element.text || element.text.trim() === "") {
       this.historyRecorder.begin();
       this.store.remove(elementId);
@@ -5694,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) {
@@ -5752,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);
   }
 };
 
@@ -5897,6 +6024,7 @@ var SelectTool = class {
   pendingSingleSelectId = null;
   hasDragged = false;
   resizeAspectRatio = 0;
+  hoveredId = null;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5913,6 +6041,7 @@ var SelectTool = class {
   onDeactivate(ctx) {
     this._selectedIds = [];
     this.mode = { type: "idle" };
+    this.hoveredId = null;
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
@@ -5920,6 +6049,7 @@ var SelectTool = class {
   }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
+    this.setHovered(null, ctx);
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
@@ -6062,7 +6192,8 @@ var SelectTool = class {
   }
   onHover(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.updateHoverCursor(world, ctx);
+    const hoverId = this.updateHoverCursor(world, ctx);
+    this.setHovered(hoverId, ctx);
   }
   renderOverlay(canvasCtx) {
     this.renderMarquee(canvasCtx);
@@ -6083,6 +6214,23 @@ var SelectTool = class {
         canvasCtx.restore();
       }
     }
+    if (this.hoveredId && this.ctx && this.mode.type === "idle") {
+      if (!this._selectedIds.includes(this.hoveredId)) {
+        const el = this.ctx.store.getById(this.hoveredId);
+        if (el) {
+          const b = getElementBounds(el);
+          if (b) {
+            canvasCtx.save();
+            canvasCtx.strokeStyle = "#2196F3";
+            canvasCtx.globalAlpha = 0.35;
+            canvasCtx.lineWidth = 1.5 / this.ctx.camera.zoom;
+            canvasCtx.setLineDash([]);
+            canvasCtx.strokeRect(b.x, b.y, b.w, b.h);
+            canvasCtx.restore();
+          }
+        }
+      }
+    }
   }
   updateArrowsBoundTo(ids, ctx) {
     const movedNonArrowIds = /* @__PURE__ */ new Set();
@@ -6131,20 +6279,26 @@ var SelectTool = class {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
       ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
-      return;
+      return null;
     }
     const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
     if (templateResizeHit) {
       ctx.setCursor?.("nwse-resize");
-      return;
+      return null;
     }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
-      return;
+      return null;
     }
     const hit = this.hitTest(world, ctx);
     ctx.setCursor?.(hit ? "move" : "default");
+    return hit ? hit.id : null;
+  }
+  setHovered(id, ctx) {
+    if (this.hoveredId === id) return;
+    this.hoveredId = id;
+    ctx.requestRender();
   }
   handleResize(world, ctx, shiftKey = false) {
     if (this.mode.type !== "resizing") return;
@@ -6410,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);
@@ -7251,7 +7400,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.19.0";
+var VERSION = "0.21.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -7326,6 +7475,7 @@ var VERSION = "0.19.0";
   getHexDistance,
   isBindable,
   isNearBezier,
+  isNoteContentEmpty,
   parseState,
   sanitizeNoteHtml,
   setFontSize,