@pixldocs/canvas-renderer 0.5.464 → 0.5.466

package/dist/{index-TvXdi5B9.js → index-B_lTeUY-.js}

@@ -5243,6 +5243,53 @@ function updateCoverLayout(g) {
     g.canvas.requestRenderAll();
   }
 }
+function shrinkContainGroupToImageBounds(g) {
+  const ct = g.__cropData;
+  if (!ct || ct.fit !== "contain") return;
+  const img = ct._img;
+  if (!img) return;
+  const clip = g.clipPath;
+  if (clip && (isSvgMaskClipPath(clip) || isLuminanceMaskClipPath(clip) || clip.__svgMask || clip.__edgeFadeMask)) return;
+  const iw = img.width || 0;
+  const ih = img.height || 0;
+  const sx = Math.abs(img.scaleX || 1);
+  const sy = Math.abs(img.scaleY || 1);
+  const dispW = iw * sx;
+  const dispH = ih * sy;
+  if (dispW <= 0 || dispH <= 0) return;
+  const frameW = Number(ct.frameW) || g.width || dispW;
+  const frameH = Number(ct.frameH) || g.height || dispH;
+  const alignH = ct.alignH ?? "center";
+  const alignV = ct.alignV ?? "middle";
+  const slackX = frameW - dispW;
+  const slackY = frameH - dispH;
+  const offsetX = alignH === "left" ? -slackX / 2 : alignH === "right" ? slackX / 2 : 0;
+  const offsetY = alignV === "top" ? -slackY / 2 : alignV === "bottom" ? slackY / 2 : 0;
+  const angleRad = fabric.util.degreesToRadians(g.angle || 0);
+  const cos = Math.cos(angleRad);
+  const sin = Math.sin(angleRad);
+  const worldDx = offsetX * cos - offsetY * sin;
+  const worldDy = offsetX * sin + offsetY * cos;
+  g.set({
+    left: (g.left || 0) + worldDx,
+    top: (g.top || 0) + worldDy,
+    width: dispW,
+    height: dispH
+  });
+  img.set({ left: 0, top: 0 });
+  if (clip) {
+    if (clip instanceof fabric.Rect) {
+      const rxRatio = Number(ct.rx) || 0;
+      const rxPx = rxRatio > 0.5 ? Math.min(rxRatio, dispW / 2, dispH / 2) : Math.max(0, Math.min(rxRatio * Math.min(dispW, dispH), dispW / 2, dispH / 2));
+      clip.set({ width: dispW, height: dispH, rx: rxPx, ry: rxPx });
+    } else if (clip instanceof fabric.Ellipse) {
+      clip.set({ rx: dispW / 2, ry: dispH / 2 });
+    }
+    clip.dirty = true;
+  }
+  g.dirty = true;
+  g.setCoords();
+}
 function getDomEvent(eventData) {
   return (eventData == null ? void 0 : eventData.e) ?? eventData ?? null;
 }
@@ -17467,6 +17514,17 @@ const PageCanvas = forwardRef(
               const fadeKeyChanged = newFadeKey !== oldFadeKey || newFadeKey !== innerOldKey || cropFadeRendererMissing;
               const needsReload = sourceUrlChanged || colorMapChanged || fadeKeyChanged && !isCropGroup2;
               const needsCropGroupFadeUpdate = isCropGroup2 && fadeKeyChanged;
+              let cropFrameSizeChanged = false;
+              if (isCropGroup2) {
+                const liveCt = existingObj.__cropData;
+                const liveW = Number(liveCt == null ? void 0 : liveCt.frameW) || 0;
+                const liveH = Number(liveCt == null ? void 0 : liveCt.frameH) || 0;
+                const schemaW = (Number(element.width) || 0) * (Number(element.scaleX) || 1);
+                const schemaH = (Number(element.height) || 0) * (Number(element.scaleY) || 1);
+                if (schemaW > 0 && schemaH > 0 && (Math.abs(schemaW - liveW) > 0.5 || Math.abs(schemaH - liveH) > 0.5)) {
+                  cropFrameSizeChanged = true;
+                }
+              }
               const hadUrlBefore = storedImageUrl && String(storedImageUrl).trim() !== "";
               if (!hasUrl && hadUrlBefore) {
                 const resolvedSizeImg = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
@@ -17503,7 +17561,7 @@ const PageCanvas = forwardRef(
               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 || needsCropGroupFadeUpdate)) {
+              if (hasUrl && (needsReload || isPlaceholder || plainImageNeedsCropGroup || needsCropGroupFadeUpdate || cropFrameSizeChanged)) {
                 if (needsReload && !isBeingTransformed && (!wasJustModified || sourceUrlChanged)) {
                   loadImageAsync2(element, existingObj, fc);
                 } else if (plainImageNeedsCropGroup) {
@@ -17623,6 +17681,7 @@ const PageCanvas = forwardRef(
                       ct.fit = elFit;
                     }
                     updateCoverLayout(existingObj);
+                    shrinkContainGroupToImageBounds(existingObj);
                     applyEdgeFadeFrameClipPath(existingObj, element, ct.frameW, ct.frameH, ct.shape || "rect", ct.rx || 0);
                     if (allowEditing) {
                       installImageResizeControlsWithSnap(existingObj);
@@ -17730,6 +17789,7 @@ const PageCanvas = forwardRef(
                         ctSync.alignV = element.imageAlignV ?? "middle";
                         ctSync.containScale = Math.max(1, Math.min(3, Number(element.containScale ?? 1)));
                         updateCoverLayout(existingObj);
+                        shrinkContainGroupToImageBounds(existingObj);
                         existingObj.dirty = true;
                       }
                     }
@@ -19696,6 +19756,7 @@ const PageCanvas = forwardRef(
             updateCoverLayout(cropGroup);
           }
           applyEdgeFadeFrameClipPath(cropGroup, element, frameW, frameH, shape, rxRatio);
+          shrinkContainGroupToImageBounds(cropGroup);
           setObjectData(cropGroup, element.id);
           cropGroup.__imageElement = cropImg;
           cropGroup.__imageSrc = imageUrl;
@@ -26279,9 +26340,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.464";
+const resolvedPackageVersion = "0.5.466";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.464";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.466";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -27095,7 +27156,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-pt3O47hm.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-CYNj9Z_A.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29415,7 +29476,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-pt3O47hm.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-CYNj9Z_A.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29732,4 +29793,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-TvXdi5B9.js.map
+//# sourceMappingURL=index-B_lTeUY-.js.map