@fieldnotes/core 0.40.1 → 0.40.3

package/dist/index.cjs

@@ -4031,6 +4031,7 @@ var NoteEditor = class {
   inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  onInputCallback = null;
   beginHistory = null;
   commitHistory = null;
   toolbar;
@@ -4048,6 +4049,9 @@ var NoteEditor = class {
   setOnStop(callback) {
     this.onStopCallback = callback;
   }
+  setOnInput(callback) {
+    this.onInputCallback = callback;
+  }
   setHistoryHooks(begin, commit) {
     this.beginHistory = begin;
     this.commitHistory = commit;
@@ -4090,7 +4094,6 @@ var NoteEditor = class {
       cursor: "default"
     });
     this.toolbar?.hide();
-    this.beginHistory?.();
     if (textChanged) {
       store.update(this.editingId, { text });
     }
@@ -4119,6 +4122,7 @@ var NoteEditor = class {
   activateEditing(node, elementId, store) {
     this.editingId = elementId;
     this.editingNode = node;
+    this.beginHistory?.();
     node.contentEditable = "true";
     Object.assign(node.style, {
       userSelect: "text",
@@ -4139,6 +4143,7 @@ var NoteEditor = class {
     node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
     this.inputHandler = () => {
       node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+      this.onInputCallback?.(elementId);
     };
     node.addEventListener("input", this.inputHandler);
     this.toolbar?.show(node);
@@ -4716,29 +4721,42 @@ function buildFontString(run) {
   const weight = run.bold ? "bold" : "normal";
   return `${style} ${weight} ${run.fontSize}px system-ui, sans-serif`;
 }
-function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
+function renderStyledRuns(ctx, runs, startX, startY, maxWidth, opts = {}) {
+  const align = opts.align ?? "left";
+  const lhMul = opts.lineHeight ?? 1.3;
   ctx.textBaseline = "top";
+  const lines = [];
   let cursorX = startX;
-  let cursorY = startY;
+  let lineY = startY;
   let lineHeight = 0;
+  let fragments = [];
+  const finalizeLine = () => {
+    const last = fragments[fragments.length - 1];
+    const width = last ? last.x + last.width : 0;
+    lines.push({ y: lineY, width, fragments });
+  };
+  const breakLine = (runLineHeight) => {
+    finalizeLine();
+    lineY += lineHeight;
+    lineHeight = runLineHeight;
+    fragments = [];
+    cursorX = startX;
+  };
   for (const run of runs) {
-    ctx.font = buildFontString(run);
-    const runLineHeight = run.fontSize * 1.3;
+    const font = buildFontString(run);
+    ctx.font = font;
+    const runLineHeight = run.fontSize * lhMul;
     lineHeight = Math.max(lineHeight, runLineHeight);
     const words = run.text.split(/(\n| )/);
     for (const word of words) {
       if (word === "\n") {
-        cursorX = startX;
-        cursorY += lineHeight;
-        lineHeight = runLineHeight;
+        breakLine(runLineHeight);
         continue;
       }
       if (word === " ") {
         const spaceWidth = ctx.measureText(" ").width;
         if (cursorX + spaceWidth > startX + maxWidth && cursorX > startX) {
-          cursorX = startX;
-          cursorY += lineHeight;
-          lineHeight = runLineHeight;
+          breakLine(runLineHeight);
         } else {
           cursorX += spaceWidth;
         }
@@ -4747,20 +4765,33 @@ function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
       if (!word) continue;
       const metrics = ctx.measureText(word);
       if (cursorX + metrics.width > startX + maxWidth && cursorX > startX) {
-        cursorX = startX;
-        cursorY += lineHeight;
-        lineHeight = runLineHeight;
-      }
-      ctx.fillText(word, cursorX, cursorY);
-      if (run.underline) {
-        const underY = cursorY + run.fontSize + 1;
-        ctx.fillRect(cursorX, underY, metrics.width, 1);
+        breakLine(runLineHeight);
+      }
+      fragments.push({
+        text: word,
+        font,
+        x: cursorX - startX,
+        width: metrics.width,
+        fontSize: run.fontSize,
+        underline: run.underline,
+        strikethrough: run.strikethrough
+      });
+      cursorX += metrics.width;
+    }
+  }
+  finalizeLine();
+  for (const line of lines) {
+    const offset = align === "center" ? (maxWidth - line.width) / 2 : align === "right" ? maxWidth - line.width : 0;
+    for (const fragment of line.fragments) {
+      ctx.font = fragment.font;
+      const fx = startX + offset + fragment.x;
+      ctx.fillText(fragment.text, fx, line.y);
+      if (fragment.underline) {
+        ctx.fillRect(fx, line.y + fragment.fontSize + 1, fragment.width, 1);
       }
-      if (run.strikethrough) {
-        const strikeY = cursorY + run.fontSize * 0.55;
-        ctx.fillRect(cursorX, strikeY, metrics.width, 1);
+      if (fragment.strikethrough) {
+        ctx.fillRect(fx, line.y + fragment.fontSize * 0.55, fragment.width, 1);
       }
-      cursorX += metrics.width;
     }
   }
 }
@@ -4771,7 +4802,10 @@ function renderTextOnCanvas(ctx, text) {
   ctx.save();
   ctx.fillStyle = text.color;
   const runs = parseStyledRuns(text.text ?? "", text.fontSize);
-  renderStyledRuns(ctx, runs, text.position.x + pad, text.position.y + pad, text.size.w - pad * 2);
+  renderStyledRuns(ctx, runs, text.position.x + pad, text.position.y + pad, text.size.w - pad * 2, {
+    align: text.textAlign,
+    lineHeight: 1.4
+  });
   ctx.restore();
 }
 
@@ -6602,6 +6636,16 @@ var ViewportInteractions = class {
       this.deps.noteEditor.startEditing(node, id, this.deps.store);
     }
   }
+  liveFitHeight(elementId) {
+    const element = this.deps.store.getById(elementId);
+    if (!element || element.type !== "note" && element.type !== "text") return;
+    const node = this.deps.domNodeManager.getNode(elementId);
+    if (!node) return;
+    const measured = node.scrollHeight;
+    if (measured > 0 && measured !== element.size.h) {
+      this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
+    }
+  }
   fitNoteHeight(elementId) {
     const element = this.deps.store.getById(elementId);
     if (!element || element.type !== "note") return;
@@ -6621,7 +6665,7 @@ var ViewportInteractions = class {
         this.deps.store.remove(elementId);
         return;
       }
-      this.fitNoteHeight(elementId);
+      this.liveFitHeight(elementId);
       return;
     }
     if (element.type !== "text") return;
@@ -6629,13 +6673,7 @@ var ViewportInteractions = class {
       this.deps.store.remove(elementId);
       return;
     }
-    const node = this.deps.domNodeManager.getNode(elementId);
-    if (node && "size" in element) {
-      const measured = node.scrollHeight;
-      if (measured !== element.size.h) {
-        this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
-      }
-    }
+    this.liveFitHeight(elementId);
   }
   onTapDown = (e) => {
     this.tapDownX = e.clientX;
@@ -6771,6 +6809,7 @@ var Viewport = class {
       placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.interactions.onTextEditStop(id));
+    this.noteEditor.setOnInput((id) => this.interactions.liveFitHeight(id));
     this.arrowLabelEditor = new ArrowLabelEditor();
     this.noteEditor.setHistoryHooks(
       () => this.historyRecorder.begin(),
@@ -9737,7 +9776,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.1";
+var VERSION = "0.40.3";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,