@pixldocs/canvas-renderer 0.5.331 → 0.5.333

package/dist/{index-COZR9zOa.cjs → index-k8mzlqgs.cjs}

@@ -11043,6 +11043,8 @@ const scaleUpdateNumber = (updates, source, key, factor) => {
 };
 const GROUP_TEXT_RESIZE_DEBUG_PREFIX = "[Pixldocs][group-text-corner-resize]";
 const GROUP_TEXT_RESIZE_DEBUG_MAX_ENTRIES = 200;
+const GROUP_IMAGE_RESIZE_DEBUG_PREFIX = "[Pixldocs][group-image-side-resize]";
+const GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES = 300;
 const isCornerResizeHandle = (handle) => handle === "tl" || handle === "tr" || handle === "bl" || handle === "br";
 const summarizeFabricObjectForResizeDebug = (obj) => {
   var _a2;
@@ -11105,6 +11107,43 @@ const logGroupTextResizeDebug = (phase, payload) => {
     console.log(GROUP_TEXT_RESIZE_DEBUG_PREFIX, phase, payload);
   }
 };
+const isGroupResizeImageLikeObject = (obj) => {
+  var _a2;
+  return !!obj && (obj instanceof fabric__namespace.FabricImage || obj instanceof fabric__namespace.Group && (obj.__cropGroup || ((_a2 = obj._ct) == null ? void 0 : _a2.isCropGroup)));
+};
+const logGroupImageResizeDebug = (phase, payload) => {
+  if (typeof console === "undefined") return;
+  try {
+    const seen = /* @__PURE__ */ new WeakSet();
+    const normalize = (value) => {
+      if (value == null) return value;
+      const valueType = typeof value;
+      if (valueType === "number") return Number.isFinite(value) ? Math.round(value * 1e3) / 1e3 : String(value);
+      if (valueType === "string" || valueType === "boolean") return value;
+      if (valueType === "function") return `[Function ${value.name || "anonymous"}]`;
+      if (Array.isArray(value)) return value.map((entry) => normalize(entry));
+      if (valueType === "object") {
+        if (seen.has(value)) return "[Circular]";
+        seen.add(value);
+        if (value instanceof fabric__namespace.FabricObject) return normalize(summarizeFabricObjectForResizeDebug(value));
+        const output = {};
+        Object.entries(value).forEach(([key, entry]) => {
+          output[key] = normalize(entry);
+        });
+        return output;
+      }
+      return String(value);
+    };
+    const normalizedPayload = normalize(payload);
+    const line = `${GROUP_IMAGE_RESIZE_DEBUG_PREFIX} ${phase} ${JSON.stringify(normalizedPayload)}`;
+    const debugWindow = window;
+    debugWindow.__pixldocsGroupImageResizeLogs = Array.isArray(debugWindow.__pixldocsGroupImageResizeLogs) ? debugWindow.__pixldocsGroupImageResizeLogs.slice(-GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES + 1) : [];
+    debugWindow.__pixldocsGroupImageResizeLogs.push(line);
+    console.log(line);
+  } catch {
+    console.log(GROUP_IMAGE_RESIZE_DEBUG_PREFIX, phase, payload);
+  }
+};
 const bakeTextboxScaleIntoTypography = (obj, sourceElement) => {
   const sx = Math.abs(obj.scaleX ?? 1) || 1;
   const sy = Math.abs(obj.scaleY ?? 1) || 1;
@@ -13761,7 +13800,25 @@ const PageCanvas = react.forwardRef(
               const a = ((c.angle ?? 0) % 180 + 180) % 180;
               return !(a < 0.5 || a > 179.5);
             });
