@pixldocs/canvas-renderer 0.5.330 → 0.5.332

package/dist/{index-DyarJoo_.cjs → index-B9Lpo1N6.cjs}

@@ -11178,6 +11178,15 @@ const bakeTextboxScaleIntoTypography = (obj, sourceElement) => {
   };
   return updates;
 };
+const rotatedTopLeftToCenter = (left, top, width, height, angleDeg = 0) => {
+  const angle = angleDeg * Math.PI / 180;
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  return {
+    x: left + width / 2 * cos - height / 2 * sin,
+    y: top + width / 2 * sin + height / 2 * cos
+  };
+};
 function applyWarpAwareSelectionBorders(selection) {
   var _a2;
   if (selection.__pixldocsOrigASHasBorders !== void 0) {
@@ -13540,29 +13549,23 @@ const PageCanvas = react.forwardRef(
       const getObjectFrameBoundsInSelection = (selection, obj, frameWidth, frameHeight) => {
         const w = Math.max(1, frameWidth ?? obj.width ?? 1);
         const h = Math.max(1, frameHeight ?? obj.height ?? 1);
-        const originX = obj.originX ?? "left";
-        const originY = obj.originY ?? "top";
-        const localLeft = originX === "center" ? -w / 2 : originX === "right" ? -w : 0;
-        const localTop = originY === "center" ? -h / 2 : originY === "bottom" ? -h : 0;
         const matrix = fabric__namespace.util.multiplyTransformMatrices(
           selection.calcTransformMatrix(),
           obj.calcOwnMatrix()
         );
-        const points = [
-          new fabric__namespace.Point(localLeft, localTop),
-          new fabric__namespace.Point(localLeft + w, localTop),
-          new fabric__namespace.Point(localLeft + w, localTop + h),
-          new fabric__namespace.Point(localLeft, localTop + h)
-        ].map((point) => fabric__namespace.util.transformPoint(point, matrix));
-        const xs = points.map((p) => p.x);
-        const ys = points.map((p) => p.y);
-        const left = Math.min(...xs);
-        const top = Math.min(...ys);
+        const decomposed = fabric__namespace.util.qrDecompose(matrix);
+        const scaledW = Math.max(1, w * Math.abs(decomposed.scaleX || 1));
+        const scaledH = Math.max(1, h * Math.abs(decomposed.scaleY || 1));
+        const angleRad = (decomposed.angle ?? 0) * Math.PI / 180;
+        const cos = Math.cos(angleRad);
+        const sin = Math.sin(angleRad);
+        const left = decomposed.translateX - scaledW / 2 * cos + scaledH / 2 * sin;
+        const top = decomposed.translateY - scaledW / 2 * sin - scaledH / 2 * cos;
         return {
           left,
           top,
-          width: Math.max(1, Math.max(...xs) - left),
-          height: Math.max(1, Math.max(...ys) - top)
+          width: scaledW,
+          height: scaledH
         };
       };
       fabricCanvas.on("object:added", (e) => {
@@ -13758,7 +13761,10 @@ 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;
+            if ((isXSide || shouldPinNonTextChildren) && ((_b2 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _b2.selection) !== obj) {
               groupShiftReflowSnapshotRef.current = null;
               const logicalGroupId = obj.__pixldocsGroupSelection;
               if (logicalGroupId) {
@@ -13805,16 +13811,31 @@ 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;
+                  }
                   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);
@@ -13834,17 +13855,54 @@ 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 ct = child.__cropData;
+                if (ct) {
+                  if (child.__asLiveOrigW == null) {
+                    child.__asLiveOrigW = ct.frameW ?? child.width ?? 1;
+                  }
+                  if (child.__asLiveOrigH == null) {
+                    child.__asLiveOrigH = ct.frameH ?? child.height ?? 1;
+                  }
+                  if (isXSide) {
+                    const newW = Math.max(1, Number(child.__asLiveOrigW) * sAxis);
+                    ct.frameW = newW;
+                    child._set("width", newW);
+                  } else {
+                    const newH = Math.max(1, Number(child.__asLiveOrigH) * sAxis);
+                    ct.frameH = newH;
+                    child._set("height", newH);
+                  }
+                  try {
+                    updateCoverLayout(child);
+                  } catch {
+                  }
+                }
                 if (isXSide) child._set("scaleX", childCounterScale);
                 else child._set("scaleY", childCounterScale);
                 child.setCoords();
                 child.dirty = true;
+                didReflowTextChild = true;
                 continue;
               }
               if (child instanceof fabric__namespace.FabricImage && !child.__cropGroup && !child.smartElementType) {
+                if (isXSide) {
+                  if (child.__asLiveOrigW == null) {
+                    child.__asLiveOrigW = (child.width ?? 0) * Math.abs(child.scaleX ?? 1);
+                  }
+                  const newW = Math.max(1, Number(child.__asLiveOrigW) * sAxis);
+                  child._set("width", newW);
+                } else {
+                  if (child.__asLiveOrigH == null) {
+                    child.__asLiveOrigH = (child.height ?? 0) * Math.abs(child.scaleY ?? 1);
+                  }
+                  const newH = Math.max(1, Number(child.__asLiveOrigH) * sAxis);
+                  child._set("height", newH);
+                }
                 if (isXSide) child._set("scaleX", childCounterScale);
                 else child._set("scaleY", childCounterScale);
                 child.setCoords();
                 child.dirty = true;
+                didReflowTextChild = true;
                 continue;
               }
               if (!(child instanceof fabric__namespace.Textbox)) continue;
@@ -13883,7 +13941,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;
@@ -13916,12 +13974,17 @@ 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;
               obj._set("width", asW0);
               obj._set("scaleX", asSx0);
               obj._set("scaleY", asSy0);
@@ -13947,7 +14010,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);
@@ -14403,8 +14466,9 @@ const PageCanvas = react.forwardRef(
                   const stateCrop = useEditorStore.getState();
                   const pageCrop = stateCrop.canvas.pages.find((p) => p.id === pageId);
                   const pageChildrenCrop = (pageCrop == null ? void 0 : pageCrop.children) ?? [];
-                  const absLeft = (active.left ?? 0) - ct.frameW / 2;
-                  const absTop = (active.top ?? 0) - ct.frameH / 2;
+                  const angleRad = (active.angle ?? 0) * Math.PI / 180;
+                  const absLeft = (active.left ?? 0) - ct.frameW / 2 * Math.cos(angleRad) + ct.frameH / 2 * Math.sin(angleRad);
+                  const absTop = (active.top ?? 0) - ct.frameW / 2 * Math.sin(angleRad) - ct.frameH / 2 * Math.cos(angleRad);
                   const storePosCrop = absoluteToStorePosition(absLeft, absTop, objId, pageChildrenCrop);
                   updateElement2(objId, {
                     width: ct.frameW,
@@ -14765,14 +14829,22 @@ const PageCanvas = react.forwardRef(
               } else {
                 const w = ((ct == null ? void 0 : ct.frameW) ?? obj.width ?? 0) * Math.abs(obj.scaleX ?? 1);
                 const h = ((ct == null ? void 0 : ct.frameH) ?? obj.height ?? 0) * Math.abs(obj.scaleY ?? 1);
-                absoluteLeft = (absoluteLeft ?? 0) - w / 2;
-                absoluteTop = (absoluteTop ?? 0) - h / 2;
+                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);
               }
             } 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);
-              absoluteLeft = (absoluteLeft ?? 0) - w / 2;
-              absoluteTop = (absoluteTop ?? 0) - h / 2;
+              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;
@@ -14799,12 +14871,14 @@ const PageCanvas = react.forwardRef(
                   absoluteLeft = frameBounds.left;
                   absoluteTop = frameBounds.top;
                 } else {
-                  absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
-                  absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
+                  const angleRad = (decomposed.angle ?? obj.angle ?? 0) * Math.PI / 180;
+                  absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2 * Math.cos(angleRad) + finalHeight / 2 * Math.sin(angleRad);
+                  absoluteTop = (decomposed.translateY ?? absoluteTop) - finalWidth / 2 * Math.sin(angleRad) - finalHeight / 2 * Math.cos(angleRad);
                 }
+                const finalCenter = rotatedTopLeftToCenter(absoluteLeft, absoluteTop, finalWidth, finalHeight, decomposed.angle ?? (obj.angle ?? 0));
                 finalAbsoluteMatrix = fabric__namespace.util.composeMatrix({
-                  translateX: absoluteLeft + finalWidth / 2,
-                  translateY: absoluteTop + finalHeight / 2,
+                  translateX: finalCenter.x,
+                  translateY: finalCenter.y,
                   angle: decomposed.angle ?? (obj.angle ?? 0),
                   scaleX: 1,
                   scaleY: 1,
@@ -15190,9 +15264,10 @@ const PageCanvas = react.forwardRef(
               if (!ct) continue;
               ct.frameW = bake.width;
               ct.frameH = bake.height;
+              const bakeCenter = rotatedTopLeftToCenter(bake.left, bake.top, bake.width, bake.height, bake.angle);
               bake.obj.set({
-                left: bake.left + bake.width / 2,
-                top: bake.top + bake.height / 2,
+                left: bakeCenter.x,
+                top: bakeCenter.y,
                 width: bake.width,
                 height: bake.height,
                 scaleX: 1,
@@ -15789,8 +15864,9 @@ const PageCanvas = react.forwardRef(
                       const node = findNodeById(pageChildren, element.id);
                       return node ? getAbsoluteBounds(node, pageChildren) : { 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;
+                    const cropCenter = rotatedTopLeftToCenter(cropPos.left, cropPos.top, ct.frameW ?? 0, ct.frameH ?? 0, element.angle ?? 0);
+                    const cropCenterX = cropCenter.x;
+                    const cropCenterY = cropCenter.y;
                     if (element.left !== void 0) existingObj.set({ left: cropCenterX });
                     if (element.top !== void 0) existingObj.set({ top: cropCenterY });
                     if (element.angle !== void 0) existingObj.set({ angle: element.angle });
@@ -16726,8 +16802,9 @@ const PageCanvas = react.forwardRef(
           ct.shape = clipShape === "circle" ? "circle" : clipShape === "rounded" ? "roundRect" : "rect";
           ct.rx = rxRatio;
           obj.__maintainResolution = element.maintainResolution !== false;
-          const centerX = fabricPos.left + elementWidth / 2;
-          const centerY = fabricPos.top + elementHeight / 2;
+          const center = rotatedTopLeftToCenter(fabricPos.left, fabricPos.top, elementWidth, elementHeight, element.angle ?? 0);
+          const centerX = center.x;
+          const centerY = center.y;
           const cropSetProps = {
             width: elementWidth,
             height: elementHeight,
@@ -16967,7 +17044,8 @@ const PageCanvas = react.forwardRef(
         if (!skipPositionUpdate && (obj instanceof fabric__namespace.FabricImage && obj.originX === "center" || obj instanceof fabric__namespace.Group && obj.__cropGroup)) {
           const vW = rW * effectiveScaleX;
           const vH = rH * effectiveScaleY;
-          posIfNotSkipped = { left: fabricPos.left + vW / 2, top: fabricPos.top + vH / 2 };
+          const center = rotatedTopLeftToCenter(fabricPos.left, fabricPos.top, vW, vH, element.angle ?? 0);
+          posIfNotSkipped = { left: center.x, top: center.y };
         }
         if (element.transformMatrix && element.transformMatrix.length === 6) {
           if (isTextbox) {
@@ -24265,9 +24343,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.330";
+const resolvedPackageVersion = "0.5.332";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.330";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.332";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -25081,7 +25159,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-CJBVK7bd.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BnF6Lk4i.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -27401,7 +27479,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-CJBVK7bd.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BnF6Lk4i.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -27798,4 +27876,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-DyarJoo_.cjs.map
+//# sourceMappingURL=index-B9Lpo1N6.cjs.map