@fieldnotes/core 0.40.1 → 0.40.3

package/dist/index.d.cts

@@ -1048,6 +1048,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.40.1";
+declare const VERSION = "0.40.3";
 
 export { type ActiveFormats, type AlignEdge, 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, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, 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, exportSvg, 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

@@ -1048,6 +1048,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.40.1";
+declare const VERSION = "0.40.3";
 
 export { type ActiveFormats, type AlignEdge, 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, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, 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, exportSvg, 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

@@ -3948,6 +3948,7 @@ var NoteEditor = class {
   inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  onInputCallback = null;
   beginHistory = null;
   commitHistory = null;
   toolbar;
@@ -3965,6 +3966,9 @@ var NoteEditor = class {
   setOnStop(callback) {
     this.onStopCallback = callback;
   }
+  setOnInput(callback) {
+    this.onInputCallback = callback;
+  }
   setHistoryHooks(begin, commit) {
     this.beginHistory = begin;
     this.commitHistory = commit;
@@ -4007,7 +4011,6 @@ var NoteEditor = class {
       cursor: "default"
     });
     this.toolbar?.hide();
-    this.beginHistory?.();
     if (textChanged) {
       store.update(this.editingId, { text });
     }
@@ -4036,6 +4039,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",
@@ -4056,6 +4060,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);
@@ -4633,29 +4638,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;
         }
@@ -4664,20 +4682,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;
     }
   }
 }
@@ -4688,7 +4719,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();
 }
 
@@ -6519,6 +6553,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;
@@ -6538,7 +6582,7 @@ var ViewportInteractions = class {
         this.deps.store.remove(elementId);
         return;
       }
-      this.fitNoteHeight(elementId);
+      this.liveFitHeight(elementId);
       return;
     }
     if (element.type !== "text") return;
@@ -6546,13 +6590,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;
@@ -6688,6 +6726,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(),
@@ -9654,7 +9693,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.1";
+var VERSION = "0.40.3";
 export {
   ArrowTool,
   AutoSave,