@pixldocs/canvas-renderer 0.5.411 → 0.5.413

package/dist/{index-BzO7hSG5.cjs → index-xSOFCztI.cjs}

@@ -15206,7 +15206,6 @@ const PageCanvas = react.forwardRef(
                 delete child.__asLiveOrigW;
                 delete child.__asLiveOrigH;
                 delete child.__asLiveRotSnap;
-                delete child.__asLiveOrigAngle;
               }
             }
           } catch {
@@ -15769,48 +15768,99 @@ const PageCanvas = react.forwardRef(
             if (obj instanceof fabric__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.FabricImage) {
@@ -15836,79 +15886,130 @@ 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 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__namespace.ActiveSelection) {
+                  const asSx = Math.abs(activeObj.scaleX ?? 1);
+                  const asSy = Math.abs(activeObj.scaleY ?? 1);
+                  const axisScale = imgIsXSide ? asSx : asSy;
+                  const thetaI = fabric__namespace.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__namespace.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__namespace.util.transformPoint(preBakeCenter, fabric__namespace.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__namespace.util.transformPoint(preBakeCenter, fabric__namespace.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__namespace.util.composeMatrix({
+                    translateX: decomposed.translateX,
+                    translateY: decomposed.translateY,
+                    angle: decomposed.angle ?? 0,
+                    scaleX: 1,
+                    scaleY: 1,
+                    skewX: 0,
+                    skewY: 0
+                  });
                 }
-                finalAbsoluteMatrix = fabric__namespace.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;
@@ -16164,6 +16265,45 @@ const PageCanvas = react.forwardRef(
                 }
               }
             }
+            const isCropGroupObj = obj instanceof fabric__namespace.Group && obj.__cropGroup;
+            const isPlainImageObj = obj instanceof fabric__namespace.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__namespace.ActiveSelection) {
+                try {
+                  const cleanAngleI = childLocalAngleSrc;
+                  const worldAngleI = (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__namespace.util.composeMatrix({
+                    translateX: cx,
+                    translateY: cy,
+                    angle: worldAngleI,
+                    scaleX: 1,
+                    scaleY: 1,
+                    skewX: 0,
+                    skewY: 0
+                  });
+                } catch {
+                }
+              }
+            }
             if (debugGroupTextCornerResize && obj instanceof fabric__namespace.Textbox) {
               logGroupTextResizeDebug("store-update-text", {
                 time: Math.round(performance.now()),
@@ -16324,6 +16464,15 @@ const PageCanvas = react.forwardRef(
           groupSelectionTransformStartRef.current = null;
           activeSelectionMoveStartRef.current = null;
           activeSelectionResizeHandleRef.current = null;
+          try {
+            const t = e.target;
+            if (t instanceof fabric__namespace.ActiveSelection) {
+              for (const child of t.getObjects()) {
+                delete child.__asLiveOrigAngle;
+              }
+            }
+          } catch {
+          }
           setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
           commitHistory();
           unlockEditsSoon();
@@ -25391,9 +25540,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.411";
+const resolvedPackageVersion = "0.5.413";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.411";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.413";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -26207,7 +26356,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-DUaCeIGH.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-2r6G4ALY.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -28527,7 +28676,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-DUaCeIGH.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-2r6G4ALY.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -28924,4 +29073,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-BzO7hSG5.cjs.map
+//# sourceMappingURL=index-xSOFCztI.cjs.map