@pixldocs/canvas-renderer 0.5.467 → 0.5.469

package/dist/{index-JJbf0DOF.cjs → index-C4lq9hLY.cjs}

@@ -5255,22 +5255,6 @@ function updateCoverLayout(g) {
   if (g.clipPath) {
     g.clipPath.dirty = true;
   }
-  if (fitContain && g.clipPath) {
-    const clip = g.clipPath;
-    const isSpecialMask = isSvgMaskClipPath(clip) || isLuminanceMaskClipPath(clip) || clip.__svgMask || clip.__edgeFadeMask;
-    if (!isSpecialMask) {
-      const clipW = Math.max(frameW, dispW);
-      const clipH = Math.max(frameH, dispH);
-      if (clip instanceof fabric__namespace.Rect) {
-        const rxRatioCt = Number(ct.rx) || 0;
-        const rxPx = rxRatioCt > 0.5 ? Math.min(rxRatioCt, clipW / 2, clipH / 2) : Math.max(0, Math.min(rxRatioCt * Math.min(clipW, clipH), clipW / 2, clipH / 2));
-        clip.set({ width: clipW, height: clipH, rx: rxPx, ry: rxPx, left: offsetX, top: offsetY });
-      } else if (clip instanceof fabric__namespace.Ellipse) {
-        clip.set({ rx: clipW / 2, ry: clipH / 2, left: offsetX, top: offsetY });
-      }
-      clip.dirty = true;
-    }
-  }
   finalizeCropGroupCoords(g);
   if (g.canvas) {
     g.setCoords();
@@ -12315,18 +12299,21 @@ const PageCanvas = react.forwardRef(
           if (id && id !== "__background__") {
             const width = (obj.width ?? 0) * (obj.scaleX ?? 1);
             const height = (obj.height ?? 0) * (obj.scaleY ?? 1);
-            let left = obj.left ?? 0;
-            let top = obj.top ?? 0;
-            if (obj instanceof fabric__namespace.Group && obj.__cropGroup) {
-              left = left - width / 2;
-              top = top - height / 2;
-            } else if (obj.originX === "center" || obj.originY === "center") {
-              const offsetX = obj.originX === "center" ? width / 2 : 0;
-              const offsetY = obj.originY === "center" ? height / 2 : 0;
-              left = left - offsetX;
-              top = top - offsetY;
+            const angle = obj.angle ?? 0;
+            let left;
+            let top;
+            const centerFn = obj.getCenterPoint;
+            if (typeof centerFn === "function") {
+              const c = centerFn.call(obj);
+              left = c.x - width / 2;
+              top = c.y - height / 2;
+            } else {
+              left = obj.left ?? 0;
+              top = obj.top ?? 0;
+              if (obj.originX === "center") left -= width / 2;
+              if (obj.originY === "center") top -= height / 2;
             }
-            result.set(id, { left, top, width, height });
+            result.set(id, { left, top, width, height, angle });
           }
         });
         return result;
@@ -17501,6 +17488,17 @@ const PageCanvas = react.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 };
@@ -17537,7 +17535,7 @@ const PageCanvas = react.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__namespace.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) {
@@ -20251,27 +20249,32 @@ PageCanvas.displayName = "PageCanvas";
 function buildElementToFieldMap(dynamicFields) {
   const map = /* @__PURE__ */ new Map();
   if (!dynamicFields) return map;
-  for (const field of dynamicFields) {
+  const ordered = dynamicFields.map((f, idx) => ({ f, idx })).sort((a, b) => {
+    const ao = a.f.order ?? Number.POSITIVE_INFINITY;
+    const bo = b.f.order ?? Number.POSITIVE_INFINITY;
+    if (ao !== bo) return ao - bo;
+    return a.idx - b.idx;
+  });
+  const push = (elementId, info) => {
+    const list = map.get(elementId);
+    if (list) list.push(info);
+    else map.set(elementId, [info]);
+  };
+  ordered.forEach(({ f: field }, formIndex) => {
     if (field.mappings && Array.isArray(field.mappings)) {
       for (const mapping of field.mappings) {
         if (mapping.elementId) {
-          map.set(mapping.elementId, {
-            fieldId: field.id,
-            label: field.label
-          });
+          push(mapping.elementId, { fieldId: field.id, label: field.label, formIndex });
         }
       }
     } else if (field.elementIds && Array.isArray(field.elementIds)) {
       for (const elementId of field.elementIds) {
         if (elementId) {
-          map.set(elementId, {
-            fieldId: field.id,
-            label: field.label
-          });
+          push(elementId, { fieldId: field.id, label: field.label, formIndex });
         }
       }
     }
-  }
+  });
   return map;
 }
 function PreviewCanvas({
@@ -20362,9 +20365,9 @@ function PreviewCanvas({
     };
   }, [config.themeConfig]);
   const handleDynamicFieldClick = react.useCallback((elementId) => {
-    const fieldInfo = elementToFieldMap.get(elementId);
-    if (fieldInfo && onDynamicFieldClick) {
-      onDynamicFieldClick(elementId, fieldInfo.fieldId);
+    const infos = elementToFieldMap.get(elementId);
+    if (infos && infos.length && onDynamicFieldClick) {
+      onDynamicFieldClick(elementId, infos.map((i) => i.fieldId));
     }
   }, [elementToFieldMap, onDynamicFieldClick]);
   const dynamicFieldElements = react.useMemo(() => {
@@ -20372,10 +20375,14 @@ function PreviewCanvas({
     const seenIds = /* @__PURE__ */ new Set();
     for (const element of elements) {
       if (seenIds.has(element.id)) continue;
-      const fieldInfo = elementToFieldMap.get(element.id);
-      if (fieldInfo) {
+      const infos = elementToFieldMap.get(element.id);
+      if (infos && infos.length) {
         seenIds.add(element.id);
-        result.push({ element, label: fieldInfo.label });
+        result.push({
+          element,
+          label: infos[0].label,
+          extraCount: Math.max(0, infos.length - 1)
+        });
       }
     }
     return result;
@@ -20449,7 +20456,7 @@ function PreviewCanvas({
                 onReady
               }
             ),
-            onDynamicFieldClick && dynamicFieldElements.map(({ element, label }) => {
+            onDynamicFieldClick && dynamicFieldElements.map(({ element, label, extraCount }) => {
               const bounds = actualBounds.get(element.id);
               const isHovered = hoveredFieldId === element.id;
               let left, top, width, height;
@@ -20476,22 +20483,27 @@ function PreviewCanvas({
                     border: isHovered ? "2px solid rgb(59 130 246)" : "none",
                     backgroundColor: isHovered ? "rgba(59, 130, 246, 0.1)" : "transparent",
                     borderRadius: 4,
-                    pointerEvents: "auto"
+                    pointerEvents: "auto",
+                    transform: (bounds == null ? void 0 : bounds.angle) ? `rotate(${bounds.angle}deg)` : void 0,
+                    transformOrigin: "center center"
                   },
                   onMouseEnter: () => setHoveredFieldId(element.id),
                   onMouseLeave: () => setHoveredFieldId(null),
                   onClick: () => {
-                    const fieldInfo = elementToFieldMap.get(element.id);
-                    if (fieldInfo && onDynamicFieldClick) {
-                      onDynamicFieldClick(element.id, fieldInfo.fieldId);
+                    const infos = elementToFieldMap.get(element.id);
+                    if (infos && infos.length && onDynamicFieldClick) {
+                      onDynamicFieldClick(element.id, infos.map((i) => i.fieldId));
                     }
                   },
-                  children: isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+                  children: isHovered && /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
                       className: "absolute -top-6 left-0 bg-primary text-primary-foreground text-xs px-2 py-0.5 rounded shadow-sm whitespace-nowrap",
                       style: { fontSize: 10 },
-                      children: label
+                      children: [
+                        label,
+                        extraCount > 0 ? ` +${extraCount} more` : ""
+                      ]
                     }
                   )
                 },
@@ -26313,9 +26325,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.467";
+const resolvedPackageVersion = "0.5.469";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.467";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.469";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -27129,7 +27141,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-CYxG1Qy-.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-CUb2Bf6z.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29449,7 +29461,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-CYxG1Qy-.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-CUb2Bf6z.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29763,4 +29775,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-JJbf0DOF.cjs.map
+//# sourceMappingURL=index-C4lq9hLY.cjs.map