build(deps): bump cross-spawn from 7.0.3 to 7.0.6 in /dev-docs

Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 7.0.3 to 7.0.6.
- [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md)
- [Commits](https://github.com/moxystudio/node-cross-spawn/compare/v7.0.3...v7.0.6)

---
updated-dependencies:
- dependency-name: cross-spawn
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

dev-docs/yarn.lock

@@ -3278,9 +3278,9 @@ cross-fetch@^3.1.5:
     node-fetch "2.6.7"
 
 cross-spawn@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"

examples/excalidraw/components/ExampleApp.tsx

@@ -369,12 +369,10 @@ export default function ExampleApp({
       return false;
     }
     await exportToClipboard({
-      data: {
-        elements: excalidrawAPI.getSceneElements(),
-        appState: excalidrawAPI.getAppState(),
-        files: excalidrawAPI.getFiles(),
-      },
-      type: "json",
+      elements: excalidrawAPI.getSceneElements(),
+      appState: excalidrawAPI.getAppState(),
+      files: excalidrawAPI.getFiles(),
+      type,
     });
     window.alert(`Copied to clipboard as ${type} successfully`);
   };
@@ -819,17 +817,15 @@ export default function ExampleApp({
                 return;
               }
               const svg = await exportToSvg({
-                data: {
-                  elements: excalidrawAPI?.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                    exportEmbedScene,
-                    width: 300,
-                    height: 100,
-                  },
-                  files: excalidrawAPI?.getFiles(),
+                elements: excalidrawAPI?.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
+                  exportEmbedScene,
+                  width: 300,
+                  height: 100,
                 },
+                files: excalidrawAPI?.getFiles(),
               });
               appRef.current.querySelector(".export-svg").innerHTML =
                 svg.outerHTML;
@@ -845,18 +841,14 @@ export default function ExampleApp({
                 return;
               }
               const blob = await exportToBlob({
-                data: {
-                  elements: excalidrawAPI?.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportEmbedScene,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI?.getFiles(),
-                },
-                config: {
-                  mimeType: "image/png",
+                elements: excalidrawAPI?.getSceneElements(),
+                mimeType: "image/png",
+                appState: {
+                  ...initialData.appState,
+                  exportEmbedScene,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI?.getFiles(),
               });
               setBlobUrl(window.URL.createObjectURL(blob));
             }}
@@ -872,14 +864,12 @@ export default function ExampleApp({
                 return;
               }
               const canvas = await exportToCanvas({
-                data: {
-                  elements: excalidrawAPI.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI.getFiles(),
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
               ctx.font = "30px Excalifont";
@@ -895,14 +885,12 @@ export default function ExampleApp({
                 return;
               }
               const canvas = await exportToCanvas({
-                data: {
-                  elements: excalidrawAPI.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI.getFiles(),
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
               ctx.font = "30px Excalifont";

excalidraw-app/App.tsx

@@ -25,13 +25,7 @@ import {
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
-  exportToCanvas,
-  exportToSvg,
 } from "../packages/excalidraw";
-import {
-  exportToBlob,
-  getNonDeletedElements,
-} from "../packages/excalidraw/index";
 import type {
   AppState,
   ExcalidrawImperativeAPI,
@@ -133,9 +127,6 @@ import DebugCanvas, {
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
 import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-import { fileSave } from "../packages/excalidraw/data/filesystem";
-import { type ExportSceneConfig } from "../packages/excalidraw/scene/export";
-import { round } from "../packages/math";
 
 polyfill();
 
@@ -616,19 +607,6 @@ const ExcalidrawWrapper = () => {
     };
   }, [excalidrawAPI]);
 
-  const canvasPreviewContainerRef = useRef<HTMLDivElement>(null);
-  const svgPreviewContainerRef = useRef<HTMLDivElement>(null);
-
-  const [config, setConfig] = useState<ExportSceneConfig>({
-    scale: 1,
-    position: "center",
-    fit: "contain",
-  });
-
-  useEffect(() => {
-    localStorage.setItem("_exportConfig", JSON.stringify(config));
-  }, [config]);
-
   const onChange = (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,
@@ -638,84 +616,6 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
-    const nonDeletedElements = getNonDeletedElements(elements);
-
-    const frame = nonDeletedElements.find(
-      (el) => el.strokeStyle === "dashed" && el.type === "rectangle",
-    );
-
-    exportToCanvas({
-      data: {
-        elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
-        // .concat(
-        //   restoreElements(
-        //     [
-        //       // @ts-ignore
-        //       {
-        //         type: "rectangle",
-        //         width: appState.width / zoom,
-        //         height: appState.height / zoom,
-        //         x: -appState.scrollX,
-        //         y: -appState.scrollY,
-        //         fillStyle: "solid",
-        //         strokeColor: "transparent",
-        //         backgroundColor: "rgba(0,0,0,0.05)",
-        //         roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS, value: 40 },
-        //       },
-        //     ],
-        //     null,
-        //   ),
-        // ),
-        appState,
-        files,
-      },
-      config: {
-        ...(frame
-          ? {
-              ...config,
-              width: frame.width,
-              height: frame.height,
-              x: frame.x,
-              y: frame.y,
-            }
-          : config),
-      },
-    }).then((canvas) => {
-      if (canvasPreviewContainerRef.current) {
-        canvasPreviewContainerRef.current.replaceChildren(canvas);
-        document.querySelector(
-          ".canvas_dims",
-        )!.innerHTML = `${canvas.width}x${canvas.height} (canvas)`;
-      }
-    });
-
-    exportToSvg({
-      data: {
-        elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
-        appState,
-        files,
-      },
-      config: {
-        ...(frame
-          ? {
-              ...config,
-              width: frame.width,
-              height: frame.height,
-              x: frame.x,
-              y: frame.y,
-            }
-          : config),
-      },
-    }).then((svg) => {
-      if (svgPreviewContainerRef.current) {
-        svgPreviewContainerRef.current.replaceChildren(svg);
-        document.querySelector(".svg_dims")!.innerHTML = `${round(
-          parseFloat(svg.getAttribute("width") ?? ""),
-          0,
-        )}x${round(parseFloat(svg.getAttribute("height") ?? ""), 0)} (svg)`;
-      }
-    });
-
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -1221,258 +1121,6 @@ const ExcalidrawWrapper = () => {
           />
         )}
       </Excalidraw>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          position: "fixed",
-          bottom: 60,
-          right: 60,
-          zIndex: 9999999999,
-          color: "black",
-        }}
-      >
-        <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <label>
-              center{" "}
-              <input
-                type="checkbox"
-                checked={config.position === "center"}
-                onChange={() =>
-                  setConfig((s) => ({
-                    ...s,
-                    position: s.position === "center" ? "topLeft" : "center",
-                  }))
-                }
-              />
-            </label>
-            <label>
-              fit{" "}
-              <select
-                value={config.fit}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    fit: event.target.value as any,
-                  }))
-                }
-              >
-                <option value="none">none</option>
-                <option value="contain">contain</option>
-              </select>
-            </label>
-            <label>
-              padding{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.padding}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    padding: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              scale{" "}
-              <input
-                type="number"
-                max={4}
-                style={{ width: "3rem" }}
-                value={config.scale}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    scale: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseFloat(event.target.value as any), 4),
-                  }))
-                }
-              />
-            </label>
-          </div>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <label
-              style={{
-                opacity:
-                  config.maxWidthOrHeight != null ||
-                  config.widthOrHeight != null
-                    ? 0.5
-                    : undefined,
-              }}
-            >
-              width{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.width}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    width: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label
-              style={{
-                opacity:
-                  config.maxWidthOrHeight != null ||
-                  config.widthOrHeight != null
-                    ? 0.5
-                    : undefined,
-              }}
-            >
-              height{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.height}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    height: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              x{" "}
-              <input
-                type="number"
-                style={{ width: "3rem" }}
-                value={config.x}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    x: !event.target.value.trim()
-                      ? undefined
-                      : parseFloat(event.target.value as any) ?? undefined,
-                  }))
-                }
-              />
-            </label>
-            <label>
-              y{" "}
-              <input
-                type="number"
-                style={{ width: "3rem" }}
-                value={config.y}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    y: !event.target.value.trim()
-                      ? undefined
-                      : parseFloat(event.target.value as any) ?? undefined,
-                  }))
-                }
-              />
-            </label>
-            <label
-              style={{
-                opacity: config.widthOrHeight != null ? 0.5 : undefined,
-              }}
-            >
-              maxWH{" "}
-              <input
-                type="number"
-                // max={600}
-                style={{ width: "3rem" }}
-                value={config.maxWidthOrHeight}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    maxWidthOrHeight: !event.target.value.trim()
-                      ? undefined
-                      : parseInt(event.target.value as any),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              widthOrHeight{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.widthOrHeight}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    widthOrHeight: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-          </div>
-        </div>
-        <div className="canvas_dims">0x0</div>
-        <div
-          ref={canvasPreviewContainerRef}
-          onClick={() => {
-            exportToBlob({
-              data: {
-                elements: excalidrawAPI!.getSceneElements(),
-                files: excalidrawAPI?.getFiles() || null,
-              },
-              config,
-            }).then((blob) => {
-              fileSave(blob, {
-                name: "xx",
-                extension: "png",
-                description: "xxx",
-              });
-            });
-          }}
-          style={{
-            borderRadius: 12,
-            border: "1px solid #777",
-            overflow: "hidden",
-            padding: 10,
-            backgroundColor: "pink",
-          }}
-        />
-        <div className="svg_dims">0x0</div>
-        <div
-          ref={svgPreviewContainerRef}
-          onClick={() => {
-            exportToBlob({
-              data: {
-                elements: excalidrawAPI!.getSceneElements(),
-                files: excalidrawAPI?.getFiles() || null,
-              },
-              config,
-            }).then((blob) => {
-              fileSave(blob, {
-                name: "xx",
-                extension: "png",
-                description: "xxx",
-              });
-            });
-          }}
-          style={{
-            borderRadius: 12,
-            border: "1px solid #777",
-            overflow: "hidden",
-            padding: 10,
-            backgroundColor: "pink",
-          }}
-        />
-      </div>
     </div>
   );
 };

excalidraw-app/components/AI.tsx

