@fieldnotes/core 0.40.2 → 0.40.4

package/dist/index.cjs

@@ -670,7 +670,7 @@ function getBendFromPoint(from, to, dragPoint) {
   if (len === 0) return 0;
   const perpX = -dy / len;
   const perpY = dx / len;
-  return (dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY;
+  return 2 * ((dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY);
 }
 function getArrowTangentAngle(from, to, bend, t) {
   const cp = getArrowControlPoint(from, to, bend);
@@ -4721,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;
         }
@@ -4752,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;
+        breakLine(runLineHeight);
       }
-      ctx.fillText(word, cursorX, cursorY);
-      if (run.underline) {
-        const underY = cursorY + run.fontSize + 1;
-        ctx.fillRect(cursorX, underY, metrics.width, 1);
+      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;
     }
   }
 }
@@ -4776,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();
 }
 
@@ -9747,7 +9776,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.2";
+var VERSION = "0.40.4";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,