@pixldocs/canvas-renderer 0.5.267 → 0.5.269

package/dist/{index-C_tX_wMV.cjs → index-V3Oyi5GA.cjs}

@@ -12041,6 +12041,9 @@ const PageCanvas = react.forwardRef(
             selectionLeft: rect.left,
             selectionTop: rect.top
           };
+          if (active.__pixldocsGroupSelection) {
+            prepareGroupSelectionTransformStart(active);
+          }
         }
         if (fabricCanvas._currentTransform) {
           fabricCanvas.__isUserTransforming = true;
@@ -12906,6 +12909,9 @@ const PageCanvas = react.forwardRef(
       fabricCanvas.on("mouse:down:before", (opt) => {
         var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
         const activeBeforeMouseDown = fabricCanvas.getActiveObject();
+        if (activeBeforeMouseDown instanceof fabric__namespace.ActiveSelection && activeBeforeMouseDown.__pixldocsGroupSelection) {
+          prepareGroupSelectionTransformStart(activeBeforeMouseDown);
+        }
         if (editLockRef.current) {
           const active = fabricCanvas.getActiveObject();
           if (active && (((_a2 = active._ct) == null ? void 0 : _a2.isCropGroup) || active.__cropGroup)) {
@@ -14250,7 +14256,10 @@ const PageCanvas = react.forwardRef(
               const groupAbs = getAbsoluteBounds(groupToMove, pageChildren2);
               let movedGroupLeft = groupAbs.left;
               let movedGroupTop = groupAbs.top;
-              if (activeObj instanceof fabric__namespace.ActiveSelection && (transformStart == null ? void 0 : transformStart.groupId) === groupToMove.id) {
+              if (activeObj instanceof fabric__namespace.ActiveSelection && activeSelectionDelta) {
+                movedGroupLeft = groupAbs.left + activeSelectionDelta.x;
+                movedGroupTop = groupAbs.top + activeSelectionDelta.y;
+              } else if (activeObj instanceof fabric__namespace.ActiveSelection && (transformStart == null ? void 0 : transformStart.groupId) === groupToMove.id) {
                 const selectionRect = activeObj.getBoundingRect();
                 movedGroupLeft = transformStart.groupLeft + (selectionRect.left - transformStart.selectionLeft);
                 movedGroupTop = transformStart.groupTop + (selectionRect.top - transformStart.selectionTop);
@@ -14310,9 +14319,21 @@ const PageCanvas = react.forwardRef(
                 const groupSelectionId = (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection ? activeObj.__pixldocsGroupSelection : void 0) ?? groupToMove.id;
                 const targetObjects = isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection ? activeObj.getObjects() : activeObjects;
                 if (groupSelectionId && activeObj instanceof fabric__namespace.ActiveSelection) {
-                  restoreGroupSelectionVisualState(activeObj, groupSelectionId);
-                  fabricCanvas.setActiveObject(activeObj);
-                  activeObj.setCoords();
+                  try {
+                    skipSelectionClearOnDiscardRef.current = true;
+                    skipActiveSelectionBakeOnClearRef.current = true;
+                    try {
+                      fabricCanvas.discardActiveObject();
+                    } finally {
+                      skipActiveSelectionBakeOnClearRef.current = false;
+                      skipSelectionClearOnDiscardRef.current = false;
+                    }
+                  } catch {
+                  }
+                  const bakedSelection = targetObjects.length > 1 ? new fabric__namespace.ActiveSelection(targetObjects, { canvas: fabricCanvas }) : activeObj;
+                  restoreGroupSelectionVisualState(bakedSelection, groupSelectionId);
+                  fabricCanvas.setActiveObject(bakedSelection);
+                  bakedSelection.setCoords();
                 }
                 selectElements([groupSelectionId], false, false);
                 fabricCanvas.requestRenderAll();
@@ -14908,13 +14929,14 @@ const PageCanvas = react.forwardRef(
         visibilityUpdateInProgressRef.current = false;
       }
       doSyncRef.current = () => {
-        var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+        var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
         const shouldSkipUpdates2 = syncLockedRef.current || editLockRef.current;
         const state = useEditorStore.getState();
-        const elementsToSync = elements;
+        const storePage = state.canvas.pages.find((p) => p.id === pageId);
+        const pageTree = isPreviewMode && (pageChildren == null ? void 0 : pageChildren.length) ? pageChildren ?? [] : (storePage == null ? void 0 : storePage.children) ?? [];
+        const elementsToSync = isPreviewMode ? elements : pageTree.length ? flattenChildren(pageTree) : elements;
         elementsRef.current = elementsToSync;
-        const pageTree = isPreviewMode && (pageChildren == null ? void 0 : pageChildren.length) ? pageChildren ?? [] : ((_a2 = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
-        const selectedIdsFromStore = new Set(((_b2 = state.canvas) == null ? void 0 : _b2.selectedIds) ?? []);
+        const selectedIdsFromStore = new Set(((_a2 = state.canvas) == null ? void 0 : _a2.selectedIds) ?? []);
         isRebuildingRef.current = true;
         const allElementIds = new Set(elementsToSync.map((el) => el.id));
         const sectionGroups = pageTree.filter(
@@ -14942,7 +14964,7 @@ const PageCanvas = react.forwardRef(
           const activeObjId = activeObj ? getObjectId(activeObj) : null;
           const isTextBeingEdited = activeObjId && editingTextIdRef.current === activeObjId;
           const isMultiSelect = activeObj instanceof fabric__namespace.ActiveSelection;
-          if (activeObj && isMultiSelect && !(((_c = activeObj._ct) == null ? void 0 : _c.isCropGroup) || activeObj.__cropGroup) && !isTextBeingEdited) {
+          if (activeObj && isMultiSelect && !(((_b2 = activeObj._ct) == null ? void 0 : _b2.isCropGroup) || activeObj.__cropGroup) && !isTextBeingEdited) {
             fc.discardActiveObject();
           }
         }
@@ -14979,7 +15001,7 @@ const PageCanvas = react.forwardRef(
             fc.requestRenderAll();
           }
         } else if (!skipRestoreSelection && restoreTarget && !isActiveTextBeingEdited) {
-          const isCropGroup2 = ((_d = restoreTarget._ct) == null ? void 0 : _d.isCropGroup) || restoreTarget.__cropGroup;
+          const isCropGroup2 = ((_c = restoreTarget._ct) == null ? void 0 : _c.isCropGroup) || restoreTarget.__cropGroup;
           const isSectionGroup = activeId && sectionGroupIds.has(activeId);
           if ((isCropGroup2 || !shouldSkipUpdates2) && !isSectionGroup) {
             fc.setActiveObject(restoreTarget);
@@ -15107,7 +15129,7 @@ const PageCanvas = react.forwardRef(
               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 innerImg = (_d = existingObj == null ? void 0 : existingObj.__cropData) == null ? void 0 : _d._img;
               const innerOldKey = isCropGroup2 ? oldFadeKey : innerImg ? innerImg.__edgeFadeKey || "" : oldFadeKey;
               const cropFadeRendererMissing = isCropGroup2 && Boolean(newFadeKey) && !existingObj.__edgeFadeRenderConfig;
               const fadeKeyChanged = newFadeKey !== oldFadeKey || newFadeKey !== innerOldKey || cropFadeRendererMissing;
@@ -15115,14 +15137,14 @@ const PageCanvas = react.forwardRef(
               const needsCropGroupFadeUpdate = isCropGroup2 && fadeKeyChanged;
               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 };
+                const resolvedSizeImg = pageTree.length ? getNodeBounds(element, pageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
                 const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
                 const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
                 const nextWidth = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.width) || 200);
                 const nextHeight = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.height) || 50);
-                const storePosImg = pageChildren ? (() => {
-                  const node = findNodeById(pageChildren, element.id);
-                  return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                const storePosImg = pageTree.length ? (() => {
+                  const node = findNodeById(pageTree, element.id);
+                  return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
                 })() : { left: element.left ?? 0, top: element.top ?? 0 };
                 const elementForPlaceholder = { ...element, width: nextWidth, height: nextHeight };
                 const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(elementForPlaceholder) : createImagePlaceholder(elementForPlaceholder);
@@ -15145,8 +15167,8 @@ const PageCanvas = react.forwardRef(
                 fc.requestRenderAll();
                 continue;
               }
-              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 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 needCropGroupForElement = imageFitForReplace !== "fill" || clipShapeForReplace && clipShapeForReplace !== "none";
               const plainImageNeedsCropGroup = hasUrl && !isCropGroup2 && existingObj instanceof fabric__namespace.FabricImage && needCropGroupForElement;
               if (hasUrl && (needsReload || isPlaceholder || plainImageNeedsCropGroup || needsCropGroupFadeUpdate)) {
@@ -15183,9 +15205,9 @@ const PageCanvas = react.forwardRef(
                       }
                       ct.rx = rxRatio;
                     }
-                    const cropPos = pageChildren ? (() => {
-                      const node = findNodeById(pageChildren, element.id);
-                      return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                    const cropPos = pageTree.length ? (() => {
+                      const node = findNodeById(pageTree, element.id);
+                      return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
                     })() : { left: element.left ?? 0, top: element.top ?? 0 };
                     const cropCenterX = cropPos.left + (ct.frameW ?? 0) / 2;
                     const cropCenterY = cropPos.top + (ct.frameH ?? 0) / 2;
@@ -15282,7 +15304,7 @@ const PageCanvas = react.forwardRef(
                   continue;
                 }
               } else if (!hasUrl && !isPlaceholder) {
-                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 };
+                const resolvedSizeImg = pageTree.length ? getNodeBounds(element, pageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
                 const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
                 const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
                 const elementForPlaceholder = {
@@ -15312,11 +15334,11 @@ const PageCanvas = react.forwardRef(
                 placeholder.__imageSrc = void 0;
               } else if (!isBeingTransformed && !isBeingTextEdited && !shouldSkipUpdates2) {
                 if (isPlaceholderGroup) {
-                  const storePosImg = pageChildren ? (() => {
-                    const node = findNodeById(pageChildren, element.id);
-                    return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                  const storePosImg = pageTree.length ? (() => {
+                    const node = findNodeById(pageTree, element.id);
+                    return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
                   })() : { left: element.left ?? 0, top: element.top ?? 0 };
-                  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 };
+                  const resolvedSizeImg = pageTree.length ? getNodeBounds(element, pageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
                   const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
                   const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
                   const nextWidth = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.width) || 200);
@@ -15376,9 +15398,9 @@ const PageCanvas = react.forwardRef(
                 const previousVisible = previousVisibilityRef.current.get(element.id) ?? true;
                 const currentVisible = element.visible !== false;
                 const visibilityChanged = previousVisible !== currentVisible;
-                const storePosForImg = pageChildren ? (() => {
-                  const node = findNodeById(pageChildren, element.id);
-                  return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                const storePosForImg = pageTree.length ? (() => {
+                  const node = findNodeById(pageTree, element.id);
+                  return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
                 })() : { left: element.left ?? 0, top: element.top ?? 0 };
                 const positionChanged = Math.abs((existingObj.left ?? 0) - storePosForImg.left) > 0.1 || Math.abs((existingObj.top ?? 0) - storePosForImg.top) > 0.1;
                 if (visibilityChanged && !positionChanged || visibilityUpdateInProgressRef.current) {
@@ -15576,7 +15598,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 && (((_g = activeObj._ct) == null ? void 0 : _g.isCropGroup) || activeObj.__cropGroup)) {
                 fc.setActiveObject(activeObj);
               }
               placeholder.dirty = true;
@@ -15616,7 +15638,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 && (((_h = activeObj._ct) == null ? void 0 : _h.isCropGroup) || activeObj.__cropGroup)) {
                   fc.setActiveObject(activeObj);
                 }
                 obj.dirty = true;
@@ -15646,10 +15668,18 @@ const PageCanvas = react.forwardRef(
           });
           allFabricObjects.forEach((obj) => fc.bringObjectToFront(obj));
         }
+        const activeAfterObjectSync = fc.getActiveObject();
+        if (activeAfterObjectSync instanceof fabric__namespace.ActiveSelection) {
+          const groupSelectionId = activeAfterObjectSync.__pixldocsGroupSelection;
+          if (groupSelectionId) {
+            applyLogicalGroupSelectionVisualState(activeAfterObjectSync, groupSelectionId);
+            activeAfterObjectSync.setCoords();
+          }
+        }
         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 = ((_i = activeBeforeSync._ct) == null ? void 0 : _i.isCropGroup) || activeBeforeSync.__cropGroup;
           if (isCropGroup2) {
             fc.setActiveObject(activeBeforeSync);
             fc.requestRenderAll();
@@ -17143,7 +17173,7 @@ const PageCanvas = react.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 : (_f = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _f.children) ?? [];
+            const pageTreeForCreate = ((isPreviewMode || isExportMode) && (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 };
@@ -17193,7 +17223,7 @@ const PageCanvas = react.forwardRef(
         const needCropGroup = imageFitFinal !== "fill" || clipShapeFinal && clipShapeFinal !== "none";
         let finalObject = img;
         if (needCropGroup) {
-          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 pageTreeForCropResolve = ((isPreviewMode || isExportMode) && (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;
@@ -17237,7 +17267,7 @@ const PageCanvas = react.forwardRef(
           }
           const isDynamicField = dynamicFieldIds.includes(element.id);
           const canBeEvented = isEditorMode || isPreviewMode && isDynamicField;
-          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 pageTreeForCrop = ((isPreviewMode || isExportMode) && (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 };
@@ -23653,9 +23683,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.267";
+const resolvedPackageVersion = "0.5.269";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.267";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.269";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -24469,7 +24499,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-vH_Qgwx6.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-xlycX5wM.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -26789,7 +26819,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-vH_Qgwx6.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-xlycX5wM.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -27186,4 +27216,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-C_tX_wMV.cjs.map
+//# sourceMappingURL=index-V3Oyi5GA.cjs.map