support rotated elements

Author: lebalz

packages/tdev/excalidoc/ImageMarkupEditor/helpers/createExcalidrawMarkup.ts

@@ -61,14 +61,18 @@ const handleStandaloneDrawing = (excalidrawState: ExcalidrawInitialDataState): E
     const standaloneDrawingIdx = excalidrawState.elements.findIndex(
         (e) => e.id === EXCALIDRAW_STANDALONE_DRAWING_ID
     );
-    if (standaloneDrawingIdx < 0) {
-        return excalidrawState;
+    const standaloneElement =
+        standaloneDrawingIdx < 0
+            ? EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE
+            : excalidrawState.elements[standaloneDrawingIdx];
+    if (standaloneDrawingIdx >= 0) {
+        (excalidrawState.elements as ExcalidrawElement[]).splice(standaloneDrawingIdx, 1);
     }
     const elements = withoutMetaElements(excalidrawState.elements);
     const { x, y, width, height } = getBoundingRect(elements);
 
-    (excalidrawState.elements as ExcalidrawElement[]).splice(standaloneDrawingIdx, 1, {
-        ...excalidrawState.elements[standaloneDrawingIdx],
+    (excalidrawState.elements as ExcalidrawElement[]).splice(0, 0, {
+        ...standaloneElement,
         strokeWidth: EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE.strokeWidth,
         strokeColor: EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE.strokeColor,
         width,
@@ -87,15 +91,6 @@ export const updateRectangleDimensions = (
     }
     const backgroundImage = excalidrawState.elements.find((e) => e.id === EXCALIDRAW_BACKGROUND_IMAGE_ID);
     if (!backgroundImage) {
-        const isStandaloneDrawing = excalidrawState.elements.some(
-            (e) => e.id === EXCALIDRAW_STANDALONE_DRAWING_ID
-        );
-        if (!isStandaloneDrawing) {
-            // add standalone markup drawing rectangle
-            (excalidrawState.elements as ExcalidrawElement[]).splice(0, 0, {
-                ...EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE
-            });
-        }
         return handleStandaloneDrawing(excalidrawState);
     }
     if (!backgroundImage || backgroundImage.type !== 'image') {

packages/tdev/excalidoc/ImageMarkupEditor/helpers/getBoundingRect.ts

@@ -7,14 +7,35 @@ interface Rect {
     height: number;
 }
 
+const normalizeRotation = (element: ExcalidrawElement) => {
+    if (!element.angle || element.angle === 0) {
+        return {
+            x: element.x,
+            y: element.y,
+            width: element.width,
+            height: element.height,
+            strokeWidth: element.strokeWidth
+        };
+    }
+    const sin = Math.sin(element.angle);
+    const cos = Math.cos(element.angle);
+    const width = Math.abs(element.width * cos) + Math.abs(element.height * sin);
+    const height = Math.abs(element.width * sin) + Math.abs(element.height * cos);
+    const x = element.x + (element.width - width) / 2;
+    const y = element.y + (element.height - height) / 2;
+    return { x, y, width, height, strokeWidth: element.strokeWidth };
+};
+
 export const getBoundingRect = (elements: readonly ExcalidrawElement[]): Rect => {
     if (elements.length === 0) {
         return { x: 0, y: 0, width: 400, height: 300 };
     }
-    const minX = Math.min(...elements.map((e) => e.x - e.strokeWidth / 2));
-    const minY = Math.min(...elements.map((e) => e.y - e.strokeWidth / 2));
-    const maxX = Math.max(...elements.map((e) => e.x + e.width + e.strokeWidth / 2));
-    const maxY = Math.max(...elements.map((e) => e.y + e.height + e.strokeWidth / 2));
+    const normalized = elements.map((e) => normalizeRotation(e));
+
+    const minX = Math.min(...normalized.map((e) => e.x - e.strokeWidth / 2));
+    const minY = Math.min(...normalized.map((e) => e.y - e.strokeWidth / 2));
+    const maxX = Math.max(...normalized.map((e) => e.x + e.width + e.strokeWidth / 2));
+    const maxY = Math.max(...normalized.map((e) => e.y + e.height + e.strokeWidth / 2));
     return {
         x: minX,
         y: minY,