refactor: let user decide about export quality, backgrounds and margins

Author: lebalz

docs/tdev/gallery/tools/image-markup/images/demo.svg

@@ -2,6 +2,34 @@
   "type": "excalidraw",
   "version": 2,
   "elements": [
+    {
+      "id": "TDEV-STANDALONE-DRAWING",
+      "type": "rectangle",
+      "x": -423.0333231608073,
+      "y": -271.4722315470378,
+      "width": 833.3333129882812,
+      "height": 530.6666870117188,
+      "strokeColor": "#1e1e1ea1",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 0.05,
+      "strokeStyle": "dotted",
+      "roughness": 0,
+      "opacity": 100,
+      "locked": true,
+      "version": 2,
+      "versionNonce": 943970152,
+      "index": "Zz",
+      "isDeleted": false,
+      "angle": 0,
+      "seed": 1,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1763308684156,
+      "link": null
+    },
     {
       "id": "IuZRsqPjub8yxxLCdL9gL",
       "type": "diamond",
@@ -24,11 +52,11 @@
         "type": 2
       },
       "seed": 306917131,
-      "version": 56,
-      "versionNonce": 2025318123,
+      "version": 59,
+      "versionNonce": 1746086936,
       "isDeleted": false,
       "boundElements": [],
-      "updated": 1755449004392,
+      "updated": 1763308785072,
       "link": null,
       "locked": false
     },

docs/tdev/gallery/tools/image-markup/images/demo.svg.excalidraw

@@ -48,10 +48,10 @@ export const EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE = {
     y: 0,
     width: 400,
     height: 300,
-    strokeColor: '#1e1e1e',
+    strokeColor: '#1e1e1ea1',
     backgroundColor: 'transparent',
     fillStyle: 'solid',
-    strokeWidth: 1,
+    strokeWidth: 0.05,
     strokeStyle: 'dotted',
     roughness: 0,
     opacity: 100,

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

@@ -11,7 +11,8 @@ import {
     EXCALIDRAW_BACKGROUND_IMAGE,
     EXCALIDRAW_MAX_WIDTH,
     CustomData,
-    EXCALIDRAW_STANDALONE_DRAWING_ID
+    EXCALIDRAW_STANDALONE_DRAWING_ID,
+    EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE
 } from './constants';
 import { withoutMetaElements } from './getElementsFromScene';
 import { getBoundingRect } from './getBoundingRect';
@@ -68,6 +69,8 @@ const handleStandaloneDrawing = (excalidrawState: ExcalidrawInitialDataState): E
 
     (excalidrawState.elements as ExcalidrawElement[]).splice(standaloneDrawingIdx, 1, {
         ...excalidrawState.elements[standaloneDrawingIdx],
+        strokeWidth: EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE.strokeWidth,
+        strokeColor: EXCALIDRAW_STANDALONE_DRAWING_RECTANGLE.strokeColor,
         width,
         height,
         x: x,
@@ -82,13 +85,19 @@ export const updateRectangleDimensions = (
     if (!excalidrawState.elements) {
         return excalidrawState;
     }
-    const isStandaloneDrawing = excalidrawState.elements.some(
-        (e) => e.id === EXCALIDRAW_STANDALONE_DRAWING_ID
-    );
-    if (isStandaloneDrawing) {
+    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);
     }
-    const backgroundImage = excalidrawState.elements.find((e) => e.id === EXCALIDRAW_BACKGROUND_IMAGE_ID);
     if (!backgroundImage || backgroundImage.type !== 'image') {
         return excalidrawState;
     }

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

@@ -7,41 +7,14 @@ interface Rect {
     height: number;
 }
 
-const extractMinX = (element: ExcalidrawFreeDrawElement): number => {
-    const xs = element.points.map((p) => p[0]);
-    return Math.min(...xs) + element.x - 2 * element.strokeWidth;
-};
-
-const extractMaxX = (element: ExcalidrawFreeDrawElement): number => {
-    return element.x + element.width;
-};
-
-const extractMinY = (element: ExcalidrawFreeDrawElement): number => {
-    const ys = element.points.map((p) => p[1]);
-    return element.y + element.height - Math.abs(Math.max(...ys)) - 2.1 * element.strokeWidth;
-};
-
-const extractMaxY = (element: ExcalidrawFreeDrawElement): number => {
-    const ys = element.points.map((p) => p[1]);
-    return element.y + Math.max(...ys) + 2.1 * 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.type === 'freedraw' ? extractMinX(e) : e.x - e.strokeWidth / 2))
-    );
-    const minY = Math.min(
-        ...elements.map((e) => (e.type === 'freedraw' ? extractMinY(e) : e.y - e.strokeWidth / 2))
-    );
-    const maxX = Math.max(
-        ...elements.map((e) => (e.type === 'freedraw' ? extractMaxX(e) : e.x + e.width + e.strokeWidth / 2))
-    );
-    const maxY = Math.max(
-        ...elements.map((e) => (e.type === 'freedraw' ? extractMaxY(e) : e.y + e.height + e.strokeWidth / 2))
-    );
+    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));
     return {
         x: minX,
         y: minY,