@fieldnotes/core 0.26.0 → 0.28.0

package/dist/index.cjs

@@ -59,6 +59,7 @@ __export(index_exports, {
   getArrowTangentAngle: () => getArrowTangentAngle,
   getBendFromPoint: () => getBendFromPoint,
   getElementBounds: () => getElementBounds,
+  getElementStyle: () => getElementStyle,
   getElementsBoundingBox: () => getElementsBoundingBox,
   getHexCellsInCone: () => getHexCellsInCone,
   getHexCellsInLine: () => getHexCellsInLine,
@@ -70,6 +71,7 @@ __export(index_exports, {
   smartSnap: () => smartSnap,
   snapPoint: () => snapPoint,
   snapToHexCenter: () => snapToHexCenter,
+  styleToPatch: () => styleToPatch,
   toggleBold: () => toggleBold,
   toggleItalic: () => toggleItalic,
   toggleStrikethrough: () => toggleStrikethrough,
@@ -2737,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();
@@ -2747,6 +2750,7 @@ var ElementRenderer = class {
   hexTileCache = null;
   hexTileCacheKey = "";
   gridBoundsOverride = null;
+  labelEditingId = null;
   setStore(store) {
     this.store = store;
   }
@@ -2765,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);
   }
@@ -2841,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();
@@ -3251,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) {
@@ -3714,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();
@@ -5234,7 +5342,104 @@ var MarginViewport = class {
   }
 };
 
+// src/elements/element-style.ts
+function styleToPatch(element, style) {
+  const { color, fillColor, strokeWidth, opacity, fontSize } = style;
+  switch (element.type) {
+    case "stroke":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    case "arrow":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {}
+      };
+    case "shape":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...fillColor !== void 0 ? { fillColor } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {}
+      };
+    case "text":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...fontSize !== void 0 ? { fontSize } : {}
+      };
+    case "note":
+      return {
+        ...color !== void 0 ? { textColor: color } : {},
+        ...fillColor !== void 0 ? { backgroundColor: fillColor } : {},
+        ...fontSize !== void 0 ? { fontSize } : {}
+      };
+    case "grid":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    case "template":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...fillColor !== void 0 ? { fillColor } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    default:
+      return {};
+  }
+}
+function getElementStyle(element) {
+  switch (element.type) {
+    case "stroke":
+      return { color: element.color, strokeWidth: element.width, opacity: element.opacity };
+    case "arrow":
+      return { color: element.color, strokeWidth: element.width };
+    case "shape":
+      return {
+        color: element.strokeColor,
+        fillColor: element.fillColor,
+        strokeWidth: element.strokeWidth
+      };
+    case "text":
+      return { color: element.color, fontSize: element.fontSize };
+    case "note":
+      return {
+        color: element.textColor,
+        fillColor: element.backgroundColor,
+        ...element.fontSize !== void 0 ? { fontSize: element.fontSize } : {}
+      };
+    case "grid":
+      return {
+        color: element.strokeColor,
+        strokeWidth: element.strokeWidth,
+        opacity: element.opacity
+      };
+    case "template":
+      return {
+        color: element.strokeColor,
+        fillColor: element.fillColor,
+        strokeWidth: element.strokeWidth,
+        opacity: element.opacity
+      };
+    default:
+      return {};
+  }
+}
+
 // src/canvas/viewport.ts
