@fieldnotes/core 0.27.0 → 0.28.0

package/dist/index.d.cts

@@ -50,6 +50,8 @@ interface ArrowElement extends BaseElement {
     toBinding?: Binding;
     /** Derived from from/to/bend. Redundant in serialized state — safe to omit. */
     cachedControlPoint?: Point;
+    /** Optional text rendered at the curve midpoint. */
+    label?: string;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -446,6 +448,7 @@ declare class Viewport {
     private readonly background;
     private readonly renderer;
     private readonly noteEditor;
+    private readonly arrowLabelEditor;
     private readonly historyRecorder;
     readonly toolContext: ToolContext;
     private readonly marginViewport;
@@ -517,6 +520,8 @@ declare class Viewport {
     private onTextEditStop;
     private onTapDown;
     private onDoubleTap;
+    private findArrowAt;
+    private startArrowLabelEdit;
     private hitTestWorld;
     stopInteracting(): void;
     private onDragOver;
@@ -574,6 +579,7 @@ interface ArrowInput extends BaseDefaults {
     width?: number;
     fromBinding?: Binding;
     toBinding?: Binding;
+    label?: string;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -951,6 +957,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.27.0";
+declare const VERSION = "0.28.0";
 
 export { type ActiveFormats, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -50,6 +50,8 @@ interface ArrowElement extends BaseElement {
     toBinding?: Binding;
     /** Derived from from/to/bend. Redundant in serialized state — safe to omit. */
     cachedControlPoint?: Point;
+    /** Optional text rendered at the curve midpoint. */
+    label?: string;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -446,6 +448,7 @@ declare class Viewport {
     private readonly background;
     private readonly renderer;
     private readonly noteEditor;
+    private readonly arrowLabelEditor;
     private readonly historyRecorder;
     readonly toolContext: ToolContext;
     private readonly marginViewport;
@@ -517,6 +520,8 @@ declare class Viewport {
     private onTextEditStop;
     private onTapDown;
     private onDoubleTap;
+    private findArrowAt;
+    private startArrowLabelEdit;
     private hitTestWorld;
     stopInteracting(): void;
     private onDragOver;
@@ -574,6 +579,7 @@ interface ArrowInput extends BaseDefaults {
     width?: number;
     fromBinding?: Binding;
     toBinding?: Binding;
+    label?: string;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -951,6 +957,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.27.0";
+declare const VERSION = "0.28.0";
 
 export { type ActiveFormats, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -2658,6 +2658,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();
@@ -2668,6 +2669,7 @@ var ElementRenderer = class {
   hexTileCache = null;
   hexTileCacheKey = "";
   gridBoundsOverride = null;
+  labelEditingId = null;
   setStore(store) {
     this.store = store;
   }
@@ -2686,6 +2688,9 @@ var ElementRenderer = class {
   setGridBoundsOverride(bounds) {
     this.gridBoundsOverride = bounds;
   }
+  setLabelEditingId(id) {
+    this.labelEditingId = id;
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -2762,6 +2767,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();
@@ -3172,6 +3199,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) {
@@ -3635,6 +3663,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();
@@ -5244,6 +5350,7 @@ function getElementStyle(element) {
 
 // src/canvas/viewport.ts
 var EMPTY_IDS = [];
+var ARROW_HIT_THRESHOLD = 10;
 function noop() {
 }
 function sharedValue(values) {
@@ -5285,6 +5392,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()
@@ -5411,6 +5519,7 @@ var Viewport = class {
   background;
   renderer;
   noteEditor;
+  arrowLabelEditor;
   historyRecorder;
   toolContext;
   marginViewport;
@@ -5665,6 +5774,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);
@@ -5750,8 +5860,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) {
@@ -7665,7 +7802,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.27.0";
+var VERSION = "0.28.0";
 export {
   ArrowTool,
   AutoSave,