-            if ((isXSide || hasRotatedChild) && ((_b2 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _b2.selection) !== obj) {
+            const selectionAngle = ((obj.angle ?? 0) % 180 + 180) % 180;
+            const isSelectionRotated = !(selectionAngle < 0.5 || selectionAngle > 179.5);
+            const shouldPinNonTextChildren = hasRotatedChild || isSelectionRotated;
+            const shouldDebugGroupImageResize = obj.getObjects().some((child) => isGroupResizeImageLikeObject(child));
+            if (shouldDebugGroupImageResize) {
+              logGroupImageResizeDebug("live-start", {
+                time: Math.round(performance.now()),
+                corner,
+                isXSide,
+                sAxis,
+                hasRotatedChild,
+                isSelectionRotated,
+                shouldPinNonTextChildren,
+                groupSelectionId: obj.__pixldocsGroupSelection,
+                selection: summarizeFabricObjectForResizeDebug(obj),
+                children: obj.getObjects().map((child) => summarizeFabricObjectForResizeDebug(child))
+              });
+            }
+            if ((isXSide || shouldPinNonTextChildren) && ((_b2 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _b2.selection) !== obj) {
               groupShiftReflowSnapshotRef.current = null;
               const logicalGroupId = obj.__pixldocsGroupSelection;
               if (logicalGroupId) {
@@ -13808,22 +13865,50 @@ const PageCanvas = react.forwardRef(
               }
             }
             const childCounterScale = hasRotatedChild ? 1 : 1 / sAxis;
+            let restoredNonTextAfterLayout = false;
             const restoreNonTextChildren = (pins) => {
               var _a3, _b3;
-              if (!hasRotatedChild || ((_a3 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _a3.selection) !== obj) return;
+              if (!shouldPinNonTextChildren || ((_a3 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _a3.selection) !== obj) return;
               for (const entry of groupShiftReflowSnapshotRef.current.children) {
                 const child = entry.obj;
                 if (child instanceof fabric__namespace.Textbox) continue;
                 if (child instanceof fabric__namespace.FabricImage || child instanceof fabric__namespace.Group && (child.__cropGroup || ((_b3 = child._ct) == null ? void 0 : _b3.isCropGroup))) {
                   const pin = pins == null ? void 0 : pins.get(child);
-                  const targetLeft = (pin == null ? void 0 : pin.left) ?? (isXSide ? entry.left0 * sAxis : entry.left0);
-                  const targetTop = (pin == null ? void 0 : pin.top) ?? (isXSide ? entry.top0 : entry.top0 * sAxis);
+                  let targetLeft = hasRotatedChild && isXSide ? entry.left0 * sAxis : entry.left0;
+                  let targetTop = hasRotatedChild && !isXSide ? entry.top0 * sAxis : entry.top0;
+                  if (pin == null ? void 0 : pin.worldCenter) {
+                    try {
+                      const invSelectionMatrix = fabric__namespace.util.invertTransform(obj.calcTransformMatrix());
+                      const localCenter = fabric__namespace.util.transformPoint(pin.worldCenter, invSelectionMatrix);
+                      targetLeft = localCenter.x;
+                      targetTop = localCenter.y;
+                    } catch {
+                      targetLeft = pin.left ?? targetLeft;
+                      targetTop = pin.top ?? targetTop;
+                    }
+                  } else {
+                    targetLeft = (pin == null ? void 0 : pin.left) ?? targetLeft;
+                    targetTop = (pin == null ? void 0 : pin.top) ?? targetTop;
+                  }
+                  const beforeRestore = shouldDebugGroupImageResize ? summarizeFabricObjectForResizeDebug(child) : null;
                   if (Math.abs((child.left ?? 0) - targetLeft) > 0.01) child._set("left", targetLeft);
                   if (Math.abs((child.top ?? 0) - targetTop) > 0.01) child._set("top", targetTop);
                   if (isXSide) child._set("scaleX", childCounterScale);
                   else child._set("scaleY", childCounterScale);
                   child.setCoords();
                   child.dirty = true;
+                  if (shouldDebugGroupImageResize) {
+                    logGroupImageResizeDebug("restore-non-text", {
+                      time: Math.round(performance.now()),
+                      corner,
+                      childId: getObjectId(child),
+                      targetLeft,
+                      targetTop,
+                      pin,
+                      before: beforeRestore,
+                      after: summarizeFabricObjectForResizeDebug(child)
+                    });
+                  }
                 }
               }
             };
@@ -13837,6 +13922,7 @@ const PageCanvas = react.forwardRef(
             };
             for (const child of obj.getObjects()) {
               if (child instanceof fabric__namespace.Group && (child.__cropGroup || ((_d = child._ct) == null ? void 0 : _d.isCropGroup))) {
+                const beforeImageChildResize = shouldDebugGroupImageResize ? summarizeFabricObjectForResizeDebug(child) : null;
                 const ct = child.__cropData;
                 if (ct) {
                   if (child.__asLiveOrigW == null) {
@@ -13863,10 +13949,22 @@ const PageCanvas = react.forwardRef(
                 else child._set("scaleY", childCounterScale);
                 child.setCoords();
                 child.dirty = true;
+                if (shouldDebugGroupImageResize) {
+                  logGroupImageResizeDebug("live-crop-child-resized", {
+                    time: Math.round(performance.now()),
+                    corner,
+                    sAxis,
+                    childCounterScale,
+                    before: beforeImageChildResize,
+                    after: summarizeFabricObjectForResizeDebug(child),
+                    cropData: ct ? { frameW: ct.frameW, frameH: ct.frameH } : null
+                  });
+                }
                 didReflowTextChild = true;
                 continue;
               }
               if (child instanceof fabric__namespace.FabricImage && !child.__cropGroup && !child.smartElementType) {
+                const beforeImageChildResize = shouldDebugGroupImageResize ? summarizeFabricObjectForResizeDebug(child) : null;
                 if (isXSide) {
                   if (child.__asLiveOrigW == null) {
                     child.__asLiveOrigW = (child.width ?? 0) * Math.abs(child.scaleX ?? 1);
@@ -13884,6 +13982,18 @@ const PageCanvas = react.forwardRef(
                 else child._set("scaleY", childCounterScale);
                 child.setCoords();
                 child.dirty = true;
+                if (shouldDebugGroupImageResize) {
+                  logGroupImageResizeDebug("live-image-child-resized", {
+                    time: Math.round(performance.now()),
+                    corner,
+                    sAxis,
+                    childCounterScale,
+                    liveOrigW: child.__asLiveOrigW,
+                    liveOrigH: child.__asLiveOrigH,
+                    before: beforeImageChildResize,
+                    after: summarizeFabricObjectForResizeDebug(child)
+                  });
+                }
                 didReflowTextChild = true;
                 continue;
               }
@@ -13923,7 +14033,7 @@ const PageCanvas = react.forwardRef(
                 didReflowTextChild = true;
               }
             }
-            if (isXSide && ((_e = groupShiftReflowSnapshotRef.current) == null ? void 0 : _e.selection) === obj) {
+            if (isXSide && !shouldPinNonTextChildren && ((_e = groupShiftReflowSnapshotRef.current) == null ? void 0 : _e.selection) === obj) {
               const snap = groupShiftReflowSnapshotRef.current;
               const anchorEntry = snap.children[0];
               const anchorTopLive = anchorEntry.obj.top ?? 0;
@@ -13956,12 +14066,26 @@ const PageCanvas = react.forwardRef(
               if (cornersBefore) {
                 fixedMidBefore = corner === "ml" ? { x: (cornersBefore.tr.x + cornersBefore.br.x) / 2, y: (cornersBefore.tr.y + cornersBefore.br.y) / 2 } : { x: (cornersBefore.tl.x + cornersBefore.bl.x) / 2, y: (cornersBefore.tl.y + cornersBefore.bl.y) / 2 };
               }
-              const nonTextPinsBeforeLayout = hasRotatedChild ? new Map(obj.getObjects().map((child) => [child, { left: child.left ?? 0, top: child.top ?? 0 }])) : void 0;
+              const nonTextPinsBeforeLayout = shouldPinNonTextChildren ? new Map(obj.getObjects().map((child) => [child, {
+                left: child.left ?? 0,
+                top: child.top ?? 0,
+                worldCenter: child instanceof fabric__namespace.Textbox ? void 0 : child.getCenterPoint()
+              }])) : void 0;
               try {
                 obj.triggerLayout();
               } catch {
               }
               restoreNonTextChildren(nonTextPinsBeforeLayout);
+              restoredNonTextAfterLayout = !!nonTextPinsBeforeLayout;
+              if (shouldDebugGroupImageResize) {
+                logGroupImageResizeDebug("after-trigger-layout", {
+                  time: Math.round(performance.now()),
+                  corner,
+                  selection: summarizeFabricObjectForResizeDebug(obj),
+                  nonTextPinsBeforeLayout,
+                  children: obj.getObjects().map((child) => summarizeFabricObjectForResizeDebug(child))
+                });
+              }
               obj._set("width", asW0);
               obj._set("scaleX", asSx0);
               obj._set("scaleY", asSy0);
@@ -13987,7 +14111,7 @@ const PageCanvas = react.forwardRef(
               obj._set("left", asLeft0);
               obj._set("top", asTop0);
             }
-            restoreNonTextChildren();
+            if (!restoredNonTextAfterLayout) restoreNonTextChildren();
             obj._set("width", asW0);
             obj._set("scaleX", asSx0);
             obj._set("scaleY", asSy0);
@@ -14556,6 +14680,18 @@ const PageCanvas = react.forwardRef(
           const isActiveSelection = activeObj instanceof fabric__namespace.ActiveSelection || activeObjects.length > 1;
           const activeSelectionResizeHandle = isActiveSelection ? activeSelectionResizeHandleRef.current : null;
           const debugGroupTextCornerResize = activeObj instanceof fabric__namespace.ActiveSelection && isCornerResizeHandle(activeSelectionResizeHandle) && activeObjects.some((candidate) => candidate instanceof fabric__namespace.Textbox);
+          const debugGroupImageSideResize = activeObj instanceof fabric__namespace.ActiveSelection && (activeSelectionResizeHandle === "ml" || activeSelectionResizeHandle === "mr" || activeSelectionResizeHandle === "mt" || activeSelectionResizeHandle === "mb") && activeObjects.some((candidate) => isGroupResizeImageLikeObject(candidate));
+          if (debugGroupImageSideResize) {
+            logGroupImageResizeDebug("modified-start", {
+              time: Math.round(performance.now()),
+              handle: activeSelectionResizeHandle,
+              target: summarizeFabricObjectForResizeDebug(modifiedTarget),
+              selection: summarizeFabricObjectForResizeDebug(activeObj),
+              activeObjectIds: activeObjects.map((candidate) => getObjectId(candidate)),
+              selectedStoreIds: useEditorStore.getState().canvas.selectedIds,
+              members: activeObjects.map((candidate) => summarizeFabricObjectForResizeDebug(candidate))
+            });
+          }
           if (debugGroupTextCornerResize) {
             logGroupTextResizeDebug("modified-start", {
               time: Math.round(performance.now()),
@@ -14811,11 +14947,17 @@ const PageCanvas = react.forwardRef(
                 absoluteTop = (decomposed.translateY ?? absoluteTop ?? 0) - w / 2 * Math.sin(angleRad) - h / 2 * Math.cos(angleRad);
               }
             } else if (obj instanceof fabric__namespace.FabricImage && (obj.originX === "center" || obj.originY === "center")) {
-              const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
-              const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
-              const angleRad = (decomposed.angle ?? obj.angle ?? 0) * Math.PI / 180;
-              absoluteLeft = (decomposed.translateX ?? absoluteLeft ?? 0) - w / 2 * Math.cos(angleRad) + h / 2 * Math.sin(angleRad);
-              absoluteTop = (decomposed.translateY ?? absoluteTop ?? 0) - w / 2 * Math.sin(angleRad) - h / 2 * Math.cos(angleRad);
+              if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
+                const frameBounds = getObjectFrameBoundsInSelection(activeObj, obj, obj.width ?? 0, obj.height ?? 0);
+                absoluteLeft = frameBounds.left;
+                absoluteTop = frameBounds.top;
+              } else {
+                const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
+                const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
+                const angleRad = (decomposed.angle ?? obj.angle ?? 0) * Math.PI / 180;
+                absoluteLeft = (decomposed.translateX ?? absoluteLeft ?? 0) - w / 2 * Math.cos(angleRad) + h / 2 * Math.sin(angleRad);
+                absoluteTop = (decomposed.translateY ?? absoluteTop ?? 0) - w / 2 * Math.sin(angleRad) - h / 2 * Math.cos(angleRad);
+              }
             }
             const preserveCornerGeometry = (sourceElement == null ? void 0 : sourceElement.type) === "shape" && (sourceElement.shapeType === "circle" || sourceElement.shapeType === "rounded-rect" || sourceElement.shapeType === "triangle");
             let finalWidth = intrinsicWidth;
@@ -14904,6 +15046,7 @@ const PageCanvas = react.forwardRef(
                   useEditorStore.getState().updateElement(objId, { src: newSrc }, { recordHistory: false, skipLayoutRecalc: true });
                 }
               } else if (isActiveSelection && (Math.abs((decomposed.scaleX ?? 1) - 1) > 1e-3 || Math.abs((decomposed.scaleY ?? 1) - 1) > 1e-3)) {
+                const debugImageBeforeBake = debugGroupImageSideResize ? summarizeFabricObjectForResizeDebug(obj) : null;
                 const sx = Math.abs(decomposed.scaleX || 1);
                 const sy = Math.abs(decomposed.scaleY || 1);
                 const handle = activeSelectionResizeHandle;
@@ -14974,6 +15117,38 @@ const PageCanvas = react.forwardRef(
                   skewX: finalSkewX ?? 0,
                   skewY: finalSkewY ?? 0
                 });
+                if (debugGroupImageSideResize) {
+                  logGroupImageResizeDebug("image-bake", {
+                    time: Math.round(performance.now()),
+                    handle: activeSelectionResizeHandle,
+                    imageId: objId,
+                    source: sourceElement ? {
+                      left: sourceElement.left,
+                      top: sourceElement.top,
+                      width: sourceElement.width,
+                      height: sourceElement.height,
+                      angle: sourceElement.angle,
+                      scaleX: sourceElement.scaleX,
+                      scaleY: sourceElement.scaleY
+                    } : null,
+                    factors: { sx, sy, fx, fy, isCornerHandle },
+                    beforeBake: debugImageBeforeBake,
+                    afterBake: summarizeFabricObjectForResizeDebug(obj),
+                    persistedGeometry: {
+                      absoluteLeft,
+                      absoluteTop,
+                      finalWidth,
+                      finalHeight,
+                      finalScaleX,
+                      finalScaleY,
+                      finalAngle,
+                      finalSkewX,
+                      finalSkewY,
+                      decomposed,
+                      finalAbsoluteMatrix
+                    }
+                  });
+                }
               } else {
                 finalWidth = intrinsicWidth;
                 finalHeight = intrinsicHeight;
@@ -15191,6 +15366,16 @@ const PageCanvas = react.forwardRef(
                 objectBeforeStoreWrite: summarizeFabricObjectForResizeDebug(obj)
               });
             }
+            if (debugGroupImageSideResize && isGroupResizeImageLikeObject(obj)) {
+              logGroupImageResizeDebug("store-update-image", {
+                time: Math.round(performance.now()),
+                handle: activeSelectionResizeHandle,
+                imageId: objId,
+                storePos,
+                elementUpdate,
+                objectBeforeStoreWrite: summarizeFabricObjectForResizeDebug(obj)
+              });
+            }
             updateElement(objId, elementUpdate, { recordHistory: false, skipLayoutRecalc: true });
             obj.setCoords();
           }
@@ -15221,6 +15406,16 @@ const PageCanvas = react.forwardRef(
                 renderOnAddRemove: fabricCanvas.renderOnAddRemove
               });
             }
+            if (debugGroupImageSideResize) {
+              logGroupImageResizeDebug("before-reselect", {
+                time: Math.round(performance.now()),
+                handle: activeSelectionResizeHandle,
+                wasGroupSel,
+                selection: summarizeFabricObjectForResizeDebug(activeObj),
+                members: membersToReselect.map((member) => summarizeFabricObjectForResizeDebug(member)),
+                renderOnAddRemove: fabricCanvas.renderOnAddRemove
+              });
+            }
             const prevRenderOnAddRemove = fabricCanvas.renderOnAddRemove;
             fabricCanvas.renderOnAddRemove = false;
             skipSelectionClearOnDiscardRef.current = true;
@@ -15265,6 +15460,16 @@ const PageCanvas = react.forwardRef(
                   renderOnAddRemove: fabricCanvas.renderOnAddRemove
                 });
               }
+              if (debugGroupImageSideResize) {
+                logGroupImageResizeDebug("after-reselect", {
+                  time: Math.round(performance.now()),
+                  handle: activeSelectionResizeHandle,
+                  wasGroupSel,
+                  selection: summarizeFabricObjectForResizeDebug(newSel),
+                  members: membersToReselect.map((member) => summarizeFabricObjectForResizeDebug(member)),
+                  renderOnAddRemove: fabricCanvas.renderOnAddRemove
+                });
+              }
             } else if (membersToReselect.length === 1) {
               fabricCanvas.setActiveObject(membersToReselect[0]);
             }
@@ -24314,9 +24519,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.331";
+const resolvedPackageVersion = "0.5.333";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.331";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.333";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -25130,7 +25335,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-07IeD7w3.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-Cc-1U0NL.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -27450,7 +27655,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-07IeD7w3.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-Cc-1U0NL.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -27847,4 +28052,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-COZR9zOa.cjs.map
+//# sourceMappingURL=index-k8mzlqgs.cjs.map