@pixldocs/canvas-renderer 0.5.42 → 0.5.44

package/dist/index.d.ts

@@ -221,7 +221,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.42";
+export declare const PACKAGE_VERSION = "0.5.44";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -4785,9 +4785,17 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
 const PD_BG_KEY = "__pdBg";
 const PATCHED_KEY = "__pdBgPatched";
 function extractTextBgConfig(element) {
+  const legacy = Math.max(0, Number(element.textBgPadding ?? 0)) || 0;
+  const pick = (v) => {
+    const n = Number(v);
+    return Number.isFinite(n) && n >= 0 ? n : void 0;
+  };
   return {
     color: element.textBgColor,
-    padding: Math.max(0, Number(element.textBgPadding ?? 0)) || 0,
+    padTop: pick(element.textBgPaddingTop) ?? legacy,
+    padRight: pick(element.textBgPaddingRight) ?? legacy,
+    padBottom: pick(element.textBgPaddingBottom) ?? legacy,
+    padLeft: pick(element.textBgPaddingLeft) ?? legacy,
     rxTL: Math.max(0, Number(element.textBgRxTL ?? 0)) || 0,
     rxTR: Math.max(0, Number(element.textBgRxTR ?? 0)) || 0,
     rxBR: Math.max(0, Number(element.textBgRxBR ?? 0)) || 0,
@@ -4805,9 +4813,8 @@ function buildTextShadow(element) {
   const ox = Number(element.textShadowOffsetX ?? 0);
   const oy = Number(element.textShadowOffsetY ?? 0);
   if (!color || color === "transparent") return null;
-  if (blur === 0 && ox === 0 && oy === 0) return null;
   return new fabric.Shadow({
-    color,
+    color: String(color),
     blur: blur || 0,
     offsetX: ox || 0,
     offsetY: oy || 0,
@@ -4844,11 +4851,14 @@ function applyTextBackground(obj, cfg) {
     if (hasTextBackground(bg)) {
       const w = this.width ?? 0;
       const h = this.height ?? 0;
-      const pad = Math.max(0, Number(bg.padding ?? 0));
-      const x = -w / 2 - pad;
-      const y = -h / 2 - pad;
-      const bgW = w + pad * 2;
-      const bgH = h + pad * 2;
+      const pT = Math.max(0, Number(bg.padTop ?? 0));
+      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();
       buildRoundedRectPath2D(
         ctx,
@@ -4879,37 +4889,107 @@ function applyTextBackground(obj, cfg) {
   const originalToSVG = (_a = obj.toSVG) == null ? void 0 : _a.bind(obj);
   if (typeof originalToSVG === "function") {
     obj.toSVG = function(reviver) {
-      const svg = originalToSVG(reviver);
+      let svg = originalToSVG(reviver);
       const bg = this[PD_BG_KEY];
-      if (!hasTextBackground(bg)) return svg;
+      const shadow = this.shadow;
+      const hasBg = hasTextBackground(bg);
+      const hasShadow = !!shadow && !!shadow.color && shadow.color !== "transparent";
+      if (!hasBg && !hasShadow) return svg;
       const w = this.width ?? 0;
       const h = this.height ?? 0;
-      const pad = Math.max(0, Number(bg.padding ?? 0));
-      const x = -w / 2 - pad;
-      const y = -h / 2 - pad;
-      const bgW = w + pad * 2;
-      const bgH = h + pad * 2;
-      const d = buildRoundedRectPathD(
+      const pT = Math.max(0, Number((bg == null ? void 0 : bg.padTop) ?? 0));
+      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,
-        bg.rxTL ?? 0,
-        bg.rxTR ?? 0,
-        bg.rxBR ?? 0,
-        bg.rxBL ?? 0
+        (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
       );
-      const fill = bg.color;
-      const bgPath = `<path d="${d}" fill="${escapeXmlAttr(fill)}" />`;
+      const bgFill = (bg == null ? void 0 : bg.color) || "";
+      const bgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(bgFill)}" />` : "";
+      svg = svg.replace(/style="[^"]*filter:\s*url\([^)]+\)[^"]*"/i, "");
+      svg = svg.replace(/<filter[\s\S]*?<\/filter>/gi, "");
+      let shadowLayer = "";
+      if (hasShadow) {
+        const ox = Number(shadow.offsetX ?? 0) || 0;
+        const oy = Number(shadow.offsetY ?? 0) || 0;
+        const blur = Math.max(0, Number(shadow.blur ?? 0));
+        const shadowColor = String(shadow.color);
+        const shadowBgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />` : "";
+        const inner = extractGInnerMarkup(svg);
+        const recoloredText = recolorSvgFills(inner, shadowColor);
+        const layers = [];
+        if (blur > 0) {
+          const ringCount = Math.min(6, Math.max(2, Math.round(blur / 2)));
+          for (let i = 1; i <= ringCount; i++) {
+            const t = i / ringCount;
+            const dist = blur * t * 0.6;
+            const op = (0.18 * (1 - t * 0.7)).toFixed(3);
+            const ringOffsets = [
+              [dist, 0],
+              [-dist, 0],
+              [0, dist],
+              [0, -dist],
+              [dist * 0.7, dist * 0.7],
+              [-dist * 0.7, dist * 0.7],
+              [dist * 0.7, -dist * 0.7],
+              [-dist * 0.7, -dist * 0.7]
+            ];
+            for (const [dx, dy] of ringOffsets) {
+              layers.push(
+                `<g transform="translate(${(ox + dx).toFixed(3)} ${(oy + dy).toFixed(3)})" opacity="${op}">${shadowBgPath}${recoloredText}</g>`
+              );
+            }
+          }
+          layers.push(
+            `<g transform="translate(${ox.toFixed(3)} ${oy.toFixed(3)})" opacity="0.25">${shadowBgPath}${recoloredText}</g>`
+          );
+        } else {
+          layers.push(
+            `<g transform="translate(${ox.toFixed(3)} ${oy.toFixed(3)})">${shadowBgPath}${recoloredText}</g>`
+          );
+        }
+        shadowLayer = layers.join("");
+      }
       const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
+      const inserted = shadowLayer + bgPath;
       if (openTagMatch) {
         const openTag = openTagMatch[0];
-        return svg.replace(openTag, openTag + bgPath);
+        return svg.replace(openTag, openTag + inserted);
       }
-      return `<g>${bgPath}${svg}</g>`;
+      return `<g>${inserted}${svg}</g>`;
     };
   }
 }
+function recolorSvgFills(svg, color) {
+  const safe = escapeXmlAttr(color);
+  let out = svg.replace(
+    /(<(?:text|tspan|path|rect)\b[^>]*?\sfill=")([^"]*)("[^>]*>)/gi,
+    (_m, pre, val, post) => {
+      const v = val.trim().toLowerCase();
+      if (v === "none" || v === "transparent") return pre + val + post;
+      return pre + safe + post;
+    }
+  );
+  out = out.replace(
+    /(<(?:text|tspan|path|rect)\b[^>]*?\sstyle=")([^"]*)("[^>]*>)/gi,
+    (_m, pre, styleVal, post) => {
+      const replaced = styleVal.replace(/fill\s*:\s*[^;"]+/gi, `fill: ${color}`);
+      return pre + replaced + post;
+    }
+  );
+  return out;
+}
 function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
   const maxR = Math.min(w, h) / 2;
   const tl = Math.min(Math.max(0, rTL), maxR);
@@ -4933,6 +5013,13 @@ function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
 function escapeXmlAttr(s) {
   return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function extractGInnerMarkup(markup) {
+  const openMatch = markup.match(/^\s*<g\b[^>]*>/);
+  if (!openMatch) return markup;
+  const closeIdx = markup.lastIndexOf("</g>");
+  if (closeIdx <= openMatch[0].length) return markup;
+  return markup.slice(openMatch[0].length, closeIdx);
+}
 const TRIANGLE_STROKE_MITER_LIMIT = 1e6;
 const toSafeNumber = (value, fallback = 0) => Number.isFinite(value) ? Math.max(0, Number(value)) : fallback;
 function normalizeShapeType(shapeType) {
@@ -7852,6 +7939,10 @@ const PageCanvas = forwardRef(
                 JSON.stringify({
                   c: element.textBgColor ?? null,
                   p: element.textBgPadding ?? 0,
+                  pt: element.textBgPaddingTop ?? null,
+                  pr: element.textBgPaddingRight ?? null,
+                  pb: element.textBgPaddingBottom ?? null,
+                  pl: element.textBgPaddingLeft ?? null,
                   tl: element.textBgRxTL ?? 0,
                   tr: element.textBgRxTR ?? 0,
                   br: element.textBgRxBR ?? 0,
@@ -8295,7 +8386,7 @@ const PageCanvas = forwardRef(
       });
     }, [selectedIds, isActive, ready, elements]);
     const updateFabricObject = (obj, element, skipPositionUpdate = false) => {
-      var _a, _b;
+      var _a, _b, _c;
       const fc = fabricRef.current;
       if (fc && isTransforming(fc)) {
         return;
@@ -8759,9 +8850,20 @@ const PageCanvas = forwardRef(
           applyTextBackground(obj, extractTextBgConfig(element));
           const shadow = buildTextShadow(element);
           obj.set("shadow", shadow ?? null);
+          try {
+            obj._cacheCanvas = null;
+            obj._cacheContext = null;
+          } catch {
+          }
+          obj.dirty = true;
+          (_c = obj.setCoords) == null ? void 0 : _c.call(obj);
           obj.__lastTextBgShadowJson = JSON.stringify({
             c: element.textBgColor ?? null,
             p: element.textBgPadding ?? 0,
+            pt: element.textBgPaddingTop ?? null,
+            pr: element.textBgPaddingRight ?? null,
+            pb: element.textBgPaddingBottom ?? null,
+            pl: element.textBgPaddingLeft ?? null,
             tl: element.textBgRxTL ?? 0,
             tr: element.textBgRxTR ?? 0,
             br: element.textBgRxBR ?? 0,
@@ -12239,7 +12341,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.42";
+const PACKAGE_VERSION = "0.5.44";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;