@pixldocs/canvas-renderer 0.5.462 → 0.5.464

package/dist/{index-DjoKgogq.cjs → index-BFIEinvR.cjs}

@@ -4397,7 +4397,8 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
       } else if (imageFit2 === "contain") {
         const scaleX = elementWidth / imgNaturalWidth;
         const scaleY = elementHeight / imgNaturalHeight;
-        const scale = Math.min(scaleX, scaleY);
+        const containScale = Math.max(1, Math.min(3, Number(element.containScale ?? 1)));
+        const scale = Math.min(scaleX, scaleY) * containScale;
         baseScaleX = scale;
         baseScaleY = scale;
       } else {
@@ -5215,7 +5216,7 @@ function updateCoverLayout(g) {
   const ih = img.height || 1;
   const fitContain = ct.fit === "contain";
   const baseScale = fitContain ? Math.min(frameW / iw, frameH / ih) : Math.max(frameW / iw, frameH / ih);
-  const zoom = fitContain ? 1 : Math.max(1, img._ct.zoom ?? 1);
+  const zoom = fitContain ? Math.max(1, Math.min(3, ct.containScale ?? 1)) : Math.max(1, img._ct.zoom ?? 1);
   const finalScale = baseScale * zoom;
   img.set({
     scaleX: finalScale,
@@ -5240,8 +5241,8 @@ function updateCoverLayout(g) {
   if (fitContain) {
     const alignH = ct.alignH ?? "center";
     const alignV = ct.alignV ?? "middle";
-    const slackX = Math.max(0, frameW - dispW);
-    const slackY = Math.max(0, frameH - dispH);
+    const slackX = frameW - dispW;
+    const slackY = frameH - dispH;
     offsetX = alignH === "left" ? -slackX / 2 : alignH === "right" ? slackX / 2 : 0;
     offsetY = alignV === "top" ? -slackY / 2 : alignV === "bottom" ? slackY / 2 : 0;
   } else {
@@ -5623,7 +5624,8 @@ async function createMaskedImageElement({
   zoom = 1,
   fit = "cover",
   alignH = "center",
-  alignV = "middle"
+  alignV = "middle",
+  containScale = 1
 }) {
   const img = image || (url ? await fabric__namespace.FabricImage.fromURL(getProxiedImageUrl(url), { crossOrigin: "anonymous" }) : null);
   if (!img) {
@@ -5748,6 +5750,7 @@ async function createMaskedImageElement({
     fit,
     alignH,
     alignV,
+    containScale: Math.max(1, Math.min(3, containScale || 1)),
     _img: img,
     _border: border
   };
@@ -17249,7 +17252,7 @@ const PageCanvas = react.forwardRef(
         visibilityUpdateInProgressRef.current = false;
       }
       doSyncRef.current = () => {
-        var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
         const shouldSkipUpdates2 = syncLockedRef.current || editLockRef.current;
         const state = useEditorStore.getState();
         const elementsToSync = elements;
@@ -17628,6 +17631,15 @@ const PageCanvas = react.forwardRef(
                         existingObj.clipPath = newClip;
                       }
                     }
+                    const elFit = element.imageFit ?? ((_h = element.style) == null ? void 0 : _h.imageFit);
+                    if (elFit === "contain") {
+                      ct.fit = "contain";
+                      ct.alignH = element.imageAlignH ?? "center";
+                      ct.alignV = element.imageAlignV ?? "middle";
+                      ct.containScale = Math.max(1, Math.min(3, Number(element.containScale ?? 1)));
+                    } else if (elFit) {
+                      ct.fit = elFit;
+                    }
                     updateCoverLayout(existingObj);
                     applyEdgeFadeFrameClipPath(existingObj, element, ct.frameW, ct.frameH, ct.shape || "rect", ct.rx || 0);
                     if (allowEditing) {
@@ -17726,6 +17738,21 @@ const PageCanvas = react.forwardRef(
                     flipY: element.flipY ?? false,
                     opacity: isHidden ? 0 : element.opacity ?? 1
                   });
+                  try {
+                    const ctSync = existingObj.__cropData;
+                    if (ctSync) {
+                      const elFitSync = element.imageFit ?? ((_i = element.style) == null ? void 0 : _i.imageFit);
+                      if (elFitSync === "contain") {
+                        ctSync.fit = "contain";
+                        ctSync.alignH = element.imageAlignH ?? "center";
+                        ctSync.alignV = element.imageAlignV ?? "middle";
+                        ctSync.containScale = Math.max(1, Math.min(3, Number(element.containScale ?? 1)));
+                        updateCoverLayout(existingObj);
+                        existingObj.dirty = true;
+                      }
+                    }
+                  } catch {
+                  }
                   existingObj.setCoords();
                   fc.requestRenderAll();
                   if (wasJustModified) justModifiedIdsRef.current.delete(element.id);
@@ -17945,7 +17972,7 @@ const PageCanvas = react.forwardRef(
               fc.add(placeholder);
               fc.bringObjectToFront(placeholder);
               const activeObj = fc.getActiveObject();
-              if (activeObj && (((_h = activeObj._ct) == null ? void 0 : _h.isCropGroup) || activeObj.__cropGroup)) {
+              if (activeObj && (((_j = activeObj._ct) == null ? void 0 : _j.isCropGroup) || activeObj.__cropGroup)) {
                 fc.setActiveObject(activeObj);
               }
               placeholder.dirty = true;
@@ -17985,7 +18012,7 @@ const PageCanvas = react.forwardRef(
                 fc.add(obj);
                 fc.bringObjectToFront(obj);
                 const activeObj = fc.getActiveObject();
-                if (activeObj && (((_i = activeObj._ct) == null ? void 0 : _i.isCropGroup) || activeObj.__cropGroup)) {
+                if (activeObj && (((_k = activeObj._ct) == null ? void 0 : _k.isCropGroup) || activeObj.__cropGroup)) {
                   fc.setActiveObject(activeObj);
                 }
                 obj.dirty = true;
@@ -18018,7 +18045,7 @@ const PageCanvas = react.forwardRef(
         isRebuildingRef.current = false;
         fc.requestRenderAll();
         if (activeBeforeSync && fc.getObjects().includes(activeBeforeSync)) {
-          const isCropGroup2 = ((_j = activeBeforeSync._ct) == null ? void 0 : _j.isCropGroup) || activeBeforeSync.__cropGroup;
+          const isCropGroup2 = ((_l = activeBeforeSync._ct) == null ? void 0 : _l.isCropGroup) || activeBeforeSync.__cropGroup;
           if (isCropGroup2) {
             fc.setActiveObject(activeBeforeSync);
             fc.requestRenderAll();
@@ -18105,7 +18132,7 @@ const PageCanvas = react.forwardRef(
         }
         if (fc.__activeEditingGroupId) {
           try {
-            (_k = fc.__updateDrilledGroupOutline) == null ? void 0 : _k.call(fc);
+            (_m = fc.__updateDrilledGroupOutline) == null ? void 0 : _m.call(fc);
           } catch {
           }
         }
@@ -19662,7 +19689,8 @@ const PageCanvas = react.forwardRef(
             // edge (instead of being silently cover-cropped).
             fit: imageFitFinal === "contain" ? "contain" : "cover",
             alignH: element.imageAlignH ?? "center",
-            alignV: element.imageAlignV ?? "middle"
+            alignV: element.imageAlignV ?? "middle",
+            containScale: Math.max(1, Math.min(3, Number(element.containScale ?? 1)))
           });
           cropGroup.__maintainResolution = element.maintainResolution !== false;
           cropGroup.set({
@@ -26269,9 +26297,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.462";
+const resolvedPackageVersion = "0.5.464";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.462";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.464";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -27085,7 +27113,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 Promise.resolve().then(() => require("./vectorPdfExport-IjuMSK-o.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BlaglUx4.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29405,7 +29433,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-IjuMSK-o.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BlaglUx4.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29719,4 +29747,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-DjoKgogq.cjs.map
+//# sourceMappingURL=index-BFIEinvR.cjs.map