@fieldnotes/core 0.40.0 → 0.40.1

package/dist/index.cjs

@@ -4765,6 +4765,16 @@ function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
   }
 }
 
+// src/canvas/text-canvas-renderer.ts
+function renderTextOnCanvas(ctx, text) {
+  const pad = 2;
+  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);
+  ctx.restore();
+}
+
 // src/canvas/export-image.ts
 var center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
 function getStrokeBounds(el) {
@@ -4847,30 +4857,6 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
-function renderTextOnCanvas(ctx, text) {
-  if (!text.text) return;
-  ctx.save();
-  ctx.fillStyle = text.color;
-  ctx.font = `${text.fontSize}px system-ui, sans-serif`;
-  ctx.textBaseline = "top";
-  ctx.textAlign = text.textAlign;
-  const pad = 2;
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line !== void 0) {
-      ctx.fillText(line, textX, text.position.y + pad + i * lineHeight);
-    }
-  }
-  ctx.restore();
-}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -5092,28 +5078,27 @@ function emitImage(image, dataUri) {
   const { w, h } = image.size;
   return `<image href="${esc(href)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
-function emitText(text) {
+function emitText(text, rasterScale) {
   if (!text.text) return "";
-  const pad = 2;
-  let anchor = "start";
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    anchor = "middle";
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    anchor = "end";
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  let out = "";
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line === void 0) continue;
-    const y = text.position.y + pad + i * lineHeight;
-    out += `<text x="${n(textX)}" y="${n(y)}" font-family="system-ui, sans-serif" font-size="${n(text.fontSize)}" fill="${esc(text.color)}" text-anchor="${anchor}" dominant-baseline="text-before-edge">${esc(line)}</text>`;
+  const { x, y } = text.position;
+  const { w, h } = text.size;
+  if (typeof document === "undefined") return "";
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
+  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.scale(rasterScale, rasterScale);
+  ctx.translate(-x, -y);
+  renderTextOnCanvas(ctx, text);
+  let dataUri;
+  try {
+    dataUri = canvas.toDataURL();
+  } catch {
+    return "";
   }
-  return out;
+  if (!dataUri || !dataUri.startsWith("data:")) return "";
+  return `<image href="${esc(dataUri)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
 function emitNote(note, rasterScale) {
   const { x, y } = note.position;
@@ -5296,7 +5281,7 @@ function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
     case "image":
       return withRotationSvg(el, emitImage(el, imageDataUris.get(el.id)));
     case "text":
-      return withRotationSvg(el, emitText(el));
+      return withRotationSvg(el, emitText(el, rasterScale));
     case "note":
       return withRotationSvg(el, emitNote(el, rasterScale));
     case "template":
@@ -5759,10 +5744,9 @@ var DomNodeManager = class {
           cursor: "default",
           userSelect: "none",
           wordWrap: "break-word",
-          whiteSpace: "pre-wrap",
           lineHeight: "1.4"
         });
-        node.textContent = element.text || "";
+        node.innerHTML = element.text || "";
         const detector = new DoubleTapDetector();
         node.addEventListener("pointerup", (e) => {
           if (detector.feed(e)) {
@@ -5773,8 +5757,9 @@ var DomNodeManager = class {
         });
       }
       if (!this.isEditingElement(element.id)) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
+        const text = element.text || "";
+        if (node.innerHTML !== text) {
+          node.innerHTML = text;
         }
         Object.assign(node.style, {
           fontSize: `${element.fontSize}px`,
@@ -9752,7 +9737,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.0";
+var VERSION = "0.40.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,