@pixldocs/canvas-renderer 0.5.348 → 0.5.350

package/dist/{index-CaQvuDpL.cjs → index-D53PnA7c.cjs}

@@ -10518,6 +10518,102 @@ function bakeEdgeFade(source, fade) {
   }
   return canvas;
 }
+const normalizeSignedAngle = (angle) => (angle % 360 + 540) % 360 - 180;
+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
+  };
+};
+const centerToRotatedTopLeft = (centerX, centerY, width, height, angleDeg = 0) => {
+  const angle = angleDeg * Math.PI / 180;
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  return {
+    left: centerX - width / 2 * cos + height / 2 * sin,
+    top: centerY - width / 2 * sin - height / 2 * cos
+  };
+};
+const getGroupTransformFrame = (group, pageChildren, options) => {
+  const bounds = getNodeBounds(group, pageChildren);
+  const width = Math.max(1, Number(group.width ?? bounds.width) || bounds.width || 1);
+  const height = Math.max(1, Number(group.height ?? bounds.height) || bounds.height || 1);
+  return {
+    left: Number(group.left ?? bounds.left ?? 0) || 0,
+    top: Number(group.top ?? bounds.top ?? 0) || 0,
+    width,
+    height,
+    angle: Number(group.angle ?? 0) || 0
+  };
+};
+const getGroupLocalToParentMatrix = (group, pageChildren, options) => {
+  const frame = getGroupTransformFrame(group, pageChildren);
+  const rad = frame.angle * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return [
+    cos,
+    sin,
+    -sin,
+    cos,
+    frame.left,
+    frame.top
+  ];
+};
+const getAncestorGroupTransform = (nodeId, pageChildren, fabric2, options) => {
+  let matrix = [1, 0, 0, 1, 0, 0];
+  let angle = 0;
+  const chain = [];
+  let currentId = nodeId;
+  for (let guard = 0; guard < 32; guard++) {
+    const parent = findParentGroup(pageChildren, currentId);
+    if (!parent) break;
+    chain.unshift(parent);
+    currentId = parent.id;
+  }
+  for (const group of chain) {
+    matrix = fabric2.util.multiplyTransformMatrices(
+      matrix,
+      getGroupLocalToParentMatrix(group, pageChildren)
+    );
+    angle += Number(group.angle ?? 0) || 0;
+  }
+  return { matrix, angle: normalizeSignedAngle(angle) };
+};
+const getElementFabricPlacement$1 = (element, pageChildren, fabric2, options) => {
+  if (!pageChildren.length) {
+    return { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+  }
+  const ancestor = getAncestorGroupTransform(element.id, pageChildren, fabric2);
+  const point = fabric2.util.transformPoint(
+    new fabric2.Point(element.left ?? 0, element.top ?? 0),
+    ancestor.matrix
+  );
+  return {
+    left: point.x,
+    top: point.y,
+    angle: normalizeSignedAngle(ancestor.angle + Number(element.angle ?? 0))
+  };
+};
+const getGroupAbsoluteTransformFrame$1 = (group, pageChildren, fabric2, options) => {
+  const frame = getGroupTransformFrame(group, pageChildren);
+  const ancestor = getAncestorGroupTransform(group.id, pageChildren, fabric2);
+  const centerLocal = rotatedTopLeftToCenter(frame.left, frame.top, frame.width, frame.height, frame.angle);
+  const center = fabric2.util.transformPoint(new fabric2.Point(centerLocal.x, centerLocal.y), ancestor.matrix);
+  const topLeft = fabric2.util.transformPoint(new fabric2.Point(frame.left, frame.top), ancestor.matrix);
+  return {
+    left: topLeft.x,
+    top: topLeft.y,
+    width: frame.width,
+    height: frame.height,
+    centerX: center.x,
+    centerY: center.y,
+    angle: normalizeSignedAngle(ancestor.angle + frame.angle)
+  };
+};
 const SELECTION_PRIMARY = "hsl(217, 91%, 60%)";
 const SELECTION_BORDER_SCALE = 2;
 let ensureCanvaControlRenders = () => {
@@ -10971,12 +11067,18 @@ try {
       } catch (e) {
       }
     };
-    const origObj = cu.createObjectDefaultControls.bind(cu);
-    cu.createObjectDefaultControls = () => installPillRenders(origObj());
-    if (typeof cu.createTextboxDefaultControls === "function") {
-      const origTb = cu.createTextboxDefaultControls.bind(cu);
-      cu.createTextboxDefaultControls = () => installPillRenders(origTb());
-    }
+    const wrapControlsFactory = (key) => {
+      if (typeof cu[key] !== "function") return;
+      const descriptor = Object.getOwnPropertyDescriptor(cu, key);
+      if (descriptor && descriptor.writable === false && !descriptor.set) return;
+      const original = cu[key].bind(cu);
+      try {
+        cu[key] = () => installPillRenders(original());
+      } catch {
+      }
+    };
+    wrapControlsFactory("createObjectDefaultControls");
+    wrapControlsFactory("createTextboxDefaultControls");
     const wrapClassCreateControls = (Klass) => {
       if (!Klass || typeof Klass.createControls !== "function") return;
       const orig = Klass.createControls.bind(Klass);
@@ -11217,15 +11319,8 @@ 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
-  };
-};
+const getElementFabricPlacement = (element, pageChildren, options) => getElementFabricPlacement$1(element, pageChildren, fabric__namespace);
+const getGroupAbsoluteTransformFrame = (group, pageChildren, options) => getGroupAbsoluteTransformFrame$1(group, pageChildren, fabric__namespace);
 function applyWarpAwareSelectionBorders(selection) {
   var _a2;
   if (selection.__pixldocsOrigASHasBorders !== void 0) {
@@ -11374,13 +11469,13 @@ const PageCanvas = react.forwardRef(
         ));
         const pageChildren2 = ((_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
         const groupNode = findNodeById(pageChildren2, groupId);
-        const groupAngle = groupNode && isGroup(groupNode) ? Number(groupNode.angle ?? 0) : 0;
-        const groupAbs = groupNode && isGroup(groupNode) ? getAbsoluteBounds(groupNode, pageChildren2) : null;
+        const groupFrame = groupNode && isGroup(groupNode) ? getGroupAbsoluteTransformFrame(groupNode, pageChildren2, pageBoundsOptions) : null;
+        const groupAngle = groupFrame ? groupFrame.angle : 0;
         if (Number.isFinite(groupAngle)) {
           selection.set({ angle: groupAngle, scaleX: 1, scaleY: 1, skewX: 0, skewY: 0 });
-          if (groupAbs) {
+          if (groupFrame) {
             selection.setPositionByOrigin(
-              new fabric__namespace.Point(groupAbs.left + groupAbs.width / 2, groupAbs.top + groupAbs.height / 2),
+              new fabric__namespace.Point(groupFrame.centerX, groupFrame.centerY),
               "center",
               "center"
             );
@@ -12353,7 +12448,6 @@ const PageCanvas = react.forwardRef(
       fabricCanvas.__fontCleanup = fontCleanup;
       fabricCanvas.__isUserTransforming = false;
       fabricCanvas.on("mouse:down", () => {
-        groupSelectionTransformStartRef.current = null;
         activeSelectionMoveStartRef.current = null;
         activeSelectionResizeHandleRef.current = null;
         const active = fabricCanvas.getActiveObject();
@@ -12866,7 +12960,8 @@ const PageCanvas = react.forwardRef(
         const pageChildren2 = ((_b2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b2.children) ?? [];
         const groupNode = findNodeById(pageChildren2, groupId);
         if (!groupNode) return;
-        const groupAbs = getAbsoluteBounds(groupNode, pageChildren2);
+        const groupFrame = isGroup(groupNode) ? getGroupAbsoluteTransformFrame(groupNode, pageChildren2) : null;
+        const groupAbs = groupFrame ?? getAbsoluteBounds(groupNode, pageChildren2);
         const rect = active.getBoundingRect();
         const center = active.getCenterPoint();
         groupSelectionTransformStartRef.current = {
@@ -12880,7 +12975,7 @@ const PageCanvas = react.forwardRef(
           groupTop: groupAbs.top,
           groupWidth: groupAbs.width,
           groupHeight: groupAbs.height,
-          selectionAngle: ((active.angle ?? 0) % 360 + 360) % 360
+          selectionAngle: (((groupFrame == null ? void 0 : groupFrame.angle) ?? active.angle ?? 0) % 360 + 360) % 360
         };
       };
       const restoreGroupSelectionVisualState = (selection, groupId) => {
@@ -14850,7 +14945,14 @@ const PageCanvas = react.forwardRef(
             const node = findNodeById(pageChildren2, id);
             return !!(node && isGroup(node));
           });
-          const activeSelectionHadTransform = activeObj instanceof fabric__namespace.ActiveSelection && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01 || Math.abs((activeObj.angle ?? 0) % 360) > 0.01);
+          const activeSelectionHadTransform = activeObj instanceof fabric__namespace.ActiveSelection && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01 || (() => {
+            var _a3;
+            const normAngle = (angle) => (angle % 360 + 360) % 360;
+            const startAngle = ((_a3 = groupSelectionTransformStartRef.current) == null ? void 0 : _a3.selection) === activeObj ? groupSelectionTransformStartRef.current.selectionAngle : 0;
+            const currentAngle = normAngle(activeObj.angle ?? 0);
+            const diff = Math.abs(currentAngle - normAngle(startAngle));
+            return Math.min(diff, 360 - diff) > 1;
+          })());
           if (!anyCropGroup && activeSelectionDelta && !activeSelectionHadTransform && selectedLogicalGroupIds.length > 0) {
             const selectedStoreIds = useEditorStore.getState().canvas.selectedIds ?? [];
             const groupMemberIds = /* @__PURE__ */ new Set();
@@ -14965,7 +15067,7 @@ const PageCanvas = react.forwardRef(
               const storedGroupAngle = normalizeAngle(Number(groupToMove.angle ?? 0));
               const effectiveStartAngle = transformStart ? startSelAngle : storedGroupAngle;
               const angleDelta = shortestAngleDelta(currentSelAngle, effectiveStartAngle);
-              const hadRotation = isActiveSelection && activeObj && angleDelta > 0.01;
+              const hadRotation = isActiveSelection && activeObj && angleDelta > 1;
               if (activeGroupSelectionId === groupToMove.id && hadRotation && !hadScale && !activeSelectionResizeHandle && activeObj instanceof fabric__namespace.ActiveSelection) {
                 const { updateNode: updateNodeStore, commitHistory: commitHistoryStore, getCurrentElements } = useEditorStore.getState();
                 const center = activeObj.getCenterPoint();
@@ -15052,7 +15154,7 @@ const PageCanvas = react.forwardRef(
           const logicalGroupSelectionId = activeObj instanceof fabric__namespace.ActiveSelection ? activeObj.__pixldocsGroupSelection : void 0;
           const isLogicalGroupAS = !!logicalGroupSelectionId && !(activeObj == null ? void 0 : activeObj.__cropGroup) && !(activeObj == null ? void 0 : activeObj.__docuforgeSectionGroup);
           const logicalGroupNodeForBake = logicalGroupSelectionId ? findNodeById(pageChildren2, logicalGroupSelectionId) : null;
-          const asAngleForBake = isLogicalGroupAS && activeObj ? normalizeAngle(Number((logicalGroupNodeForBake == null ? void 0 : logicalGroupNodeForBake.angle) ?? activeObj.angle ?? 0)) : 0;
+          const asAngleForBake = isLogicalGroupAS && activeObj ? normalizeAngle(Number(activeObj.angle ?? 0)) : 0;
           const logicalGroupFinalFrame = (() => {
             var _a3;
             if (!isLogicalGroupAS || !logicalGroupSelectionId || !(activeObj instanceof fabric__namespace.ActiveSelection)) return null;
@@ -15060,10 +15162,11 @@ const PageCanvas = react.forwardRef(
             const localWidth = Math.max(1, (activeObj.width ?? (baseline == null ? void 0 : baseline.groupWidth) ?? 1) * Math.abs(activeObj.scaleX ?? 1));
             const localHeight = Math.max(1, (activeObj.height ?? (baseline == null ? void 0 : baseline.groupHeight) ?? 1) * Math.abs(activeObj.scaleY ?? 1));
             const center = activeObj.getCenterPoint();
+            const topLeft = centerToRotatedTopLeft(center.x, center.y, localWidth, localHeight, asAngleForBake);
             return {
               groupId: logicalGroupSelectionId,
-              left: center.x - localWidth / 2,
-              top: center.y - localHeight / 2,
+              left: topLeft.left,
+              top: topLeft.top,
               width: localWidth,
               height: localHeight,
               centerX: center.x,
@@ -15125,16 +15228,15 @@ const PageCanvas = react.forwardRef(
             modifiedIdsThisRound.add(objId);
             let absoluteLeft;
             let absoluteTop;
-            if (isActiveSelection && activeObj) {
-              const selectionMatrix = activeObj.calcTransformMatrix();
-              const relativePoint = { x: obj.left ?? 0, y: obj.top ?? 0 };
-              const absolutePoint = fabric__namespace.util.transformPoint(relativePoint, selectionMatrix);
-              absoluteLeft = absolutePoint.x;
-              absoluteTop = absolutePoint.y;
-            } else {
-              absoluteLeft = obj.left ?? 0;
-              absoluteTop = obj.top ?? 0;
-            }
+            const initialTopLeft = centerToRotatedTopLeft(
+              decomposed.translateX ?? (obj.left ?? 0),
+              decomposed.translateY ?? (obj.top ?? 0),
+              intrinsicWidth * Math.abs(decomposed.scaleX || 1),
+              intrinsicHeight * Math.abs(decomposed.scaleY || 1),
+              decomposed.angle ?? 0
+            );
+            absoluteLeft = initialTopLeft.left;
+            absoluteTop = initialTopLeft.top;
             if (obj instanceof fabric__namespace.Group && obj.__cropGroup) {
               const ct = obj.__cropData;
               if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
@@ -16218,7 +16320,7 @@ const PageCanvas = react.forwardRef(
                 const nextHeight = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.height) || 50);
                 const storePosImg = pageChildren ? (() => {
                   const node = findNodeById(pageChildren, element.id);
-                  return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                  return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
                 })() : { left: element.left ?? 0, top: element.top ?? 0 };
                 const elementForPlaceholder = { ...element, width: nextWidth, height: nextHeight };
                 const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(elementForPlaceholder) : createImagePlaceholder(elementForPlaceholder);
@@ -16281,14 +16383,14 @@ const PageCanvas = react.forwardRef(
                     }
                     const cropPos = pageChildren ? (() => {
                       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 cropCenter = rotatedTopLeftToCenter(cropPos.left, cropPos.top, ct.frameW ?? 0, ct.frameH ?? 0, element.angle ?? 0);
+                      return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+                    })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+                    const cropCenter = rotatedTopLeftToCenter(cropPos.left, cropPos.top, ct.frameW ?? 0, ct.frameH ?? 0, cropPos.angle ?? 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 });
+                    existingObj.set({ angle: cropPos.angle ?? element.angle ?? 0 });
                     existingObj.set({
                       flipX: element.flipX ?? false,
                       flipY: element.flipY ?? false
@@ -16411,8 +16513,8 @@ const PageCanvas = react.forwardRef(
                 if (isPlaceholderGroup) {
                   const storePosImg = pageChildren ? (() => {
                     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 };
+                    return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+                  })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
                   const resolvedSizeImg = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
                   const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
                   const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
@@ -16426,7 +16528,7 @@ const PageCanvas = react.forwardRef(
                     top: storePosImg.top + nextHeight / 2,
                     originX: "center",
                     originY: "center",
-                    angle: element.angle ?? 0,
+                    angle: storePosImg.angle ?? element.angle ?? 0,
                     opacity: isHidden ? 0 : element.opacity ?? 1,
                     flipX: element.flipX ?? false,
                     flipY: element.flipY ?? false,
@@ -16475,8 +16577,8 @@ const PageCanvas = react.forwardRef(
                 const visibilityChanged = previousVisible !== currentVisible;
                 const storePosForImg = pageChildren ? (() => {
                   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 };
+                  return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+                })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
                 const positionChanged = Math.abs((existingObj.left ?? 0) - storePosForImg.left) > 0.1 || Math.abs((existingObj.top ?? 0) - storePosForImg.top) > 0.1;
                 if (visibilityChanged && !positionChanged || visibilityUpdateInProgressRef.current) {
                   const isDynamicField = dynamicFieldIds.includes(element.id);
@@ -16518,7 +16620,7 @@ const PageCanvas = react.forwardRef(
                 const fabricTop = existingObj.top ?? 0;
                 const storePos = pageChildren ? (() => {
                   const node = findNodeById(pageChildren, element.id);
-                  return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                  return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
                 })() : { left: element.left ?? 0, top: element.top ?? 0 };
                 const storeLeft = storePos.left;
                 const storeTop = storePos.top;
@@ -16645,7 +16747,7 @@ const PageCanvas = react.forwardRef(
               setObjectData(placeholder, element.id);
               const absPosImg = pageTree.length > 0 ? (() => {
                 const node = findNodeById(pageTree, element.id);
-                return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
+                return node && isElement(node) ? getElementFabricPlacement(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
               })() : { left: element.left ?? 0, top: element.top ?? 0 };
               const placeholderWidth = Number((placeholder.width ?? 0) * (placeholder.scaleX ?? 1));
               const placeholderHeight = Number((placeholder.height ?? 0) * (placeholder.scaleY ?? 1));
@@ -16694,7 +16796,7 @@ const PageCanvas = react.forwardRef(
               if (obj) {
                 const absPos = pageTree.length > 0 ? (() => {
                   const node = findNodeById(pageTree, element.id);
-                  return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
+                  return node && isElement(node) ? getElementFabricPlacement(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
                 })() : { left: element.left ?? 0, top: element.top ?? 0 };
                 obj.set({ left: absPos.left, top: absPos.top });
                 obj.setCoords();
@@ -17182,8 +17284,8 @@ const PageCanvas = react.forwardRef(
       const currentPageTree = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
       const fabricPos = currentPageTree.length > 0 ? (() => {
         const node = findNodeById(currentPageTree, element.id);
-        return node ? getAbsoluteBounds(node, currentPageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
-      })() : { left: element.left ?? 0, top: element.top ?? 0 };
+        return node && isElement(node) ? getElementFabricPlacement(node, currentPageTree) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+      })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
       const resolvedSize = currentPageTree.length > 0 ? getNodeBounds(element, currentPageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
       const shouldPreserveSmallSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
       const minVisible = shouldPreserveSmallSize ? 1 : 20;
@@ -18252,14 +18354,14 @@ const PageCanvas = react.forwardRef(
             const pageTreeForCreate = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_f = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _f.children) ?? [];
             const createPos = pageTreeForCreate.length > 0 ? (() => {
               const node = findNodeById(pageTreeForCreate, element.id);
-              return node ? getAbsoluteBounds(node, pageTreeForCreate) : { left: element.left ?? 0, top: element.top ?? 0 };
-            })() : { left: element.left ?? 0, top: element.top ?? 0 };
+              return node && isElement(node) ? getElementFabricPlacement(node, pageTreeForCreate, pageBoundsOptions) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+            })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
             img.set({
               left: createPos.left,
               top: createPos.top,
               scaleX: finalScaleX,
               scaleY: finalScaleY,
-              angle: element.angle ?? 0,
+              angle: createPos.angle ?? element.angle ?? 0,
               skewX: element.skewX ?? 0,
               skewY: element.skewY ?? 0,
               flipX: element.flipX ?? false,
@@ -18346,8 +18448,8 @@ const PageCanvas = react.forwardRef(
           const pageTreeForCrop = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_n = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _n.children) ?? [];
           const createPosForCrop = pageTreeForCrop.length > 0 ? (() => {
             const node = findNodeById(pageTreeForCrop, element.id);
-            return node ? getAbsoluteBounds(node, pageTreeForCrop) : { left: element.left ?? 0, top: element.top ?? 0 };
-          })() : { left: element.left ?? 0, top: element.top ?? 0 };
+            return node && isElement(node) ? getElementFabricPlacement(node, pageTreeForCrop, pageBoundsOptions) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
+          })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
           const nodeForCreate = pageTreeForCrop.length ? findNodeById(pageTreeForCrop, element.id) : null;
           const createW = nodeForCreate && isElement(nodeForCreate) ? nodeForCreate.width : elementWidth;
           const createH = nodeForCreate && isElement(nodeForCreate) ? nodeForCreate.height : elementHeight;
@@ -18355,8 +18457,9 @@ const PageCanvas = react.forwardRef(
           const createSy = nodeForCreate && isElement(nodeForCreate) ? nodeForCreate.scaleY ?? 1 : element.scaleY ?? 1;
           const frameW = Math.max(1, Number(createW) || 200) * createSx;
           const frameH = Math.max(1, Number(createH) || 50) * createSy;
-          const createCenterX = createPosForCrop.left + frameW / 2;
-          const createCenterY = createPosForCrop.top + frameH / 2;
+          const createCenter = rotatedTopLeftToCenter(createPosForCrop.left, createPosForCrop.top, frameW, frameH, createPosForCrop.angle ?? element.angle ?? 0);
+          const createCenterX = createCenter.x;
+          const createCenterY = createCenter.y;
           const cropGroup = await createMaskedImageElement({
             image: img,
             frameW,
@@ -18369,7 +18472,7 @@ const PageCanvas = react.forwardRef(
             strokeWidth: 0,
             left: createCenterX,
             top: createCenterY,
-            angle: element.angle ?? 0,
+            angle: createPosForCrop.angle ?? element.angle ?? 0,
             opacity: isHidden ? 0 : element.opacity ?? 1,
             selectable: allowSelection && !isHidden,
             evented: canBeEvented && !isHidden,
@@ -24759,9 +24862,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.348";
+const resolvedPackageVersion = "0.5.350";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.348";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.350";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -25575,7 +25678,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-IeTP9Bi1.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-CsJ_SHet.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -27895,7 +27998,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-IeTP9Bi1.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-CsJ_SHet.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -28292,4 +28395,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-CaQvuDpL.cjs.map
+//# sourceMappingURL=index-D53PnA7c.cjs.map