@pixldocs/canvas-renderer 0.5.461 → 0.5.463

package/dist/{index-D1sMo2it.cjs → index-kf9OkhGi.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 {
@@ -4431,8 +4432,12 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
         const elementHeight2 = Number(element.height) * (element.scaleY ?? 1);
         const scaledImageWidth = imgNaturalWidth * baseScaleX;
         const scaledImageHeight = imgNaturalHeight * baseScaleY;
-        const imageLeft = (elementWidth2 - scaledImageWidth) / 2;
-        const imageTop = (elementHeight2 - scaledImageHeight) / 2;
+        const alignH = element.imageAlignH ?? "center";
+        const alignV = element.imageAlignV ?? "middle";
+        const slackX = elementWidth2 - scaledImageWidth;
+        const slackY = elementHeight2 - scaledImageHeight;
+        const imageLeft = imageFit2 === "contain" ? alignH === "left" ? 0 : alignH === "right" ? slackX : slackX / 2 : slackX / 2;
+        const imageTop = imageFit2 === "contain" ? alignV === "top" ? 0 : alignV === "bottom" ? slackY : slackY / 2 : slackY / 2;
         img.set({
           originX: "left",
           originY: "top",
@@ -5211,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,
@@ -5231,8 +5236,19 @@ function updateCoverLayout(g) {
   const overflowY = Math.max(0, dispH - frameH);
   const panX = clamp$1(img._ct.panX ?? 0.5, 0, 1);
   const panY = clamp$1(img._ct.panY ?? 0.5, 0, 1);
-  const offsetX = fitContain ? 0 : overflowX > 0 ? -overflowX * (panX - 0.5) : 0;
-  const offsetY = fitContain ? 0 : overflowY > 0 ? -overflowY * (panY - 0.5) : 0;
+  let offsetX = 0;
+  let offsetY = 0;
+  if (fitContain) {
+    const alignH = ct.alignH ?? "center";
+    const alignV = ct.alignV ?? "middle";
+    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 {
+    offsetX = overflowX > 0 ? -overflowX * (panX - 0.5) : 0;
+    offsetY = overflowY > 0 ? -overflowY * (panY - 0.5) : 0;
+  }
   img.set({ left: offsetX, top: offsetY });
   g.dirty = true;
   img.dirty = true;
@@ -5605,7 +5621,11 @@ async function createMaskedImageElement({
   visible = true,
   panX = 0.5,
   panY = 0.5,
-  zoom = 1
+  zoom = 1,
+  fit = "cover",
+  alignH = "center",
+  alignV = "middle",
+  containScale = 1
 }) {
   const img = image || (url ? await fabric__namespace.FabricImage.fromURL(getProxiedImageUrl(url), { crossOrigin: "anonymous" }) : null);
   if (!img) {
@@ -5724,8 +5744,13 @@ async function createMaskedImageElement({
     rx,
     frameW,
     frameH,
-    fit: "cover",
-    // clip image to frame; use 'contain' only when simple-scale mode is set
+    // Honor the element's authored imageFit. When 'contain', the image is
+    // scaled to fit fully inside the frame (no clipping) and alignH/alignV
+    // control where the letterboxed image sits.
+    fit,
+    alignH,
+    alignV,
+    containScale: Math.max(1, Math.min(3, containScale || 1)),
     _img: img,
     _border: border
   };
@@ -19634,7 +19659,14 @@ const PageCanvas = react.forwardRef(
             visible: !isHidden,
             panX,
             panY,
-            zoom: zoom2
+            zoom: zoom2,
+            // Honor authored Object Fit + alignment so contain logos render
+            // fully inside the frame, with letterbox aligned to the chosen
+            // edge (instead of being silently cover-cropped).
+            fit: imageFitFinal === "contain" ? "contain" : "cover",
+            alignH: element.imageAlignH ?? "center",
+            alignV: element.imageAlignV ?? "middle",
+            containScale: Math.max(1, Math.min(3, Number(element.containScale ?? 1)))
           });
           cropGroup.__maintainResolution = element.maintainResolution !== false;
           cropGroup.set({
@@ -26241,9 +26273,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.461";
+const resolvedPackageVersion = "0.5.463";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.461";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.463";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -27057,7 +27089,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-C7mmAR68.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-DFhh1h5p.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29377,7 +29409,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-C7mmAR68.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-DFhh1h5p.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29691,4 +29723,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-D1sMo2it.cjs.map
+//# sourceMappingURL=index-kf9OkhGi.cjs.map