@fieldnotes/core 0.27.0 → 0.29.0

package/README.md

@@ -439,8 +439,16 @@ new Viewport(container, {
 
 ```typescript
 new PencilTool({ color: '#ff0000', width: 3, smoothing: 1.5 });
-new EraserTool({ radius: 30 });
+new EraserTool({ radius: 30 }); // mode: 'partial' (default) splits strokes at the erased span; mode: 'stroke' deletes the whole stroke
 new ArrowTool({ color: '#333', width: 2 });
+```
+
+### Arrow Labels
+
+Arrows support an optional `label` string, rendered as a pill at the curve midpoint. Pass it at creation or double-click an arrow on the canvas to add or edit the label inline.
+
+```typescript
+createArrow({ from: { x: 0, y: 0 }, to: { x: 200, y: 0 }, label: 'depends on' });
 new NoteTool({ backgroundColor: '#fff9c4', size: { w: 200, h: 150 } });
 new ImageTool({ size: { w: 400, h: 300 } });
 ```

package/dist/index.cjs

@@ -2739,6 +2739,7 @@ function drawHexPath(ctx, cx, cy, cellSize, orientation) {
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
+var ARROW_LABEL_FONT_SIZE = 14;
 var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
@@ -2749,6 +2750,7 @@ var ElementRenderer = class {
   hexTileCache = null;
   hexTileCacheKey = "";
   gridBoundsOverride = null;
+  labelEditingId = null;
   setStore(store) {
     this.store = store;
   }
@@ -2767,6 +2769,9 @@ var ElementRenderer = class {
   setGridBoundsOverride(bounds) {
     this.gridBoundsOverride = bounds;
   }
+  setLabelEditingId(id) {
+    this.labelEditingId = id;
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -2843,6 +2848,28 @@ var ElementRenderer = class {
     ctx.stroke();
     this.renderArrowhead(ctx, arrow, visualTo, geometry.tangentEnd);
     ctx.restore();
+    this.renderArrowLabel(ctx, arrow);
+  }
+  renderArrowLabel(ctx, arrow) {
+    if (!arrow.label || arrow.label.length === 0) return;
+    if (arrow.id === this.labelEditingId) return;
+    const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+    ctx.save();
+    ctx.font = `${ARROW_LABEL_FONT_SIZE}px system-ui, sans-serif`;
+    const metrics = ctx.measureText(arrow.label);
+    const padX = 6;
+    const padY = 4;
+    const w = metrics.width + padX * 2;
+    const h = ARROW_LABEL_FONT_SIZE + padY * 2;
+    ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+    ctx.beginPath();
+    ctx.roundRect(mid.x - w / 2, mid.y - h / 2, w, h, 4);
+    ctx.fill();
+    ctx.fillStyle = "#1a1a1a";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(arrow.label, mid.x, mid.y);
+    ctx.restore();
   }
   renderArrowhead(ctx, arrow, tip, angle) {
     ctx.beginPath();
@@ -3253,6 +3280,7 @@ function createArrow(input) {
   };
   if (input.fromBinding) result.fromBinding = input.fromBinding;
   if (input.toBinding) result.toBinding = input.toBinding;
+  if (input.label !== void 0) result.label = input.label;
   return result;
 }
 function createImage(input) {
@@ -3716,6 +3744,84 @@ var NoteEditor = class {
   }
 };
 
+// src/elements/arrow-label-editor.ts
+var ArrowLabelEditor = class {
+  input = null;
+  done = false;
+  get isEditing() {
+    return this.input !== null;
+  }
+  startEditing(start) {
+    if (this.input) this.cleanup();
+    const { arrow, layer, store, recorder, onDone } = start;
+    const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = arrow.label ?? "";
+    Object.assign(input.style, {
+      position: "absolute",
+      left: `${mid.x}px`,
+      top: `${mid.y}px`,
+      transform: "translate(-50%, -50%)",
+      // domLayer is pointer-events:none; the input must opt back in to receive taps/clicks.
+      pointerEvents: "auto",
+      font: "14px system-ui, sans-serif",
+      padding: "2px 6px",
+      border: "1px solid #2196F3",
+      borderRadius: "4px",
+      background: "#ffffff",
+      color: "#1a1a1a",
+      outline: "none",
+      minWidth: "40px"
+    });
+    this.done = false;
+    const commit = () => {
+      if (this.done) return;
+      this.done = true;
+      const next = input.value.trim() || void 0;
+      if (next !== arrow.label) {
+        recorder.begin();
+        store.update(arrow.id, { label: next });
+        recorder.commit();
+      }
+      this.cleanup();
+      onDone();
+    };
+    const cancel = () => {
+      if (this.done) return;
+      this.done = true;
+      this.cleanup();
+      onDone();
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      }
+      e.stopPropagation();
+    });
+    input.addEventListener("blur", commit);
+    layer.appendChild(input);
+    this.input = input;
+    input.focus();
+    input.select();
+  }
+  /** Abort any in-progress edit without committing (e.g. on viewport teardown). */
+  cancel() {
+    this.done = true;
+    this.cleanup();
+  }
+  cleanup() {
+    if (this.input) {
+      this.input.remove();
+      this.input = null;
+    }
+  }
+};
+
 // src/tools/tool-manager.ts
 var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
@@ -5325,6 +5431,7 @@ function getElementStyle(element) {
 
 // src/canvas/viewport.ts
 var EMPTY_IDS = [];
+var ARROW_HIT_THRESHOLD = 10;
 function noop() {
 }
 function sharedValue(values) {
@@ -5366,6 +5473,7 @@ var Viewport = class {
       placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
+    this.arrowLabelEditor = new ArrowLabelEditor();
     this.noteEditor.setHistoryHooks(
       () => this.historyRecorder.begin(),
       () => this.historyRecorder.commit()
@@ -5492,6 +5600,7 @@ var Viewport = class {
   background;
   renderer;
   noteEditor;
+  arrowLabelEditor;
   historyRecorder;
   toolContext;
   marginViewport;
@@ -5746,6 +5855,7 @@ var Viewport = class {
     this.renderLoop.stop();
     this.interactMode.destroy();
     this.noteEditor.destroy(this.store);
+    this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
     this.wrapper.removeEventListener("pointerdown", this.onTapDown);
     this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
@@ -5831,8 +5941,35 @@ var Viewport = class {
     const hit = this.hitTestWorld(world);
     if (hit?.type === "html") {
       this.interactMode.startInteracting(hit.id);
+      return;
+    }
+    const arrow = this.findArrowAt(world);
+    if (arrow) {
+      this.startArrowLabelEdit(arrow);
     }
   };
+  findArrowAt(world) {
+    const candidates = this.store.queryPoint(world).reverse();
+    for (const el of candidates) {
+      if (el.type === "arrow" && isNearBezier(world, el.from, el.to, el.bend, ARROW_HIT_THRESHOLD)) {
+        return el;
+      }
+    }
+    return void 0;
+  }
+  startArrowLabelEdit(arrow) {
+    this.arrowLabelEditor.startEditing({
+      arrow,
+      layer: this.domLayer,
+      store: this.store,
+      recorder: this.historyRecorder,
+      onDone: () => {
+        this.renderer.setLabelEditingId(null);
+        this.requestRender();
+      }
+    });
+    this.renderer.setLabelEditingId(arrow.id);
+  }
   hitTestWorld(world) {
     const candidates = this.store.queryPoint(world).reverse();
     for (const el of candidates) {
@@ -6154,6 +6291,79 @@ function hitTestStroke(stroke, point, radius) {
   return false;
 }
 
+// src/elements/stroke-erase.ts
+function lerp(a, b, t) {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+    pressure: a.pressure + (b.pressure - a.pressure) * t
+  };
+}
+function erasePoints(points, eraser, radius) {
+  const r2 = radius * radius;
+  if (points.length < 2) {
+    const p = points[0];
+    if (p && (p.x - eraser.x) ** 2 + (p.y - eraser.y) ** 2 <= r2) return [];
+    return null;
+  }
+  const runs = [];
+  let current = [];
+  let erased = false;
+  const flush = () => {
+    if (current.length >= 2) runs.push(current);
+    current = [];
+  };
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const fx = a.x - eraser.x;
+    const fy = a.y - eraser.y;
+    const A = dx * dx + dy * dy;
+    const B = 2 * (fx * dx + fy * dy);
+    const C = fx * fx + fy * fy - r2;
+    let tLo = 1;
+    let tHi = 0;
+    if (A === 0) {
+      if (C <= 0) {
+        tLo = 0;
+        tHi = 1;
+      }
+    } else {
+      const disc = B * B - 4 * A * C;
+      if (disc >= 0) {
+        const sq = Math.sqrt(disc);
+        const lo = Math.max(0, (-B - sq) / (2 * A));
+        const hi = Math.min(1, (-B + sq) / (2 * A));
+        if (lo < hi) {
+          tLo = lo;
+          tHi = hi;
+        }
+      }
+    }
+    if (tLo > tHi) {
+      if (current.length === 0) current.push(a);
+      current.push(b);
+      continue;
+    }
+    erased = true;
+    if (tLo > 0) {
+      if (current.length === 0) current.push(a);
+      current.push(lerp(a, b, tLo));
+      flush();
+    } else {
+      flush();
+    }
+    if (tHi < 1) {
+      current = [lerp(a, b, tHi), b];
+    }
+  }
+  flush();
+  return erased ? runs : null;
+}
+
 // src/tools/eraser-tool.ts
 var DEFAULT_RADIUS = 20;
 function makeEraserCursor(radius) {
@@ -6166,12 +6376,21 @@ var EraserTool = class {
   erasing = false;
   radius;
   cursor;
+  mode;
   constructor(options = {}) {
     this.radius = options.radius ?? DEFAULT_RADIUS;
     this.cursor = makeEraserCursor(this.radius);
+    this.mode = options.mode ?? "partial";
   }
   getOptions() {
-    return { radius: this.radius };
+    return { radius: this.radius, mode: this.mode };
+  }
+  setOptions(options) {
+    if (options.mode !== void 0) this.mode = options.mode;
+    if (options.radius !== void 0) {
+      this.radius = options.radius;
+      this.cursor = makeEraserCursor(this.radius);
+    }
   }
   onActivate(ctx) {
     ctx.setCursor?.(this.cursor);
@@ -6204,10 +6423,30 @@ var EraserTool = class {
       if (el.type !== "stroke") continue;
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (this.strokeIntersects(el, world)) {
+      if (!this.strokeIntersects(el, world)) continue;
+      if (this.mode === "stroke") {
         ctx.store.remove(el.id);
         erased = true;
+        continue;
+      }
+      const localEraser = { x: world.x - el.position.x, y: world.y - el.position.y };
+      const runs = erasePoints(el.points, localEraser, this.radius);
+      if (runs === null) continue;
+      ctx.store.remove(el.id);
+      for (const run of runs) {
+        ctx.store.add(
+          createStroke({
+            points: run,
+            color: el.color,
+            width: el.width,
+            opacity: el.opacity,
+            layerId: el.layerId,
+            zIndex: el.zIndex,
+            position: el.position
+          })
+        );
       }
+      erased = true;
     }
     if (erased) ctx.requestRender();
   }
@@ -7746,7 +7985,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.27.0";
+var VERSION = "0.29.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,