@pixldocs/canvas-renderer 0.5.101 → 0.5.102

package/dist/index.js

@@ -3663,28 +3663,33 @@ function updateCoverLayout(g) {
   const hasCustomSvgMask = Boolean(
     currentClipPath && (isSvgMaskClipPath(currentClipPath) || isLuminanceMaskClipPath(currentClipPath) || currentClipPath.__svgMask)
   );
-  if (hasCustomSvgMask) {
+  const hasEdgeFadeMask = Boolean(currentClipPath && currentClipPath.__edgeFadeMask);
+  if (hasCustomSvgMask || hasEdgeFadeMask) {
     if (isSvgMaskClipPath(currentClipPath)) {
       syncSvgMaskClipPath(g);
     } else if (currentClipPath && typeof currentClipPath.set === "function") {
-      const baseW = Math.max(1, Number(currentClipPath.width) || frameW);
-      const baseH = Math.max(1, Number(currentClipPath.height) || frameH);
-      currentClipPath.set({
-        left: 0,
-        top: 0,
-        originX: "center",
-        originY: "center",
-        scaleX: frameW / baseW,
-        scaleY: frameH / baseH,
-        selectable: false,
-        evented: false,
-        hasControls: false,
-        hasBorders: false
-      });
-      currentClipPath.absolutePositioned = false;
-      currentClipPath.excludeFromExport = true;
-      currentClipPath.dirty = true;
-      currentClipPath.setCoords();
+      if (hasEdgeFadeMask) {
+        currentClipPath.dirty = true;
+      } else {
+        const baseW = Math.max(1, Number(currentClipPath.width) || frameW);
+        const baseH = Math.max(1, Number(currentClipPath.height) || frameH);
+        currentClipPath.set({
+          left: 0,
+          top: 0,
+          originX: "center",
+          originY: "center",
+          scaleX: frameW / baseW,
+          scaleY: frameH / baseH,
+          selectable: false,
+          evented: false,
+          hasControls: false,
+          hasBorders: false
+        });
+        currentClipPath.absolutePositioned = false;
+        currentClipPath.excludeFromExport = true;
+        currentClipPath.dirty = true;
+        currentClipPath.setCoords();
+      }
     }
   } else {
     const needsNewClipPath = !g.clipPath || shape === "circle" && !(g.clipPath instanceof fabric.Ellipse) || shape !== "circle" && !(g.clipPath instanceof fabric.Rect);
@@ -4641,10 +4646,12 @@ function exitCropMode(g, commit = true) {
   g.hasControls = true;
   g.borderDashArray = void 0;
   installCanvaMaskControls(g);
-  g.borderColor = void 0;
-  g.cornerColor = void 0;
-  g.cornerStrokeColor = void 0;
+  g.borderColor = "#4f46e5";
+  g.borderDashArray = void 0;
+  g.cornerColor = "#ffffff";
+  g.cornerStrokeColor = "#4f46e5";
   g.cornerStyle = "rect";
+  g.transparentCorners = false;
   g[CROP_MODE_FLAG] = false;
   g.__cropZoomLastPointer = void 0;
   g.__lastPointerForCrop = void 0;
@@ -6174,6 +6181,127 @@ function renderSmartElementToDataUri(type, props, width, height) {
   if (!svg) return null;
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
+function hasEdgeFade(p) {
+  if (!p) return false;
+  const sides = [
+    [p.fadeTopSize, p.fadeTopAmount],
+    [p.fadeRightSize, p.fadeRightAmount],
+    [p.fadeBottomSize, p.fadeBottomAmount],
+    [p.fadeLeftSize, p.fadeLeftAmount]
+  ];
+  for (const [size, amount] of sides) {
+    const s = Number(size) || 0;
+    const a = amount == null ? 1 : Number(amount);
+    if (s > 0 && a < 1) return true;
+  }
+  return false;
+}
+function edgeFadeKey(p) {
+  if (!hasEdgeFade(p)) return "";
+  return [
+    (p == null ? void 0 : p.fadeTopSize) ?? 0,
+    (p == null ? void 0 : p.fadeTopAmount) ?? 1,
+    (p == null ? void 0 : p.fadeRightSize) ?? 0,
+    (p == null ? void 0 : p.fadeRightAmount) ?? 1,
+    (p == null ? void 0 : p.fadeBottomSize) ?? 0,
+    (p == null ? void 0 : p.fadeBottomAmount) ?? 1,
+    (p == null ? void 0 : p.fadeLeftSize) ?? 0,
+    (p == null ? void 0 : p.fadeLeftAmount) ?? 1,
+    (p == null ? void 0 : p.fadeTopHardness) ?? 1,
+    (p == null ? void 0 : p.fadeRightHardness) ?? 1,
+    (p == null ? void 0 : p.fadeBottomHardness) ?? 1,
+    (p == null ? void 0 : p.fadeLeftHardness) ?? 1
+  ].join("|");
+}
+function clamp01(n) {
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(1, n));
+}
+function bakeEdgeFade(source, fade) {
+  const w = source.naturalWidth || source.width || 0;
+  const h = source.naturalHeight || source.height || 0;
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, w);
+  canvas.height = Math.max(1, h);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return canvas;
+  ctx.drawImage(source, 0, 0, canvas.width, canvas.height);
+  const clampHardness = (n) => {
+    const v = Number(n);
+    if (!Number.isFinite(v) || v <= 0) return 1;
+    return Math.max(0.1, Math.min(5, v));
+  };
+  const sides = [
+    { side: "top", size: clamp01(fade.fadeTopSize ?? 0), amount: clamp01(fade.fadeTopAmount ?? 1), hardness: clampHardness(fade.fadeTopHardness) },
+    { side: "right", size: clamp01(fade.fadeRightSize ?? 0), amount: clamp01(fade.fadeRightAmount ?? 1), hardness: clampHardness(fade.fadeRightHardness) },
+    { side: "bottom", size: clamp01(fade.fadeBottomSize ?? 0), amount: clamp01(fade.fadeBottomAmount ?? 1), hardness: clampHardness(fade.fadeBottomHardness) },
+    { side: "left", size: clamp01(fade.fadeLeftSize ?? 0), amount: clamp01(fade.fadeLeftAmount ?? 1), hardness: clampHardness(fade.fadeLeftHardness) }
+  ];
+  for (const { side, size, amount, hardness } of sides) {
+    if (size <= 0 || amount >= 1) continue;
+    const mask = document.createElement("canvas");
+    mask.width = canvas.width;
+    mask.height = canvas.height;
+    const mctx = mask.getContext("2d");
+    if (!mctx) continue;
+    mctx.fillStyle = "#000";
+    mctx.fillRect(0, 0, mask.width, mask.height);
+    let g;
+    let x = 0, y = 0, rectW = mask.width, rectH = mask.height;
+    const STOPS = 24;
+    const innerAlpha = (t) => {
+      const keepProgress = Math.pow(t, hardness);
+      const erase = (1 - amount) * (1 - keepProgress);
+      return 1 - erase;
+    };
+    const fillStops = (grad, reverse) => {
+      for (let i = 0; i <= STOPS; i++) {
+        const t = i / STOPS;
+        const a = innerAlpha(t);
+        grad.addColorStop(t, `rgba(0,0,0,${a})`);
+      }
+    };
+    if (side === "top") {
+      const band = Math.max(1, Math.round(mask.height * size));
+      g = mctx.createLinearGradient(0, 0, 0, band);
+      fillStops(g);
+      rectH = band;
+    } else if (side === "bottom") {
+      const band = Math.max(1, Math.round(mask.height * size));
+      y = mask.height - band;
+      g = mctx.createLinearGradient(0, mask.height, 0, y);
+      fillStops(g);
+      rectH = band;
+    } else if (side === "left") {
+      const band = Math.max(1, Math.round(mask.width * size));
+      g = mctx.createLinearGradient(0, 0, band, 0);
+      fillStops(g);
+      rectW = band;
+    } else {
+      const band = Math.max(1, Math.round(mask.width * size));
+      x = mask.width - band;
+      g = mctx.createLinearGradient(mask.width, 0, x, 0);
+      fillStops(g);
+      rectW = band;
+    }
+    mctx.fillStyle = g;
+    mctx.fillRect(x, y, rectW, rectH);
+    if (amount <= 1e-3) {
+      const edgePx = Math.min(2, side === "top" || side === "bottom" ? rectH : rectW);
+      mctx.fillStyle = "rgba(0,0,0,0)";
+      mctx.globalCompositeOperation = "copy";
+      if (side === "top") mctx.fillRect(0, 0, mask.width, edgePx);
+      if (side === "bottom") mctx.fillRect(0, mask.height - edgePx, mask.width, edgePx);
+      if (side === "left") mctx.fillRect(0, 0, edgePx, mask.height);
+      if (side === "right") mctx.fillRect(mask.width - edgePx, 0, edgePx, mask.height);
+      mctx.globalCompositeOperation = "source-over";
+    }
+    ctx.globalCompositeOperation = "destination-in";
+    ctx.drawImage(mask, 0, 0);
+    ctx.globalCompositeOperation = "source-over";
+  }
+  return canvas;
+}
 function angleToCoords(angleDeg) {
   const rad = angleDeg * Math.PI / 180;
   const x1 = 0.5 - Math.sin(rad) * 0.5;
@@ -7683,6 +7811,10 @@ const PageCanvas = forwardRef(
       fabricCanvas.on("mouse:dblclick", (e) => {
         if (!isActiveRef.current || !allowEditing) return;
         let target = e.target;
+        if (!target) {
+          const active = fabricCanvas.getActiveObject();
+          if (active) target = active;
+        }
         if (target && target instanceof fabric.Group && target.__cropGroup) {
           const ct = target.__cropData;
           if ((ct == null ? void 0 : ct._img) && !isCropGroupInCropMode(target)) {
@@ -7838,7 +7970,7 @@ const PageCanvas = forwardRef(
         visibilityUpdateInProgressRef.current = false;
       }
       doSyncRef.current = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
         const shouldSkipUpdates2 = syncLockedRef.current || editLockRef.current;
         const state = useEditorStore.getState();
         const elementsToSync = elements;
@@ -7999,15 +8131,22 @@ const PageCanvas = forwardRef(
               const storedImageUrl = existingObj.__imageSrc;
               const currentUrlNormalized = currentImageUrl.trim();
               const storedUrlNormalized = storedImageUrl ? String(storedImageUrl).trim() : "";
-              const svgColorMapStr = element.svgColorMap ? JSON.stringify(element.svgColorMap) : "";
-              const storedColorMapStr = existingObj.__svgColorMap || "";
-              const colorMapChanged = svgColorMapStr !== storedColorMapStr;
-              const sourceUrlChanged = currentUrlNormalized !== storedUrlNormalized;
-              const needsReload = sourceUrlChanged || colorMapChanged;
               const hasUrl = currentUrlNormalized !== "";
               const isCropGroup2 = existingObj instanceof fabric.Group && existingObj.__cropGroup;
               const isPlaceholderGroup = isEmptyImagePlaceholderGroup(existingObj);
               const isPlaceholder = isPlaceholderGroup || !(existingObj instanceof fabric.FabricImage) || existingObj instanceof fabric.Group && !isCropGroup2;
+              const svgColorMapStr = element.svgColorMap ? JSON.stringify(element.svgColorMap) : "";
+              const storedColorMapStr = existingObj.__svgColorMap || "";
+              const colorMapChanged = svgColorMapStr !== storedColorMapStr;
+              const sourceUrlChanged = currentUrlNormalized !== storedUrlNormalized;
+              const newFadeKey = edgeFadeKey(element);
+              const oldFadeKey = isCropGroup2 ? existingObj.__edgeFadeInputKey || "" : existingObj.__edgeFadeKey || "";
+              const innerImg = (_e = existingObj == null ? void 0 : existingObj.__cropData) == null ? void 0 : _e._img;
+              const innerOldKey = isCropGroup2 ? oldFadeKey : innerImg ? innerImg.__edgeFadeKey || "" : oldFadeKey;
+              const cropFadeRendererMissing = isCropGroup2 && Boolean(newFadeKey) && !existingObj.__edgeFadeRenderConfig;
+              const fadeKeyChanged = newFadeKey !== oldFadeKey || newFadeKey !== innerOldKey || cropFadeRendererMissing;
+              const needsReload = sourceUrlChanged || colorMapChanged || fadeKeyChanged && !isCropGroup2;
+              const needsCropGroupFadeUpdate = isCropGroup2 && fadeKeyChanged;
               const hadUrlBefore = storedImageUrl && String(storedImageUrl).trim() !== "";
               if (!hasUrl && hadUrlBefore) {
                 const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(element) : createImagePlaceholder(element);
@@ -8023,16 +8162,16 @@ const PageCanvas = forwardRef(
                 fc.requestRenderAll();
                 continue;
               }
-              const imageFitForReplace = element.imageFit || ((_e = element.style) == null ? void 0 : _e.imageFit) || "cover";
-              const clipShapeForReplace = element.clipShape ?? ((_f = element.style) == null ? void 0 : _f.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
+              const imageFitForReplace = element.imageFit || ((_f = element.style) == null ? void 0 : _f.imageFit) || "cover";
+              const clipShapeForReplace = element.clipShape ?? ((_g = element.style) == null ? void 0 : _g.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
               const needCropGroupForElement = imageFitForReplace !== "fill" || clipShapeForReplace && clipShapeForReplace !== "none";
               const plainImageNeedsCropGroup = hasUrl && !isCropGroup2 && existingObj instanceof fabric.FabricImage && needCropGroupForElement;
-              if (hasUrl && (needsReload || isPlaceholder || plainImageNeedsCropGroup)) {
+              if (hasUrl && (needsReload || isPlaceholder || plainImageNeedsCropGroup || needsCropGroupFadeUpdate)) {
                 if (needsReload && !isBeingTransformed && (!wasJustModified || sourceUrlChanged)) {
                   loadImageAsync(element, existingObj, fc);
                 } else if (plainImageNeedsCropGroup) {
                   loadImageAsync(element, existingObj, fc);
-                } else if (!needsReload && isCropGroup2) {
+                } else if ((!needsReload || needsCropGroupFadeUpdate) && isCropGroup2) {
                   const ct = existingObj.__cropData;
                   if (ct) {
                     const resolvedCrop = pageTree.length > 0 ? getNodeBounds(element, pageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
@@ -8129,6 +8268,7 @@ const PageCanvas = forwardRef(
                       }
                     }
                     updateCoverLayout(existingObj);
+                    applyEdgeFadeFrameClipPath(existingObj, element, ct.frameW, ct.frameH, ct.shape || "rect", ct.rx || 0);
                     if (allowEditing) {
                       installCanvaMaskControls(existingObj);
                     } else {
@@ -8438,7 +8578,7 @@ const PageCanvas = forwardRef(
               fc.add(placeholder);
               fc.bringObjectToFront(placeholder);
               const activeObj = fc.getActiveObject();
-              if (activeObj && (((_g = activeObj._ct) == null ? void 0 : _g.isCropGroup) || activeObj.__cropGroup)) {
+              if (activeObj && (((_h = activeObj._ct) == null ? void 0 : _h.isCropGroup) || activeObj.__cropGroup)) {
                 fc.setActiveObject(activeObj);
               }
               placeholder.dirty = true;
@@ -8478,7 +8618,7 @@ const PageCanvas = forwardRef(
                 fc.add(obj);
                 fc.bringObjectToFront(obj);
                 const activeObj = fc.getActiveObject();
-                if (activeObj && (((_h = activeObj._ct) == null ? void 0 : _h.isCropGroup) || activeObj.__cropGroup)) {
+                if (activeObj && (((_i = activeObj._ct) == null ? void 0 : _i.isCropGroup) || activeObj.__cropGroup)) {
                   fc.setActiveObject(activeObj);
                 }
                 obj.dirty = true;
@@ -8512,7 +8652,7 @@ const PageCanvas = forwardRef(
         isRebuildingRef.current = false;
         fc.requestRenderAll();
         if (activeBeforeSync && fc.getObjects().includes(activeBeforeSync)) {
-          const isCropGroup2 = ((_i = activeBeforeSync._ct) == null ? void 0 : _i.isCropGroup) || activeBeforeSync.__cropGroup;
+          const isCropGroup2 = ((_j = activeBeforeSync._ct) == null ? void 0 : _j.isCropGroup) || activeBeforeSync.__cropGroup;
           if (isCropGroup2) {
             fc.setActiveObject(activeBeforeSync);
             fc.requestRenderAll();
@@ -8934,6 +9074,7 @@ const PageCanvas = forwardRef(
             }
           }
           updateCoverLayout(obj);
+          applyEdgeFadeFrameClipPath(obj, element, elementWidth, elementHeight, ct.shape || "rect", ct.rx || 0);
           obj.setCoords();
           obj.dirty = true;
           if (obj.clipPath) {
@@ -9517,8 +9658,131 @@ const PageCanvas = forwardRef(
         obj.__lastStrokeGradientJson = "null";
       }
     };
+    const clamp2 = (v, min, max) => {
+      return Math.max(min, Math.min(max, v));
+    };
+    const applyEdgeFadeFrameClipPath = (group, element, frameW, frameH, shape, rxRatio) => {
+      var _a, _b, _c;
+      const fadeElement = element;
+      const fadeGroup = group;
+      const inputKey = edgeFadeKey(fadeElement);
+      const hasFade = hasEdgeFade(fadeElement);
+      if (!fadeGroup.__edgeFadeOriginalDrawObject) {
+        fadeGroup.__edgeFadeOriginalDrawObject = group.drawObject;
+      }
+      if (hasFade) {
+        if ((_a = group.clipPath) == null ? void 0 : _a.__edgeFadeMask) {
+          group.clipPath = void 0;
+          updateCoverLayout(group);
+        }
+        fadeGroup.__edgeFadeRenderConfig = {
+          key: `${inputKey}|${Math.round(frameW)}|${Math.round(frameH)}|${shape}|${rxRatio}`,
+          frameW: Math.max(1, Number(frameW) || 1),
+          frameH: Math.max(1, Number(frameH) || 1),
+          topSize: clamp2(Number(fadeElement.fadeTopSize) || 0, 0, 1),
+          topAmount: clamp2(fadeElement.fadeTopAmount == null ? 1 : Number(fadeElement.fadeTopAmount), 0, 1),
+          rightSize: clamp2(Number(fadeElement.fadeRightSize) || 0, 0, 1),
+          rightAmount: clamp2(fadeElement.fadeRightAmount == null ? 1 : Number(fadeElement.fadeRightAmount), 0, 1),
+          bottomSize: clamp2(Number(fadeElement.fadeBottomSize) || 0, 0, 1),
+          bottomAmount: clamp2(fadeElement.fadeBottomAmount == null ? 1 : Number(fadeElement.fadeBottomAmount), 0, 1),
+          leftSize: clamp2(Number(fadeElement.fadeLeftSize) || 0, 0, 1),
+          leftAmount: clamp2(fadeElement.fadeLeftAmount == null ? 1 : Number(fadeElement.fadeLeftAmount), 0, 1),
+          topHardness: clamp2(Number(fadeElement.fadeTopHardness) || 1, 0.1, 5),
+          rightHardness: clamp2(Number(fadeElement.fadeRightHardness) || 1, 0.1, 5),
+          bottomHardness: clamp2(Number(fadeElement.fadeBottomHardness) || 1, 0.1, 5),
+          leftHardness: clamp2(Number(fadeElement.fadeLeftHardness) || 1, 0.1, 5)
+        };
+        const originalDrawObject = fadeGroup.__edgeFadeOriginalDrawObject ?? group.drawObject;
+        group.drawObject = function edgeFadeDrawObject(ctx, forClipping, context) {
+          originalDrawObject.call(this, ctx, forClipping, context);
+          if (forClipping) return;
+          const cfg = this.__edgeFadeRenderConfig;
+          if (!cfg) return;
+          const liveW = Number(this.width) || 0;
+          const liveH = Number(this.height) || 0;
+          const w = liveW > 0 ? liveW : cfg.frameW;
+          const h = liveH > 0 ? liveH : cfg.frameH;
+          const x = -w / 2;
+          const y = -h / 2;
+          const paintBand = (side, size, amount, hardness) => {
+            if (size <= 0 || amount >= 1) return;
+            ctx.save();
+            ctx.globalCompositeOperation = "destination-out";
+            let gradient;
+            const eraseAtEdge = 1 - amount;
+            const STOPS = 24;
+            const addStops = (g) => {
+              for (let i = 0; i <= STOPS; i++) {
+                const t = i / STOPS;
+                const keepProgress = Math.pow(t, hardness);
+                const a = eraseAtEdge * (1 - keepProgress);
+                g.addColorStop(t, `rgba(0,0,0,${a})`);
+              }
+            };
+            if (side === "top") {
+              const band = Math.max(1, h * size);
+              gradient = ctx.createLinearGradient(0, y, 0, y + band);
+              addStops(gradient);
+              ctx.fillStyle = gradient;
+              ctx.fillRect(x, y, w, band);
+              if (amount <= 1e-3) ctx.fillRect(x, y, w, Math.min(2, band));
+            } else if (side === "bottom") {
+              const band = Math.max(1, h * size);
+              gradient = ctx.createLinearGradient(0, y + h, 0, y + h - band);
+              addStops(gradient);
+              ctx.fillStyle = gradient;
+              ctx.fillRect(x, y + h - band, w, band);
+              if (amount <= 1e-3) ctx.fillRect(x, y + h - Math.min(2, band), w, Math.min(2, band));
+            } else if (side === "left") {
+              const band = Math.max(1, w * size);
+              gradient = ctx.createLinearGradient(x, 0, x + band, 0);
+              addStops(gradient);
+              ctx.fillStyle = gradient;
+              ctx.fillRect(x, y, band, h);
+              if (amount <= 1e-3) ctx.fillRect(x, y, Math.min(2, band), h);
+            } else {
+              const band = Math.max(1, w * size);
+              gradient = ctx.createLinearGradient(x + w, 0, x + w - band, 0);
+              addStops(gradient);
+              ctx.fillStyle = gradient;
+              ctx.fillRect(x + w - band, y, band, h);
+              if (amount <= 1e-3) ctx.fillRect(x + w - Math.min(2, band), y, Math.min(2, band), h);
+            }
+            ctx.restore();
+          };
+          paintBand("top", cfg.topSize, cfg.topAmount, cfg.topHardness);
+          paintBand("right", cfg.rightSize, cfg.rightAmount, cfg.rightHardness);
+          paintBand("bottom", cfg.bottomSize, cfg.bottomAmount, cfg.bottomHardness);
+          paintBand("left", cfg.leftSize, cfg.leftAmount, cfg.leftHardness);
+        };
+        group.set({ objectCaching: true, noScaleCache: false });
+        fadeGroup.__edgeFadeKey = fadeGroup.__edgeFadeRenderConfig.key;
+        fadeGroup.__edgeFadeInputKey = inputKey;
+      } else {
+        if (fadeGroup.__edgeFadeOriginalDrawObject) {
+          group.drawObject = fadeGroup.__edgeFadeOriginalDrawObject;
+        }
+        delete fadeGroup.__edgeFadeRenderConfig;
+        delete fadeGroup.__edgeFadeKey;
+        delete fadeGroup.__edgeFadeInputKey;
+        if ((_b = group.clipPath) == null ? void 0 : _b.__edgeFadeMask) {
+          group.clipPath = void 0;
+          updateCoverLayout(group);
+        }
+      }
+      if (group.clipPath) {
+        group.clipPath.dirty = true;
+        group.clipPath.setCoords();
+      }
+      fadeGroup.dirty = true;
+      const children = group.getObjects();
+      children.forEach((child) => {
+        child.dirty = true;
+      });
+      (_c = group.canvas) == null ? void 0 : _c.requestRenderAll();
+    };
     const loadImageAsync = async (element, placeholder, fc) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
       const imageUrl = element.src || element.imageUrl;
       if (!imageUrl) return;
       const elementId = element.id;
@@ -9531,7 +9795,9 @@ const PageCanvas = forwardRef(
         const existingImg = ct == null ? void 0 : ct._img;
         const existingSrc = placeholder.__imageSrc;
         const existingSvgColorMap = placeholder.__svgColorMap || "";
-        if (existingImg && existingSrc === imageUrl && existingSvgColorMap === nextSvgColorMap) {
+        const existingFadeKey = existingImg && existingImg.__edgeFadeKey || placeholder.__edgeFadeKey || "";
+        const nextFadeKey = edgeFadeKey(element);
+        if (existingImg && existingSrc === imageUrl && existingSvgColorMap === nextSvgColorMap && existingFadeKey === nextFadeKey) {
           return placeholder;
         }
       }
@@ -9548,6 +9814,22 @@ const PageCanvas = forwardRef(
         if (!fabricRef.current || !isLatestRequest()) return;
         await normalizeSvgImageDimensions(img, imageUrl, element.sourceFormat);
         if (!isLatestRequest()) return;
+        const imageFitForFade = element.imageFit || ((_a = element.style) == null ? void 0 : _a.imageFit) || "cover";
+        const clipShapeForFade = element.clipShape ?? ((_b = element.style) == null ? void 0 : _b.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
+        const willUseCropGroupForFade = imageFitForFade !== "fill" || clipShapeForFade && clipShapeForFade !== "none";
+        try {
+          if (hasEdgeFade(element) && !willUseCropGroupForFade) {
+            const srcEl = (_c = img.getElement) == null ? void 0 : _c.call(img);
+            if (srcEl) {
+              const baked = bakeEdgeFade(srcEl, element);
+              img.setElement(baked);
+              img.__edgeFadeKey = edgeFadeKey(element);
+              img.dirty = true;
+            }
+          }
+        } catch (e) {
+          console.warn("[edgeFade] bake failed:", e);
+        }
         const isHidden = !element.visible;
         img.set({
           originX: "left",
@@ -9580,8 +9862,8 @@ const PageCanvas = forwardRef(
           });
           img.setCoords();
         } else {
-          const imageFit = element.imageFit || ((_a = element.style) == null ? void 0 : _a.imageFit) || "cover";
-          const clipShape = element.clipShape ?? ((_b = element.style) == null ? void 0 : _b.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
+          const imageFit = element.imageFit || ((_d = element.style) == null ? void 0 : _d.imageFit) || "cover";
+          const clipShape = element.clipShape ?? ((_e = element.style) == null ? void 0 : _e.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
           const needCropGroup2 = imageFit !== "fill" || clipShape && clipShape !== "none";
           const imgNaturalWidth = img.width || 1;
           const imgNaturalHeight = img.height || 1;
@@ -9608,7 +9890,7 @@ const PageCanvas = forwardRef(
           if (imageFit === "fill" && !needCropGroup2) {
             const finalScaleX = baseScaleX * (element.scaleX ?? 1);
             const finalScaleY = baseScaleY * (element.scaleY ?? 1);
-            const pageTreeForCreate = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_c = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _c.children) ?? [];
+            const pageTreeForCreate = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_f = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _f.children) ?? [];
             const createPos = pageTreeForCreate.length > 0 ? (() => {
               const node = findNodeById(pageTreeForCreate, element.id);
               return node ? getAbsoluteBounds(node, pageTreeForCreate) : { left: element.left ?? 0, top: element.top ?? 0 };
@@ -9653,12 +9935,12 @@ const PageCanvas = forwardRef(
         }
         img.__imageSrc = imageUrl;
         img.__svgColorMap = element.svgColorMap ? JSON.stringify(element.svgColorMap) : "";
-        const imageFitFinal = element.imageFit || ((_d = element.style) == null ? void 0 : _d.imageFit) || "cover";
-        const clipShapeFinal = element.clipShape ?? ((_e = element.style) == null ? void 0 : _e.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
+        const imageFitFinal = element.imageFit || ((_g = element.style) == null ? void 0 : _g.imageFit) || "cover";
+        const clipShapeFinal = element.clipShape ?? ((_h = element.style) == null ? void 0 : _h.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
         const needCropGroup = imageFitFinal !== "fill" || clipShapeFinal && clipShapeFinal !== "none";
         let finalObject = img;
         if (needCropGroup) {
-          const pageTreeForCropResolve = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_f = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _f.children) ?? [];
+          const pageTreeForCropResolve = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_i = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _i.children) ?? [];
           const nodeForSize = pageTreeForCropResolve.length ? findNodeById(pageTreeForCropResolve, element.id) : null;
           const w = nodeForSize && isElement(nodeForSize) ? nodeForSize.width : element.width;
           const h = nodeForSize && isElement(nodeForSize) ? nodeForSize.height : element.height;
@@ -9690,16 +9972,16 @@ const PageCanvas = forwardRef(
           let panY = element.cropPanY ?? 0.5;
           let zoom2 = element.cropZoom ?? 1;
           if (existingCropGroup) {
-            const existingImg = (_g = existingCropGroup.__cropData) == null ? void 0 : _g._img;
+            const existingImg = (_j = existingCropGroup.__cropData) == null ? void 0 : _j._img;
             if (existingImg) {
-              panX = ((_h = existingImg._ct) == null ? void 0 : _h.panX) ?? existingImg.__panX ?? panX;
-              panY = ((_i = existingImg._ct) == null ? void 0 : _i.panY) ?? existingImg.__panY ?? panY;
-              zoom2 = ((_j = existingImg._ct) == null ? void 0 : _j.zoom) ?? zoom2;
+              panX = ((_k = existingImg._ct) == null ? void 0 : _k.panX) ?? existingImg.__panX ?? panX;
+              panY = ((_l = existingImg._ct) == null ? void 0 : _l.panY) ?? existingImg.__panY ?? panY;
+              zoom2 = ((_m = existingImg._ct) == null ? void 0 : _m.zoom) ?? zoom2;
             }
           }
           const isDynamicField = dynamicFieldIds.includes(element.id);
           const canBeEvented = isEditorMode || isPreviewMode && isDynamicField;
-          const pageTreeForCrop = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_k = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _k.children) ?? [];
+          const pageTreeForCrop = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_n = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _n.children) ?? [];
           const createPosForCrop = pageTreeForCrop.length > 0 ? (() => {
             const node = findNodeById(pageTreeForCrop, element.id);
             return node ? getAbsoluteBounds(node, pageTreeForCrop) : { left: element.left ?? 0, top: element.top ?? 0 };
@@ -9750,17 +10032,18 @@ const PageCanvas = forwardRef(
           } else {
             installCanvaMaskControls(cropGroup);
           }
-          const cropImg = (_l = cropGroup.__cropData) == null ? void 0 : _l._img;
+          const cropImg = (_o = cropGroup.__cropData) == null ? void 0 : _o._img;
           if (cropImg) {
             cropImg._ct = { panX, panY, zoom: zoom2 };
             updateCoverLayout(cropGroup);
           }
+          applyEdgeFadeFrameClipPath(cropGroup, element, frameW, frameH, shape, rxRatio);
           setObjectData(cropGroup, element.id);
           cropGroup.__imageElement = cropImg;
           cropGroup.__imageSrc = imageUrl;
           cropGroup.__svgColorMap = nextSvgColorMap;
           if (cropImg && element.imageNaturalWidth == null) {
-            const el = ((_m = cropImg.getElement) == null ? void 0 : _m.call(cropImg)) ?? cropImg._element;
+            const el = ((_p = cropImg.getElement) == null ? void 0 : _p.call(cropImg)) ?? cropImg._element;
             const orig = typeof cropImg.getOriginalSize === "function" ? cropImg.getOriginalSize() : null;
             const nw = (orig == null ? void 0 : orig.width) ?? (el == null ? void 0 : el.naturalWidth) ?? cropImg.width;
             const nh = (orig == null ? void 0 : orig.height) ?? (el == null ? void 0 : el.naturalHeight) ?? cropImg.height;
@@ -13921,12 +14204,69 @@ class PixldocsRenderer {
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
+            const fadeBakeRecords = [];
+            try {
+              const objs = fabricInstance.getObjects().slice();
+              for (const obj of objs) {
+                const isFadedCropGroup = obj instanceof fabric.Group && (Boolean(obj.__edgeFadeRenderConfig) || Boolean(obj.__edgeFadeKey) || Boolean(obj.__edgeFadeInputKey));
+                if (!isFadedCropGroup) continue;
+                try {
+                  const baked = obj.toCanvasElement({
+                    multiplier: 2,
+                    enableRetinaScaling: false
+                  });
+                  const rect = obj.getBoundingRect();
+                  const replacement = new fabric.FabricImage(baked, {
+                    left: rect.left,
+                    top: rect.top,
+                    originX: "left",
+                    originY: "top",
+                    scaleX: rect.width / baked.width,
+                    scaleY: rect.height / baked.height,
+                    selectable: false,
+                    evented: false,
+                    objectCaching: false
+                  });
+                  const insertIndex = fabricInstance._objects.indexOf(obj);
+                  const prevExclude = obj.excludeFromExport;
+                  obj.excludeFromExport = true;
+                  if (insertIndex >= 0) {
+                    fabricInstance.insertAt(insertIndex + 1, replacement);
+                  } else {
+                    fabricInstance.add(replacement);
+                  }
+                  fadeBakeRecords.push({
+                    original: obj,
+                    replacement,
+                    prevExclude,
+                    insertIndex
+                  });
+                } catch (bakeErr) {
+                  console.warn("[canvas-renderer][edgeFade] bake-for-svg failed:", bakeErr);
+                }
+              }
+              if (fadeBakeRecords.length) {
+                fabricInstance.renderAll();
+                console.log(
+                  `[canvas-renderer][edgeFade] baked ${fadeBakeRecords.length} faded object(s) for SVG capture`
+                );
+              }
+            } catch (e) {
+              console.warn("[canvas-renderer][edgeFade] bake pass failed:", e);
+            }
             const rawSvgString = fabricInstance.toSVG();
             const svgString = this.normalizeSvgDimensions(
               rawSvgString,
               canvasWidth,
               canvasHeight
             );
+            for (const rec of fadeBakeRecords) {
+              try {
+                fabricInstance.remove(rec.replacement);
+                rec.original.excludeFromExport = rec.prevExclude;
+              } catch {
+              }
+            }
             fabricInstance.enableRetinaScaling = prevRetina;
             fabricInstance.setDimensions(
               { width: prevWidth, height: prevHeight },