@@ -21,19 +21,15 @@ export const AIComponents = ({
           const appState = excalidrawAPI.getAppState();
 
           const blob = await exportToBlob({
-            data: {
-              elements: children,
-              appState: {
-                ...appState,
-                exportBackground: true,
-                viewBackgroundColor: appState.viewBackgroundColor,
-              },
-              files: excalidrawAPI.getFiles(),
-            },
-            config: {
-              exportingFrame: frame,
-              mimeType: MIME_TYPES.jpg,
+            elements: children,
+            appState: {
+              ...appState,
+              exportBackground: true,
+              viewBackgroundColor: appState.viewBackgroundColor,
             },
+            exportingFrame: frame,
+            files: excalidrawAPI.getFiles(),
+            mimeType: MIME_TYPES.jpg,
           });
 
           const dataURL = await getDataURL(blob);

excalidraw-app/components/DebugCanvas.tsx

@@ -84,7 +84,7 @@ const _debugRenderer = (
     scale,
     normalizedWidth,
     normalizedHeight,
-    canvasBackgroundColor: "transparent",
+    viewBackgroundColor: "transparent",
   });
 
   // Apply zoom

packages/excalidraw/actions/actionClipboard.tsx

@@ -9,9 +9,8 @@ import {
   readSystemClipboard,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { exportAsImage } from "../data/index";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
 import { getTextFromElements, isTextElement } from "../element";
-import { prepareElementsForExport } from "../data/index";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -137,15 +136,17 @@ export const actionCopyAsSvg = register({
     );
 
     try {
-      await exportAsImage({
-        type: "clipboard-svg",
-        data: { elements: exportedElements, appState, files: app.files },
-        config: {
+      await exportCanvas(
+        "clipboard-svg",
+        exportedElements,
+        appState,
+        app.files,
+        {
           ...appState,
           exportingFrame,
           name: app.getName(),
         },
-      });
+      );
 
       const selectedElements = app.scene.getSelectedElements({
         selectedElementIds: appState.selectedElementIds,
@@ -207,16 +208,11 @@ export const actionCopyAsPng = register({
       true,
     );
     try {
-      await exportAsImage({
-        type: "clipboard",
-        data: { elements: exportedElements, appState, files: app.files },
-        config: {
-          ...appState,
-          exportingFrame,
-          name: appState.name || app.getName(),
-        },
+      await exportCanvas("clipboard", exportedElements, appState, app.files, {
+        ...appState,
+        exportingFrame,
+        name: app.getName(),
       });
-
       return {
         appState: {
           ...appState,

packages/excalidraw/actions/actionExport.tsx

@@ -10,13 +10,13 @@ import { useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
-import { getCanvasSize } from "../scene/export";
+import { getExportSize } from "../scene/export";
 import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import type { NonDeletedExcalidrawElement, Theme } from "../element/types";
+import type { Theme } from "../element/types";
 
 import "../components/ToolIcon.scss";
 import { StoreAction } from "../store";
@@ -58,18 +58,6 @@ export const actionChangeExportScale = register({
       ? getSelectedElements(elements, appState)
       : elements;
 
-    const getExportSize = (
-      elements: readonly NonDeletedExcalidrawElement[],
-      padding: number,
-      scale: number,
-    ): [number, number] => {
-      const [, , width, height] = getCanvasSize(elements).map((dimension) =>
-        Math.trunc(dimension * scale),
-      );
-
-      return [width + padding * 2, height + padding * 2];
-    };
-
     return (
       <>
         {EXPORT_SCALES.map((s) => {

packages/excalidraw/appState.ts

@@ -1,18 +1,17 @@
+import { COLOR_PALETTE } from "./colors";
 import {
   ARROW_TYPE,
-  COLOR_WHITE,
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_GRID_SIZE,
-  DEFAULT_ZOOM_VALUE,
   EXPORT_SCALES,
   STATS_PANELS,
   THEME,
   DEFAULT_GRID_STEP,
 } from "./constants";
-import type { AppState } from "./types";
+import type { AppState, NormalizedZoomValue } from "./types";
 
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
   ? devicePixelRatio
@@ -100,10 +99,10 @@ export const getDefaultAppState = (): Omit<
     editingFrame: null,
     elementsToHighlight: null,
     toast: null,
-    viewBackgroundColor: COLOR_WHITE,
+    viewBackgroundColor: COLOR_PALETTE.white,
     zenModeEnabled: false,
     zoom: {
-      value: DEFAULT_ZOOM_VALUE,
+      value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
     pendingImageElementId: null,

packages/excalidraw/charts.ts

@@ -1,8 +1,11 @@
 import type { Radians } from "../math";
 import { pointFrom } from "../math";
-import { DEFAULT_CHART_COLOR_INDEX, getAllColorsSpecificShade } from "./colors";
 import {
-  COLOR_CHARCOAL_BLACK,
+  COLOR_PALETTE,
+  DEFAULT_CHART_COLOR_INDEX,
+  getAllColorsSpecificShade,
+} from "./colors";
+import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   VERTICAL_ALIGN,
@@ -170,7 +173,7 @@ const commonProps = {
   fontSize: DEFAULT_FONT_SIZE,
   opacity: 100,
   roughness: 1,
-  strokeColor: COLOR_CHARCOAL_BLACK,
+  strokeColor: COLOR_PALETTE.black,
   roundness: null,
   strokeStyle: "solid",
   strokeWidth: 1,
@@ -321,7 +324,7 @@ const chartBaseElements = (
         y: y - chartHeight,
         width: chartWidth,
         height: chartHeight,
-        strokeColor: COLOR_CHARCOAL_BLACK,
+        strokeColor: COLOR_PALETTE.black,
         fillStyle: "solid",
         opacity: 6,
       })

packages/excalidraw/colors.ts

@@ -1,25 +1,27 @@
 import oc from "open-color";
-import {
-  COLOR_WHITE,
-  COLOR_CHARCOAL_BLACK,
-  COLOR_TRANSPARENT,
-} from "./constants";
-import { type Merge } from "./utility-types";
-import { pick } from "./utils";
+import type { Merge } from "./utility-types";
+
+// FIXME can't put to utils.ts rn because of circular dependency
+const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
+  source: R,
+  keys: K,
+) => {
+  return keys.reduce((acc, key: K[number]) => {
+    if (key in source) {
+      acc[key] = source[key];
+    }
+    return acc;
+  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
+};
 
 export type ColorPickerColor =
-  | Exclude<keyof oc, "indigo" | "lime" | "black">
+  | Exclude<keyof oc, "indigo" | "lime">
   | "transparent"
-  | "charcoal"
   | "bronze";
 export type ColorTuple = readonly [string, string, string, string, string];
 export type ColorPalette = Merge<
   Record<ColorPickerColor, ColorTuple>,
-  {
-    charcoal: typeof COLOR_CHARCOAL_BLACK;
-    white: typeof COLOR_WHITE;
-    transparent: typeof COLOR_TRANSPARENT;
-  }
+  { black: "#1e1e1e"; white: "#ffffff"; transparent: "transparent" }
 >;
 
 // used general type instead of specific type (ColorPalette) to support custom colors
@@ -39,7 +41,7 @@ export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
 export const getSpecificColorShades = (
   color: Exclude<
     ColorPickerColor,
-    "transparent" | "charcoal" | "black" | "white" | "bronze"
+    "transparent" | "white" | "black" | "bronze"
   >,
   indexArr: Readonly<ColorShadesIndexes>,
 ) => {
@@ -47,9 +49,9 @@ export const getSpecificColorShades = (
 };
 
 export const COLOR_PALETTE = {
-  transparent: COLOR_TRANSPARENT,
-  charcoal: COLOR_CHARCOAL_BLACK,
-  white: COLOR_WHITE,
+  transparent: "transparent",
+  black: "#1e1e1e",
+  white: "#ffffff",
   // open-colors
   gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
   red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
@@ -85,7 +87,7 @@ const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
 
 // ORDER matters for positioning in quick picker
 export const DEFAULT_ELEMENT_STROKE_PICKS = [
-  COLOR_PALETTE.charcoal,
+  COLOR_PALETTE.black,
   COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
   COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
   COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
@@ -123,7 +125,7 @@ export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
   transparent: COLOR_PALETTE.transparent,
   white: COLOR_PALETTE.white,
   gray: COLOR_PALETTE.gray,
-  charcoal: COLOR_PALETTE.charcoal,
+  black: COLOR_PALETTE.black,
   bronze: COLOR_PALETTE.bronze,
   // rest
   ...COMMON_ELEMENT_SHADES,
@@ -134,7 +136,7 @@ export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
   transparent: COLOR_PALETTE.transparent,
   white: COLOR_PALETTE.white,
   gray: COLOR_PALETTE.gray,
-  charcoal: COLOR_PALETTE.charcoal,
+  black: COLOR_PALETTE.black,
   bronze: COLOR_PALETTE.bronze,
 
   ...COMMON_ELEMENT_SHADES,

packages/excalidraw/components/App.tsx

@@ -90,7 +90,7 @@ import {
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
 import type { ExportedElements } from "../data";
-import { exportAsImage, loadFromBlob } from "../data";
+import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
 import {
@@ -1815,20 +1815,18 @@ class App extends React.Component<AppProps, AppState> {
     opts: { exportingFrame: ExcalidrawFrameLikeElement | null },
   ) => {
     trackEvent("export", type, "ui");
-    const fileHandle = await exportAsImage({
+    const fileHandle = await exportCanvas(
       type,
-      data: {
-        elements,
-        appState: this.state,
-        files: this.files,
-      },
-      config: {
+      elements,
+      this.state,
+      this.files,
+      {
         exportBackground: this.state.exportBackground,
         name: this.getName(),
         viewBackgroundColor: this.state.viewBackgroundColor,
         exportingFrame: opts.exportingFrame,
       },
-    })
+    )
       .catch(muteFSAbortError)
       .catch((error) => {
         console.error(error);
@@ -2559,27 +2557,19 @@ class App extends React.Component<AppProps, AppState> {
         { passive: false },
       ),
       addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
-      addEventListener(document, EVENT.POINTER_UP, this.removePointer, {
-        passive: false,
-      }), // #3553
-      addEventListener(document, EVENT.COPY, this.onCopy, { passive: false }),
+      addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553
+      addEventListener(document, EVENT.COPY, this.onCopy),
       addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }),
       addEventListener(
         document,
         EVENT.POINTER_MOVE,
         this.updateCurrentCursorPosition,
-        { passive: false },
       ),
       // rerender text elements on font load to fix #637 && #1553
-      addEventListener(
-        document.fonts,
-        "loadingdone",
-        (event) => {
-          const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
-          this.fonts.onLoaded(fontFaces);
-        },
-        { passive: false },
-      ),
+      addEventListener(document.fonts, "loadingdone", (event) => {
+        const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
+        this.fonts.onLoaded(fontFaces);
+      }),
       // Safari-only desktop pinch zoom
       addEventListener(
         document,
@@ -2599,17 +2589,12 @@ class App extends React.Component<AppProps, AppState> {
         this.onGestureEnd as any,
         false,
       ),
-      addEventListener(
-        window,
-        EVENT.FOCUS,
-        () => {
-          this.maybeCleanupAfterMissingPointerUp(null);
-          // browsers (chrome?) tend to free up memory a lot, which results
-          // in canvas context being cleared. Thus re-render on focus.
-          this.triggerRender(true);
-        },
-        { passive: false },
-      ),
+      addEventListener(window, EVENT.FOCUS, () => {
+        this.maybeCleanupAfterMissingPointerUp(null);
+        // browsers (chrome?) tend to free up memory a lot, which results
+        // in canvas context being cleared. Thus re-render on focus.
+        this.triggerRender(true);
+      }),
     );
 
     if (this.state.viewModeEnabled) {
@@ -2625,12 +2610,9 @@ class App extends React.Component<AppProps, AppState> {
         document,
         EVENT.FULLSCREENCHANGE,
         this.onFullscreenChange,
-        { passive: false },
       ),
-      addEventListener(document, EVENT.PASTE, this.pasteFromClipboard, {
-        passive: false,
-      }),
-      addEventListener(document, EVENT.CUT, this.onCut, { passive: false }),
+      addEventListener(document, EVENT.PASTE, this.pasteFromClipboard),
+      addEventListener(document, EVENT.CUT, this.onCut),
       addEventListener(window, EVENT.RESIZE, this.onResize, false),
       addEventListener(window, EVENT.UNLOAD, this.onUnload, false),
       addEventListener(window, EVENT.BLUR, this.onBlur, false),
@@ -2638,7 +2620,6 @@ class App extends React.Component<AppProps, AppState> {
         this.excalidrawContainerRef.current,
         EVENT.WHEEL,
         this.handleWheel,
-        { passive: false },
       ),
       addEventListener(
         this.excalidrawContainerRef.current,
@@ -2660,7 +2641,6 @@ class App extends React.Component<AppProps, AppState> {
           getNearestScrollableContainer(this.excalidrawContainerRef.current!),
           EVENT.SCROLL,
           this.onScroll,
-          { passive: false },
         ),
       );
     }
@@ -7942,14 +7922,10 @@ class App extends React.Component<AppProps, AppState> {
           isFrameLikeElement(e),
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
-        const frameToHighlight =
-          topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null;
-        // Only update the state if there is a difference
-        if (this.state.frameToHighlight !== frameToHighlight) {
-          flushSync(() => {
-            this.setState({ frameToHighlight });
-          });
-        }
+        this.setState({
+          frameToHighlight:
+            topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null,
+        });
 
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
@@ -8096,9 +8072,7 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
           );
 
-          flushSync(() => {
-            this.setState({ snapLines });
-          });
+          this.setState({ snapLines });
 
           // when we're editing the name of a frame, we want the user to be
           // able to select and interact with the text input
@@ -9832,7 +9806,6 @@ class App extends React.Component<AppProps, AppState> {
       this.interactiveCanvas.addEventListener(
         EVENT.TOUCH_START,
         this.onTouchStart,
-        { passive: false },
       );
       this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd);
       // -----------------------------------------------------------------------
@@ -10264,7 +10237,7 @@ class App extends React.Component<AppProps, AppState> {
           croppingElement,
           this.scene.getNonDeletedElementsMap(),
           {
-            newSize: {
+            oldSize: {
               width: croppingElement.width,
               height: croppingElement.height,
             },

packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts

@@ -204,7 +204,7 @@ export const colorPickerKeyNavHandler = ({
       });
 
       if (!baseColorName) {
-        onChange(COLOR_PALETTE.charcoal);
+        onChange(COLOR_PALETTE.black);
       }
     }
 

packages/excalidraw/components/ImageExportDialog.tsx

@@ -23,6 +23,7 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import type { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
+import { exportToCanvas } from "../../utils/export";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
@@ -35,7 +36,6 @@ import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
 import { useCopyStatus } from "../hooks/useCopiedIndicator";
-import { exportToCanvas } from "../scene/export";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -123,25 +123,19 @@ const ImageExportModal = ({
     }
 
     exportToCanvas({
-      data: {
-        elements: exportedElements,
-        appState: {
-          ...appStateSnapshot,
-          name: projectName,
-          exportEmbedScene: embedScene,
-        },
-        files,
-      },
-      config: {
-        canvasBackgroundColor: !exportWithBackground
-          ? false
-          : appStateSnapshot.viewBackgroundColor,
-        padding: DEFAULT_EXPORT_PADDING,
-        theme: exportDarkMode ? "dark" : "light",
-        scale: exportScale,
-        maxWidthOrHeight: Math.max(maxWidth, maxHeight),
-        exportingFrame,
+      elements: exportedElements,
+      appState: {
+        ...appStateSnapshot,
+        name: projectName,
+        exportBackground: exportWithBackground,
+        exportWithDarkMode: exportDarkMode,
+        exportScale,
+        exportEmbedScene: embedScene,
       },
+      files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
+      exportingFrame,
     })
       .then((canvas) => {
         setRenderError(null);

packages/excalidraw/components/PasteChartDialog.tsx

@@ -1,9 +1,9 @@
+import oc from "open-color";
 import React, { useLayoutEffect, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import type { ChartElements, Spreadsheet } from "../charts";
 import { renderSpreadsheet } from "../charts";
 import type { ChartType } from "../element/types";
-import { COLOR_WHITE } from "../constants";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
 import type { UIAppState } from "../types";
@@ -41,16 +41,17 @@ const ChartPreviewBtn = (props: {
     const previewNode = previewRef.current!;
 
     (async () => {
-      svg = await exportToSvg({
-        data: {
-          elements,
-          appState: {
-            exportBackground: false,
-            viewBackgroundColor: COLOR_WHITE,
-          },
-          files: null,
+      svg = await exportToSvg(
+        elements,
+        {
+          exportBackground: false,
+          viewBackgroundColor: oc.white,
         },
-      });
+        null, // files
+        {
+          skipInliningFonts: true,
+        },
+      );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);

packages/excalidraw/components/PublishLibrary.tsx

@@ -7,8 +7,8 @@ import { t } from "../i18n";
 import Trans from "./Trans";
 
 import type { LibraryItems, LibraryItem, UIAppState } from "../types";
+import { exportToCanvas, exportToSvg } from "../../utils/export";
 import {
-  COLOR_WHITE,
   EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
@@ -24,7 +24,6 @@ import { ToolButton } from "./ToolButton";
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 
 import "./PublishLibrary.scss";
-import { exportToCanvas, exportToSvg } from "../scene/export";
 
 interface PublishLibraryDataParams {
   authorName: string;
@@ -56,20 +55,16 @@ const generatePreviewImage = async (libraryItems: LibraryItems) => {
 
   const ctx = canvas.getContext("2d")!;
 
-  ctx.fillStyle = COLOR_WHITE;
+  ctx.fillStyle = OpenColor.white;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   // draw items
   // ---------------------------------------------------------------------------
   for (const [index, item] of libraryItems.entries()) {
     const itemCanvas = await exportToCanvas({
-      data: {
-        elements: item.elements,
-        files: null,
-      },
-      config: {
-        maxWidthOrHeight: BOX_SIZE,
-      },
+      elements: item.elements,
+      files: null,
+      maxWidthOrHeight: BOX_SIZE,
     });
 
     const { width, height } = itemCanvas;
@@ -131,15 +126,14 @@ const SingleLibraryItem = ({
     }
     (async () => {
       const svg = await exportToSvg({
-        data: {
-          elements: libItem.elements,
-          appState: {
-            ...appState,
-            viewBackgroundColor: COLOR_WHITE,
-            exportBackground: true,
-          },
-          files: null,
+        elements: libItem.elements,
+        appState: {
+          ...appState,
+          viewBackgroundColor: OpenColor.white,
+          exportBackground: true,
         },
+        files: null,
+        skipInliningFonts: true,
       });
       node.innerHTML = svg.outerHTML;
     })();

packages/excalidraw/components/SearchMenu.tsx

@@ -294,7 +294,6 @@ export const SearchMenu = () => {
     // as well as to handle events before App ones
     return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
       capture: true,
-      passive: false,
     });
   }, [setAppState, stableState, app]);
 

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -69,6 +69,7 @@ const resizeElementInGroup = (
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+  const { width: oldWidth, height: oldHeight } = latestElement;
 
   mutateElement(latestElement, updates, false);
   const boundTextElement = getBoundTextElement(
@@ -78,7 +79,7 @@ const resizeElementInGroup = (
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
     updateBoundElements(latestElement, elementsMap, {
-      newSize: { width: updates.width, height: updates.height },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {

packages/excalidraw/components/Stats/utils.ts

@@ -151,6 +151,8 @@ export const resizeElement = (
     nextHeight = Math.max(nextHeight, minHeight);
   }
 
+  const { width: oldWidth, height: oldHeight } = latestElement;
+
   mutateElement(
     latestElement,
     {
@@ -199,7 +201,7 @@ export const resizeElement = (
   }
 
   updateBoundElements(latestElement, elementsMap, {
-    newSize: { width: nextWidth, height: nextHeight },
+    oldSize: { width: oldWidth, height: oldHeight },
   });
 
   if (boundTextElement && boundTextFont) {

packages/excalidraw/components/TTDDialog/common.ts

@@ -91,16 +91,12 @@ export const convertMermaidToExcalidraw = async ({
     };
 
     const canvas = await exportToCanvas({
-      data: {
-        elements: data.current.elements,
-        files: data.current.files,
-      },
-      config: {
-        padding: DEFAULT_EXPORT_PADDING,
-        maxWidthOrHeight:
-          Math.max(parent.offsetWidth, parent.offsetHeight) *
-          window.devicePixelRatio,
-      },
+      elements: data.current.elements,
+      files: data.current.files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight:
+        Math.max(parent.offsetWidth, parent.offsetHeight) *
+        window.devicePixelRatio,
     });
     // if converting to blob fails, there's some problem that will
     // likely prevent preview and export (e.g. canvas too big)

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -97,6 +97,7 @@ const getRelevantAppStateProps = (
   theme: appState.theme,
   pendingImageElementId: appState.pendingImageElementId,
   shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+  viewBackgroundColor: appState.viewBackgroundColor,
   exportScale: appState.exportScale,
   selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
   gridSize: appState.gridSize,

packages/excalidraw/constants.ts

@@ -1,7 +1,7 @@
 import cssVariables from "./css/variables.module.scss";
 import type { AppProps, AppState } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
-import type { NormalizedZoomValue } from "./types";
+import { COLOR_PALETTE } from "./colors";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
@@ -108,6 +108,7 @@ export const YOUTUBE_STATES = {
 
 export const ENV = {
   TEST: "test",
+  DEVELOPMENT: "development",
 };
 
 export const CLASSES = {
@@ -183,14 +184,6 @@ export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
 export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
-export const DEFAULT_ZOOM_VALUE = 1 as NormalizedZoomValue;
-
-// -----------------------------------------------
-// !!! these colors are tied to color picker !!!
-export const COLOR_WHITE = "#ffffff";
-export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
-export const COLOR_TRANSPARENT = "transparent";
-// -----------------------------------------------
 
 export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
 // a small epsilon to make side resizing always take precedence
@@ -199,6 +192,8 @@ const EPSILON = 0.00001;
 export const DEFAULT_COLLISION_THRESHOLD =
   2 * SIDE_RESIZING_THRESHOLD - EPSILON;
 
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 // keep this in sync with CSS
 export const COLOR_VOICE_CALL = "#a2f1a6";
 
@@ -309,7 +304,6 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
-export const DEFAULT_SMALLEST_EXPORT_SIZE = 20; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
@@ -390,8 +384,8 @@ export const DEFAULT_ELEMENT_PROPS: {
   opacity: ExcalidrawElement["opacity"];
   locked: ExcalidrawElement["locked"];
 } = {
-  strokeColor: COLOR_CHARCOAL_BLACK,
-  backgroundColor: COLOR_TRANSPARENT,
+  strokeColor: COLOR_PALETTE.black,
+  backgroundColor: COLOR_PALETTE.transparent,
   fillStyle: "solid",
   strokeWidth: 2,
   strokeStyle: "solid",

packages/excalidraw/data/index.ts

@@ -81,53 +81,46 @@ export const prepareElementsForExport = (
   };
 };
 
-export const exportAsImage = async ({
-  type,
-  data,
-  config,
-}: {
-  type: Omit<ExportType, "backend">;
-  data: {
-    elements: ExportedElements;
-    appState: AppState;
-    files: BinaryFiles;
-  };
-  config: {
+export const exportCanvas = async (
+  type: Omit<ExportType, "backend">,
+  elements: ExportedElements,
+  appState: AppState,
+  files: BinaryFiles,
+  {
+    exportBackground,
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    viewBackgroundColor,
+    name = appState.name || DEFAULT_FILENAME,
+    fileHandle = null,
+    exportingFrame = null,
+  }: {
     exportBackground: boolean;
-    padding?: number;
+    exportPadding?: number;
     viewBackgroundColor: string;
     /** filename, if applicable */
     name?: string;
     fileHandle?: FileSystemHandle | null;
     exportingFrame: ExcalidrawFrameLikeElement | null;
-  };
-}) => {
-  // clone
-  const cfg = Object.assign({}, config);
-
-  cfg.padding = cfg.padding ?? DEFAULT_EXPORT_PADDING;
-  cfg.fileHandle = cfg.fileHandle ?? null;
-  cfg.exportingFrame = cfg.exportingFrame ?? null;
-  cfg.name = cfg.name || DEFAULT_FILENAME;
-
-  if (data.elements.length === 0) {
+  },
+) => {
+  if (elements.length === 0) {
     throw new Error(t("alerts.cannotExportEmptyCanvas"));
   }
   if (type === "svg" || type === "clipboard-svg") {
-    const svgPromise = exportToSvg({
-      data: {
-        elements: data.elements,
-        appState: {
-          exportBackground: cfg.exportBackground,
-          exportWithDarkMode: data.appState.exportWithDarkMode,
-          viewBackgroundColor: data.appState.viewBackgroundColor,
-          exportScale: data.appState.exportScale,
-          exportEmbedScene: data.appState.exportEmbedScene && type === "svg",
-        },
-        files: data.files,
+    const svgPromise = exportToSvg(
+      elements,
+      {
+        exportBackground,
+        exportWithDarkMode: appState.exportWithDarkMode,
+        viewBackgroundColor,
+        exportPadding,
+        exportScale: appState.exportScale,
+        exportEmbedScene: appState.exportEmbedScene && type === "svg",
       },
-      config: { exportingFrame: cfg.exportingFrame, padding: cfg.padding },
-    });
+      files,
+      { exportingFrame },
+    );
+
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
@@ -135,9 +128,9 @@ export const exportAsImage = async ({
         }),
         {
           description: "Export to SVG",
-          name: cfg.name,
-          extension: data.appState.exportEmbedScene ? "excalidraw.svg" : "svg",
-          fileHandle: cfg.fileHandle,
+          name,
+          extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
+          fileHandle,
         },
       );
     } else if (type === "clipboard-svg") {
@@ -151,33 +144,22 @@ export const exportAsImage = async ({
     }
   }
 
-  const tempCanvas = exportToCanvas({
-    data,
-    config: {
-      canvasBackgroundColor: !cfg.exportBackground
-        ? false
-        : cfg.viewBackgroundColor,
-      padding: cfg.padding,
-      theme: data.appState.exportWithDarkMode ? "dark" : "light",
-      scale: data.appState.exportScale,
-      fit: "none",
-      exportingFrame: cfg.exportingFrame,
-    },
+  const tempCanvas = exportToCanvas(elements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    exportPadding,
+    exportingFrame,
   });
 
   if (type === "png") {
-    const blob = canvasToBlob(tempCanvas);
-    if (data.appState.exportEmbedScene) {
-      blob.then((blob) =>
+    let blob = canvasToBlob(tempCanvas);
+
+    if (appState.exportEmbedScene) {
+      blob = blob.then((blob) =>
         import("./image").then(({ encodePngMetadata }) =>
           encodePngMetadata({
             blob,
-            metadata: serializeAsJSON(
-              data.elements,
-              data.appState,
-              data.files,
-              "local",
-            ),
+            metadata: serializeAsJSON(elements, appState, files, "local"),
           }),
         ),
       );
@@ -185,11 +167,11 @@ export const exportAsImage = async ({
 
     return fileSave(blob, {
       description: "Export to PNG",
-      name: cfg.name,
+      name,
       // FIXME reintroduce `excalidraw.png` when most people upgrade away
       // from 111.0.5563.64 (arm64), see #6349
       extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
-      fileHandle: cfg.fileHandle,
+      fileHandle,
     });
   } else if (type === "clipboard") {
     try {

packages/excalidraw/data/resave.ts

@@ -1,7 +1,6 @@
 import type { ExcalidrawElement } from "../element/types";
 import type { AppState, BinaryFiles } from "../types";
-import { prepareElementsForExport } from ".";
-import { exportAsImage } from ".";
+import { exportCanvas, prepareElementsForExport } from ".";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 
 export const resaveAsImageWithScene = async (
@@ -30,16 +29,12 @@ export const resaveAsImageWithScene = async (
     false,
   );
 
-  await exportAsImage({
-    type: fileHandleType,
-    data: { elements: exportedElements, appState, files },
-    config: {
-      exportBackground,
-      viewBackgroundColor,
-      name,
-      fileHandle,
-      exportingFrame,
-    },
+  await exportCanvas(fileHandleType, exportedElements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    name,
+    fileHandle,
+    exportingFrame,
   });
 
   return { fileHandle };

packages/excalidraw/element/binding.ts

@@ -576,11 +576,11 @@ export const updateBoundElements = (
   elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: { width: number; height: number };
+    oldSize?: { width: number; height: number };
     changedElements?: Map<string, OrderedExcalidrawElement>;
   },
 ) => {
-  const { newSize, simultaneouslyUpdated, changedElements } = options ?? {};
+  const { oldSize, simultaneouslyUpdated, changedElements } = options ?? {};
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
@@ -603,12 +603,12 @@ export const updateBoundElements = (
       startBinding: maybeCalculateNewGapWhenScaling(
         changedElement,
         element.startBinding,
-        newSize,
+        oldSize,
       ),
       endBinding: maybeCalculateNewGapWhenScaling(
         changedElement,
         element.endBinding,
-        newSize,
+        oldSize,
       ),
     };
 

packages/excalidraw/element/resizeElements.ts

@@ -739,9 +739,9 @@ export const resizeSingleElement = (
     mutateElement(element, resizedElement);
 
     updateBoundElements(element, elementsMap, {
-      newSize: {
-        width: resizedElement.width,
-        height: resizedElement.height,
+      oldSize: {
+        width: stateAtResizeStart.width,
+        height: stateAtResizeStart.height,
       },
     });
 
@@ -999,13 +999,14 @@ export const resizeMultipleElements = (
     element,
     update: { boundTextFontSize, ...update },
   } of elementsAndUpdates) {
-    const { angle, width: newWidth, height: newHeight } = update;
+    const { angle } = update;
+    const { width: oldWidth, height: oldHeight } = element;
 
     mutateElement(element, update, false);
 
     updateBoundElements(element, elementsMap, {
       simultaneouslyUpdated: elementsToUpdate,
-      newSize: { width: newWidth, height: newHeight },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
 
     const boundTextElement = getBoundTextElement(element, elementsMap);

packages/excalidraw/hooks/useLibraryItemSvg.ts

@@ -2,8 +2,8 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
 import { jotaiScope } from "../jotai";
+import { exportToSvg } from "../../utils/export";
 import type { LibraryItem } from "../types";
-import { exportToSvg } from "../scene/export";
 
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 
@@ -11,14 +11,14 @@ export const libraryItemSvgsCache = atom<SvgCache>(new Map());
 
 const exportLibraryItemToSvg = async (elements: LibraryItem["elements"]) => {
   return await exportToSvg({
-    data: {
-      elements,
-      appState: {
-        exportBackground: false,
-        viewBackgroundColor: COLOR_PALETTE.white,
-      },
-      files: null,
+    elements,
+    appState: {
+      exportBackground: false,
+      viewBackgroundColor: COLOR_PALETTE.white,
     },
+    files: null,
+    renderEmbeddables: false,
+    skipInliningFonts: true,
   });
 };
 

packages/excalidraw/index-node.ts

@@ -1,6 +1,5 @@
 import { exportToCanvas } from "./scene/export";
 import { getDefaultAppState } from "./appState";
-import { COLOR_WHITE } from "./constants";
 
 const { registerFont, createCanvas } = require("canvas");
 
@@ -58,21 +57,22 @@ const elements = [
 registerFont("./public/Virgil.woff2", { family: "Virgil" });
 registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
 
-const canvas = exportToCanvas({
-  data: {
-    elements: elements as any,
-    appState: {
-      ...getDefaultAppState(),
-      width: 0,
-      height: 0,
-    },
-    files: {}, // files
+const canvas = exportToCanvas(
+  elements as any,
+  {
+    ...getDefaultAppState(),
+    offsetTop: 0,
+    offsetLeft: 0,
+    width: 0,
+    height: 0,
   },
-  config: {
-    canvasBackgroundColor: COLOR_WHITE,
-    createCanvas,
+  {}, // files
+  {
+    exportBackground: true,
+    viewBackgroundColor: "#ffffff",
   },
-});
+  createCanvas,
+);
 
 const fs = require("fs");
 const out = fs.createWriteStream("test.png");

packages/excalidraw/index.tsx

@@ -225,6 +225,13 @@ export {
 
 export { reconcileElements } from "./data/reconcile";
 
+export {
+  exportToCanvas,
+  exportToBlob,
+  exportToSvg,
+  exportToClipboard,
+} from "../utils/export";
+
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export {
   loadFromBlob,
@@ -267,13 +274,6 @@ export { WelcomeScreen };
 export { LiveCollaborationTrigger };
 export { Stats } from "./components/Stats";
 
-export {
-  exportToCanvas,
-  exportToBlob,
-  exportToClipboard,
-  exportToSvg,
-} from "./scene/export";
-
 export { DefaultSidebar } from "./components/DefaultSidebar";
 export { TTDDialog } from "./components/TTDDialog/TTDDialog";
 export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";

packages/excalidraw/package.json

@@ -58,10 +58,11 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "1.1.2",
+    "@excalidraw/mermaid-to-excalidraw": "1.1.0",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
+    "@tldraw/vec": "1.7.1",
     "browser-fs-access": "0.29.1",
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",

packages/excalidraw/renderer/helpers.ts

@@ -1,4 +1,4 @@
-import type { AppState } from "../types";
+import type { StaticCanvasAppState, AppState } from "../types";
 
 import type { StaticCanvasRenderConfig } from "../scene/types";
 
@@ -34,16 +34,15 @@ export const bootstrapCanvas = ({
   normalizedHeight,
   theme,
   isExporting,
-  canvasBackgroundColor,
+  viewBackgroundColor,
 }: {
   canvas: HTMLCanvasElement;
   scale: number;
   normalizedWidth: number;
   normalizedHeight: number;
   theme?: AppState["theme"];
-  // static canvas only
   isExporting?: StaticCanvasRenderConfig["isExporting"];
-  canvasBackgroundColor?: string | null;
+  viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"];
 }): CanvasRenderingContext2D => {
   const context = canvas.getContext("2d")!;
 
@@ -55,17 +54,17 @@ export const bootstrapCanvas = ({
   }
 
   // Paint background
-  if (typeof canvasBackgroundColor === "string") {
+  if (typeof viewBackgroundColor === "string") {
     const hasTransparence =
-      canvasBackgroundColor === "transparent" ||
-      canvasBackgroundColor.length === 5 || // #RGBA
-      canvasBackgroundColor.length === 9 || // #RRGGBBA
-      /(hsla|rgba)\(/.test(canvasBackgroundColor);
+      viewBackgroundColor === "transparent" ||
+      viewBackgroundColor.length === 5 || // #RGBA
+      viewBackgroundColor.length === 9 || // #RRGGBBA
+      /(hsla|rgba)\(/.test(viewBackgroundColor);
     if (hasTransparence) {
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle = canvasBackgroundColor;
+    context.fillStyle = viewBackgroundColor;
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {

packages/excalidraw/renderer/staticScene.ts

@@ -216,7 +216,7 @@ const _renderStaticScene = ({
     normalizedHeight,
     theme: appState.theme,
     isExporting,
-    canvasBackgroundColor: renderConfig.canvasBackgroundColor,
+    viewBackgroundColor: appState.viewBackgroundColor,
   });
 
   // Apply zoom

packages/excalidraw/scene/Shape.ts

@@ -164,10 +164,8 @@ const getArrowheadShapes = (
   arrowhead: Arrowhead,
   generator: RoughGenerator,
   options: Options,
-  canvasBackgroundColor: string | null,
+  canvasBackgroundColor: string,
 ) => {
-  canvasBackgroundColor = canvasBackgroundColor || "transparent";
-
   const arrowheadPoints = getArrowheadPoints(
     element,
     shape,
@@ -295,7 +293,7 @@ export const _generateElementShape = (
     embedsValidationStatus,
   }: {
     isExporting: boolean;
-    canvasBackgroundColor: string | null;
+    canvasBackgroundColor: string;
     embedsValidationStatus: EmbedsValidationStatus | null;
   },
 ): Drawable | Drawable[] | null => {

packages/excalidraw/scene/ShapeCache.ts

@@ -8,8 +8,7 @@ import { elementWithCanvasCache } from "../renderer/renderElement";
 import { _generateElementShape } from "./Shape";
 import type { ElementShape, ElementShapes } from "./types";
 import { COLOR_PALETTE } from "../colors";
-import type { EmbedsValidationStatus } from "../types";
-import type { StaticCanvasRenderConfig } from "./types";
+import type { AppState, EmbedsValidationStatus } from "../types";
 
 export class ShapeCache {
   private static rg = new RoughGenerator();
@@ -51,7 +50,7 @@ export class ShapeCache {
     element: T,
     renderConfig: {
       isExporting: boolean;
-      canvasBackgroundColor: StaticCanvasRenderConfig["canvasBackgroundColor"];
+      canvasBackgroundColor: AppState["viewBackgroundColor"];
       embedsValidationStatus: EmbedsValidationStatus;
     } | null,
   ) => {

packages/excalidraw/scene/export.ts

@@ -5,7 +5,6 @@ import type {
   ExcalidrawTextElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-  Theme,
 } from "../element/types";
 import type { Bounds } from "../element/bounds";
 import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
@@ -13,15 +12,12 @@ import { renderSceneToSvg } from "../renderer/staticSvgScene";
 import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
 import type { AppState, BinaryFiles } from "../types";
 import {
-  COLOR_WHITE,
-  DEFAULT_ZOOM_VALUE,
+  DEFAULT_EXPORT_PADDING,
   FRAME_STYLE,
   FONT_FAMILY,
   SVG_NS,
   THEME,
   THEME_FILTER,
-  MIME_TYPES,
-  DEFAULT_SMALLEST_EXPORT_SIZE,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
@@ -29,7 +25,6 @@ import {
   getInitializedImageElements,
   updateImageCache,
 } from "../element/image";
-import { restoreAppState } from "../data/restore";
 import {
   getElementsOverlappingFrame,
   getFrameLikeElements,
@@ -44,12 +39,6 @@ import type { RenderableElementsMap } from "./types";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
 import { Fonts } from "../fonts";
-import { encodePngMetadata } from "../data/image";
-import {
-  copyBlobToClipboardAsPng,
-  copyTextToSystemClipboard,
-  copyToClipboard,
-} from "../clipboard";
 
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -160,199 +149,36 @@ const prepareElementsForRender = ({
   return nextElements;
 };
 
-type ExportToCanvasAppState = Partial<
-  Omit<AppState, "offsetTop" | "offsetLeft">
->;
-
-export type ExportSceneData = {
-  elements: readonly NonDeletedExcalidrawElement[];
-  appState?: ExportToCanvasAppState;
-  files: BinaryFiles | null;
-};
-
-export type ExportSceneConfig = {
-  theme?: Theme;
-  /**
-   * Canvas background. Valid values are:
-   *
-   * - `undefined` - the background of "appState.viewBackgroundColor" is used.
-   * - `false` - no background is used (set to "transparent").
-   * - `string` - should be a valid CSS color.
-   *
-   * @default undefined
-   */
-  canvasBackgroundColor?: string | false;
-  /**
-   * Canvas padding in pixels. Affected by `scale`.
-   *
-   * When `fit` is set to `none`, padding is added to the content bounding box
-   * (including if you set `width` or `height` or `maxWidthOrHeight` or
-   * `widthOrHeight`).
-   *
-   * When `fit` set to `contain`, padding is subtracted from the content
-   * bounding box (ensuring the size doesn't exceed the supplied values, with
-   * the exeception of using alongside `scale` as noted above), and the padding
-   * serves as a minimum distance between the content and the canvas edges, as
-   * it may exceed the supplied padding value from one side or the other in
-   * order to maintain the aspect ratio. It is recommended to set `position`
-   * to `center` when using `fit=contain`.
-   *
-   * When `fit` is set to `none` and either `width` or `height` or
-   * `maxWidthOrHeight` is set, padding is simply adding to the bounding box
-   * and the content may overflow the canvas, thus right or bottom padding
-   * may be ignored.
-   *
-   * @default 0
-   */
-  padding?: number;
-  // -------------------------------------------------------------------------
-  /**
-   * Makes sure the canvas content fits into a frame of width/height no larger
-   * than this value, while maintaining the aspect ratio.
-   *
-   * Final dimensions can get smaller/larger if used in conjunction with
-   * `scale`.
-   */
-  maxWidthOrHeight?: number;
-  /**
-   * Scale the canvas content to be excatly this many pixels wide/tall,
-   * maintaining the aspect ratio.
-   *
-   * Cannot be used in conjunction with `maxWidthOrHeight`.
-   *
-   * Final dimensions can get smaller/larger if used in conjunction with
-   * `scale`.
-   */
-  widthOrHeight?: number;
-  // -------------------------------------------------------------------------
-  /**
-   * Width of the frame. Supply `x` or `y` if you want to ofsset the canvas
-   * content.
-   *
-   * If `width` omitted but `height` supplied, `width` is calculated from the
-   * the content's bounding box to preserve the aspect ratio.
-   *
-   * Defaults to the content bounding box width when both `width` and `height`
-   * are omitted.
-   */
-  width?: number;
-  /**
-   * Height of the frame.
-   *
-   * If `height` omitted but `width` supplied, `height` is calculated from the
-   * content's bounding box to preserve the aspect ratio.
-   *
-   * Defaults to the content bounding box height when both `width` and `height`
-   * are omitted.
-   */
-  height?: number;
-  /**
-   * Left canvas offset. By default the coordinate is relative to the canvas.
-   * You can switch to content coordinates by setting `origin` to `content`.
-   *
-   * Defaults to the `x` postion of the content bounding box.
-   */
-  x?: number;
-  /**
-   * Top canvas offset. By default the coordinate is relative to the canvas.
-   * You can switch to content coordinates by setting `origin` to `content`.
-   *
-   * Defaults to the `y` postion of the content bounding box.
-   */
-  y?: number;
-  /**
-   * Indicates the coordinate system of the `x` and `y` values.
-   *
-   * - `canvas` - `x` and `y` are relative to the canvas [0, 0] position.
-   * - `content` - `x` and `y` are relative to the content bounding box.
-   *
-   * @default "canvas"
-   */
-  origin?: "canvas" | "content";
-  /**
-   * If dimensions specified and `x` and `y` are not specified, this indicates
-   * how the canvas should be scaled.
-   *
-   * Behavior aligns with the `object-fit` CSS property.
-   *
-   * - `none`    - no scaling.
-   * - `contain` - scale to fit the frame. Includes `padding`.
-   *
-   * If `maxWidthOrHeight` or `widthOrHeight` is set, `fit` is ignored.
-   *
-   * @default "contain" unless `width`, `height`, `maxWidthOrHeight`, or
-   * `widthOrHeight` is specified in which case `none` is the default (can be
-   * changed). If `x` or `y` are specified, `none` is forced.
-   */
-  fit?: "none" | "contain";
-  /**
-   * When either `x` or `y` are not specified, indicates how the canvas should
-   * be aligned on the respective axis.
-   *
-   * - `none`   - canvas aligned to top left.
-   * - `center` - canvas is centered on the axis which is not specified
-   *              (or both).
-   *
-   * If `maxWidthOrHeight` or `widthOrHeight` is set, `position` is ignored.
-   *
-   * @default "center"
-   */
-  position?: "center" | "topLeft";
-  // -------------------------------------------------------------------------
-  /**
-   * A multiplier to increase/decrease the frame dimensions
-   * (content resolution).
-   *
-   * For example, if your canvas is 300x150 and you set scale to 2, the
-   * resulting size will be 600x300.
-   *
-   * @default 1
-   */
-  scale?: number;
-  /**
-   * If you need to suply your own canvas, e.g. in test environments or in
-   * Node.js.
-   *
-   * Do not set `canvas.width/height` or modify the canvas context as that's
-   * handled by Excalidraw.
-   *
-   * Defaults to `document.createElement("canvas")`.
-   */
-  createCanvas?: () => HTMLCanvasElement;
-  /**
-   * If you want to supply `width`/`height` dynamically (or derive from the
-   * content bounding box), you can use this function.
-   *
-   * Ignored if `maxWidthOrHeight`, `width`, or `height` is set.
-   */
-  getDimensions?: (
+export const exportToCanvas = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
+  files: BinaryFiles,
+  {
+    exportBackground,
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    viewBackgroundColor,
+    exportingFrame,
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    viewBackgroundColor: string;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+  },
+  createCanvas: (
     width: number,
     height: number,
-  ) => { width: number; height: number; scale?: number };
-
-  exportingFrame?: ExcalidrawFrameLikeElement | null;
-
-  loadFonts?: () => Promise<void>;
-};
-
-const configExportDimension = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  // clone
-  const cfg = Object.assign({}, config);
-
-  const { exportingFrame } = cfg;
-
-  const elements = data.elements;
-
-  // initialize defaults
-  // ---------------------------------------------------------------------------
-
-  const appState = restoreAppState(data.appState, null);
+  ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width * appState.exportScale;
+    canvas.height = height * appState.exportScale;
+    return { canvas, scale: appState.exportScale };
+  },
+  loadFonts: () => Promise<void> = async () => {
+    await Fonts.loadElementsFonts(elements);
+  },
+) => {
+  // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
+  await loadFonts();
 
   const frameRendering = getFrameRenderingConfig(
     exportingFrame ?? null,
@@ -372,240 +198,24 @@ const configExportDimension = async ({
   });
 
   if (exportingFrame) {
-    cfg.padding = 0;
+    exportPadding = 0;
   }
 
-  cfg.fit =
-    cfg.fit ??
-    (cfg.width != null ||
-    cfg.height != null ||
-    cfg.maxWidthOrHeight != null ||
-    cfg.widthOrHeight != null
-      ? "contain"
-      : "none");
-
-  cfg.padding = cfg.padding ?? 0;
-  cfg.scale = cfg.scale ?? 1;
-
-  cfg.origin = cfg.origin ?? "canvas";
-  cfg.position = cfg.position ?? "center";
-
-  if (cfg.maxWidthOrHeight != null && cfg.widthOrHeight != null) {
-    if (!import.meta.env.PROD) {
-      console.warn("`maxWidthOrHeight` is ignored when `widthOrHeight` is set");
-    }
-    cfg.maxWidthOrHeight = undefined;
-  }
-
-  if (
-    (cfg.maxWidthOrHeight != null || cfg.width != null || cfg.height != null) &&
-    cfg.getDimensions
-  ) {
-    if (!import.meta.env.PROD) {
-      console.warn(
-        "`getDimensions` is ignored when `width`, `height`, or `maxWidthOrHeight` is set",
-      );
-    }
-    cfg.getDimensions = undefined;
-  }
-  // ---------------------------------------------------------------------------
-
-  // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
-  if (cfg.loadFonts) {
-    await cfg.loadFonts();
-  } else {
-    await Fonts.loadElementsFonts(elements);
-  }
-
-  // value used to scale the canvas context. By default, we use this to
-  // make the canvas fit into the frame (e.g. for `cfg.fit` set to `contain`).
-  // If `cfg.scale` is set, we multiply the resulting canvasScale by it to
-  // scale the output further.
-  let exportScale = 1;
-
-  const origCanvasSize = getCanvasSize(
+  const [minX, minY, width, height] = getCanvasSize(
     exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
   );
 
-  // cfg.x = undefined;
-  // cfg.y = undefined;
+  const { canvas, scale = 1 } = createCanvas(width, height);
 
-  // variables for original content bounding box
-  const [origX, origY, origWidth, origHeight] = origCanvasSize;
-  // variables for target bounding box
-  let [x, y, width, height] = origCanvasSize;
-
-  x = cfg.x ?? x;
-  y = cfg.y ?? y;
-  width = cfg.width ?? width;
-  height = cfg.height ?? height;
-
-  if (cfg.fit === "contain" || cfg.widthOrHeight || cfg.maxWidthOrHeight) {
-    cfg.padding =
-      cfg.padding && cfg.padding > 0
-        ? Math.min(
-            cfg.padding,
-            (width - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-            (height - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-          )
-        : 0;
-
-    if (cfg.getDimensions != null) {
-      const ret = cfg.getDimensions(width, height);
-
-      width = ret.width;
-      height = ret.height;
-
-      cfg.padding = Math.min(
-        cfg.padding,
-        (width - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-        (height - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    } else if (cfg.widthOrHeight != null) {
-      cfg.padding = Math.min(
-        cfg.padding,
-        (cfg.widthOrHeight - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    } else if (cfg.maxWidthOrHeight != null) {
-      cfg.padding = Math.min(
-        cfg.padding,
-        (cfg.maxWidthOrHeight - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    }
-  }
-
-  if (cfg.maxWidthOrHeight != null || cfg.widthOrHeight != null) {
-    if (cfg.padding) {
-      if (cfg.maxWidthOrHeight != null) {
-        cfg.maxWidthOrHeight -= cfg.padding * 2;
-      } else if (cfg.widthOrHeight != null) {
-        cfg.widthOrHeight -= cfg.padding * 2;
-      }
-    }
-
-    const max = Math.max(width, height);
-    if (cfg.widthOrHeight != null) {
-      // calculate by how much do we need to scale the canvas to fit into the
-      // target dimension (e.g. target: max 50px, actual: 70x100px => scale: 0.5)
-      exportScale = cfg.widthOrHeight / max;
-    } else if (cfg.maxWidthOrHeight != null) {
-      exportScale = cfg.maxWidthOrHeight < max ? cfg.maxWidthOrHeight / max : 1;
-    }
-
-    width *= exportScale;
-    height *= exportScale;
-  } else if (cfg.getDimensions) {
-    const ret = cfg.getDimensions(width, height);
-
-    width = ret.width;
-    height = ret.height;
-    cfg.scale = ret.scale ?? cfg.scale;
-  } else if (cfg.fit === "contain") {
-    width -= cfg.padding * 2;
-    height -= cfg.padding * 2;
-
-    const wRatio = width / origWidth;
-    const hRatio = height / origHeight;
-    // scale the orig canvas to fit in the target region
-    exportScale = Math.min(wRatio, hRatio);
-  }
-
-  x = cfg.x ?? origX;
-  y = cfg.y ?? origY;
-
-  // if we switch to "content" coords, we need to offset cfg-supplied
-  // coords by the x/y of content bounding box
-  if (cfg.origin === "content") {
-    if (cfg.x != null) {
-      x += origX;
-    }
-    if (cfg.y != null) {
-      y += origY;
-    }
-  }
-
-  // Centering the content to the frame.
-  // We divide width/height by canvasScale so that we calculate in the original
-  // aspect ratio dimensions.
-  if (cfg.position === "center") {
-    x -=
-      width / exportScale / 2 -
-      (cfg.x == null ? origWidth : width + cfg.padding * 2) / 2;
-    y -=
-      height / exportScale / 2 -
-      (cfg.y == null ? origHeight : height + cfg.padding * 2) / 2;
-  }
-
-  // rescale padding based on current canvasScale factor so that the resulting
-  // padding is kept the same as supplied by user (with the exception of
-  // `cfg.scale` being set, which also scales the padding)
-  const normalizedPadding = cfg.padding / exportScale;
-
-  // scale the whole frame by cfg.scale (on top of whatever canvasScale we
-  // calculated above)
-  exportScale *= cfg.scale;
-
-  width *= cfg.scale;
-  height *= cfg.scale;
-
-  const exportWidth = width + cfg.padding * 2 * cfg.scale;
-  const exportHeight = height + cfg.padding * 2 * cfg.scale;
-
-  return {
-    config: cfg,
-    normalizedPadding,
-    contentWidth: width,
-    contentHeight: height,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  };
-};
-
-/**
- * This API is usually used as a precursor to searializing to Blob or PNG,
- * but can also be used to create a canvas for other purposes.
- */
-export const exportToCanvas = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  const {
-    config: cfg,
-    normalizedPadding,
-    contentWidth: width,
-    contentHeight: height,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  } = await configExportDimension({ data, config });
-
-  const canvas = cfg.createCanvas
-    ? cfg.createCanvas()
-    : document.createElement("canvas");
-
-  canvas.width = exportWidth;
-  canvas.height = exportHeight;
+  const defaultAppState = getDefaultAppState();
 
   const { imageCache } = await updateImageCache({
     imageCache: new Map(),
     fileIds: getInitializedImageElements(elementsForRender).map(
       (element) => element.fileId,
     ),
-    files: data.files || {},
+    files,
   });
 
   renderStaticScene({
@@ -615,32 +225,22 @@ export const exportToCanvas = async ({
       arrayToMap(elementsForRender),
     ),
     allElementsMap: toBrandedType<NonDeletedSceneElementsMap>(
-      arrayToMap(syncInvalidIndices(data.elements)),
+      arrayToMap(syncInvalidIndices(elements)),
     ),
     visibleElements: elementsForRender,
+    scale,
     appState: {
       ...appState,
       frameRendering,
-      width,
-      height,
-      offsetLeft: 0,
-      offsetTop: 0,
-      scrollX: -x + normalizedPadding,
-      scrollY: -y + normalizedPadding,
-      zoom: { value: DEFAULT_ZOOM_VALUE },
-
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      scrollX: -minX + exportPadding,
+      scrollY: -minY + exportPadding,
+      zoom: defaultAppState.zoom,
       shouldCacheIgnoreZoom: false,
-      theme: cfg.theme || THEME.LIGHT,
+      theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
     },
-    scale: exportScale,
     renderConfig: {
-      canvasBackgroundColor:
-        cfg.canvasBackgroundColor === false
-          ? // null indicates transparent background
-            null
-          : cfg.canvasBackgroundColor ||
-            appState.viewBackgroundColor ||
-            COLOR_WHITE,
+      canvasBackgroundColor: viewBackgroundColor,
       imageCache,
       renderGrid: false,
       isExporting: true,
@@ -654,91 +254,95 @@ export const exportToCanvas = async ({
   return canvas;
 };
 
-type ExportToSvgConfig = Pick<
-  ExportSceneConfig,
-  "canvasBackgroundColor" | "padding" | "theme" | "exportingFrame"
-> & {
-  /**
-   * if true, all embeddables passed in will be rendered when possible.
-   */
-  renderEmbeddables?: boolean;
-  skipInliningFonts?: true;
-  reuseImages?: boolean;
-};
-
-export const exportToSvg = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  const {
-    config: cfg,
-    normalizedPadding,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  } = await configExportDimension({ data, config });
-
-  const offsetX = -(x - normalizedPadding);
-  const offsetY = -(y - normalizedPadding);
-
-  const { elements } = data;
-
-  // initialize SVG root
-  const svgRoot = document.createElementNS(SVG_NS, "svg");
-  svgRoot.setAttribute("version", "1.1");
-  svgRoot.setAttribute("xmlns", SVG_NS);
-  svgRoot.setAttribute(
-    "viewBox",
-    `0 0 ${exportWidth / exportScale} ${exportHeight / exportScale}`,
+export const exportToSvg = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    exportScale?: number;
+    viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
+    exportEmbedScene?: boolean;
+    frameRendering?: AppState["frameRendering"];
+  },
+  files: BinaryFiles | null,
+  opts?: {
+    /**
+     * if true, all embeddables passed in will be rendered when possible.
+     */
+    renderEmbeddables?: boolean;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+    skipInliningFonts?: true;
+    reuseImages?: boolean;
+  },
+): Promise<SVGSVGElement> => {
+  const frameRendering = getFrameRenderingConfig(
+    opts?.exportingFrame ?? null,
+    appState.frameRendering ?? null,
   );
-  svgRoot.setAttribute("width", `${exportWidth}`);
-  svgRoot.setAttribute("height", `${exportHeight}`);
-  if (cfg.theme === THEME.DARK) {
-    svgRoot.setAttribute("filter", THEME_FILTER);
+
+  let {
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    exportWithDarkMode = false,
+    viewBackgroundColor,
+    exportScale = 1,
+    exportEmbedScene,
+  } = appState;
+
+  const { exportingFrame = null } = opts || {};
+
+  const elementsForRender = prepareElementsForRender({
+    elements,
+    exportingFrame,
+    exportWithDarkMode,
+    frameRendering,
+  });
+
+  if (exportingFrame) {
+    exportPadding = 0;
   }
 
-  const fontFaces = cfg.loadFonts
-    ? await Fonts.generateFontFaceDeclarations(elements)
-    : [];
-
-  const delimiter = "\n      "; // 6 spaces
-
   let metadata = "";
 
   // we need to serialize the "original" elements before we put them through
   // the tempScene hack which duplicates and regenerates ids
-  if (appState.exportEmbedScene) {
+  if (exportEmbedScene) {
     try {
       metadata = (await import("../data/image")).encodeSvgMetadata({
         // when embedding scene, we want to embed the origionally supplied
         // elements which don't contain the temp frame labels.
         // But it also requires that the exportToSvg is being supplied with
         // only the elements that we're exporting, and no extra.
-        text: serializeAsJSON(elements, appState, data.files || {}, "local"),
+        text: serializeAsJSON(elements, appState, files || {}, "local"),
       });
     } catch (error: any) {
       console.error(error);
     }
   }
 
-  let exportContentClipPath = "";
-  if (cfg.width != null && cfg.height != null) {
-    exportContentClipPath = `<clipPath id="content">
-      <rect x="${offsetX}" y="${offsetY}" width="${exportWidth}" height="${exportWidth}"></rect>
-    </clipPath>`;
+  const [minX, minY, width, height] = getCanvasSize(
+    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
+  );
+
+  // initialize SVG root
+  const svgRoot = document.createElementNS(SVG_NS, "svg");
+  svgRoot.setAttribute("version", "1.1");
+  svgRoot.setAttribute("xmlns", SVG_NS);
+  svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svgRoot.setAttribute("width", `${width * exportScale}`);
+  svgRoot.setAttribute("height", `${height * exportScale}`);
+  if (exportWithDarkMode) {
+    svgRoot.setAttribute("filter", THEME_FILTER);
   }
 
+  const offsetX = -minX + exportPadding;
+  const offsetY = -minY + exportPadding;
+
+  const frameElements = getFrameLikeElements(elements);
+
   let exportingFrameClipPath = "";
   const elementsMap = arrayToMap(elements);
-  const frameElements = getFrameLikeElements(elements);
   for (const frame of frameElements) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame, elementsMap);
     const cx = (x2 - x1) / 2 - (frame.x - x1);
@@ -751,7 +355,7 @@ export const exportToSvg = async ({
           width="${frame.width}"
           height="${frame.height}"
           ${
-            cfg.exportingFrame
+            exportingFrame
               ? ""
               : `rx=${FRAME_STYLE.radius} ry=${FRAME_STYLE.radius}`
           }
@@ -760,56 +364,59 @@ export const exportToSvg = async ({
         </clipPath>`;
   }
 
+  const fontFaces = !opts?.skipInliningFonts
+    ? await Fonts.generateFontFaceDeclarations(elements)
+    : [];
+
+  const delimiter = "\n      "; // 6 spaces
+
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
   ${metadata}
   <defs>
-    <style class="style-fonts">${delimiter}${fontFaces.join(delimiter)}</style>
-    ${exportContentClipPath}
+    <style class="style-fonts">${delimiter}${fontFaces.join(delimiter)}
+    </style>
     ${exportingFrameClipPath}
   </defs>
   `;
 
   // render background rect
-  if (appState.exportBackground && appState.viewBackgroundColor) {
+  if (appState.exportBackground && viewBackgroundColor) {
     const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
     rect.setAttribute("x", "0");
     rect.setAttribute("y", "0");
-    rect.setAttribute("width", `${exportWidth / exportScale}`);
-    rect.setAttribute("height", `${exportHeight / exportScale}`);
-    rect.setAttribute(
-      "fill",
-      cfg.canvasBackgroundColor || appState.viewBackgroundColor,
-    );
+    rect.setAttribute("width", `${width}`);
+    rect.setAttribute("height", `${height}`);
+    rect.setAttribute("fill", viewBackgroundColor);
     svgRoot.appendChild(rect);
   }
 
   const rsvg = rough.svg(svgRoot);
 
-  // const renderEmbeddables = appState.embe ?? false;
+  const renderEmbeddables = opts?.renderEmbeddables ?? false;
 
   renderSceneToSvg(
     elementsForRender,
     toBrandedType<RenderableElementsMap>(arrayToMap(elementsForRender)),
     rsvg,
     svgRoot,
-    data.files || {},
+    files || {},
     {
       offsetX,
       offsetY,
       isExporting: true,
-      exportWithDarkMode: cfg.theme === THEME.DARK,
-      renderEmbeddables: false,
+      exportWithDarkMode,
+      renderEmbeddables,
       frameRendering,
-      canvasBackgroundColor: appState.viewBackgroundColor,
-      embedsValidationStatus: false
+      canvasBackgroundColor: viewBackgroundColor,
+      embedsValidationStatus: renderEmbeddables
         ? new Map(
             elementsForRender
               .filter((element) => isFrameLikeElement(element))
               .map((element) => [element.id, true]),
           )
         : new Map(),
-      reuseImages: true,
+      reuseImages: opts?.reuseImages ?? true,
     },
   );
 
@@ -817,112 +424,25 @@ export const exportToSvg = async ({
 };
 
 // calculate smallest area to fit the contents in
-export const getCanvasSize = (
+const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
 ): Bounds => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX);
-  const height = distance(minY, maxY);
+  const width = distance(minX, maxX) + exportPadding * 2;
+  const height = distance(minY, maxY) + exportPadding * 2;
 
   return [minX, minY, width, height];
 };
 
-export { MIME_TYPES };
+export const getExportSize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
+  scale: number,
+): [number, number] => {
+  const [, , width, height] = getCanvasSize(elements, exportPadding).map(
+    (dimension) => Math.trunc(dimension * scale),
+  );
 
-type ExportToBlobConfig = ExportSceneConfig & {
-  mimeType?: string;
-  quality?: number;
-};
-
-export const exportToBlob = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportToBlobConfig;
-}): Promise<Blob> => {
-  let { mimeType = MIME_TYPES.png, quality } = config || {};
-
-  if (mimeType === MIME_TYPES.png && typeof quality === "number") {
-    console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
-  }
-
-  // typo in MIME type (should be "jpeg")
-  if (mimeType === "image/jpg") {
-    mimeType = MIME_TYPES.jpg;
-  }
-
-  if (mimeType === MIME_TYPES.jpg && !config?.canvasBackgroundColor === false) {
-    console.warn(
-      `Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`,
-    );
-    config = {
-      ...config,
-      canvasBackgroundColor: data.appState?.viewBackgroundColor || COLOR_WHITE,
-    };
-  }
-
-  const canvas = await exportToCanvas({ data, config });
-
-  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
-
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      async (blob) => {
-        if (!blob) {
-          return reject(new Error("couldn't export to blob"));
-        }
-        if (
-          blob &&
-          mimeType === MIME_TYPES.png &&
-          data.appState?.exportEmbedScene
-        ) {
-          blob = await encodePngMetadata({
-            blob,
-            metadata: serializeAsJSON(
-              // NOTE as long as we're using the Scene hack, we need to ensure
-              // we pass the original, uncloned elements when serializing
-              // so that we keep ids stable
-              data.elements,
-              data.appState,
-              data.files || {},
-              "local",
-            ),
-          });
-        }
-        resolve(blob);
-      },
-      mimeType,
-      quality,
-    );
-  });
-};
-
-export const exportToClipboard = async ({
-  type,
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-} & (
-  | { type: "png"; config?: ExportToBlobConfig }
-  | { type: "svg"; config?: ExportToSvgConfig }
-  | { type: "json"; config?: never }
-)) => {
-  if (type === "svg") {
-    const svg = await exportToSvg({
-      data: {
-        ...data,
-        appState: restoreAppState(data.appState, null),
-      },
-      config,
-    });
-    await copyTextToSystemClipboard(svg.outerHTML);
-  } else if (type === "png") {
-    await copyBlobToClipboardAsPng(exportToBlob({ data, config }));
-  } else if (type === "json") {
-    await copyToClipboard(data.elements, data.files);
-  } else {
-    throw new Error("Invalid export type");
-  }
+  return [width, height];
 };

packages/excalidraw/scene/types.ts

@@ -24,6 +24,7 @@ export type RenderableElementsMap = NonDeletedElementsMap &
   MakeBrand<"RenderableElementsMap">;
 
 export type StaticCanvasRenderConfig = {
+  canvasBackgroundColor: AppState["viewBackgroundColor"];
   // extra options passed to the renderer
   // ---------------------------------------------------------------------------
   imageCache: AppClassProperties["imageCache"];
@@ -31,8 +32,6 @@ export type StaticCanvasRenderConfig = {
   /** when exporting the behavior is slightly different (e.g. we can't use
    CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;
-  /** null indicates transparent bg */
-  canvasBackgroundColor: string | null;
   embedsValidationStatus: EmbedsValidationStatus;
   elementsPendingErasure: ElementsPendingErasure;
   pendingFlowchartNodes: PendingExcalidrawElements | null;
@@ -82,13 +81,6 @@ export type StaticSceneRenderConfig = {
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
-  /**
-   * canvas scale factor. Not related to zoom. In browsers, it's the
-   * devicePixelRatio. For export, it's the `appState.exportScale`
-   * (user setting) or whatever scale you want to use when exporting elsewhere.
-   *
-   * Bigger the scale, the more pixels (=quality).
-   */
   scale: number;
   appState: StaticCanvasAppState;
   renderConfig: StaticCanvasRenderConfig;

packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active too
  B --&gt; C{Let me think}
  C --&gt;|One| D[Laptop]
  C --&gt;|Two| E[iPhone]
- C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="300" height="0" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
+ C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Test <MermaidToExcalidraw/> > should show error in preview when mermaid library throws error 1`] = `

packages/excalidraw/tests/cropElement.test.tsx

@@ -156,8 +156,8 @@ describe("Crop an image", () => {
       [-initialWidth / 3, 0],
       true,
     );
-    expect(image.width).toBeCloseTo(resizedWidth, 10);
-    expect(image.height).toBeCloseTo(resizedHeight, 10);
+    expect(image.width).toBe(resizedWidth);
+    expect(image.height).toBe(resizedHeight);
 
     // re-crop to initial state
     UI.crop(image, "w", naturalWidth, naturalHeight, [-initialWidth / 3, 0]);
@@ -315,28 +315,20 @@ describe("Cropping and other features", async () => {
     const widthToHeightRatio = image.width / image.height;
 
     const canvas = await exportToCanvas({
-      data: {
-        elements: [image],
-        appState: h.state,
-        files: h.app.files,
-      },
-      config: {
-        padding: 0,
-      },
+      elements: [image],
+      appState: h.state,
+      files: h.app.files,
+      exportPadding: 0,
     });
     const exportedCanvasRatio = canvas.width / canvas.height;
 
     expect(widthToHeightRatio).toBeCloseTo(exportedCanvasRatio);
 
     const svg = await exportToSvg({
-      data: {
-        elements: [image],
-        appState: h.state,
-        files: h.app.files,
-      },
-      config: {
-        padding: 0,
-      },
+      elements: [image],
+      appState: h.state,
+      files: h.app.files,
+      exportPadding: 0,
     });
     const svgWidth = svg.getAttribute("width");
     const svgHeight = svg.getAttribute("height");

packages/excalidraw/tests/export.test.tsx

@@ -163,7 +163,7 @@ describe("export", () => {
       },
     } as const;
 
-    const svg = await exportToSvg({ data: { elements, appState, files } });
+    const svg = await exportToSvg(elements, appState, files);
 
     const svgText = svg.outerHTML;
 

packages/excalidraw/tests/history.test.tsx

@@ -15,11 +15,7 @@ import { getDefaultAppState } from "../appState";
 import { fireEvent, queryByTestId, waitFor } from "@testing-library/react";
 import { createUndoAction, createRedoAction } from "../actions/actionHistory";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import {
-  COLOR_CHARCOAL_BLACK,
-  EXPORT_DATA_TYPES,
-  MIME_TYPES,
-} from "../constants";
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import type { AppState } from "../types";
 import { arrayToMap } from "../utils";
 import {
@@ -81,7 +77,7 @@ const checkpoint = (name: string) => {
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
 const transparent = COLOR_PALETTE.transparent;
-const black = COLOR_CHARCOAL_BLACK;
+const black = COLOR_PALETTE.black;
 const red = COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 const blue = COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 const yellow = COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -1235,7 +1235,8 @@ describe("Test Linear Elements", () => {
       mouse.downAt(rect.x, rect.y);
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
-      expect(arrow.width).toBe(200);
+
+      expect(arrow.width).toBe(205);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

packages/excalidraw/tests/resize.test.tsx

@@ -882,11 +882,11 @@ describe("multiple selection", () => {
 
     expect(leftBoundArrow.x).toBeCloseTo(-110);
     expect(leftBoundArrow.y).toBeCloseTo(50);
-    expect(leftBoundArrow.width).toBeCloseTo(140, 0);
+    expect(leftBoundArrow.width).toBeCloseTo(137.5, 0);
     expect(leftBoundArrow.height).toBeCloseTo(7, 0);
     expect(leftBoundArrow.angle).toEqual(0);
     expect(leftBoundArrow.startBinding).toBeNull();
-    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
+    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(12.352);
     expect(leftBoundArrow.endBinding?.elementId).toBe(
       leftArrowBinding.elementId,
     );

packages/excalidraw/types.ts

@@ -173,6 +173,8 @@ type _CommonCanvasAppState = {
 export type StaticCanvasAppState = Readonly<
   _CommonCanvasAppState & {
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
+    /** null indicates transparent bg */
+    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
     exportScale: AppState["exportScale"];
     selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
     gridSize: AppState["gridSize"];

packages/excalidraw/utils.ts

@@ -1,8 +1,8 @@
 import Pool from "es6-promise-pool";
 import { average } from "../math";
+import { COLOR_PALETTE } from "./colors";
 import type { EVENT } from "./constants";
 import {
-  COLOR_TRANSPARENT,
   DEFAULT_VERSION,
   FONT_FAMILY,
   getFontFamilyFallbacks,
@@ -536,7 +536,11 @@ export const findLastIndex = <T>(
 export const isTransparent = (color: string) => {
   const isRGBTransparent = color.length === 5 && color.substr(4, 1) === "0";
   const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === "00";
-  return isRGBTransparent || isRRGGBBTransparent || color === COLOR_TRANSPARENT;
+  return (
+    isRGBTransparent ||
+    isRRGGBBTransparent ||
+    color === COLOR_PALETTE.transparent
+  );
 };
 
 export type ResolvablePromise<T> = Promise<T> & {
@@ -1221,18 +1225,3 @@ export class PromisePool<T> {
     });
   }
 }
-
-export const pick = <
-  R extends Record<string, any>,
-  K extends readonly (keyof R)[],
->(
-  source: R,
-  keys: K,
-) => {
-  return keys.reduce((acc, key: K[number]) => {
-    if (key in source) {
-      acc[key] = source[key];
-    }
-    return acc;
-  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
-};

packages/utils/export.test.ts

@@ -0,0 +1,132 @@
+import * as utils from ".";
+import { diagramFactory } from "../excalidraw/tests/fixtures/diagramFixture";
+import { vi } from "vitest";
+import * as mockedSceneExportUtils from "../excalidraw/scene/export";
+
+import { MIME_TYPES } from "../excalidraw/constants";
+
+const exportToSvgSpy = vi.spyOn(mockedSceneExportUtils, "exportToSvg");
+
+describe("exportToCanvas", async () => {
+  const EXPORT_PADDING = 10;
+
+  it("with default arguments", async () => {
+    const canvas = await utils.exportToCanvas({
+      ...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
+    });
+
+    expect(canvas.width).toBe(100 + 2 * EXPORT_PADDING);
+    expect(canvas.height).toBe(100 + 2 * EXPORT_PADDING);
+  });
+
+  it("when custom width and height", async () => {
+    const canvas = await utils.exportToCanvas({
+      ...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
+      getDimensions: () => ({ width: 200, height: 200, scale: 1 }),
+    });
+
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(200);
+  });
+});
+
+describe("exportToBlob", async () => {
+  describe("mime type", () => {
+    it("should change image/jpg to image/jpeg", async () => {
+      const blob = await utils.exportToBlob({
+        ...diagramFactory(),
+        getDimensions: (width, height) => ({ width, height, scale: 1 }),
+        // testing typo in MIME type (jpg → jpeg)
+        mimeType: "image/jpg",
+        appState: {
+          exportBackground: true,
+        },
+      });
+      expect(blob?.type).toBe(MIME_TYPES.jpg);
+    });
+    it("should default to image/png", async () => {
+      const blob = await utils.exportToBlob({
+        ...diagramFactory(),
+      });
+      expect(blob?.type).toBe(MIME_TYPES.png);
+    });
+
+    it("should warn when using quality with image/png", async () => {
+      const consoleSpy = vi
+        .spyOn(console, "warn")
+        .mockImplementationOnce(() => void 0);
+      await utils.exportToBlob({
+        ...diagramFactory(),
+        mimeType: MIME_TYPES.png,
+        quality: 1,
+      });
+      expect(consoleSpy).toHaveBeenCalledWith(
+        `"quality" will be ignored for "${MIME_TYPES.png}" mimeType`,
+      );
+    });
+  });
+});
+
+describe("exportToSvg", () => {
+  const passedElements = () => exportToSvgSpy.mock.calls[0][0];
+  const passedOptions = () => exportToSvgSpy.mock.calls[0][1];
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("with default arguments", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: { appState: void 0 },
+      }),
+    });
+
+    const passedOptionsWhenDefault = {
+      ...passedOptions(),
+      // To avoid varying snapshots
+      name: "name",
+    };
+    expect(passedElements().length).toBe(3);
+    expect(passedOptionsWhenDefault).toMatchSnapshot();
+  });
+
+  // FIXME the utils.exportToSvg no longer filters out deleted elements.
+  // It's already supposed to be passed non-deleted elements by we're not
+  // type-checking for it correctly.
+  it.skip("with deleted elements", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: { appState: void 0 },
+        elementOverrides: { isDeleted: true },
+      }),
+    });
+
+    expect(passedElements().length).toBe(0);
+  });
+
+  it("with exportPadding", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({ overrides: { appState: { name: "diagram name" } } }),
+      exportPadding: 0,
+    });
+
+    expect(passedElements().length).toBe(3);
+    expect(passedOptions()).toEqual(
+      expect.objectContaining({ exportPadding: 0 }),
+    );
+  });
+
+  it("with exportEmbedScene", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: {
+          appState: { name: "diagram name", exportEmbedScene: true },
+        },
+      }),
+    });
+
+    expect(passedElements().length).toBe(3);
+    expect(passedOptions().exportEmbedScene).toBe(true);
+  });
+});

packages/utils/export.ts

@@ -0,0 +1,213 @@
+import {
+  exportToCanvas as _exportToCanvas,
+  exportToSvg as _exportToSvg,
+} from "../excalidraw/scene/export";
+import { getDefaultAppState } from "../excalidraw/appState";
+import type { AppState, BinaryFiles } from "../excalidraw/types";
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
+} from "../excalidraw/element/types";
+import { restore } from "../excalidraw/data/restore";
+import { MIME_TYPES } from "../excalidraw/constants";
+import { encodePngMetadata } from "../excalidraw/data/image";
+import { serializeAsJSON } from "../excalidraw/data/json";
+import {
+  copyBlobToClipboardAsPng,
+  copyTextToSystemClipboard,
+  copyToClipboard,
+} from "../excalidraw/clipboard";
+
+export { MIME_TYPES };
+
+type ExportOpts = {
+  elements: readonly NonDeleted<ExcalidrawElement>[];
+  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
+  files: BinaryFiles | null;
+  maxWidthOrHeight?: number;
+  exportingFrame?: ExcalidrawFrameLikeElement | null;
+  getDimensions?: (
+    width: number,
+    height: number,
+  ) => { width: number; height: number; scale?: number };
+};
+
+export const exportToCanvas = ({
+  elements,
+  appState,
+  files,
+  maxWidthOrHeight,
+  getDimensions,
+  exportPadding,
+  exportingFrame,
+}: ExportOpts & {
+  exportPadding?: number;
+}) => {
+  const { elements: restoredElements, appState: restoredAppState } = restore(
+    { elements, appState },
+    null,
+    null,
+  );
+  const { exportBackground, viewBackgroundColor } = restoredAppState;
+  return _exportToCanvas(
+    restoredElements,
+    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
+    files || {},
+    { exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
+    (width: number, height: number) => {
+      const canvas = document.createElement("canvas");
+
+      if (maxWidthOrHeight) {
+        if (typeof getDimensions === "function") {
+          console.warn(
+            "`getDimensions()` is ignored when `maxWidthOrHeight` is supplied.",
+          );
+        }
+
+        const max = Math.max(width, height);
+
+        // if content is less then maxWidthOrHeight, fallback on supplied scale
+        const scale =
+          maxWidthOrHeight < max
+            ? maxWidthOrHeight / max
+            : appState?.exportScale ?? 1;
+
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+
+        return {
+          canvas,
+          scale,
+        };
+      }
+
+      const ret = getDimensions?.(width, height) || { width, height };
+
+      canvas.width = ret.width;
+      canvas.height = ret.height;
+
+      return {
+        canvas,
+        scale: ret.scale ?? 1,
+      };
+    },
+  );
+};
+
+export const exportToBlob = async (
+  opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    exportPadding?: number;
+  },
+): Promise<Blob> => {
+  let { mimeType = MIME_TYPES.png, quality } = opts;
+
+  if (mimeType === MIME_TYPES.png && typeof quality === "number") {
+    console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
+  }
+
+  // typo in MIME type (should be "jpeg")
+  if (mimeType === "image/jpg") {
+    mimeType = MIME_TYPES.jpg;
+  }
+
+  if (mimeType === MIME_TYPES.jpg && !opts.appState?.exportBackground) {
+    console.warn(
+      `Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`,
+    );
+    opts = {
+      ...opts,
+      appState: { ...opts.appState, exportBackground: true },
+    };
+  }
+
+  const canvas = await exportToCanvas(opts);
+
+  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      async (blob) => {
+        if (!blob) {
+          return reject(new Error("couldn't export to blob"));
+        }
+        if (
+          blob &&
+          mimeType === MIME_TYPES.png &&
+          opts.appState?.exportEmbedScene
+        ) {
+          blob = await encodePngMetadata({
+            blob,
+            metadata: serializeAsJSON(
+              // NOTE as long as we're using the Scene hack, we need to ensure
+              // we pass the original, uncloned elements when serializing
+              // so that we keep ids stable
+              opts.elements,
+              opts.appState,
+              opts.files || {},
+              "local",
+            ),
+          });
+        }
+        resolve(blob);
+      },
+      mimeType,
+      quality,
+    );
+  });
+};
+
+export const exportToSvg = async ({
+  elements,
+  appState = getDefaultAppState(),
+  files = {},
+  exportPadding,
+  renderEmbeddables,
+  exportingFrame,
+  skipInliningFonts,
+  reuseImages,
+}: Omit<ExportOpts, "getDimensions"> & {
+  exportPadding?: number;
+  renderEmbeddables?: boolean;
+  skipInliningFonts?: true;
+  reuseImages?: boolean;
+}): Promise<SVGSVGElement> => {
+  const { elements: restoredElements, appState: restoredAppState } = restore(
+    { elements, appState },
+    null,
+    null,
+  );
+
+  const exportAppState = {
+    ...restoredAppState,
+    exportPadding,
+  };
+
+  return _exportToSvg(restoredElements, exportAppState, files, {
+    exportingFrame,
+    renderEmbeddables,
+    skipInliningFonts,
+    reuseImages,
+  });
+};
+
+export const exportToClipboard = async (
+  opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    type: "png" | "svg" | "json";
+  },
+) => {
+  if (opts.type === "svg") {
+    const svg = await exportToSvg(opts);
+    await copyTextToSystemClipboard(svg.outerHTML);
+  } else if (opts.type === "png") {
+    await copyBlobToClipboardAsPng(exportToBlob(opts));
+  } else if (opts.type === "json") {
+    await copyToClipboard(opts.elements, opts.files);
+  } else {
+    throw new Error("Invalid export type");
+  }
+};

packages/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
 export { getCommonBounds } from "../excalidraw/element/bounds";

packages/utils/utils.unmocked.test.ts

@@ -1,6 +1,6 @@
 import { decodePngMetadata, decodeSvgMetadata } from "../excalidraw/data/image";
 import type { ImportedDataState } from "../excalidraw/data/types";
-import { exportToBlob, exportToSvg } from "../excalidraw/scene/export";
+import * as utils from "../utils";
 import { API } from "../excalidraw/tests/helpers/api";
 
 // NOTE this test file is using the actual API, unmocked. Hence splitting it
@@ -15,17 +15,14 @@ describe("embedding scene data", () => {
 
       const sourceElements = [rectangle, ellipse];
 
-      const svgNode = await exportToSvg({
-        data: {
-          elements: sourceElements,
-          appState: {
-            viewBackgroundColor: "#ffffff",
-            gridModeEnabled: false,
-            exportEmbedScene: true,
-            exportBackground: true,
-          },
-          files: null,
+      const svgNode = await utils.exportToSvg({
+        elements: sourceElements,
+        appState: {
+          viewBackgroundColor: "#ffffff",
+          gridModeEnabled: false,
+          exportEmbedScene: true,
         },
+        files: null,
       });
 
       const svg = svgNode.outerHTML;
@@ -48,19 +45,15 @@ describe("embedding scene data", () => {
 
       const sourceElements = [rectangle, ellipse];
 
-      const blob = await exportToBlob({
-        data: {
-          elements: sourceElements,
-          appState: {
-            viewBackgroundColor: "#ffffff",
-            gridModeEnabled: false,
-            exportEmbedScene: true,
-          },
-          files: null,
-        },
-        config: {
-          mimeType: "image/png",
+      const blob = await utils.exportToBlob({
+        mimeType: "image/png",
+        elements: sourceElements,
+        appState: {
+          viewBackgroundColor: "#ffffff",
+          gridModeEnabled: false,
+          exportEmbedScene: true,
         },
+        files: null,
       });
 
       const parsedString = await decodePngMetadata(blob);

yarn.lock

@@ -1891,13 +1891,13 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
   integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
 
-"@excalidraw/mermaid-to-excalidraw@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.2.tgz#74d9507971976a7d3d960a1b2e8fb49a9f1f0d22"
-  integrity sha512-hAFv/TTIsOdoy0dL5v+oBd297SQ+Z88gZ5u99fCIFuEMHfQuPgLhU/ztKhFSTs7fISwVo6fizny/5oQRR3d4tQ==
+"@excalidraw/mermaid-to-excalidraw@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.0.tgz#a24a7aa3ad2e4f671054fdb670a8508bab463814"
+  integrity sha512-YP2roqrImzek1SpUAeToSTNhH5Gfw9ogdI5KHp7c+I/mX7SEW8oNqqX7CP+oHcUgNF6RrYIkqSrnMRN9/3EGLg==
   dependencies:
     "@excalidraw/markdown-to-text" "0.1.2"
-    mermaid "10.9.3"
+    mermaid "10.9.0"
     nanoid "4.0.2"
 
 "@excalidraw/prettier-config@1.0.2":
@@ -3068,6 +3068,11 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@tldraw/vec@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@tldraw/vec/-/vec-1.7.1.tgz#5bfac9a56e11ad890cbd1c620293d7fcb23bf1ea"
+  integrity sha512-qM6Z9RvkLFFEzr91mmsA4HI14msyDgDDOu36csIzG5BYu2bFmEz5siQ8WntHgDtUjzJHP+VSSOTbAXhklEZHLA==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -5423,10 +5428,10 @@ domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-"dompurify@^3.0.5 <3.1.7":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
-  integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
+dompurify@^3.0.5:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.4.tgz#42121304b2b3a6bae22f80131ff8a8f3f3c56be2"
+  integrity sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==
 
 domutils@^2.8.0:
   version "2.8.0"
@@ -7813,10 +7818,10 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@10.9.3:
-  version "10.9.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.3.tgz#90bc6f15c33dbe5d9507fed31592cc0d88fee9f7"
-  integrity sha512-V80X1isSEvAewIL3xhmz/rVmc27CVljcsbWxkxlWJWY/1kQa4XOABqpDl2qQLGKzpKm6WbTfUEKImBlUfFYArw==
+mermaid@10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+  integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
   dependencies:
     "@braintree/sanitize-url" "^6.0.1"
     "@types/d3-scale" "^4.0.3"
@@ -7827,7 +7832,7 @@ mermaid@10.9.3:
     d3-sankey "^0.12.3"
     dagre-d3-es "7.0.10"
     dayjs "^1.11.7"
-    dompurify "^3.0.5 <3.1.7"
+    dompurify "^3.0.5"
     elkjs "^0.9.0"
     katex "^0.16.9"
     khroma "^2.0.0"
@@ -9633,7 +9638,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9651,6 +9656,15 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -9722,7 +9736,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10959,7 +10980,7 @@ workbox-window@7.1.0, workbox-window@^7.0.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10977,6 +10998,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"