@pixldocs/canvas-renderer 0.5.347 → 0.5.349

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11208,6 +11208,95 @@ const rotatedTopLeftToCenter = (left, top, width, height, angleDeg = 0) => {
11208
11208
  y: top + width / 2 * sin + height / 2 * cos
11209
11209
  };
11210
11210
  };
11211
+ const normalizeSignedAngle = (angle) => (angle % 360 + 540) % 360 - 180;
11212
+ const getGroupTransformFrame = (group, pageChildren, options) => {
11213
+ const bounds = getNodeBounds(group, pageChildren);
11214
+ const width = Math.max(1, Number(group.width ?? bounds.width) || bounds.width || 1);
11215
+ const height = Math.max(1, Number(group.height ?? bounds.height) || bounds.height || 1);
11216
+ return {
11217
+ left: Number(group.left ?? bounds.left ?? 0) || 0,
11218
+ top: Number(group.top ?? bounds.top ?? 0) || 0,
11219
+ width,
11220
+ height,
11221
+ angle: Number(group.angle ?? 0) || 0
11222
+ };
11223
+ };
11224
+ const getGroupLocalToParentMatrix = (group, pageChildren, options) => {
11225
+ const frame = getGroupTransformFrame(group, pageChildren);
11226
+ const rad = frame.angle * Math.PI / 180;
11227
+ const cos = Math.cos(rad);
11228
+ const sin = Math.sin(rad);
11229
+ const centerX = frame.left + frame.width / 2;
11230
+ const centerY = frame.top + frame.height / 2;
11231
+ return [
11232
+ cos,
11233
+ sin,
11234
+ -sin,
11235
+ cos,
11236
+ centerX - cos * frame.width / 2 + sin * frame.height / 2,
11237
+ centerY - sin * frame.width / 2 - cos * frame.height / 2
11238
+ ];
11239
+ };
11240
+ const getAncestorGroupTransform = (nodeId, pageChildren, options) => {
11241
+ let matrix = [1, 0, 0, 1, 0, 0];
11242
+ let angle = 0;
11243
+ const chain = [];
11244
+ let currentId = nodeId;
11245
+ for (let guard = 0; guard < 32; guard++) {
11246
+ const parent = findParentGroup(pageChildren, currentId);
11247
+ if (!parent) break;
11248
+ chain.unshift(parent);
11249
+ currentId = parent.id;
11250
+ }
11251
+ for (const group of chain) {
11252
+ matrix = fabric.util.multiplyTransformMatrices(
11253
+ matrix,
11254
+ getGroupLocalToParentMatrix(group, pageChildren)
11255
+ );
11256
+ angle += Number(group.angle ?? 0) || 0;
11257
+ }
11258
+ return { matrix, angle: normalizeSignedAngle(angle) };
11259
+ };
11260
+ const getElementFabricPlacement = (element, pageChildren, options) => {
11261
+ if (!pageChildren.length) {
11262
+ return { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
11263
+ }
11264
+ const ancestor = getAncestorGroupTransform(element.id, pageChildren);
11265
+ const point = fabric.util.transformPoint(
11266
+ new fabric.Point(element.left ?? 0, element.top ?? 0),
11267
+ ancestor.matrix
11268
+ );
11269
+ return {
11270
+ left: point.x,
11271
+ top: point.y,
11272
+ angle: normalizeSignedAngle(ancestor.angle + Number(element.angle ?? 0))
11273
+ };
11274
+ };
11275
+ const centerToRotatedTopLeft = (centerX, centerY, width, height, angleDeg = 0) => {
11276
+ const angle = angleDeg * Math.PI / 180;
11277
+ const cos = Math.cos(angle);
11278
+ const sin = Math.sin(angle);
11279
+ return {
11280
+ left: centerX - width / 2 * cos + height / 2 * sin,
11281
+ top: centerY - width / 2 * sin - height / 2 * cos
11282
+ };
11283
+ };
11284
+ const getGroupAbsoluteTransformFrame = (group, pageChildren, options) => {
11285
+ const frame = getGroupTransformFrame(group, pageChildren);
11286
+ const ancestor = getAncestorGroupTransform(group.id, pageChildren);
11287
+ const centerLocal = rotatedTopLeftToCenter(frame.left, frame.top, frame.width, frame.height, frame.angle);
11288
+ const center = fabric.util.transformPoint(new fabric.Point(centerLocal.x, centerLocal.y), ancestor.matrix);
11289
+ const topLeft = fabric.util.transformPoint(new fabric.Point(frame.left, frame.top), ancestor.matrix);
11290
+ return {
11291
+ left: topLeft.x,
11292
+ top: topLeft.y,
11293
+ width: frame.width,
11294
+ height: frame.height,
11295
+ centerX: center.x,
11296
+ centerY: center.y,
11297
+ angle: normalizeSignedAngle(ancestor.angle + frame.angle)
11298
+ };
11299
+ };
11211
11300
  function applyWarpAwareSelectionBorders(selection) {
11212
11301
  var _a2;
11213
11302
  if (selection.__pixldocsOrigASHasBorders !== void 0) {
@@ -11348,19 +11437,37 @@ const PageCanvas = forwardRef(
11348
11437
  delete selection.__pixldocsLogicalGroupIds;
11349
11438
  selection.hasBorders = true;
11350
11439
  try {
11440
+ const membersBeforeFrame = selection.getObjects();
11441
+ const selectionMatrixBefore = selection.calcTransformMatrix();
11442
+ const memberWorldMatrices = membersBeforeFrame.map((member) => fabric.util.multiplyTransformMatrices(
11443
+ selectionMatrixBefore,
11444
+ member.calcOwnMatrix()
11445
+ ));
11351
11446
  const pageChildren2 = ((_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
11352
11447
  const groupNode = findNodeById(pageChildren2, groupId);
11353
- const groupAngle = groupNode && isGroup(groupNode) ? Number(groupNode.angle ?? 0) : 0;
11354
- const groupAbs = groupNode && isGroup(groupNode) ? getAbsoluteBounds(groupNode, pageChildren2) : null;
11355
- if (Number.isFinite(groupAngle) && Math.abs(groupAngle) > 0.01) {
11448
+ const groupFrame = groupNode && isGroup(groupNode) ? getGroupAbsoluteTransformFrame(groupNode, pageChildren2, pageBoundsOptions) : null;
11449
+ const groupAngle = groupFrame ? groupFrame.angle : 0;
11450
+ if (Number.isFinite(groupAngle)) {
11356
11451
  selection.set({ angle: groupAngle, scaleX: 1, scaleY: 1, skewX: 0, skewY: 0 });
11357
- if (groupAbs) {
11452
+ if (groupFrame) {
11358
11453
  selection.setPositionByOrigin(
11359
- new fabric.Point(groupAbs.left + groupAbs.width / 2, groupAbs.top + groupAbs.height / 2),
11454
+ new fabric.Point(groupFrame.centerX, groupFrame.centerY),
11360
11455
  "center",
11361
11456
  "center"
11362
11457
  );
11363
11458
  }
11459
+ const invSelectionAfter = fabric.util.invertTransform(
11460
+ selection.calcTransformMatrix()
11461
+ );
11462
+ membersBeforeFrame.forEach((member, index) => {
11463
+ const localMatrix = fabric.util.multiplyTransformMatrices(
11464
+ invSelectionAfter,
11465
+ memberWorldMatrices[index]
11466
+ );
11467
+ fabric.util.applyTransformToObject(member, localMatrix);
11468
+ member.setCoords();
11469
+ member.dirty = true;
11470
+ });
11364
11471
  selection.setCoords();
11365
11472
  }
11366
11473
  } catch {
@@ -12830,9 +12937,10 @@ const PageCanvas = forwardRef(
12830
12937
  const pageChildren2 = ((_b2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b2.children) ?? [];
12831
12938
  const groupNode = findNodeById(pageChildren2, groupId);
12832
12939
  if (!groupNode) return;
12833
- const groupAbs = getAbsoluteBounds(groupNode, pageChildren2);
12940
+ const groupFrame = isGroup(groupNode) ? getGroupAbsoluteTransformFrame(groupNode, pageChildren2) : null;
12941
+ const groupAbs = groupFrame ?? getAbsoluteBounds(groupNode, pageChildren2);
12834
12942
  const rect = active.getBoundingRect();
12835
- const center = active.getCenterPoint();
12943
+ const center = groupFrame ? new fabric.Point(groupFrame.centerX, groupFrame.centerY) : active.getCenterPoint();
12836
12944
  groupSelectionTransformStartRef.current = {
12837
12945
  groupId,
12838
12946
  selection: active,
@@ -12844,7 +12952,7 @@ const PageCanvas = forwardRef(
12844
12952
  groupTop: groupAbs.top,
12845
12953
  groupWidth: groupAbs.width,
12846
12954
  groupHeight: groupAbs.height,
12847
- selectionAngle: ((active.angle ?? 0) % 360 + 360) % 360
12955
+ selectionAngle: (((groupFrame == null ? void 0 : groupFrame.angle) ?? active.angle ?? 0) % 360 + 360) % 360
12848
12956
  };
12849
12957
  };
12850
12958
  const restoreGroupSelectionVisualState = (selection, groupId) => {
@@ -15016,7 +15124,7 @@ const PageCanvas = forwardRef(
15016
15124
  const logicalGroupSelectionId = activeObj instanceof fabric.ActiveSelection ? activeObj.__pixldocsGroupSelection : void 0;
15017
15125
  const isLogicalGroupAS = !!logicalGroupSelectionId && !(activeObj == null ? void 0 : activeObj.__cropGroup) && !(activeObj == null ? void 0 : activeObj.__docuforgeSectionGroup);
15018
15126
  const logicalGroupNodeForBake = logicalGroupSelectionId ? findNodeById(pageChildren2, logicalGroupSelectionId) : null;
15019
- const asAngleForBake = isLogicalGroupAS && activeObj ? normalizeAngle(Number((logicalGroupNodeForBake == null ? void 0 : logicalGroupNodeForBake.angle) ?? activeObj.angle ?? 0)) : 0;
15127
+ const asAngleForBake = isLogicalGroupAS && activeObj ? normalizeAngle(Number(activeObj.angle ?? 0)) : 0;
15020
15128
  const logicalGroupFinalFrame = (() => {
15021
15129
  var _a3;
15022
15130
  if (!isLogicalGroupAS || !logicalGroupSelectionId || !(activeObj instanceof fabric.ActiveSelection)) return null;
@@ -15024,10 +15132,11 @@ const PageCanvas = forwardRef(
15024
15132
  const localWidth = Math.max(1, (activeObj.width ?? (baseline == null ? void 0 : baseline.groupWidth) ?? 1) * Math.abs(activeObj.scaleX ?? 1));
15025
15133
  const localHeight = Math.max(1, (activeObj.height ?? (baseline == null ? void 0 : baseline.groupHeight) ?? 1) * Math.abs(activeObj.scaleY ?? 1));
15026
15134
  const center = activeObj.getCenterPoint();
15135
+ const topLeft = centerToRotatedTopLeft(center.x, center.y, localWidth, localHeight, asAngleForBake);
15027
15136
  return {
15028
15137
  groupId: logicalGroupSelectionId,
15029
- left: center.x - localWidth / 2,
15030
- top: center.y - localHeight / 2,
15138
+ left: topLeft.left,
15139
+ top: topLeft.top,
15031
15140
  width: localWidth,
15032
15141
  height: localHeight,
15033
15142
  centerX: center.x,
@@ -15089,16 +15198,15 @@ const PageCanvas = forwardRef(
15089
15198
  modifiedIdsThisRound.add(objId);
15090
15199
  let absoluteLeft;
15091
15200
  let absoluteTop;
15092
- if (isActiveSelection && activeObj) {
15093
- const selectionMatrix = activeObj.calcTransformMatrix();
15094
- const relativePoint = { x: obj.left ?? 0, y: obj.top ?? 0 };
15095
- const absolutePoint = fabric.util.transformPoint(relativePoint, selectionMatrix);
15096
- absoluteLeft = absolutePoint.x;
15097
- absoluteTop = absolutePoint.y;
15098
- } else {
15099
- absoluteLeft = obj.left ?? 0;
15100
- absoluteTop = obj.top ?? 0;
15101
- }
15201
+ const initialTopLeft = centerToRotatedTopLeft(
15202
+ decomposed.translateX ?? (obj.left ?? 0),
15203
+ decomposed.translateY ?? (obj.top ?? 0),
15204
+ intrinsicWidth * Math.abs(decomposed.scaleX || 1),
15205
+ intrinsicHeight * Math.abs(decomposed.scaleY || 1),
15206
+ decomposed.angle ?? 0
15207
+ );
15208
+ absoluteLeft = initialTopLeft.left;
15209
+ absoluteTop = initialTopLeft.top;
15102
15210
  if (obj instanceof fabric.Group && obj.__cropGroup) {
15103
15211
  const ct = obj.__cropData;
15104
15212
  if (isActiveSelection && activeObj instanceof fabric.ActiveSelection) {
@@ -15517,9 +15625,13 @@ const PageCanvas = forwardRef(
15517
15625
  skewX: isLineObj ? 0 : finalSkewX,
15518
15626
  skewY: isLineObj ? 0 : finalSkewY,
15519
15627
  scaleX: finalScaleX,
15520
- scaleY: finalScaleY,
15521
- transformMatrix: finalAbsoluteMatrix
15628
+ scaleY: finalScaleY
15522
15629
  };
15630
+ if (!isLogicalGroupAS) {
15631
+ elementUpdate.transformMatrix = finalAbsoluteMatrix;
15632
+ } else {
15633
+ elementUpdate.transformMatrix = void 0;
15634
+ }
15523
15635
  if (obj instanceof fabric.Textbox) {
15524
15636
  const bakedTextScaleUpdates = obj.__pixldocsBakedTextScaleUpdates;
15525
15637
  if (bakedTextScaleUpdates && typeof bakedTextScaleUpdates === "object") {
@@ -16178,7 +16290,7 @@ const PageCanvas = forwardRef(
16178
16290
  const nextHeight = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.height) || 50);
16179
16291
  const storePosImg = pageChildren ? (() => {
16180
16292
  const node = findNodeById(pageChildren, element.id);
16181
- return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16293
+ return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16182
16294
  })() : { left: element.left ?? 0, top: element.top ?? 0 };
16183
16295
  const elementForPlaceholder = { ...element, width: nextWidth, height: nextHeight };
16184
16296
  const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(elementForPlaceholder) : createImagePlaceholder(elementForPlaceholder);
@@ -16241,14 +16353,14 @@ const PageCanvas = forwardRef(
16241
16353
  }
16242
16354
  const cropPos = pageChildren ? (() => {
16243
16355
  const node = findNodeById(pageChildren, element.id);
16244
- return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16245
- })() : { left: element.left ?? 0, top: element.top ?? 0 };
16246
- const cropCenter = rotatedTopLeftToCenter(cropPos.left, cropPos.top, ct.frameW ?? 0, ct.frameH ?? 0, element.angle ?? 0);
16356
+ return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
16357
+ })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
16358
+ const cropCenter = rotatedTopLeftToCenter(cropPos.left, cropPos.top, ct.frameW ?? 0, ct.frameH ?? 0, cropPos.angle ?? element.angle ?? 0);
16247
16359
  const cropCenterX = cropCenter.x;
16248
16360
  const cropCenterY = cropCenter.y;
16249
16361
  if (element.left !== void 0) existingObj.set({ left: cropCenterX });
16250
16362
  if (element.top !== void 0) existingObj.set({ top: cropCenterY });
16251
- if (element.angle !== void 0) existingObj.set({ angle: element.angle });
16363
+ existingObj.set({ angle: cropPos.angle ?? element.angle ?? 0 });
16252
16364
  existingObj.set({
16253
16365
  flipX: element.flipX ?? false,
16254
16366
  flipY: element.flipY ?? false
@@ -16371,8 +16483,8 @@ const PageCanvas = forwardRef(
16371
16483
  if (isPlaceholderGroup) {
16372
16484
  const storePosImg = pageChildren ? (() => {
16373
16485
  const node = findNodeById(pageChildren, element.id);
16374
- return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16375
- })() : { left: element.left ?? 0, top: element.top ?? 0 };
16486
+ return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
16487
+ })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
16376
16488
  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 };
16377
16489
  const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
16378
16490
  const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
@@ -16386,7 +16498,7 @@ const PageCanvas = forwardRef(
16386
16498
  top: storePosImg.top + nextHeight / 2,
16387
16499
  originX: "center",
16388
16500
  originY: "center",
16389
- angle: element.angle ?? 0,
16501
+ angle: storePosImg.angle ?? element.angle ?? 0,
16390
16502
  opacity: isHidden ? 0 : element.opacity ?? 1,
16391
16503
  flipX: element.flipX ?? false,
16392
16504
  flipY: element.flipY ?? false,
@@ -16435,8 +16547,8 @@ const PageCanvas = forwardRef(
16435
16547
  const visibilityChanged = previousVisible !== currentVisible;
16436
16548
  const storePosForImg = pageChildren ? (() => {
16437
16549
  const node = findNodeById(pageChildren, element.id);
16438
- return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16439
- })() : { left: element.left ?? 0, top: element.top ?? 0 };
16550
+ return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
16551
+ })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
16440
16552
  const positionChanged = Math.abs((existingObj.left ?? 0) - storePosForImg.left) > 0.1 || Math.abs((existingObj.top ?? 0) - storePosForImg.top) > 0.1;
16441
16553
  if (visibilityChanged && !positionChanged || visibilityUpdateInProgressRef.current) {
16442
16554
  const isDynamicField = dynamicFieldIds.includes(element.id);
@@ -16478,7 +16590,7 @@ const PageCanvas = forwardRef(
16478
16590
  const fabricTop = existingObj.top ?? 0;
16479
16591
  const storePos = pageChildren ? (() => {
16480
16592
  const node = findNodeById(pageChildren, element.id);
16481
- return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16593
+ return node && isElement(node) ? getElementFabricPlacement(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
16482
16594
  })() : { left: element.left ?? 0, top: element.top ?? 0 };
16483
16595
  const storeLeft = storePos.left;
16484
16596
  const storeTop = storePos.top;
@@ -16605,7 +16717,7 @@ const PageCanvas = forwardRef(
16605
16717
  setObjectData(placeholder, element.id);
16606
16718
  const absPosImg = pageTree.length > 0 ? (() => {
16607
16719
  const node = findNodeById(pageTree, element.id);
16608
- return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
16720
+ return node && isElement(node) ? getElementFabricPlacement(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
16609
16721
  })() : { left: element.left ?? 0, top: element.top ?? 0 };
16610
16722
  const placeholderWidth = Number((placeholder.width ?? 0) * (placeholder.scaleX ?? 1));
16611
16723
  const placeholderHeight = Number((placeholder.height ?? 0) * (placeholder.scaleY ?? 1));
@@ -16654,7 +16766,7 @@ const PageCanvas = forwardRef(
16654
16766
  if (obj) {
16655
16767
  const absPos = pageTree.length > 0 ? (() => {
16656
16768
  const node = findNodeById(pageTree, element.id);
16657
- return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
16769
+ return node && isElement(node) ? getElementFabricPlacement(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
16658
16770
  })() : { left: element.left ?? 0, top: element.top ?? 0 };
16659
16771
  obj.set({ left: absPos.left, top: absPos.top });
16660
16772
  obj.setCoords();
@@ -17142,8 +17254,8 @@ const PageCanvas = forwardRef(
17142
17254
  const currentPageTree = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
17143
17255
  const fabricPos = currentPageTree.length > 0 ? (() => {
17144
17256
  const node = findNodeById(currentPageTree, element.id);
17145
- return node ? getAbsoluteBounds(node, currentPageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
17146
- })() : { left: element.left ?? 0, top: element.top ?? 0 };
17257
+ return node && isElement(node) ? getElementFabricPlacement(node, currentPageTree) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
17258
+ })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
17147
17259
  const resolvedSize = currentPageTree.length > 0 ? getNodeBounds(element, currentPageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
17148
17260
  const shouldPreserveSmallSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
17149
17261
  const minVisible = shouldPreserveSmallSize ? 1 : 20;
@@ -18212,14 +18324,14 @@ const PageCanvas = forwardRef(
18212
18324
  const pageTreeForCreate = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_f = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _f.children) ?? [];
18213
18325
  const createPos = pageTreeForCreate.length > 0 ? (() => {
18214
18326
  const node = findNodeById(pageTreeForCreate, element.id);
18215
- return node ? getAbsoluteBounds(node, pageTreeForCreate) : { left: element.left ?? 0, top: element.top ?? 0 };
18216
- })() : { left: element.left ?? 0, top: element.top ?? 0 };
18327
+ return node && isElement(node) ? getElementFabricPlacement(node, pageTreeForCreate, pageBoundsOptions) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
18328
+ })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
18217
18329
  img.set({
18218
18330
  left: createPos.left,
18219
18331
  top: createPos.top,
18220
18332
  scaleX: finalScaleX,
18221
18333
  scaleY: finalScaleY,
18222
- angle: element.angle ?? 0,
18334
+ angle: createPos.angle ?? element.angle ?? 0,
18223
18335
  skewX: element.skewX ?? 0,
18224
18336
  skewY: element.skewY ?? 0,
18225
18337
  flipX: element.flipX ?? false,
@@ -18306,8 +18418,8 @@ const PageCanvas = forwardRef(
18306
18418
  const pageTreeForCrop = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_n = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _n.children) ?? [];
18307
18419
  const createPosForCrop = pageTreeForCrop.length > 0 ? (() => {
18308
18420
  const node = findNodeById(pageTreeForCrop, element.id);
18309
- return node ? getAbsoluteBounds(node, pageTreeForCrop) : { left: element.left ?? 0, top: element.top ?? 0 };
18310
- })() : { left: element.left ?? 0, top: element.top ?? 0 };
18421
+ return node && isElement(node) ? getElementFabricPlacement(node, pageTreeForCrop, pageBoundsOptions) : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
18422
+ })() : { left: element.left ?? 0, top: element.top ?? 0, angle: element.angle ?? 0 };
18311
18423
  const nodeForCreate = pageTreeForCrop.length ? findNodeById(pageTreeForCrop, element.id) : null;
18312
18424
  const createW = nodeForCreate && isElement(nodeForCreate) ? nodeForCreate.width : elementWidth;
18313
18425
  const createH = nodeForCreate && isElement(nodeForCreate) ? nodeForCreate.height : elementHeight;
@@ -18315,8 +18427,9 @@ const PageCanvas = forwardRef(
18315
18427
  const createSy = nodeForCreate && isElement(nodeForCreate) ? nodeForCreate.scaleY ?? 1 : element.scaleY ?? 1;
18316
18428
  const frameW = Math.max(1, Number(createW) || 200) * createSx;
18317
18429
  const frameH = Math.max(1, Number(createH) || 50) * createSy;
18318
- const createCenterX = createPosForCrop.left + frameW / 2;
18319
- const createCenterY = createPosForCrop.top + frameH / 2;
18430
+ const createCenter = rotatedTopLeftToCenter(createPosForCrop.left, createPosForCrop.top, frameW, frameH, createPosForCrop.angle ?? element.angle ?? 0);
18431
+ const createCenterX = createCenter.x;
18432
+ const createCenterY = createCenter.y;
18320
18433
  const cropGroup = await createMaskedImageElement({
18321
18434
  image: img,
18322
18435
  frameW,
@@ -18329,7 +18442,7 @@ const PageCanvas = forwardRef(
18329
18442
  strokeWidth: 0,
18330
18443
  left: createCenterX,
18331
18444
  top: createCenterY,
18332
- angle: element.angle ?? 0,
18445
+ angle: createPosForCrop.angle ?? element.angle ?? 0,
18333
18446
  opacity: isHidden ? 0 : element.opacity ?? 1,
18334
18447
  selectable: allowSelection && !isHidden,
18335
18448
  evented: canBeEvented && !isHidden,
@@ -24719,9 +24832,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
24719
24832
  }
24720
24833
  return svgString;
24721
24834
  }
24722
- const resolvedPackageVersion = "0.5.347";
24835
+ const resolvedPackageVersion = "0.5.349";
24723
24836
  const PACKAGE_VERSION = resolvedPackageVersion;
24724
- const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.347";
24837
+ const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.349";
24725
24838
  const roundParityValue = (value) => {
24726
24839
  if (typeof value !== "number") return value;
24727
24840
  return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -25535,7 +25648,7 @@ class PixldocsRenderer {
25535
25648
  await this.waitForCanvasScene(container, cloned, i);
25536
25649
  }
25537
25650
  console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
25538
- const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-DVIaYc4_.js");
25651
+ const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-B8sTK3Ew.js");
25539
25652
  const prepared = preparePagesForExport(
25540
25653
  cloned.pages,
25541
25654
  canvasWidth,
@@ -27855,7 +27968,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
27855
27968
  if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
27856
27969
  sanitizeSvgTreeForPdf(svgToDraw);
27857
27970
  try {
27858
- const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-DVIaYc4_.js");
27971
+ const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-B8sTK3Ew.js");
27859
27972
  try {
27860
27973
  await logTextMeasurementDiagnostic(svgToDraw);
27861
27974
  } catch {
@@ -28255,4 +28368,4 @@ export {
28255
28368
  buildTeaserBlurFlatKeys as y,
28256
28369
  collectFontDescriptorsFromConfig as z
28257
28370
  };
28258
- //# sourceMappingURL=index-BV35-LzJ.js.map
28371
+ //# sourceMappingURL=index-wt6naIdE.js.map