@pixldocs/canvas-renderer 0.5.41 → 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.40";
+export declare const PACKAGE_VERSION = "0.5.43";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -4782,6 +4782,170 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     return true;
   });
 }
+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,
+    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,
+    rxBL: Math.max(0, Number(element.textBgRxBL ?? 0)) || 0
+  };
+}
+function hasTextBackground(cfg) {
+  if (!cfg) return false;
+  const c = (cfg.color || "").toString().trim().toLowerCase();
+  return !!c && c !== "transparent" && c !== "none" && c !== "rgba(0,0,0,0)";
+}
+function buildTextShadow(element) {
+  const color = element.textShadowColor;
+  const blur = Number(element.textShadowBlur ?? 0);
+  const ox = Number(element.textShadowOffsetX ?? 0);
+  const oy = Number(element.textShadowOffsetY ?? 0);
+  if (!color || color === "transparent") return null;
+  return new fabric.Shadow({
+    color: String(color),
+    blur: blur || 0,
+    offsetX: ox || 0,
+    offsetY: oy || 0,
+    affectStroke: false,
+    nonScaling: false
+  });
+}
+function buildRoundedRectPath2D(ctx, x, y, w, h, rTL, rTR, rBR, rBL) {
+  const maxR = Math.min(w, h) / 2;
+  const tl = Math.min(Math.max(0, rTL), maxR);
+  const tr = Math.min(Math.max(0, rTR), maxR);
+  const br = Math.min(Math.max(0, rBR), maxR);
+  const bl = Math.min(Math.max(0, rBL), maxR);
+  ctx.beginPath();
+  ctx.moveTo(x + tl, y);
+  ctx.lineTo(x + w - tr, y);
+  if (tr > 0) ctx.quadraticCurveTo(x + w, y, x + w, y + tr);
+  ctx.lineTo(x + w, y + h - br);
+  if (br > 0) ctx.quadraticCurveTo(x + w, y + h, x + w - br, y + h);
+  ctx.lineTo(x + bl, y + h);
+  if (bl > 0) ctx.quadraticCurveTo(x, y + h, x, y + h - bl);
+  ctx.lineTo(x, y + tl);
+  if (tl > 0) ctx.quadraticCurveTo(x, y, x + tl, y);
+  ctx.closePath();
+}
+function applyTextBackground(obj, cfg) {
+  var _a;
+  obj[PD_BG_KEY] = { ...cfg };
+  if (obj[PATCHED_KEY]) return;
+  obj[PATCHED_KEY] = true;
+  const originalRender = obj._render.bind(obj);
+  obj._render = function(ctx) {
+    const bg = this[PD_BG_KEY];
+    if (hasTextBackground(bg)) {
+      const w = this.width ?? 0;
+      const h = this.height ?? 0;
+      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,
+        x,
+        y,
+        bgW,
+        bgH,
+        bg.rxTL ?? 0,
+        bg.rxTR ?? 0,
+        bg.rxBR ?? 0,
+        bg.rxBL ?? 0
+      );
+      ctx.fillStyle = bg.color;
+      ctx.fill();
+      ctx.restore();
+    }
+    originalRender(ctx);
+  };
+  const originalToObject = obj.toObject.bind(obj);
+  obj.toObject = function(propertiesToInclude) {
+    const out = originalToObject(propertiesToInclude);
+    const bg = this[PD_BG_KEY];
+    if (hasTextBackground(bg)) {
+      out.__pdBg = { ...bg };
+    }
+    return out;
+  };
+  const originalToSVG = (_a = obj.toSVG) == null ? void 0 : _a.bind(obj);
+  if (typeof originalToSVG === "function") {
+    obj.toSVG = function(reviver) {
+      const svg = originalToSVG(reviver);
+      const bg = this[PD_BG_KEY];
+      if (!hasTextBackground(bg)) return svg;
+      const w = this.width ?? 0;
+      const h = this.height ?? 0;
+      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,
+        bgW,
+        bgH,
+        bg.rxTL ?? 0,
+        bg.rxTR ?? 0,
+        bg.rxBR ?? 0,
+        bg.rxBL ?? 0
+      );
+      const fill = bg.color;
+      const bgPath = `<path d="${d}" fill="${escapeXmlAttr(fill)}" />`;
+      const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
+      if (openTagMatch) {
+        const openTag = openTagMatch[0];
+        return svg.replace(openTag, openTag + bgPath);
+      }
+      return `<g>${bgPath}${svg}</g>`;
+    };
+  }
+}
+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);
+  const tr = Math.min(Math.max(0, rTR), maxR);
+  const br = Math.min(Math.max(0, rBR), maxR);
+  const bl = Math.min(Math.max(0, rBL), maxR);
+  const fmt = (n) => Number.isFinite(n) ? Number(n.toFixed(3)) : 0;
+  const parts = [];
+  parts.push(`M ${fmt(x + tl)} ${fmt(y)}`);
+  parts.push(`L ${fmt(x + w - tr)} ${fmt(y)}`);
+  if (tr > 0) parts.push(`Q ${fmt(x + w)} ${fmt(y)} ${fmt(x + w)} ${fmt(y + tr)}`);
+  parts.push(`L ${fmt(x + w)} ${fmt(y + h - br)}`);
+  if (br > 0) parts.push(`Q ${fmt(x + w)} ${fmt(y + h)} ${fmt(x + w - br)} ${fmt(y + h)}`);
+  parts.push(`L ${fmt(x + bl)} ${fmt(y + h)}`);
+  if (bl > 0) parts.push(`Q ${fmt(x)} ${fmt(y + h)} ${fmt(x)} ${fmt(y + h - bl)}`);
+  parts.push(`L ${fmt(x)} ${fmt(y + tl)}`);
+  if (tl > 0) parts.push(`Q ${fmt(x)} ${fmt(y)} ${fmt(x + tl)} ${fmt(y)}`);
+  parts.push("Z");
+  return parts.join(" ");
+}
+function escapeXmlAttr(s) {
+  return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 const TRIANGLE_STROKE_MITER_LIMIT = 1e6;
 const toSafeNumber = (value, fallback = 0) => Number.isFinite(value) ? Math.max(0, Number(value)) : fallback;
 function normalizeShapeType(shapeType) {
@@ -5082,6 +5246,9 @@ function createText(element) {
     textbox.setCoords();
   }
   textbox.dirty = true;
+  applyTextBackground(textbox, extractTextBgConfig(element));
+  const shadow = buildTextShadow(element);
+  if (shadow) textbox.set("shadow", shadow);
   return textbox;
 }
 function createLine(element) {
@@ -7694,7 +7861,23 @@ const PageCanvas = forwardRef(
                 const resolvedSizeForCompare = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 0, height: typeof element.height === "number" ? element.height : 0 };
                 const fabricText = existingObj.text ?? "";
                 const storeText = element.text ?? "";
-                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // CRITICAL: Detect gradient fill/stroke changes — serialise to JSON for deep comparison
+                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // Detect text background + shadow changes so panel edits flow into Fabric.
+                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,
+                  bl: element.textBgRxBL ?? 0,
+                  sc: element.textShadowColor ?? null,
+                  sb: element.textShadowBlur ?? 0,
+                  sx: element.textShadowOffsetX ?? 0,
+                  sy: element.textShadowOffsetY ?? 0
+                }) !== (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;
                 const noPropsOrPositionChanged = !positionChanged && !otherPropsChanged;
@@ -8129,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;
@@ -8589,6 +8772,37 @@ const PageCanvas = forwardRef(
         }
         obj.setCoords();
         obj.dirty = true;
+        try {
+          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,
+            bl: element.textBgRxBL ?? 0,
+            sc: element.textShadowColor ?? null,
+            sb: element.textShadowBlur ?? 0,
+            sx: element.textShadowOffsetX ?? 0,
+            sy: element.textShadowOffsetY ?? 0
+          });
+          obj.dirty = true;
+        } catch (err) {
+          console.warn("[text-bg] failed to apply background/shadow", err);
+        }
       } else if (!isImage && !isLine) {
         if (obj instanceof fabric.Circle) {
           obj.set({
@@ -12053,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.40";
+const PACKAGE_VERSION = "0.5.43";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;