@pixldocs/canvas-renderer 0.5.81 → 0.5.83

package/dist/index.cjs

@@ -494,29 +494,39 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
   const mode = group.layoutMode ?? "absolute";
   if (!isStackLayoutMode(mode)) return /* @__PURE__ */ new Map();
   const gap = group.stackSpacing ?? 8;
+  const padTop = group.paddingTop ?? 0;
+  const padLeft = group.paddingLeft ?? 0;
   const kids = group.children ?? [];
   const out = /* @__PURE__ */ new Map();
   if (isVerticalStackLayoutMode(mode)) {
-    let prevBottom = 0;
+    let prevBottom = padTop;
+    let firstSeen = false;
     for (let i = 0; i < kids.length; i++) {
       const child = kids[i];
       const storedTop = getNodeTop(child);
       const storedLeft = getNodeLeft(child);
-      const effectiveTop = i === 0 ? storedTop : prevBottom + gap + storedTop;
-      out.set(child.id, { top: effectiveTop, left: storedLeft });
+      const mTop = child.marginTop ?? 0;
+      const mLeft = child.marginLeft ?? 0;
+      const effectiveTop = !firstSeen ? padTop + storedTop + mTop : prevBottom + gap + storedTop + mTop;
+      firstSeen = true;
+      out.set(child.id, { top: effectiveTop, left: padLeft + storedLeft + mLeft });
       const h = getNodeBounds(child, pageChildren).height;
-      prevBottom = effectiveTop + h;
+      prevBottom = effectiveTop + h + (child.marginBottom ?? 0);
     }
   } else {
-    let prevRight = 0;
+    let prevRight = padLeft;
+    let firstSeen = false;
     for (let i = 0; i < kids.length; i++) {
       const child = kids[i];
       const storedLeft = getNodeLeft(child);
       const storedTop = getNodeTop(child);
-      const effectiveLeft = i === 0 ? storedLeft : prevRight + gap + storedLeft;
-      out.set(child.id, { top: storedTop, left: effectiveLeft });
+      const mTop = child.marginTop ?? 0;
+      const mLeft = child.marginLeft ?? 0;
+      const effectiveLeft = !firstSeen ? padLeft + storedLeft + mLeft : prevRight + gap + storedLeft + mLeft;
+      firstSeen = true;
+      out.set(child.id, { top: padTop + storedTop + mTop, left: effectiveLeft });
       const w = getNodeBounds(child, pageChildren).width;
-      prevRight = effectiveLeft + w;
+      prevRight = effectiveLeft + w + (child.marginRight ?? 0);
     }
   }
   return out;
@@ -541,6 +551,14 @@ function groupBoundsFromChildren(group, pageChildren, options) {
     maxX = Math.max(maxX, cl + b.width);
     maxY = Math.max(maxY, ct + b.height);
   }
+  if (isStack) {
+    const padRight = group.paddingRight ?? 0;
+    const padBottom = group.paddingBottom ?? 0;
+    return {
+      width: Math.max(1, maxX + padRight),
+      height: Math.max(1, maxY + padBottom)
+    };
+  }
   return {
     width: Math.max(1, maxX - minX),
     height: Math.max(1, maxY - minY)
@@ -603,7 +621,7 @@ function absoluteToStorePosition(absoluteLeft, absoluteTop, nodeId, pageChildren
   const prev = kids[idx - 1];
   const prevResolved = resolved.get(prev.id);
   const prevHeight = getNodeBounds(prev, pageChildren).height;
-  const prevBottom = prevResolved ? prevResolved.top + prevHeight : 0;
+  const prevBottom = prevResolved ? prevResolved.top + prevHeight + (prev.marginBottom ?? 0) : 0;
   const storeTop = inParentTop - prevBottom - gap;
   return { left: storeLeft, top: Math.max(0, storeTop) };
 }
@@ -625,7 +643,7 @@ function reflowStackGroup(group, pageChildren, spacing) {
       const b = getNodeBounds(child, pageChildren);
       const currentTop = getNodeTop(child);
       const effectiveTop = i === 0 ? currentTop : prevBottom + gap;
-      prevBottom = effectiveTop + b.height;
+      prevBottom = effectiveTop + b.height + (child.marginBottom ?? 0);
       if (i > 0) updates.set(child.id, { top: 0, left: firstLeft });
     }
   } else {
@@ -636,7 +654,7 @@ function reflowStackGroup(group, pageChildren, spacing) {
       const b = getNodeBounds(child, pageChildren);
       const currentLeft = getNodeLeft(child);
       const effectiveLeft = i === 0 ? currentLeft : prevRight + gap;
-      prevRight = effectiveLeft + b.width;
+      prevRight = effectiveLeft + b.width + (child.marginRight ?? 0);
       if (i > 0) updates.set(child.id, { left: 0, top: firstTop });
     }
   }
