@pixldocs/canvas-renderer 0.5.395 → 0.5.397

package/dist/{index-apZqfLuE.cjs → index-BgYo0VtS.cjs}

@@ -125,6 +125,7 @@ const createDefaultGroup = (partial) => ({
   locked: false,
   left: 0,
   top: 0,
+  angle: 0,
   ...partial
 });
 const PAGE_BACKGROUND_ELEMENT_ID = "__pageBackground__";
@@ -847,9 +848,17 @@ function getNodeBounds(node, pageChildren, options) {
   let width;
   let height;
   if (isGroup(node) && (pageChildren == null ? void 0 : pageChildren.length) !== void 0) {
-    const size = groupBoundsFromChildren(node, pageChildren ?? []);
-    width = size.width;
-    height = size.height;
+    const group = node;
+    const storedWidth = Number(group.width);
+    const storedHeight = Number(group.height);
+    if (!isStackLayoutMode(group.layoutMode) && storedWidth > 0 && storedHeight > 0) {
+      width = storedWidth;
+      height = storedHeight;
+    } else {
+      const size = groupBoundsFromChildren(group, pageChildren ?? []);
+      width = size.width;
+      height = size.height;
+    }
   } else {
     width = simpleWidth(node);
     height = simpleHeight(node);
@@ -10524,6 +10533,115 @@ const normalizeAngle180 = (angle) => {
   const n = (angle % 360 + 360) % 360;
   return n > 180 ? n - 360 : n;
 };
+const isValidLogicalGroupFrame = (frame) => !!frame && Number.isFinite(frame.left) && Number.isFinite(frame.top) && Number.isFinite(frame.width) && frame.width > 0 && Number.isFinite(frame.height) && frame.height > 0;
+const frameFromStoredGroupNode = (group, pageChildren, options) => {
+  const width = Number(group.width);
+  const height = Number(group.height);
+  if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) return null;
+  try {
+    const abs = getAbsoluteBounds(group, pageChildren, options);
+    return { left: abs.left, top: abs.top, width, height };
+  } catch {
+    return null;
+  }
+};
+const orientedFrameFromWorldPoints = (points, angle) => {
+  if (points.length === 0 || !Number.isFinite(angle)) return null;
+  const rad = -angle * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of points) {
+    const xr = p.x * cos - p.y * sin;
+    const yr = p.x * sin + p.y * cos;
+    minX = Math.min(minX, xr);
+    minY = Math.min(minY, yr);
+    maxX = Math.max(maxX, xr);
+    maxY = Math.max(maxY, yr);
+  }
+  if (![minX, minY, maxX, maxY].every(Number.isFinite)) return null;
+  const width = Math.max(1, maxX - minX);
+  const height = Math.max(1, maxY - minY);
+  const centerXRot = minX + width / 2;
+  const centerYRot = minY + height / 2;
+  const back = angle * Math.PI / 180;
+  const c = Math.cos(back);
+  const s = Math.sin(back);
+  const centerX = centerXRot * c - centerYRot * s;
+  const centerY = centerXRot * s + centerYRot * c;
+  return { left: centerX - width / 2, top: centerY - height / 2, width, height };
+};
+const collectFabricObjectWorldPoints = (objects) => {
+  const points = [];
+  for (const obj of objects) {
+    try {
+      obj.setCoords();
+    } catch {
+    }
+    const coords = typeof obj.getCoords === "function" ? obj.getCoords() : null;
+    if (Array.isArray(coords) && coords.length) {
+      points.push(...coords.map((p) => ({ x: p.x, y: p.y })));
+      continue;
+    }
+    const aC = obj.aCoords;
+    if (!aC) continue;
+    for (const key of ["tl", "tr", "br", "bl"]) {
+      const p = aC[key];
+      if (p) points.push({ x: p.x, y: p.y });
+    }
+  }
+  return points;
+};
+const collectFabricObjectWorldCenters = (objects) => {
+  var _a2;
+  const centers = [];
+  for (const obj of objects) {
+    try {
+      obj.setCoords();
+    } catch {
+    }
+    const coords = typeof obj.getCoords === "function" ? obj.getCoords() : null;
+    if (Array.isArray(coords) && coords.length >= 4) {
+      const pts = coords.slice(0, 4).map((p) => ({ x: Number(p.x), y: Number(p.y) })).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+      if (pts.length) centers.push({ x: pts.reduce((sum, p) => sum + p.x, 0) / pts.length, y: pts.reduce((sum, p) => sum + p.y, 0) / pts.length });
+      continue;
+    }
+    try {
+      const center = (_a2 = obj.getCenterPoint) == null ? void 0 : _a2.call(obj);
+      if (center && Number.isFinite(center.x) && Number.isFinite(center.y)) centers.push({ x: center.x, y: center.y });
+    } catch {
+    }
+  }
+  return centers;
+};
+const logicalFrameContainsWorldCenters = (frame, angle, centers) => {
+  if (!isValidLogicalGroupFrame(frame) || centers.length === 0) return true;
+  const a = typeof angle === "number" && Number.isFinite(angle) ? normalizeAngle180(angle) : 0;
+  const cx = frame.left + frame.width / 2;
+  const cy = frame.top + frame.height / 2;
+  const rad = -a * Math.PI / 180;
+  const c = Math.cos(rad);
+  const s = Math.sin(rad);
+  const tolerance = Math.max(8, Math.min(frame.width, frame.height) * 0.08);
+  return centers.every((p) => {
+    const dx = p.x - cx;
+    const dy = p.y - cy;
+    const localX = cx + dx * c - dy * s;
+    const localY = cy + dx * s + dy * c;
+    return localX >= frame.left - tolerance && localX <= frame.left + frame.width + tolerance && localY >= frame.top - tolerance && localY <= frame.top + frame.height + tolerance;
+  });
+};
+const shouldRepairUnrotatedLogicalGroupFrame = (storedFrame, contentFrame, angle) => {
+  if (!isValidLogicalGroupFrame(storedFrame) || !isValidLogicalGroupFrame(contentFrame)) return false;
+  if (Math.abs(normalizeAngle180(typeof angle === "number" && Number.isFinite(angle) ? angle : 0)) > 0.5) return false;
+  const storedArea = storedFrame.width * storedFrame.height;
+  const contentArea = contentFrame.width * contentFrame.height;
+  const areaRatio = storedArea / Math.max(1, contentArea);
+  const dx = Math.abs(storedFrame.left + storedFrame.width / 2 - (contentFrame.left + contentFrame.width / 2));
+  const dy = Math.abs(storedFrame.top + storedFrame.height / 2 - (contentFrame.top + contentFrame.height / 2));
+  const driftTolerance = Math.max(12, Math.min(storedFrame.width, storedFrame.height) * 0.08);
+  return areaRatio > 1.35 || dx > driftTolerance || dy > driftTolerance;
+};
 let ensureCanvaControlRenders = () => {
 };
 try {
@@ -11517,13 +11635,40 @@ function applyWarpAwareSelectionBorders(selection, preferredGroupAngle, preferre
         for (const b of buckets) b.area = orientedAreaForAngle(b.angle);
         buckets.sort((a, b) => b.count - a.count || a.area - b.area || Math.abs(b.angle) - Math.abs(a.angle));
         const dominant = buckets[0];
-        const rawPreferredGroupAngle = typeof preferredGroupAngle === "number" && Number.isFinite(preferredGroupAngle) ? preferredGroupAngle : typeof selection.__pixldocsGroupAngle === "number" && Number.isFinite(selection.__pixldocsGroupAngle) ? selection.__pixldocsGroupAngle : null;
+        let effectivePreferredGroupAngle = preferredGroupAngle;
+        let effectivePreferredGroupFrame = preferredGroupFrame;
+        const logicalGroupId = selection.__pixldocsGroupSelection;
+        if (logicalGroupId && (!(typeof effectivePreferredGroupAngle === "number" && Number.isFinite(effectivePreferredGroupAngle)) || !isValidLogicalGroupFrame(effectivePreferredGroupFrame))) {
+          try {
+            const stateNow = useEditorStore.getState();
+            const pageNow = stateNow.canvas.pages.find((p) => p.id === stateNow.canvas.currentPageId);
+            const groupNode = pageNow ? findNodeById(pageNow.children ?? [], logicalGroupId) : null;
+            if (groupNode && isGroup(groupNode)) {
+              if (!(typeof effectivePreferredGroupAngle === "number" && Number.isFinite(effectivePreferredGroupAngle)) && typeof groupNode.angle === "number") {
+                effectivePreferredGroupAngle = groupNode.angle;
+              }
+              if (!isValidLogicalGroupFrame(effectivePreferredGroupFrame)) {
+                effectivePreferredGroupFrame = frameFromStoredGroupNode(groupNode, (pageNow == null ? void 0 : pageNow.children) ?? []);
+              }
+            }
+          } catch {
+          }
+        }
+        const rawPreferredGroupAngle = typeof effectivePreferredGroupAngle === "number" && Number.isFinite(effectivePreferredGroupAngle) ? effectivePreferredGroupAngle : typeof selection.__pixldocsGroupAngle === "number" && Number.isFinite(selection.__pixldocsGroupAngle) ? selection.__pixldocsGroupAngle : null;
         const preferredAngle = rawPreferredGroupAngle != null ? normalizeAngle180(rawPreferredGroupAngle) : null;
         let targetAngle = preferredAngle;
-        const isLogicalGroupSelection = !!selection.__pixldocsGroupSelection;
+        const isLogicalGroupSelection = !!logicalGroupId;
         if (targetAngle == null && dominant && Math.abs(dominant.angle) > 0.5 && (isLogicalGroupSelection || kids.length === 1 || dominant.count >= 2 || dominant.count === kids.length)) {
           targetAngle = dominant.angle;
         }
+        if (isLogicalGroupSelection && isValidLogicalGroupFrame(effectivePreferredGroupFrame) && targetAngle != null) {
+          const contentFrame = orientedFrameFromWorldPoints(worldPoints, targetAngle);
+          if (shouldRepairUnrotatedLogicalGroupFrame(effectivePreferredGroupFrame, contentFrame, targetAngle)) {
+            effectivePreferredGroupFrame = contentFrame;
+          } else if (!logicalFrameContainsWorldCenters(effectivePreferredGroupFrame, targetAngle, collectFabricObjectWorldCenters(kids))) {
+            effectivePreferredGroupFrame = null;
+          }
+        }
         if (targetAngle != null) {
           const restoreKidsFromWorld = () => {
             const invSelection = fabric__namespace.util.invertTransform(
@@ -11562,7 +11707,7 @@ function applyWarpAwareSelectionBorders(selection, preferredGroupAngle, preferre
             targetAngle,
             worldAngles
           });
-          const fixedFrame = preferredGroupFrame && Number.isFinite(preferredGroupFrame.left) && Number.isFinite(preferredGroupFrame.top) && Number.isFinite(preferredGroupFrame.width) && preferredGroupFrame.width > 0 && Number.isFinite(preferredGroupFrame.height) && preferredGroupFrame.height > 0 ? preferredGroupFrame : null;
+          const fixedFrame = effectivePreferredGroupFrame && Number.isFinite(effectivePreferredGroupFrame.left) && Number.isFinite(effectivePreferredGroupFrame.top) && Number.isFinite(effectivePreferredGroupFrame.width) && effectivePreferredGroupFrame.width > 0 && Number.isFinite(effectivePreferredGroupFrame.height) && effectivePreferredGroupFrame.height > 0 ? effectivePreferredGroupFrame : null;
           selection.set({ angle: targetAngle, scaleX: 1, scaleY: 1, skewX: 0, skewY: 0 });
           if (fixedFrame) {
             selection.set({ width: fixedFrame.width, height: fixedFrame.height, originX: "center", originY: "center" });
@@ -11680,11 +11825,18 @@ const PageCanvas = react.forwardRef(
       const pageNow = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId);
       const groupNode = pageNow ? findNodeById(pageNow.children ?? [], groupId) : null;
       let groupAngle = groupNode && isGroup(groupNode) && typeof groupNode.angle === "number" ? groupNode.angle : void 0;
+      const members = selection.getObjects();
+      if (groupAngle === void 0 && groupNode && isGroup(groupNode)) {
+        const storedW = Number(groupNode.width);
+        const storedH = Number(groupNode.height);
+        if (storedW > 0 && storedH > 0) {
+          groupAngle = 0;
+        }
+      }
       if (groupAngle === void 0 && groupNode && isGroup(groupNode)) {
         try {
-          const kids = selection.getObjects();
           const selectionMatrix = selection.calcTransformMatrix();
-          const worldAngles = kids.map((kid) => normalizeAngle180(fabric__namespace.util.qrDecompose(
+          const worldAngles = members.map((kid) => normalizeAngle180(fabric__namespace.util.qrDecompose(
             fabric__namespace.util.multiplyTransformMatrices(
               selectionMatrix,
               kid.calcOwnMatrix()
@@ -11700,15 +11852,50 @@ const PageCanvas = react.forwardRef(
           const inferredAngle = (_a2 = buckets[0]) == null ? void 0 : _a2.angle;
           if (typeof inferredAngle === "number" && Number.isFinite(inferredAngle) && Math.abs(inferredAngle) > 0.01) {
             groupAngle = inferredAngle;
-            useEditorStore.getState().updateNode(
-              groupId,
-              { angle: inferredAngle },
-              { recordHistory: false, skipLayoutRecalc: true }
-            );
           }
         } catch {
         }
       }
+      let groupFrame = groupNode && isGroup(groupNode) ? frameFromStoredGroupNode(groupNode, (pageNow == null ? void 0 : pageNow.children) ?? []) : null;
+      let groupFrameWasInferred = false;
+      const memberWorldPoints = collectFabricObjectWorldPoints(members);
+      const memberWorldCenters = collectFabricObjectWorldCenters(members);
+      const contentFrame = typeof groupAngle === "number" && Number.isFinite(groupAngle) ? orientedFrameFromWorldPoints(memberWorldPoints, normalizeAngle180(groupAngle)) : null;
+      if (shouldRepairUnrotatedLogicalGroupFrame(groupFrame, contentFrame, groupAngle)) {
+        groupFrame = contentFrame;
+        groupFrameWasInferred = true;
+      } else if (groupFrame && !logicalFrameContainsWorldCenters(groupFrame, groupAngle, memberWorldCenters)) {
+        groupFrame = null;
+      }
+      if (!groupFrame && groupNode && isGroup(groupNode) && typeof groupAngle === "number" && Number.isFinite(groupAngle)) {
+        groupFrame = contentFrame ?? orientedFrameFromWorldPoints(memberWorldPoints, normalizeAngle180(groupAngle));
+        groupFrameWasInferred = isValidLogicalGroupFrame(groupFrame);
+      }
+      if (groupNode && isGroup(groupNode)) {
+        const updates = {};
+        if (typeof groupAngle === "number" && Number.isFinite(groupAngle)) {
+          const prevAngle = typeof groupNode.angle === "number" ? groupNode.angle : void 0;
+          if (prevAngle === void 0 || Math.abs(normalizeAngle180(prevAngle - groupAngle)) > 0.01) {
+            updates.angle = normalizeAngle180(groupAngle);
+          }
+        }
+        if (isValidLogicalGroupFrame(groupFrame)) {
+          const prevW = Number(groupNode.width);
+          const prevH = Number(groupNode.height);
+          if (!Number.isFinite(prevW) || Math.abs(prevW - groupFrame.width) > 0.5) updates.width = groupFrame.width;
+          if (!Number.isFinite(prevH) || Math.abs(prevH - groupFrame.height) > 0.5) updates.height = groupFrame.height;
+          if (groupFrameWasInferred) {
+            const storePos = absoluteToStorePosition(groupFrame.left, groupFrame.top, groupId, (pageNow == null ? void 0 : pageNow.children) ?? []);
+            const prevLeft = Number(groupNode.left ?? 0);
+            const prevTop = Number(groupNode.top ?? 0);
+            if (!Number.isFinite(prevLeft) || Math.abs(prevLeft - storePos.left) > 0.5) updates.left = storePos.left;
+            if (!Number.isFinite(prevTop) || Math.abs(prevTop - storePos.top) > 0.5) updates.top = storePos.top;
+          }
+        }
+        if (Object.keys(updates).length > 0) {
+          useEditorStore.getState().updateNode(groupId, updates, { recordHistory: false, skipLayoutRecalc: true });
+        }
+      }
       if (groupAngle !== void 0) {
         selection.__pixldocsGroupAngle = groupAngle;
         const aligned = selection.__pixldocsAlignedAngle;
@@ -11719,7 +11906,6 @@ const PageCanvas = react.forwardRef(
         delete selection.__pixldocsGroupAngle;
       }
       selection.hasBorders = true;
-      const members = selection.getObjects();
       for (const prev of suppressGroupMemberBordersRef.current) {
         if (members.includes(prev)) continue;
         const origBorders = prev.__pixldocsOrigHasBorders;
@@ -11751,21 +11937,6 @@ const PageCanvas = react.forwardRef(
           m.lockScalingY = false;
         }
       }
-      const groupFrame = groupNode && isGroup(groupNode) ? (() => {
-        try {
-          const abs = getAbsoluteBounds(groupNode, (pageNow == null ? void 0 : pageNow.children) ?? []);
-          const storedW = Number(groupNode.width);
-          const storedH = Number(groupNode.height);
-          return {
-            left: abs.left,
-            top: abs.top,
-            width: Number.isFinite(storedW) && storedW > 0 ? storedW : abs.width,
-            height: Number.isFinite(storedH) && storedH > 0 ? storedH : abs.height
-          };
-        } catch {
-          return null;
-        }
-      })() : null;
       applyWarpAwareSelectionBorders(selection, groupAngle, groupFrame);
     }, [pageId]);
     const pageBoundsOptions = react.useMemo(
@@ -13334,16 +13505,18 @@ const PageCanvas = react.forwardRef(
         const groupNode = findNodeById(pageChildren2, groupId);
         if (!groupNode) return;
         const groupAbs = getAbsoluteBounds(groupNode, pageChildren2);
+        const storedGroupFrame = groupNode && isGroup(groupNode) ? frameFromStoredGroupNode(groupNode, pageChildren2, pageBoundsOptions) : null;
+        const groupFrame = storedGroupFrame ?? groupAbs;
         const rect = active.getBoundingRect();
         groupSelectionTransformStartRef.current = {
           groupId,
           selection: active,
           selectionLeft: rect.left,
           selectionTop: rect.top,
-          groupLeft: groupAbs.left,
-          groupTop: groupAbs.top,
-          groupWidth: groupAbs.width,
-          groupHeight: groupAbs.height,
+          groupLeft: groupFrame.left,
+          groupTop: groupFrame.top,
+          groupWidth: groupFrame.width,
+          groupHeight: groupFrame.height,
           selectionAngle: ((active.angle ?? 0) % 360 + 360) % 360
         };
         logRotDriftSelectionSnapshot("transform-start", active, {
@@ -15480,13 +15653,37 @@ const PageCanvas = react.forwardRef(
                 360 - Math.abs(currentSelAngle - startSelAngle)
               );
               const hadRotation = isActiveSelection && activeObj && angleDelta > 0.01;
-              if (hadRotation && activeObj instanceof fabric__namespace.ActiveSelection && activeGroupSelectionId === groupToMove.id) {
-                useEditorStore.getState().updateNode(
-                  groupToMove.id,
-                  { angle: currentSelAngle },
-                  { recordHistory: false, skipLayoutRecalc: true }
-                );
-                activeObj.__pixldocsGroupAngle = currentSelAngle;
+              if ((hadScale || hadRotation) && activeObj instanceof fabric__namespace.ActiveSelection && activeGroupSelectionId === groupToMove.id) {
+                const groupTransformUpdates = {};
+                if (hadRotation) {
+                  groupTransformUpdates.angle = normalizeAngle180(currentSelAngle);
+                  activeObj.__pixldocsGroupAngle = groupTransformUpdates.angle;
+                }
+                if (hadScale && (transformStart == null ? void 0 : transformStart.groupId) === groupToMove.id) {
+                  const center = activeObj.getCenterPoint();
+                  const nextWidth = Math.max(1, transformStart.groupWidth * Math.abs(activeObj.scaleX ?? 1));
+                  const nextHeight = Math.max(1, transformStart.groupHeight * Math.abs(activeObj.scaleY ?? 1));
+                  const storePos = absoluteToStorePosition(
+                    center.x - nextWidth / 2,
+                    center.y - nextHeight / 2,
+                    groupToMove.id,
+                    pageChildren2
+                  );
+                  groupTransformUpdates.left = storePos.left;
+                  groupTransformUpdates.top = storePos.top;
+                  groupTransformUpdates.width = nextWidth;
+                  groupTransformUpdates.height = nextHeight;
+                } else if (!Number.isFinite(Number(groupToMove.width)) || !Number.isFinite(Number(groupToMove.height))) {
+                  groupTransformUpdates.width = (transformStart == null ? void 0 : transformStart.groupWidth) ?? groupAbs.width;
+                  groupTransformUpdates.height = (transformStart == null ? void 0 : transformStart.groupHeight) ?? groupAbs.height;
+                }
+                if (Object.keys(groupTransformUpdates).length > 0) {
+                  useEditorStore.getState().updateNode(
+                    groupToMove.id,
+                    groupTransformUpdates,
+                    { recordHistory: false, skipLayoutRecalc: true }
+                  );
+                }
               }
               if (!hadScale && !hadRotation && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
                 const { updateNode: updateNodeStore, commitHistory: commitHistoryStore, getCurrentElements } = useEditorStore.getState();
@@ -25240,9 +25437,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.395";
+const resolvedPackageVersion = "0.5.397";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.395";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.397";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -26056,7 +26253,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-BFZzT33a.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-o6mqay90.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -28376,7 +28573,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-BFZzT33a.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-o6mqay90.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -28773,4 +28970,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-apZqfLuE.cjs.map
+//# sourceMappingURL=index-BgYo0VtS.cjs.map