@pixldocs/canvas-renderer 0.5.329 → 0.5.331

package/dist/{index-_B1EJq7R.cjs → index-COZR9zOa.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,7 @@ const PageCanvas = react.forwardRef(
               const a = ((c.angle ?? 0) % 180 + 180) % 180;
               return !(a < 0.5 || a > 179.5);
             });
-            if (isXSide && ((_b2 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _b2.selection) !== obj) {
+            if ((isXSide || hasRotatedChild) && ((_b2 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _b2.selection) !== obj) {
               groupShiftReflowSnapshotRef.current = null;
               const logicalGroupId = obj.__pixldocsGroupSelection;
               if (logicalGroupId) {
@@ -13770,7 +13773,9 @@ const PageCanvas = react.forwardRef(
                     const entries = obj.getObjects().map((c) => ({
                       obj: c,
                       id: getObjectId(c) ?? "",
+                      left0: c.left ?? 0,
                       top0: c.top ?? 0,
+                      width0: (c.width ?? 0) * Math.abs(c.scaleX ?? 1),
                       height0: (c.height ?? 0) * Math.abs(c.scaleY ?? 1)
                     })).filter((e2) => e2.id).sort((a, b) => a.top0 - b.top0);
                     if (entries.length > 1) {
@@ -13803,22 +13808,87 @@ const PageCanvas = react.forwardRef(
               }
             }
             const childCounterScale = hasRotatedChild ? 1 : 1 / sAxis;
+            const restoreNonTextChildren = (pins) => {
+              var _a3, _b3;
+              if (!hasRotatedChild || ((_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);
+                  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;
+                }
+              }
+            };
+            const projectRotatedTextPosition = (child) => {
+              var _a3;
+              if (!hasRotatedChild || ((_a3 = groupShiftReflowSnapshotRef.current) == null ? void 0 : _a3.selection) !== obj) return;
+              const entry = groupShiftReflowSnapshotRef.current.children.find((candidate) => candidate.obj === child);
+              if (!entry) return;
+              if (isXSide) child._set("left", entry.left0 * sAxis);
+              else child._set("top", entry.top0 * sAxis);
+            };
             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;
+              projectRotatedTextPosition(child);
               if (isXSide) {
                 if (child.__asLiveOrigW == null) {
                   child.__asLiveOrigW = (child.width ?? 0) * (child.scaleX ?? 1);
@@ -13886,10 +13956,12 @@ 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;
               try {
                 obj.triggerLayout();
               } catch {
               }
+              restoreNonTextChildren(nonTextPinsBeforeLayout);
               obj._set("width", asW0);
               obj._set("scaleX", asSx0);
               obj._set("scaleY", asSy0);
@@ -13915,6 +13987,7 @@ const PageCanvas = react.forwardRef(
               obj._set("left", asLeft0);
               obj._set("top", asTop0);
             }
+            restoreNonTextChildren();
             obj._set("width", asW0);
             obj._set("scaleX", asSx0);
             obj._set("scaleY", asSy0);
@@ -14370,8 +14443,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,
@@ -14555,6 +14629,7 @@ const PageCanvas = react.forwardRef(
               return;
             }
           }
+          const isActiveSelectionSideResize = isActiveSelection && (activeSelectionResizeHandle === "ml" || activeSelectionResizeHandle === "mr" || activeSelectionResizeHandle === "mt" || activeSelectionResizeHandle === "mb");
           if (selectedElementIds.length > 0 && !anyCropGroup) {
             const firstObj = activeObjects[0];
             const firstId = getObjectId(firstObj);
@@ -14616,7 +14691,8 @@ const PageCanvas = react.forwardRef(
               }
               const deltaX = movedGroupLeft - groupAbs.left;
               const deltaY = movedGroupTop - groupAbs.top;
-              const hadScale = isActiveSelection && activeObj && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01);
+              const hadResizeHandle = isActiveSelection && !!activeSelectionResizeHandle;
+              const hadScale = isActiveSelection && activeObj && (hadResizeHandle || Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01);
               const startSelAngle = (((transformStart == null ? void 0 : transformStart.selectionAngle) ?? 0) % 360 + 360) % 360;
               const currentSelAngle = isActiveSelection && activeObj ? ((activeObj.angle ?? 0) % 360 + 360) % 360 : 0;
               const angleDelta = Math.min(
@@ -14624,7 +14700,7 @@ const PageCanvas = react.forwardRef(
                 360 - Math.abs(currentSelAngle - startSelAngle)
               );
               const hadRotation = isActiveSelection && activeObj && angleDelta > 0.01;
-              if (!hadScale && !hadRotation && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
+              if (!isActiveSelectionSideResize && !hadScale && !hadRotation && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
                 const { updateNode: updateNodeStore, commitHistory: commitHistoryStore, getCurrentElements } = useEditorStore.getState();
                 const newLeft = (groupToMove.left ?? 0) + deltaX;
                 const newTop = (groupToMove.top ?? 0) + deltaY;
@@ -14730,14 +14806,16 @@ 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;
+              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;
@@ -14764,12 +14842,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,
@@ -15155,9 +15235,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,
@@ -15754,8 +15835,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 });
@@ -16691,8 +16773,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,
@@ -16932,7 +17015,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) {
@@ -24230,9 +24314,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.329";
+const resolvedPackageVersion = "0.5.331";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.329";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.331";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -25046,7 +25130,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-DNaP0TIk.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-07IeD7w3.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -27366,7 +27450,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-DNaP0TIk.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-07IeD7w3.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -27763,4 +27847,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-_B1EJq7R.cjs.map
+//# sourceMappingURL=index-COZR9zOa.cjs.map