@pixldocs/canvas-renderer 0.5.410 → 0.5.412

package/dist/{index-CS_cFpCL.js → index-CVR5UGAs.js}

@@ -4704,11 +4704,19 @@ const svgMaskApply = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
   syncSvgMaskClipPath
 }, Symbol.toStringTag, { value: "Module" }));
 const SELECTION_BORDER_SCALE$1 = 2;
-const ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX = "[Pixldocs][rotated-group-image-resize]";
-const ROTATED_GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES = 400;
+const ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX$1 = "[Pixldocs][rotated-group-image-resize]";
+const ROTATED_GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES$1 = 400;
 function isInsideRotatedActiveSelection(obj) {
-  const parent = obj.group;
-  if (!(parent instanceof fabric.ActiveSelection)) return false;
+  var _a2;
+  const debugObj = obj;
+  const ownAngle = Math.abs(((obj.angle ?? 0) % 360 + 360) % 360);
+  if ((debugObj.__cropData || debugObj.__cropGroup || ((_a2 = debugObj._ct) == null ? void 0 : _a2.isCropGroup)) && Math.min(ownAngle, 360 - ownAngle) > 0.5) return true;
+  const logicalParentAngle = Math.abs(((debugObj.__pixldocsParentGroupAngle ?? 0) % 360 + 360) % 360);
+  if (debugObj.__pixldocsParentGroupId && Math.min(logicalParentAngle, 360 - logicalParentAngle) > 0.5) return true;
+  const parent = debugObj.group;
+  if (!parent) return false;
+  const pType = parent.type;
+  if (pType !== "activeSelection" && pType !== "group") return false;
   const angle = Math.abs(((parent.angle ?? 0) % 360 + 360) % 360);
   return Math.min(angle, 360 - angle) > 0.5;
 }
@@ -4782,10 +4790,15 @@ function logRotatedGroupImageResize(phase, target, payload = {}) {
       signX: start.signX,
       signY: start.signY
     } : void 0;