+var EMPTY_IDS = [];
+var ARROW_HIT_THRESHOLD = 10;
+function noop() {
+}
+function sharedValue(values) {
+  const present = values.filter((v) => v !== void 0);
+  if (present.length === 0) return void 0;
+  const first = present[0];
+  return present.every((v) => v === first) ? first : void 0;
+}
 var Viewport = class {
   constructor(container, options = {}) {
     this.container = container;
@@ -5268,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()
@@ -5394,6 +5600,7 @@ var Viewport = class {
   background;
   renderer;
   noteEditor;
+  arrowLabelEditor;
   historyRecorder;
   toolContext;
   marginViewport;
@@ -5586,6 +5793,52 @@ var Viewport = class {
       this.gridChangeListeners.delete(listener);
     };
   }
+  getSelectTool() {
+    return this.toolManager.getTool("select");
+  }
+  getSelectedIds() {
+    return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
+  }
+  onSelectionChange(listener) {
+    const tool = this.getSelectTool();
+    return tool ? tool.onSelectionChange(listener) : noop;
+  }
+  getSelectionStyle() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el) styles.push(getElementStyle(el));
+    }
+    if (styles.length === 0) return null;
+    const result = {};
+    const color = sharedValue(styles.map((s) => s.color));
+    if (color !== void 0) result.color = color;
+    const fillColor = sharedValue(styles.map((s) => s.fillColor));
+    if (fillColor !== void 0) result.fillColor = fillColor;
+    const strokeWidth = sharedValue(styles.map((s) => s.strokeWidth));
+    if (strokeWidth !== void 0) result.strokeWidth = strokeWidth;
+    const opacity = sharedValue(styles.map((s) => s.opacity));
+    if (opacity !== void 0) result.opacity = opacity;
+    const fontSize = sharedValue(styles.map((s) => s.fontSize));
+    if (fontSize !== void 0) result.fontSize = fontSize;
+    return result;
+  }
+  applyStyleToSelection(style) {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (!el) continue;
+      const patch = styleToPatch(el, style);
+      if (Object.keys(patch).length > 0) {
+        this.store.update(id, patch);
+      }
+    }
+    this.historyRecorder.commit();
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -5602,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);
@@ -5687,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) {
@@ -6201,6 +6482,7 @@ var HANDLE_CURSORS = {
 var SelectTool = class {
   name = "select";
   _selectedIds = [];
+  selectionListeners = /* @__PURE__ */ new Set();
   mode = { type: "idle" };
   lastWorld = { x: 0, y: 0 };
   currentWorld = { x: 0, y: 0 };
@@ -6210,10 +6492,22 @@ var SelectTool = class {
   resizeAspectRatio = 0;
   hoveredId = null;
   get selectedIds() {
-    return [...this._selectedIds];
+    return this._selectedIds;
   }
-  setSelection(ids) {
+  onSelectionChange(listener) {
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
+  }
+  setSelectedIds(ids) {
+    const prev = this._selectedIds;
+    if (prev.length === ids.length && prev.every((id, i) => id === ids[i])) return;
     this._selectedIds = ids;
+    for (const listener of this.selectionListeners) listener();
+  }
+  setSelection(ids) {
+    this.setSelectedIds(ids);
     this.ctx?.requestRender();
   }
   get isMarqueeActive() {
@@ -6223,7 +6517,7 @@ var SelectTool = class {
     this.ctx = ctx;
   }
   onDeactivate(ctx) {
-    this._selectedIds = [];
+    this.setSelectedIds([]);
     this.mode = { type: "idle" };
     this.hoveredId = null;
     ctx.setCursor?.("default");
@@ -6274,22 +6568,22 @@ var SelectTool = class {
       const alreadySelected = this._selectedIds.includes(hit.id);
       if (state.shiftKey) {
         if (alreadySelected) {
-          this._selectedIds = this._selectedIds.filter((id) => id !== hit.id);
+          this.setSelectedIds(this._selectedIds.filter((id) => id !== hit.id));
           this.mode = { type: "idle" };
         } else {
-          this._selectedIds = [...this._selectedIds, hit.id];
+          this.setSelectedIds([...this._selectedIds, hit.id]);
           this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
         }
       } else {
         if (!alreadySelected) {
-          this._selectedIds = [hit.id];
+          this.setSelectedIds([hit.id]);
         } else if (this._selectedIds.length > 1) {
           this.pendingSingleSelectId = hit.id;
         }
         this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
       }
     } else {
-      this._selectedIds = [];
+      this.setSelectedIds([]);
       this.mode = { type: "marquee", start: world };
     }
     ctx.requestRender();
@@ -6362,12 +6656,12 @@ var SelectTool = class {
     if (this.mode.type === "marquee") {
       const rect = this.getMarqueeRect();
       if (rect) {
-        this._selectedIds = this.findElementsInRect(rect, ctx);
+        this.setSelectedIds(this.findElementsInRect(rect, ctx));
       }
       ctx.requestRender();
     }
     if (!this.hasDragged && this.pendingSingleSelectId !== null) {
-      this._selectedIds = [this.pendingSingleSelectId];
+      this.setSelectedIds([this.pendingSingleSelectId]);
     }
     this.pendingSingleSelectId = null;
     this.hasDragged = false;
@@ -7589,7 +7883,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.26.0";
+var VERSION = "0.28.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -7631,6 +7925,7 @@ var VERSION = "0.26.0";
   getArrowTangentAngle,
   getBendFromPoint,
   getElementBounds,
+  getElementStyle,
   getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
@@ -7642,6 +7937,7 @@ var VERSION = "0.26.0";
   smartSnap,
   snapPoint,
   snapToHexCenter,
+  styleToPatch,
   toggleBold,
   toggleItalic,
   toggleStrikethrough,