@@ -788,7 +806,8 @@ const cloneCanvas = (canvas) => ({
   themeConfig: canvas.themeConfig ? {
     properties: canvas.themeConfig.properties.map((p) => ({ ...p })),
     variants: canvas.themeConfig.variants.map((v) => ({ ...v, values: { ...v.values } }))
-  } : void 0
+  } : void 0,
+  pdfTextMode: canvas.pdfTextMode
 });
 const sameIdSet = (a, b) => {
   if (a.length !== b.length) return false;
@@ -1268,6 +1287,12 @@ const useEditorStore = zustand.create((set, get) => ({
     const committed = commitFromState(state, nextCanvas);
     return { canvas: nextCanvas, ...committed };
   }),
+  setPdfTextMode: (mode) => set((state) => {
+    if (state.canvas.pdfTextMode === mode) return {};
+    const nextCanvas = { ...state.canvas, pdfTextMode: mode };
+    const committed = commitFromState(state, nextCanvas);
+    return { canvas: nextCanvas, ...committed };
+  }),
   setZoom: (zoom) => set((state) => ({
     canvas: { ...state.canvas, zoom: Math.max(0.1, Math.min(10, zoom)) }
   })),
@@ -2455,7 +2480,8 @@ const useEditorStore = zustand.create((set, get) => ({
       formBindingMode: config.formBindingMode,
       boundFormDefId: config.boundFormDefId,
       boundFormDefName: config.boundFormDefName,
-      themeConfig: config.themeConfig ?? void 0
+      themeConfig: config.themeConfig ?? void 0,
+      pdfTextMode: config.pdfTextMode ?? "selectable"
     };
     const committed = commitFromState(state, nextCanvas);
     const out = {
@@ -4922,7 +4948,9 @@ function extractTextBgConfig(element) {
       if (!Number.isFinite(n)) return void 0;
       return Math.max(0, Math.min(1, n));
     })(),
-    shadowAffectsBg: element.textShadowAffectsBg !== false
+    shadowAffectsBg: element.textShadowAffectsBg !== false,
+    shadowAffectsText: element.textShadowAffectsText !== false,
+    fitToText: element.textBgFitToText === true
   };
 }
 function hasTextBackground(cfg) {
@@ -4978,10 +5006,6 @@ function applyTextBackground(obj, cfg) {
       const pR = Math.max(0, Number(bg.padRight ?? 0));
       const pB = Math.max(0, Number(bg.padBottom ?? 0));
       const pL = Math.max(0, Number(bg.padLeft ?? 0));
-      const x = -w / 2 - pL;
-      const y = -h / 2 - pT;
-      const bgW = w + pL + pR;
-      const bgH = h + pT + pB;
       ctx.save();
       const suppressShadowOnBg = bg.shadowAffectsBg === false;
       if (suppressShadowOnBg) {
@@ -4990,24 +5014,38 @@ function applyTextBackground(obj, cfg) {
         ctx.shadowOffsetX = 0;
         ctx.shadowOffsetY = 0;
       }
-      buildRoundedRectPath2D(
-        ctx,
-        x,
-        y,
-        bgW,
-        bgH,
-        bg.rxTL ?? 0,
-        bg.rxTR ?? 0,
-        bg.rxBR ?? 0,
-        bg.rxBL ?? 0
-      );
       const op = typeof bg.opacity === "number" ? Math.max(0, Math.min(1, bg.opacity)) : 1;
       if (op < 1) ctx.globalAlpha = (ctx.globalAlpha ?? 1) * op;
       ctx.fillStyle = bg.color;
-      ctx.fill();
+      const rects = computeBgRects(this, w, h, pT, pR, pB, pL, !!bg.fitToText);
+      for (const r of rects) {
+        buildRoundedRectPath2D(
+          ctx,
+          r.x,
+          r.y,
+          r.w,
+          r.h,
+          bg.rxTL ?? 0,
+          bg.rxTR ?? 0,
+          bg.rxBR ?? 0,
+          bg.rxBL ?? 0
+        );
+        ctx.fill();
+      }
       ctx.restore();
     }
-    originalRender(ctx);
+    const suppressShadowOnText = bg && bg.shadowAffectsText === false;
+    if (suppressShadowOnText) {
+      ctx.save();
+      ctx.shadowColor = "transparent";
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+      originalRender(ctx);
+      ctx.restore();
+    } else {
+      originalRender(ctx);
+    }
   };
   const originalToObject = obj.toObject.bind(obj);
   obj.toObject = function(propertiesToInclude) {
@@ -5033,20 +5071,18 @@ function applyTextBackground(obj, cfg) {
       const pR = Math.max(0, Number((bg == null ? void 0 : bg.padRight) ?? 0));
       const pB = Math.max(0, Number((bg == null ? void 0 : bg.padBottom) ?? 0));
       const pL = Math.max(0, Number((bg == null ? void 0 : bg.padLeft) ?? 0));
-      const x = -w / 2 - pL;
-      const y = -h / 2 - pT;
-      const bgW = w + pL + pR;
-      const bgH = h + pT + pB;
-      const bgD = buildRoundedRectPathD(
-        x,
-        y,
-        bgW,
-        bgH,
+      const fit = !!(bg == null ? void 0 : bg.fitToText);
+      const rects = computeBgRects(this, w, h, pT, pR, pB, pL, fit);
+      const bgD = rects.map((r) => buildRoundedRectPathD(
+        r.x,
+        r.y,
+        r.w,
+        r.h,
         (bg == null ? void 0 : bg.rxTL) ?? 0,
         (bg == null ? void 0 : bg.rxTR) ?? 0,
         (bg == null ? void 0 : bg.rxBR) ?? 0,
         (bg == null ? void 0 : bg.rxBL) ?? 0
-      );
+      )).join(" ");
       const bgFill = (bg == null ? void 0 : bg.color) || "";
       const bgOpacity = typeof (bg == null ? void 0 : bg.opacity) === "number" ? Math.max(0, Math.min(1, bg.opacity)) : 1;
       const bgOpacityAttr = bgOpacity < 1 ? ` fill-opacity="${bgOpacity}"` : "";
@@ -5071,9 +5107,11 @@ function applyTextBackground(obj, cfg) {
           const shadowBgPath = `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />`;
           bgShadowMarker = wrapShadow(shadowBgPath);
         }
-        const inner = extractGInnerMarkup(svg);
-        const recoloredText = recolorSvgFills(inner, shadowColor);
-        if (recoloredText) textShadowMarker = wrapShadow(recoloredText);
+        if ((bg == null ? void 0 : bg.shadowAffectsText) !== false) {
+          const inner = extractGInnerMarkup(svg);
+          const recoloredText = recolorSvgFills(inner, shadowColor);
+          if (recoloredText) textShadowMarker = wrapShadow(recoloredText);
+        }
       }
       const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
       const inserted = bgShadowMarker + bgPath + textShadowMarker;
@@ -5124,6 +5162,74 @@ function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
   parts.push("Z");
   return parts.join(" ");
 }
+function computeBgRects(obj, w, h, pT, pR, pB, pL, fit) {
+  var _a;
+  if (!fit) {
+    return [{
+      x: -w / 2 - pL,
+      y: -h / 2 - pT,
+      w: w + pL + pR,
+      h: h + pT + pB
+    }];
+  }
+  const lines = (obj == null ? void 0 : obj._textLines) ?? [];
+  if (!lines || lines.length === 0) {
+    return [{
+      x: -w / 2 - pL,
+      y: -h / 2 - pT,
+      w: w + pL + pR,
+      h: h + pT + pB
+    }];
+  }
+  const rects = [];
+  const halfW = w / 2;
+  const halfH = h / 2;
+  const lineHeightRatio = Math.max(0.01, Number((obj == null ? void 0 : obj.lineHeight) ?? 1) || 1);
+  let cursorY = -halfH;
+  for (let i = 0; i < lines.length; i++) {
+    let lineW = 0;
+    let lineLeft = 0;
+    let lineH = 0;
+    try {
+      lineW = obj.getLineWidth(i) || 0;
+    } catch {
+      lineW = 0;
+    }
+    try {
+      lineLeft = ((_a = obj._getLineLeftOffset) == null ? void 0 : _a.call(obj, i)) ?? 0;
+    } catch {
+      lineLeft = 0;
+    }
+    try {
+      lineH = obj.getHeightOfLine(i) || 0;
+    } catch {
+      lineH = 0;
+    }
+    const rawSlotH = i === lines.length - 1 ? lineH / lineHeightRatio : lineH;
+    const usedH = cursorY + halfH;
+    const slotH = Math.max(0, Math.min(rawSlotH, h - usedH));
+    if (lineW <= 0 || slotH <= 0) {
+      cursorY += slotH;
+      continue;
+    }
+    rects.push({
+      x: -halfW + lineLeft - pL,
+      y: cursorY - pT,
+      w: lineW + pL + pR,
+      h: slotH + pT + pB
+    });
+    cursorY += slotH;
+  }
+  if (rects.length === 0) {
+    return [{
+      x: -w / 2 - pL,
+      y: -h / 2 - pT,
+      w: w + pL + pR,
+      h: h + pT + pB
+    }];
+  }
+  return rects;
+}
 function escapeXmlAttr(s) {
   return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -8143,10 +8249,14 @@ const PageCanvas = react.forwardRef(
                   tr: element.textBgRxTR ?? 0,
                   br: element.textBgRxBR ?? 0,
                   bl: element.textBgRxBL ?? 0,
+                  ft: element.textBgFitToText === true,
+                  bo: element.textBgOpacity ?? 1,
                   sc: element.textShadowColor ?? null,
                   sb: element.textShadowBlur ?? 0,
                   sx: element.textShadowOffsetX ?? 0,
-                  sy: element.textShadowOffsetY ?? 0
+                  sy: element.textShadowOffsetY ?? 0,
+                  st: element.textShadowAffectsText !== false,
+                  sa: element.textShadowAffectsBg !== false
                 }) !== (existingObj.__lastTextBgShadowJson ?? "") || // CRITICAL: Detect gradient fill/stroke changes — serialise to JSON for deep comparison
                 JSON.stringify(element.fillGradient || null) !== (existingObj.__lastFillGradientJson ?? "null") || JSON.stringify(element.strokeGradient || null) !== (existingObj.__lastStrokeGradientJson ?? "null");
                 const forceApplyFromPanel = syncTriggeredByPanelRef.current;
@@ -9060,10 +9170,14 @@ const PageCanvas = react.forwardRef(
             tr: element.textBgRxTR ?? 0,
             br: element.textBgRxBR ?? 0,
             bl: element.textBgRxBL ?? 0,
+            ft: element.textBgFitToText === true,
+            bo: element.textBgOpacity ?? 1,
             sc: element.textShadowColor ?? null,
             sb: element.textShadowBlur ?? 0,
             sx: element.textShadowOffsetX ?? 0,
-            sy: element.textShadowOffsetY ?? 0
+            sy: element.textShadowOffsetY ?? 0,
+            st: element.textShadowAffectsText !== false,
+            sa: element.textShadowAffectsBg !== false
           });
           obj.dirty = true;
         } catch (err) {
@@ -12884,7 +12998,7 @@ class PixldocsRenderer {
   async renderPdf(templateConfig, options) {
     const svgs = await this.renderAllPageSvgs(templateConfig);
     const { assemblePdfFromSvgs: assemblePdfFromSvgs2 } = await Promise.resolve().then(() => pdfExport);
-    return assemblePdfFromSvgs2(svgs, { title: options == null ? void 0 : options.title, fontBaseUrl: options == null ? void 0 : options.fontBaseUrl });
+    return assemblePdfFromSvgs2(svgs, { title: options == null ? void 0 : options.title, fontBaseUrl: options == null ? void 0 : options.fontBaseUrl, textMode: (options == null ? void 0 : options.textMode) ?? templateConfig.pdfTextMode ?? "selectable" });
   }
   /**
    * Resolve from V2 sectionState and render a vector PDF.
@@ -12909,7 +13023,7 @@ class PixldocsRenderer {
     }
     const svgs = await this.renderAllPageSvgs(configToRender);
     const { assemblePdfFromSvgs: assemblePdfFromSvgs2 } = await Promise.resolve().then(() => pdfExport);
-    return assemblePdfFromSvgs2(svgs, { title: title ?? resolved.config.name, fontBaseUrl });
+    return assemblePdfFromSvgs2(svgs, { title: title ?? resolved.config.name, fontBaseUrl, textMode: options.textMode ?? configToRender.pdfTextMode ?? "selectable" });
   }
   async renderById(templateId, formData, options) {
     const resolved = await resolveTemplateData({
@@ -14115,6 +14229,7 @@ async function fetchTTFAsBase64(url) {
     if (!res.ok) return null;
     const buf = await res.arrayBuffer();
     const bytes = new Uint8Array(buf);
+    if (!isJsPdfEmbeddableTrueType(bytes)) return null;
     let binary = "";
     for (let i = 0; i < bytes.length; i++) {
       binary += String.fromCharCode(bytes[i]);
@@ -14126,6 +14241,33 @@ async function fetchTTFAsBase64(url) {
     return null;
   }
 }
+function isJsPdfEmbeddableTrueType(bytes) {
+  if (bytes.length < 12) return false;
+  const signature = String.fromCharCode(bytes[0], bytes[1], bytes[2], bytes[3]);
+  if (signature !== "\0
\0\0" && signature !== "true") return false;
+  const u16 = (offset) => bytes[offset] << 8 | bytes[offset + 1];
+  const u32 = (offset) => (bytes[offset] << 24 | bytes[offset + 1] << 16 | bytes[offset + 2] << 8 | bytes[offset + 3]) >>> 0;
+  const tableCount = u16(4);
+  for (let i = 0; i < tableCount; i++) {
+    const recordOffset = 12 + i * 16;
+    if (recordOffset + 16 > bytes.length) return false;
+    const tag = String.fromCharCode(bytes[recordOffset], bytes[recordOffset + 1], bytes[recordOffset + 2], bytes[recordOffset + 3]);
+    if (tag !== "cmap") continue;
+    const cmapOffset = u32(recordOffset + 8);
+    const cmapLength = u32(recordOffset + 12);
+    if (cmapOffset + Math.min(cmapLength, 4) > bytes.length) return false;
+    const subtables = u16(cmapOffset + 2);
+    for (let j = 0; j < subtables; j++) {
+      const encOffset = cmapOffset + 4 + j * 8;
+      if (encOffset + 8 > bytes.length) return false;
+      const platform = u16(encOffset);
+      const encoding = u16(encOffset + 2);
+      if (platform === 0 || platform === 3 && (encoding === 1 || encoding === 10)) return true;
+    }
+    return false;
+  }
+  return false;
+}
 async function embedFont(pdf, fontName, weight, fontBaseUrl, isItalic = false) {
   const fontFiles = FONT_FILES[fontName];
   if (!fontFiles) return false;
@@ -14159,10 +14301,22 @@ async function embedFont(pdf, fontName, weight, fontBaseUrl, isItalic = false) {
 async function embedFontsForConfig(pdf, config, fontBaseUrl) {
   const fontKeys = /* @__PURE__ */ new Set();
   const SEP = "";
+  const normalizeWeight = (raw) => {
+    if (raw == null) return 400;
+    if (typeof raw === "number" && Number.isFinite(raw)) return resolveFontWeight(raw);
+    const str = String(raw).trim().toLowerCase();
+    const parsed = Number.parseInt(str, 10);
+    if (Number.isFinite(parsed)) return resolveFontWeight(parsed);
+    if (str === "bold" || str === "bolder") return 700;
+    if (str === "semibold" || str === "demibold") return 600;
+    if (str === "medium") return 500;
+    if (str === "light" || str === "lighter" || str === "thin") return 300;
+    return 400;
+  };
   const walkElements = (elements) => {
     for (const el of elements) {
       if (el.fontFamily) {
-        const w = resolveFontWeight(el.fontWeight ?? 400);
+        const w = normalizeWeight(el.fontWeight);
         fontKeys.add(`${el.fontFamily}${SEP}${w}`);
       }
       if (el.styles && typeof el.styles === "object") {
@@ -14172,7 +14326,7 @@ async function embedFontsForConfig(pdf, config, fontBaseUrl) {
             for (const charKey of Object.keys(lineStyles)) {
               const s = lineStyles[charKey];
               if (s == null ? void 0 : s.fontFamily) {
-                const w = resolveFontWeight(s.fontWeight ?? 400);
+                const w = normalizeWeight(s.fontWeight);
                 fontKeys.add(`${s.fontFamily}${SEP}${w}`);
               }
             }
@@ -15807,7 +15961,9 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
     const hasGradient = !!((_b = (_a = page.backgroundGradient) == null ? void 0 : _a.stops) == null ? void 0 : _b.length);
     drawPageBackground(pdf, i, page.width, page.height, page.backgroundColor, page.backgroundGradient);
     const shouldStripBg = stripPageBackground ?? hasGradient;
-    const shouldOutlineText = options.outlineText !== false;
+    const textMode = options.textMode ?? (options.outlineText ? "pixel-perfect" : "selectable");
+    const shouldOutlineText = textMode === "pixel-perfect" || textMode === "auto";
+    const outlineSubMode = textMode === "auto" ? "complex-only" : "all";
     let pageSvg = page.svg;
     try {
       pageSvg = await convertSvgTextDecorationsToLinesString(pageSvg);
@@ -15819,8 +15975,8 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
     }
     if (shouldOutlineText) {
       try {
-        const { convertAllTextToPath } = await Promise.resolve().then(() => require("./svgTextToPath-BTHnqJpM.cjs"));
-        pageSvg = await convertAllTextToPath(pageSvg, fontBaseUrl);
+        const { convertAllTextToPath } = await Promise.resolve().then(() => require("./svgTextToPath-CBcIgtk1.cjs"));
+        pageSvg = await convertAllTextToPath(pageSvg, fontBaseUrl, { mode: outlineSubMode });
         try {
           dumpSvgTextDiagnostics(pageSvg, i, PARITY_TAG, "STAGE-1b-after-text-to-path-raw");
         } catch {