diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index 5fd135226..7d1c13c69 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -25,6 +25,7 @@ import {
TTDDialogTrigger,
StoreAction,
reconcileElements,
+ exportToCanvas,
} from "../packages/excalidraw";
import {
exportToBlob,
@@ -133,7 +134,6 @@ import { AIComponents } from "./components/AI";
import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
import { fileSave } from "../packages/excalidraw/data/filesystem";
import type { ExportToCanvasConfig } from "../packages/excalidraw/scene/export";
-import { exportToCanvas } from "../packages/utils";
polyfill();
@@ -646,8 +646,6 @@ const ExcalidrawWrapper = () => {
(el) => el.strokeStyle === "dashed" && !el.isDeleted,
);
- const zoom = appState.zoom.value;
-
exportToCanvas({
data: {
elements: getNonDeletedElements(elements).filter(
@@ -1401,7 +1399,7 @@ const ExcalidrawWrapper = () => {
maxWH{" "}
@@ -1409,7 +1407,7 @@ const ExcalidrawWrapper = () => {
...s,
maxWidthOrHeight: !event.target.value.trim()
? undefined
- : Math.min(parseInt(event.target.value as any), 600),
+ : parseInt(event.target.value as any),
}))
}
/>
@@ -1440,7 +1438,7 @@ const ExcalidrawWrapper = () => {
exportToBlob({
data: {
elements: excalidrawAPI!.getSceneElements(),
- files: null,
+ files: excalidrawAPI?.getFiles() || null,
},
config,
}).then((blob) => {
diff --git a/packages/excalidraw/components/ImageExportDialog.tsx b/packages/excalidraw/components/ImageExportDialog.tsx
index a1be9044c..0056cef5f 100644
--- a/packages/excalidraw/components/ImageExportDialog.tsx
+++ b/packages/excalidraw/components/ImageExportDialog.tsx
@@ -23,7 +23,6 @@ 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";
@@ -36,6 +35,7 @@ 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")!;
diff --git a/packages/excalidraw/components/PublishLibrary.tsx b/packages/excalidraw/components/PublishLibrary.tsx
index 4ea6188dd..c31695eb0 100644
--- a/packages/excalidraw/components/PublishLibrary.tsx
+++ b/packages/excalidraw/components/PublishLibrary.tsx
@@ -7,7 +7,6 @@ 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,
@@ -25,6 +24,7 @@ import { ToolButton } from "./ToolButton";
import { EditorLocalStorage } from "../data/EditorLocalStorage";
import "./PublishLibrary.scss";
+import { exportToCanvas, exportToSvg } from "../scene/export";
interface PublishLibraryDataParams {
authorName: string;
diff --git a/packages/excalidraw/hooks/useLibraryItemSvg.ts b/packages/excalidraw/hooks/useLibraryItemSvg.ts
index dc8cac3c9..dfacb1691 100644
--- a/packages/excalidraw/hooks/useLibraryItemSvg.ts
+++ b/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;
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index 5c55b759f..d97ae0db4 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -225,12 +225,6 @@ export {
export { reconcileElements } from "./data/reconcile";
-export {
- exportToBlob,
- exportToSvg,
- exportToClipboard,
-} from "../utils/export";
-
export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
export {
loadFromBlob,
@@ -273,7 +267,12 @@ export { WelcomeScreen };
export { LiveCollaborationTrigger };
export { Stats } from "./components/Stats";
-export { exportToCanvas } from "./scene/export";
+export {
+ exportToCanvas,
+ exportToBlob,
+ exportToClipboard,
+ exportToSvg,
+} from "./scene/export";
export { DefaultSidebar } from "./components/DefaultSidebar";
export { TTDDialog } from "./components/TTDDialog/TTDDialog";
diff --git a/packages/excalidraw/renderer/helpers.ts b/packages/excalidraw/renderer/helpers.ts
index cae562bf4..50dffcda6 100644
--- a/packages/excalidraw/renderer/helpers.ts
+++ b/packages/excalidraw/renderer/helpers.ts
@@ -1,4 +1,4 @@
-import type { StaticCanvasAppState, AppState } from "../types";
+import type { AppState } from "../types";
import type { StaticCanvasRenderConfig } from "../scene/types";
diff --git a/packages/excalidraw/scene/export.ts b/packages/excalidraw/scene/export.ts
index 3f53d3e3c..1111bce85 100644
--- a/packages/excalidraw/scene/export.ts
+++ b/packages/excalidraw/scene/export.ts
@@ -21,6 +21,7 @@ import {
SVG_NS,
THEME,
THEME_FILTER,
+ MIME_TYPES,
} from "../constants";
import { getDefaultAppState } from "../appState";
import { serializeAsJSON } from "../data/json";
@@ -28,14 +29,14 @@ import {
getInitializedImageElements,
updateImageCache,
} from "../element/image";
-import { restoreAppState } from "../data/restore";
+import { restore, restoreAppState } from "../data/restore";
import {
getElementsOverlappingFrame,
getFrameLikeElements,
getFrameLikeTitle,
getRootElements,
} from "../frame";
-import { newTextElement } from "../element";
+import { getNonDeletedElements, newTextElement } from "../element";
import { type Mutable } from "../utility-types";
import { newElementWith } from "../element/mutateElement";
import { isFrameLikeElement } from "../element/typeChecks";
@@ -43,6 +44,12 @@ 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 = ``;
@@ -153,9 +160,13 @@ const prepareElementsForRender = ({
return nextElements;
};
+type ExportToCanvasAppState = Partial<
+ Omit
+>;
+
export type ExportToCanvasData = {
elements: readonly NonDeletedExcalidrawElement[];
- appState?: Partial>;
+ appState?: ExportToCanvasAppState;
files: BinaryFiles | null;
};
@@ -632,6 +643,18 @@ export const exportToCanvas = async ({
return canvas;
};
+type ExportToSvgConfig = Pick<
+ ExportToCanvasConfig,
+ "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,
@@ -640,31 +663,28 @@ export const exportToSvg = async ({
elements: readonly NonDeletedExcalidrawElement[];
appState: {
exportBackground: boolean;
- exportPadding?: number;
exportScale?: number;
viewBackgroundColor: string;
exportWithDarkMode?: boolean;
exportEmbedScene?: boolean;
frameRendering?: AppState["frameRendering"];
+ gridModeEnabled?: boolean;
};
files: BinaryFiles | null;
};
- config?: {
- /**
- * if true, all embeddables passed in will be rendered when possible.
- */
- renderEmbeddables?: boolean;
- exportingFrame?: ExcalidrawFrameLikeElement | null;
- skipInliningFonts?: true;
- reuseImages?: boolean;
- };
+ config?: ExportToSvgConfig;
}): Promise => {
// clone
const cfg = Object.assign({}, config);
cfg.exportingFrame = cfg.exportingFrame ?? null;
- const elements = data.elements;
+ const { elements: restoredElements } = restore(
+ { ...data, files: data.files || {} },
+ null,
+ null,
+ );
+ const elements = getNonDeletedElements(restoredElements);
const frameRendering = getFrameRenderingConfig(
cfg?.exportingFrame ?? null,
@@ -672,13 +692,14 @@ export const exportToSvg = async ({
);
let {
- exportPadding = DEFAULT_EXPORT_PADDING,
exportWithDarkMode = false,
viewBackgroundColor,
exportScale = 1,
exportEmbedScene,
} = data.appState;
+ let padding = cfg.padding ?? 0;
+
const elementsForRender = prepareElementsForRender({
elements,
exportingFrame: cfg.exportingFrame,
@@ -687,7 +708,7 @@ export const exportToSvg = async ({
});
if (cfg.exportingFrame) {
- exportPadding = 0;
+ padding = 0;
}
let metadata = "";
@@ -719,8 +740,8 @@ export const exportToSvg = async ({
: getRootElements(elementsForRender),
);
- width += exportPadding * 2;
- height += exportPadding * 2;
+ width += padding * 2;
+ height += padding * 2;
// initialize SVG root
const svgRoot = document.createElementNS(SVG_NS, "svg");
@@ -733,8 +754,8 @@ export const exportToSvg = async ({
svgRoot.setAttribute("filter", THEME_FILTER);
}
- const offsetX = -minX + exportPadding;
- const offsetY = -minY + exportPadding;
+ const offsetX = -minX + padding;
+ const offsetY = -minY + padding;
const frameElements = getFrameLikeElements(elements);
@@ -830,3 +851,103 @@ export const getCanvasSize = (
return [minX, minY, width, height];
};
+
+export { MIME_TYPES };
+
+type ExportToBlobConfig = ExportToCanvasConfig & {
+ mimeType?: string;
+ quality?: number;
+};
+
+export const exportToBlob = async ({
+ data,
+ config,
+}: {
+ data: ExportToCanvasData;
+ config?: ExportToBlobConfig;
+}): Promise => {
+ 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: ExportToCanvasData;
+} & (
+ | { 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");
+ }
+};
diff --git a/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap
index 1ba16e2ee..4f020586a 100644
--- a/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap
@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`export > exporting svg containing transformed images > svg export output 1`] = `
-""
`;
diff --git a/packages/excalidraw/tests/scene/__snapshots__/export.test.ts.snap b/packages/excalidraw/tests/scene/__snapshots__/export.test.ts.snap
index ee168ad2e..c76367213 100644
--- a/packages/excalidraw/tests/scene/__snapshots__/export.test.ts.snap
+++ b/packages/excalidraw/tests/scene/__snapshots__/export.test.ts.snap
@@ -2,10 +2,10 @@
exports[`exportToSvg > with a CJK font 1`] = `