@pixldocs/canvas-renderer 0.5.42 → 0.5.43

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.43";
 
 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,
@@ -4884,11 +4894,14 @@ function applyTextBackground(obj, cfg) {
       if (!hasTextBackground(bg)) 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 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;
       const d = buildRoundedRectPathD(
         x,
         y,
@@ -7852,6 +7865,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 +8312,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 +8776,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 +12267,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.43";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;