-    const line = `${ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX} ${phase} ${JSON.stringify(normalize({
+    const line = `${ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX$1} ${phase} ${JSON.stringify(normalize({
       ...payload,
       target: summarizeResizeObject(target),
       parent: summarizeResizeObject(parent),
+      logicalParent: debugTarget.__pixldocsParentGroupId ? {
+        id: debugTarget.__pixldocsParentGroupId,
+        type: debugTarget.__pixldocsParentGroupType,
+        angle: debugTarget.__pixldocsParentGroupAngle
+      } : void 0,
       frameW: ct == null ? void 0 : ct.frameW,
       frameH: ct == null ? void 0 : ct.frameH,
       img: summarizeResizeObject(ct == null ? void 0 : ct._img),
@@ -4794,12 +4807,12 @@ function logRotatedGroupImageResize(phase, target, payload = {}) {
     }))}`;
     if (typeof window !== "undefined") {
       const debugWindow = window;
-      debugWindow.__pixldocsRotatedGroupImageResizeLogs = Array.isArray(debugWindow.__pixldocsRotatedGroupImageResizeLogs) ? debugWindow.__pixldocsRotatedGroupImageResizeLogs.slice(-ROTATED_GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES + 1) : [];
+      debugWindow.__pixldocsRotatedGroupImageResizeLogs = Array.isArray(debugWindow.__pixldocsRotatedGroupImageResizeLogs) ? debugWindow.__pixldocsRotatedGroupImageResizeLogs.slice(-ROTATED_GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES$1 + 1) : [];
       debugWindow.__pixldocsRotatedGroupImageResizeLogs.push(line);
     }
     console.log(line);
   } catch {
-    console.log(ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX, phase, payload);
+    console.log(ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX$1, phase, payload);
   }
 }
 function clamp$1(v, min, max) {
@@ -5282,6 +5295,12 @@ function installCanvaMaskControls(g) {
       logRotatedGroupImageResize("snap-skipped-active-selection-child", target, { corner });
       return;
     }
+    const ownAngle = Math.abs(((target.angle ?? 0) % 360 + 360) % 360);
+    const parentAngle = Math.abs(((target.__pixldocsParentGroupAngle ?? 0) % 360 + 360) % 360);
+    if (Math.min(ownAngle, 360 - ownAngle) > 0.5 || Math.min(parentAngle, 360 - parentAngle) > 0.5) {
+      logRotatedGroupImageResize("snap-skipped-rotated-image", target, { corner, ownAngle, parentAngle });
+      return;
+    }
     const handler = target.__resizeSnapHandler;
     if (typeof handler === "function") {
       logRotatedGroupImageResize("snap-before", target, { corner });
@@ -11382,10 +11401,34 @@ const summarizeFabricObjectForResizeDebug = (obj) => {
 const logGroupTextResizeDebug = (phase, payload) => {
   return;
 };
+const ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX = "[Pixldocs][rotated-group-image-resize]";
+const ROTATED_GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES = 400;
 const roundRotDriftNumber = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Math.round(value * 1e3) / 1e3 : String(value);
 };
+const normalizeRotDriftPayload = (value) => {
+  const seen = /* @__PURE__ */ new WeakSet();
+  const normalize = (entry) => {
+    if (entry == null) return entry;
+    const valueType = typeof entry;
+    if (valueType === "number") return roundRotDriftNumber(entry);
+    if (valueType === "string" || valueType === "boolean") return entry;
+    if (Array.isArray(entry)) return entry.map((item) => normalize(item));
+    if (valueType === "object") {
+      if (seen.has(entry)) return "[Circular]";
+      seen.add(entry);
+      if (entry instanceof fabric.FabricObject) return normalize(summarizeRotDriftObject(entry));
+      const output = {};
+      Object.entries(entry).forEach(([key, item]) => {
+        output[key] = normalize(item);
+      });
+      return output;
+    }
+    return String(entry);
+  };
+  return normalize(value);
+};
 const matrixForRotDriftLog = (matrix) => {
   if (!matrix) return void 0;
   return matrix.map((entry) => roundRotDriftNumber(entry));
@@ -11443,6 +11486,20 @@ const summarizeRotDriftObject = (obj, worldMatrix) => {
 const logRotGroupImageDrift = (phase, payload) => {
   return;
 };
+const logRotatedGroupImageResizeDebug = (phase, payload) => {
+  if (typeof console === "undefined") return;
+  try {
+    const line = `${ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX} ${phase} ${JSON.stringify(normalizeRotDriftPayload(payload))}`;
+    if (typeof window !== "undefined") {
+      const debugWindow = window;
+      debugWindow.__pixldocsRotatedGroupImageResizeLogs = Array.isArray(debugWindow.__pixldocsRotatedGroupImageResizeLogs) ? debugWindow.__pixldocsRotatedGroupImageResizeLogs.slice(-ROTATED_GROUP_IMAGE_RESIZE_DEBUG_MAX_ENTRIES + 1) : [];
+      debugWindow.__pixldocsRotatedGroupImageResizeLogs.push(line);
+    }
+    console.log(line);
+  } catch {
+    console.log(ROTATED_GROUP_IMAGE_RESIZE_DEBUG_PREFIX, phase, payload);
+  }
+};
 const shouldLogRotDriftLiveTick = (target, phase) => {
   return false;
 };
@@ -12248,6 +12305,22 @@ const PageCanvas = forwardRef(
       [canvasWidth, canvasHeight, getLogicalGroupSnapBoundsCallback, getResizeExcludeIdsCallback]
     );
     const installImageResizeControlsWithSnap = useCallback((group) => {
+      var _a2;
+      try {
+        const groupId = getObjectId(group);
+        const pageChildrenNow = ((_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
+        const parent = groupId ? findParentGroup(pageChildrenNow, groupId) : null;
+        if (parent) {
+          group.__pixldocsParentGroupId = parent.id;
+          group.__pixldocsParentGroupAngle = parent.angle ?? 0;
+          group.__pixldocsParentGroupType = "logical-group";
+        } else {
+          delete group.__pixldocsParentGroupId;
+          delete group.__pixldocsParentGroupAngle;
+          delete group.__pixldocsParentGroupType;
+        }
+      } catch {
+      }
       group.__resizeSnapHandler = (target, corner) => {
         const fc = fabricRef.current ?? target.canvas;
         if (!fc || !isActiveRef.current || !corner) return;
@@ -14281,7 +14354,7 @@ const PageCanvas = forwardRef(
       fabricCanvas.on("selection:cleared", () => {
       });
       fabricCanvas.on("object:scaling", (e) => {
-        var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j;
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
         if (!isActiveRef.current) return;
         const t = e.target;
         if (t) lastResizeScaleTargetRef.current = t;
@@ -14452,12 +14525,61 @@ const PageCanvas = forwardRef(
         const corner = (transform == null ? void 0 : transform.corner) || "";
         if (obj instanceof fabric.ActiveSelection && corner) {
           activeSelectionResizeHandleRef.current = corner;
+          const imageChildrenForResizeDebug = obj.getObjects().filter(
+            (child) => {
+              var _a3;
+              return child instanceof fabric.FabricImage || child instanceof fabric.Group && (child.__cropGroup || ((_a3 = child._ct) == null ? void 0 : _a3.isCropGroup));
+            }
+          );
+          const normalizedSelectionAngle = ((obj.angle ?? 0) % 360 + 360) % 360;
+          const activeLogicalGroupId = obj.__pixldocsGroupSelection;
+          const transformStartForDebug = activeLogicalGroupId && ((_c2 = groupSelectionTransformStartRef.current) == null ? void 0 : _c2.groupId) === activeLogicalGroupId ? groupSelectionTransformStartRef.current : null;
+          const logicalGroupAngle = (transformStartForDebug == null ? void 0 : transformStartForDebug.groupAngle) ?? obj.__pixldocsFrozenGroupAngle ?? 0;
+          const normalizedLogicalGroupAngle = (logicalGroupAngle % 360 + 360) % 360;
+          const isRotatedImageSelection = imageChildrenForResizeDebug.length > 0 && (Math.min(normalizedSelectionAngle, 360 - normalizedSelectionAngle) > 0.5 || Math.min(normalizedLogicalGroupAngle, 360 - normalizedLogicalGroupAngle) > 0.5);
+          if (isRotatedImageSelection) {
+            const countKey = "__pixldocsRotatedImageResizeScaleTickCount";
+            const count = (obj[countKey] ?? 0) + 1;
+            obj[countKey] = count;
+            if (count <= 5 || count % 8 === 0) {
+              logRotatedGroupImageResizeDebug("active-selection-scaling", {
+                time: Math.round(performance.now()),
+                tick: count,
+                handle: corner,
+                groupSelectionId: activeLogicalGroupId,
+                selectedStoreIds: useEditorStore.getState().canvas.selectedIds,
+                route: typeof window !== "undefined" ? window.location.pathname : void 0,
+                transformAction: (_d = fabricCanvas._currentTransform) == null ? void 0 : _d.action,
+                transformCorner: (_e = fabricCanvas._currentTransform) == null ? void 0 : _e.corner,
+                transformOriginal: (() => {
+                  var _a3;
+                  const original = (_a3 = fabricCanvas._currentTransform) == null ? void 0 : _a3.original;
+                  return original ? {
+                    left: original.left,
+                    top: original.top,
+                    width: original.width,
+                    height: original.height,
+                    scaleX: original.scaleX,
+                    scaleY: original.scaleY,
+                    angle: original.angle
+                  } : null;
+                })(),
+                transformStart: transformStartForDebug,
+                selection: summarizeRotDriftObject(obj),
+                imageChildren: imageChildrenForResizeDebug.map((child, childIndex) => ({
+                  childIndex,
+                  id: getObjectId(child),
+                  object: summarizeRotDriftObject(child)
+                }))
+              });
+            }
+          }
           if (isCornerResizeHandle(corner) && obj.getObjects().some((child) => child instanceof fabric.Textbox)) {
             obj.__pixldocsLastGroupTextScaleDebug = {
               time: Math.round(performance.now()),
               corner,
               groupSelectionId: obj.__pixldocsGroupSelection,
-              currentTransformAction: (_c2 = fabricCanvas._currentTransform) == null ? void 0 : _c2.action,
+              currentTransformAction: (_f = fabricCanvas._currentTransform) == null ? void 0 : _f.action,
               selection: summarizeFabricObjectForResizeDebug(obj),
               textChildren: obj.getObjects().filter((child) => child instanceof fabric.Textbox).map((child) => summarizeFabricObjectForResizeDebug(child))
             };
@@ -14466,17 +14588,17 @@ const PageCanvas = forwardRef(
         if (obj instanceof fabric.ActiveSelection && (corner === "ml" || corner === "mr" || corner === "mt" || corner === "mb")) {
           const isXSide = corner === "ml" || corner === "mr";
           const _cur = fabricCanvas._currentTransform;
-          const startSx = Math.abs(Number(((_d = _cur == null ? void 0 : _cur.original) == null ? void 0 : _d.scaleX) ?? 1)) || 1;
-          const startSy = Math.abs(Number(((_e = _cur == null ? void 0 : _cur.original) == null ? void 0 : _e.scaleY) ?? 1)) || 1;
+          const startSx = Math.abs(Number(((_g = _cur == null ? void 0 : _cur.original) == null ? void 0 : _g.scaleX) ?? 1)) || 1;
+          const startSy = Math.abs(Number(((_h = _cur == null ? void 0 : _cur.original) == null ? void 0 : _h.scaleY) ?? 1)) || 1;
           const sAxis = isXSide ? Math.abs((obj.scaleX ?? 1) / startSx) : Math.abs((obj.scaleY ?? 1) / startSy);
           if (sAxis > 1e-3) {
-            if (isXSide && ((_f = groupShiftReflowSnapshotRef.current) == null ? void 0 : _f.selection) !== obj) {
+            if (isXSide && ((_i = groupShiftReflowSnapshotRef.current) == null ? void 0 : _i.selection) !== obj) {
               groupShiftReflowSnapshotRef.current = null;
               const logicalGroupId = obj.__pixldocsGroupSelection;
               if (logicalGroupId) {
                 try {
                   const state = useEditorStore.getState();
-                  const pageChildren2 = ((_g = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _g.children) ?? [];
+                  const pageChildren2 = ((_j = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _j.children) ?? [];
                   const groupNode = findNodeById(pageChildren2, logicalGroupId);
                   if (groupNode && isGroup(groupNode) && !isStackLayoutMode(groupNode.layoutMode)) {
                     const entries = obj.getObjects().map((c) => ({
@@ -14514,7 +14636,7 @@ const PageCanvas = forwardRef(
                 }
                 continue;
               }
-              if (child instanceof fabric.Group && (child.__cropGroup || ((_h = child._ct) == null ? void 0 : _h.isCropGroup))) {
+              if (child instanceof fabric.Group && (child.__cropGroup || ((_k = child._ct) == null ? void 0 : _k.isCropGroup))) {
                 const ct = child.__cropData;
                 if (!ct) continue;
                 if (child.__asLiveOrigAngle == null) {
@@ -14681,7 +14803,7 @@ const PageCanvas = forwardRef(
               child.dirty = true;
               didReflowTextChild = true;
             }
-            if (isXSide && ((_i = groupShiftReflowSnapshotRef.current) == null ? void 0 : _i.selection) === obj) {
+            if (isXSide && ((_l = groupShiftReflowSnapshotRef.current) == null ? void 0 : _l.selection) === obj) {
               const snap = groupShiftReflowSnapshotRef.current;
               const anchorEntry = snap.children[0];
               const anchorTopLive = anchorEntry.obj.top ?? 0;
@@ -14842,7 +14964,7 @@ const PageCanvas = forwardRef(
         setGuides(gridGuidesForScale.length ? [...scaleGuides, ...gridGuidesForScale] : scaleGuides);
         if (drilledGroupIdRef.current) {
           try {
-            (_j = fabricCanvas.__updateDrilledGroupOutline) == null ? void 0 : _j.call(fabricCanvas);
+            (_m = fabricCanvas.__updateDrilledGroupOutline) == null ? void 0 : _m.call(fabricCanvas);
           } catch {
           }
         }
@@ -15066,7 +15188,6 @@ const PageCanvas = forwardRef(
                 delete child.__asLiveOrigW;
                 delete child.__asLiveOrigH;
                 delete child.__asLiveRotSnap;
-                delete child.__asLiveOrigAngle;
               }
             }
           } catch {
@@ -15629,48 +15750,99 @@ const PageCanvas = forwardRef(
             if (obj instanceof fabric.Group && obj.__cropGroup) {
               const ct = obj.__cropData;
               if (ct) {
-                const sourceFrameW = Math.max(1, ct.frameW ?? obj.width ?? 1);
-                const sourceFrameH = Math.max(1, ct.frameH ?? obj.height ?? 1);
-                const appliedScaleX = isActiveSelection && activeObj ? Math.abs((activeObj.scaleX ?? 1) * (obj.scaleX ?? 1)) : Math.abs(obj.scaleX ?? 1);
-                const appliedScaleY = isActiveSelection && activeObj ? Math.abs((activeObj.scaleY ?? 1) * (obj.scaleY ?? 1)) : Math.abs(obj.scaleY ?? 1);
-                finalWidth = Math.max(1, sourceFrameW * appliedScaleX);
-                finalHeight = Math.max(1, sourceFrameH * appliedScaleY);
-                finalScaleX = 1;
-                finalScaleY = 1;
-                if (isActiveSelection && activeObj instanceof fabric.ActiveSelection) {
-                  absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
-                  absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
-                } else {
-                  absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
-                  absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
-                }
-                finalAbsoluteMatrix = fabric.util.composeMatrix({
-                  translateX: absoluteLeft + finalWidth / 2,
-                  translateY: absoluteTop + finalHeight / 2,
-                  angle: decomposed.angle ?? (obj.angle ?? 0),
-                  scaleX: 1,
-                  scaleY: 1,
-                  skewX: 0,
-                  skewY: 0
-                });
-                if (isActiveSelection && activeObj instanceof fabric.ActiveSelection) {
+                const cropChildLocalAngle = obj.__asLiveOrigAngle != null ? obj.__asLiveOrigAngle : obj.angle ?? 0;
+                const cropChildNormAngle = (cropChildLocalAngle % 360 + 360) % 360;
+                const cropChildIsRotated = Math.abs(cropChildNormAngle) > 0.5 && Math.abs(cropChildNormAngle - 360) > 0.5;
+                const cropHandle = activeSelectionResizeHandle;
+                const cropIsSideHandle = cropHandle === "ml" || cropHandle === "mr" || cropHandle === "mt" || cropHandle === "mb";
+                const cropIsXSide = cropHandle === "ml" || cropHandle === "mr";
+                if (isActiveSelection && activeObj instanceof fabric.ActiveSelection && cropChildIsRotated && cropIsSideHandle) {
+                  const sourceFrameW = Math.max(1, ct.frameW ?? obj.width ?? 1);
+                  const sourceFrameH = Math.max(1, ct.frameH ?? obj.height ?? 1);
+                  const asSx = Math.abs(activeObj.scaleX ?? 1);
+                  const asSy = Math.abs(activeObj.scaleY ?? 1);
+                  const axisScale = cropIsXSide ? asSx : asSy;
+                  const thetaC = fabric.util.degreesToRadians(cropChildLocalAngle);
+                  const cosC = Math.cos(thetaC);
+                  const sinC = Math.sin(thetaC);
+                  const sLocal = axisScale * cosC * cosC + sinC * sinC;
+                  const ownSx = Math.abs(obj.scaleX ?? 1);
+                  const ownSy = Math.abs(obj.scaleY ?? 1);
+                  const newFrameW = cropIsXSide ? sourceFrameW * ownSx * sLocal : sourceFrameW * ownSx;
+                  const newFrameH = cropIsXSide ? sourceFrameH * ownSy : sourceFrameH * ownSy * sLocal;
+                  finalWidth = Math.max(1, newFrameW);
+                  finalHeight = Math.max(1, newFrameH);
+                  finalScaleX = 1;
+                  finalScaleY = 1;
+                  const worldCx = decomposed.translateX ?? 0;
+                  const worldCy = decomposed.translateY ?? 0;
+                  const worldAngle = (activeObj.angle ?? 0) + cropChildLocalAngle;
+                  absoluteLeft = worldCx - finalWidth / 2;
+                  absoluteTop = worldCy - finalHeight / 2;
+                  finalAbsoluteMatrix = fabric.util.composeMatrix({
+                    translateX: worldCx,
+                    translateY: worldCy,
+                    angle: worldAngle,
+                    scaleX: 1,
+                    scaleY: 1,
+                    skewX: 0,
+                    skewY: 0
+                  });
                   pendingCropGroupFrameBakes.push({
                     obj,
                     width: finalWidth,
                     height: finalHeight,
                     left: absoluteLeft,
                     top: absoluteTop,
-                    angle: decomposed.angle ?? (obj.angle ?? 0)
+                    angle: worldAngle
                   });
-                } else {
+                  obj.__lastResizeHandle = null;
                   ct.frameW = finalWidth;
                   ct.frameH = finalHeight;
-                  obj.set({ width: finalWidth, height: finalHeight, scaleX: 1, scaleY: 1 });
-                  updateCoverLayout(obj);
-                }
-                obj.__lastResizeHandle = null;
-                if (!isActiveSelection) {
-                  fabricCanvas.setActiveObject(obj);
+                } else {
+                  const sourceFrameW = Math.max(1, ct.frameW ?? obj.width ?? 1);
+                  const sourceFrameH = Math.max(1, ct.frameH ?? obj.height ?? 1);
+                  const appliedScaleX = isActiveSelection && activeObj ? Math.abs((activeObj.scaleX ?? 1) * (obj.scaleX ?? 1)) : Math.abs(obj.scaleX ?? 1);
+                  const appliedScaleY = isActiveSelection && activeObj ? Math.abs((activeObj.scaleY ?? 1) * (obj.scaleY ?? 1)) : Math.abs(obj.scaleY ?? 1);
+                  finalWidth = Math.max(1, sourceFrameW * appliedScaleX);
+                  finalHeight = Math.max(1, sourceFrameH * appliedScaleY);
+                  finalScaleX = 1;
+                  finalScaleY = 1;
+                  if (isActiveSelection && activeObj instanceof fabric.ActiveSelection) {
+                    absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
+                    absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
+                  } else {
+                    absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
+                    absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
+                  }
+                  finalAbsoluteMatrix = fabric.util.composeMatrix({
+                    translateX: absoluteLeft + finalWidth / 2,
+                    translateY: absoluteTop + finalHeight / 2,
+                    angle: decomposed.angle ?? (obj.angle ?? 0),
+                    scaleX: 1,
+                    scaleY: 1,
+                    skewX: 0,
+                    skewY: 0
+                  });
+                  if (isActiveSelection && activeObj instanceof fabric.ActiveSelection) {
+                    pendingCropGroupFrameBakes.push({
+                      obj,
+                      width: finalWidth,
+                      height: finalHeight,
+                      left: absoluteLeft,
+                      top: absoluteTop,
+                      angle: decomposed.angle ?? (obj.angle ?? 0)
+                    });
+                  } else {
+                    ct.frameW = finalWidth;
+                    ct.frameH = finalHeight;
+                    obj.set({ width: finalWidth, height: finalHeight, scaleX: 1, scaleY: 1 });
+                    updateCoverLayout(obj);
+                  }
+                  obj.__lastResizeHandle = null;
+                  if (!isActiveSelection) {
+                    fabricCanvas.setActiveObject(obj);
+                  }
                 }
               }
             } else if (obj instanceof fabric.FabricImage) {
@@ -15696,79 +15868,130 @@ const PageCanvas = 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 sx = Math.abs(decomposed.scaleX || 1);
-                const sy = Math.abs(decomposed.scaleY || 1);
-                const handle = activeSelectionResizeHandle;
-                const isCornerHandle = handle === "tl" || handle === "tr" || handle === "bl" || handle === "br" || // Fallback: if handle ref is missing and sx≈sy with non-1 magnitude,
-                // treat as a uniform corner drag.
-                !handle && Math.abs(sx - sy) < 0.01 && Math.abs(sx - 1) > 1e-3;
-                let fx;
-                let fy;
-                if (isCornerHandle) {
-                  const u = Math.max(1e-3, Math.sqrt(sx * sy));
-                  fx = u;
-                  fy = u;
-                } else {
-                  fx = sx;
-                  fy = sy;
-                }
-                const bakedW = Math.max(1, intrinsicWidth * fx);
-                const bakedH = Math.max(1, intrinsicHeight * fy);
-                try {
-                  const preBakeCenter = obj.getCenterPoint();
-                  const prevObjCaching = obj.objectCaching;
-                  obj.set({
-                    width: bakedW,
-                    height: bakedH,
+                const imgChildLocalAngle = obj.__asLiveOrigAngle != null ? obj.__asLiveOrigAngle : obj.angle ?? 0;
+                const imgChildNormAngle = (imgChildLocalAngle % 360 + 360) % 360;
+                const imgChildIsRotated = Math.abs(imgChildNormAngle) > 0.5 && Math.abs(imgChildNormAngle - 360) > 0.5;
+                const imgHandle = activeSelectionResizeHandle;
+                const imgIsSideHandle = imgHandle === "ml" || imgHandle === "mr" || imgHandle === "mt" || imgHandle === "mb";
+                const imgIsXSide = imgHandle === "ml" || imgHandle === "mr";
+                if (imgChildIsRotated && imgIsSideHandle && activeObj instanceof fabric.ActiveSelection) {
+                  const asSx = Math.abs(activeObj.scaleX ?? 1);
+                  const asSy = Math.abs(activeObj.scaleY ?? 1);
+                  const axisScale = imgIsXSide ? asSx : asSy;
+                  const thetaI = fabric.util.degreesToRadians(imgChildLocalAngle);
+                  const cI = Math.cos(thetaI);
+                  const sI = Math.sin(thetaI);
+                  const sLocalI = axisScale * cI * cI + sI * sI;
+                  const ownSx = Math.abs(obj.scaleX ?? 1);
+                  const ownSy = Math.abs(obj.scaleY ?? 1);
+                  const bakedW = Math.max(1, intrinsicWidth * ownSx * (imgIsXSide ? sLocalI : 1));
+                  const bakedH = Math.max(1, intrinsicHeight * ownSy * (imgIsXSide ? 1 : sLocalI));
+                  try {
+                    obj.set({
+                      width: bakedW,
+                      height: bakedH,
+                      scaleX: 1,
+                      scaleY: 1,
+                      skewX: 0,
+                      skewY: 0
+                    });
+                    obj.dirty = true;
+                    obj.setCoords();
+                  } catch {
+                  }
+                  finalWidth = bakedW;
+                  finalHeight = bakedH;
+                  finalScaleX = 1;
+                  finalScaleY = 1;
+                  const worldCx = decomposed.translateX ?? 0;
+                  const worldCy = decomposed.translateY ?? 0;
+                  const worldAngleI = (activeObj.angle ?? 0) + imgChildLocalAngle;
+                  absoluteLeft = worldCx - finalWidth / 2;
+                  absoluteTop = worldCy - finalHeight / 2;
+                  finalAbsoluteMatrix = fabric.util.composeMatrix({
+                    translateX: worldCx,
+                    translateY: worldCy,
+                    angle: worldAngleI,
                     scaleX: 1,
                     scaleY: 1,
-                    objectCaching: false
+                    skewX: 0,
+                    skewY: 0
                   });
-                  obj.objectCaching = prevObjCaching;
-                  if (sx > 0 && sy > 0) {
-                    const localScaleX = 1 / sx;
-                    const localScaleY = 1 / sy;
-                    obj.set({ scaleX: localScaleX, scaleY: localScaleY });
-                    const selectionMatrix = (_h = activeObj == null ? void 0 : activeObj.calcTransformMatrix) == null ? void 0 : _h.call(activeObj);
-                    const localCenter = selectionMatrix ? fabric.util.transformPoint(preBakeCenter, fabric.util.invertTransform(selectionMatrix)) : preBakeCenter;
-                    const localWidth = bakedW * localScaleX;
-                    const localHeight = bakedH * localScaleY;
-                    const isCenterOrigin = obj.originX === "center" || obj.originY === "center";
-                    if (isCenterOrigin) {
-                      obj.set({
-                        left: localCenter.x,
-                        top: localCenter.y
-                      });
-                    } else {
-                      obj.set({
-                        left: localCenter.x - localWidth / 2,
-                        top: localCenter.y - localHeight / 2
-                      });
+                } else {
+                  const sx = Math.abs(decomposed.scaleX || 1);
+                  const sy = Math.abs(decomposed.scaleY || 1);
+                  const handle = activeSelectionResizeHandle;
+                  const isCornerHandle = handle === "tl" || handle === "tr" || handle === "bl" || handle === "br" || // Fallback: if handle ref is missing and sx≈sy with non-1 magnitude,
+                  // treat as a uniform corner drag.
+                  !handle && Math.abs(sx - sy) < 0.01 && Math.abs(sx - 1) > 1e-3;
+                  let fx;
+                  let fy;
+                  if (isCornerHandle) {
+                    const u = Math.max(1e-3, Math.sqrt(sx * sy));
+                    fx = u;
+                    fy = u;
+                  } else {
+                    fx = sx;
+                    fy = sy;
+                  }
+                  const bakedW = Math.max(1, intrinsicWidth * fx);
+                  const bakedH = Math.max(1, intrinsicHeight * fy);
+                  try {
+                    const preBakeCenter = obj.getCenterPoint();
+                    const prevObjCaching = obj.objectCaching;
+                    obj.set({
+                      width: bakedW,
+                      height: bakedH,
+                      scaleX: 1,
+                      scaleY: 1,
+                      objectCaching: false
+                    });
+                    obj.objectCaching = prevObjCaching;
+                    if (sx > 0 && sy > 0) {
+                      const localScaleX = 1 / sx;
+                      const localScaleY = 1 / sy;
+                      obj.set({ scaleX: localScaleX, scaleY: localScaleY });
+                      const selectionMatrix = (_h = activeObj == null ? void 0 : activeObj.calcTransformMatrix) == null ? void 0 : _h.call(activeObj);
+                      const localCenter = selectionMatrix ? fabric.util.transformPoint(preBakeCenter, fabric.util.invertTransform(selectionMatrix)) : preBakeCenter;
+                      const localWidth = bakedW * localScaleX;
+                      const localHeight = bakedH * localScaleY;
+                      const isCenterOrigin = obj.originX === "center" || obj.originY === "center";
+                      if (isCenterOrigin) {
+                        obj.set({
+                          left: localCenter.x,
+                          top: localCenter.y
+                        });
+                      } else {
+                        obj.set({
+                          left: localCenter.x - localWidth / 2,
+                          top: localCenter.y - localHeight / 2
+                        });
+                      }
                     }
+                    obj.dirty = true;
+                    if (activeObj) activeObj.dirty = true;
+                    obj.setCoords();
+                  } catch {
                   }
-                  obj.dirty = true;
-                  if (activeObj) activeObj.dirty = true;
-                  obj.setCoords();
-                } catch {
-                }
-                finalWidth = bakedW;
-                finalHeight = bakedH;
-                finalScaleX = 1;
-                finalScaleY = 1;
-                try {
-                  absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
-                  absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
-                } catch {
+                  finalWidth = bakedW;
+                  finalHeight = bakedH;
+                  finalScaleX = 1;
+                  finalScaleY = 1;
+                  try {
+                    absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
+                    absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
+                  } catch {
+                  }
+                  finalAbsoluteMatrix = fabric.util.composeMatrix({
+                    translateX: decomposed.translateX,
+                    translateY: decomposed.translateY,
+                    angle: decomposed.angle ?? 0,
+                    scaleX: 1,
+                    scaleY: 1,
+                    skewX: 0,
+                    skewY: 0
+                  });
                 }
-                finalAbsoluteMatrix = fabric.util.composeMatrix({
-                  translateX: decomposed.translateX,
-                  translateY: decomposed.translateY,
-                  angle: decomposed.angle ?? 0,
-                  scaleX: 1,
-                  scaleY: 1,
-                  skewX: 0,
-                  skewY: 0
-                });
               } else {
                 finalWidth = intrinsicWidth;
                 finalHeight = intrinsicHeight;
@@ -16024,6 +16247,44 @@ const PageCanvas = forwardRef(
                 }
               }
             }
+            const isCropGroupObj = obj instanceof fabric.Group && obj.__cropGroup;
+            const isPlainImageObj = obj instanceof fabric.FabricImage && !obj.__cropGroup && !obj.smartElementType;
+            if (isActiveSelection && isActiveSelectionSideHandle && (isCropGroupObj || isPlainImageObj)) {
+              const childLocalAngleSrc = obj.__asLiveOrigAngle != null ? obj.__asLiveOrigAngle : Number.isFinite(sourceElement == null ? void 0 : sourceElement.angle) ? sourceElement.angle ?? 0 : obj.angle ?? 0;
+              const normAng = (childLocalAngleSrc % 360 + 360) % 360;
+              const isRotatedImg = Math.min(normAng, 360 - normAng) > 0.5;
+              if (isRotatedImg && activeObj instanceof fabric.ActiveSelection) {
+                try {
+                  const cleanAngleI = (activeObj.angle ?? 0) + childLocalAngleSrc;
+                  const cleanW = Math.max(1, Number(elementUpdate.width ?? finalWidth));
+                  const cleanH = Math.max(1, Number(elementUpdate.height ?? finalHeight));
+                  const cx = decomposed.translateX ?? absoluteLeft + cleanW / 2;
+                  const cy = decomposed.translateY ?? absoluteTop + cleanH / 2;
+                  const cleanAbsLeft = cx - cleanW / 2;
+                  const cleanAbsTop = cy - cleanH / 2;
+                  const cleanStorePos = absoluteToStorePosition(cleanAbsLeft, cleanAbsTop, objId, pageChildrenForSave);
+                  elementUpdate.left = cleanStorePos.left;
+                  elementUpdate.top = cleanStorePos.top;
+                  elementUpdate.width = cleanW;
+                  elementUpdate.height = cleanH;
+                  elementUpdate.angle = cleanAngleI;
+                  elementUpdate.scaleX = 1;
+                  elementUpdate.scaleY = 1;
+                  elementUpdate.skewX = 0;
+                  elementUpdate.skewY = 0;
+                  elementUpdate.transformMatrix = fabric.util.composeMatrix({
+                    translateX: cx,
+                    translateY: cy,
+                    angle: cleanAngleI,
+                    scaleX: 1,
+                    scaleY: 1,
+                    skewX: 0,
+                    skewY: 0
+                  });
+                } catch {
+                }
+              }
+            }
             if (debugGroupTextCornerResize && obj instanceof fabric.Textbox) {
               logGroupTextResizeDebug("store-update-text", {
                 time: Math.round(performance.now()),
@@ -16184,6 +16445,15 @@ const PageCanvas = forwardRef(
           groupSelectionTransformStartRef.current = null;
           activeSelectionMoveStartRef.current = null;
           activeSelectionResizeHandleRef.current = null;
+          try {
+            const t = e.target;
+            if (t instanceof fabric.ActiveSelection) {
+              for (const child of t.getObjects()) {
+                delete child.__asLiveOrigAngle;
+              }
+            }
+          } catch {
+          }
           setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
           commitHistory();
           unlockEditsSoon();
@@ -25251,9 +25521,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.410";
+const resolvedPackageVersion = "0.5.412";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.410";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.412";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -26067,7 +26337,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 import("./vectorPdfExport-DE2UhH5g.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-pDEJNOs8.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -28387,7 +28657,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-DE2UhH5g.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-pDEJNOs8.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -28787,4 +29057,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-CS_cFpCL.js.map
+//# sourceMappingURL=index-CVR5UGAs.js.map