mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
unify exports in a single place
This commit is contained in:
Ryan Di
parent
392b362118
commit
9da26fb7e0
15 changed files with 264 additions and 440 deletions
|
|
@ -1,144 +0,0 @@
|
|||
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";
|
||||
|
||||
import { exportToCanvas } from "../excalidraw/scene/export";
|
||||
const exportToSvgSpy = vi.spyOn(mockedSceneExportUtils, "exportToSvg");
|
||||
|
||||
describe("exportToCanvas", async () => {
|
||||
it("with default arguments", async () => {
|
||||
const canvas = await exportToCanvas({
|
||||
data: diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
|
||||
});
|
||||
|
||||
expect(canvas.width).toBe(100);
|
||||
expect(canvas.height).toBe(100);
|
||||
});
|
||||
|
||||
it("when custom width and height", async () => {
|
||||
const canvas = await exportToCanvas({
|
||||
data: {
|
||||
...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
|
||||
},
|
||||
config: {
|
||||
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({
|
||||
data: {
|
||||
...diagramFactory(),
|
||||
|
||||
appState: {
|
||||
exportBackground: true,
|
||||
},
|
||||
},
|
||||
config: {
|
||||
getDimensions: (width, height) => ({ width, height, scale: 1 }),
|
||||
// testing typo in MIME type (jpg → jpeg)
|
||||
mimeType: "image/jpg",
|
||||
},
|
||||
});
|
||||
expect(blob?.type).toBe(MIME_TYPES.jpg);
|
||||
});
|
||||
it("should default to image/png", async () => {
|
||||
const blob = await utils.exportToBlob({
|
||||
data: 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({
|
||||
data: diagramFactory(),
|
||||
config: {
|
||||
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].data.elements;
|
||||
const passedOptions = () => exportToSvgSpy.mock.calls[0][0].data.appState;
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("with default arguments", async () => {
|
||||
await utils.exportToSvg({
|
||||
data: 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({
|
||||
data: diagramFactory({
|
||||
overrides: { appState: void 0 },
|
||||
elementOverrides: { isDeleted: true },
|
||||
}),
|
||||
});
|
||||
|
||||
expect(passedElements().length).toBe(0);
|
||||
});
|
||||
|
||||
it("with exportPadding", async () => {
|
||||
await utils.exportToSvg({
|
||||
data: diagramFactory({
|
||||
overrides: { appState: { name: "diagram name" } },
|
||||
}),
|
||||
config: { padding: 0 },
|
||||
});
|
||||
|
||||
expect(passedElements().length).toBe(3);
|
||||
expect(passedOptions()).toEqual(
|
||||
expect.objectContaining({ exportPadding: 0 }),
|
||||
);
|
||||
});
|
||||
|
||||
it("with exportEmbedScene", async () => {
|
||||
await utils.exportToSvg({
|
||||
data: diagramFactory({
|
||||
overrides: {
|
||||
appState: { name: "diagram name", exportEmbedScene: true },
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
expect(passedElements().length).toBe(3);
|
||||
expect(passedOptions().exportEmbedScene).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
import {
|
||||
exportToCanvas as _exportToCanvas,
|
||||
type ExportToCanvasConfig,
|
||||
type ExportToCanvasData,
|
||||
exportToSvg as _exportToSvg,
|
||||
} from "../excalidraw/scene/export";
|
||||
import { restore } from "../excalidraw/data/restore";
|
||||
import { COLOR_WHITE, MIME_TYPES } from "../excalidraw/constants";
|
||||
import { encodePngMetadata } from "../excalidraw/data/image";
|
||||
import { serializeAsJSON } from "../excalidraw/data/json";
|
||||
import {
|
||||
copyBlobToClipboardAsPng,
|
||||
copyTextToSystemClipboard,
|
||||
copyToClipboard,
|
||||
} from "../excalidraw/clipboard";
|
||||
import { getNonDeletedElements } from "../excalidraw";
|
||||
|
||||
export { MIME_TYPES };
|
||||
|
||||
type ExportToBlobConfig = ExportToCanvasConfig & {
|
||||
mimeType?: string;
|
||||
quality?: number;
|
||||
};
|
||||
|
||||
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 exportToCanvas = async ({
|
||||
data,
|
||||
config,
|
||||
}: {
|
||||
data: ExportToCanvasData;
|
||||
config?: ExportToCanvasConfig;
|
||||
}) => {
|
||||
return _exportToCanvas({
|
||||
data,
|
||||
config,
|
||||
});
|
||||
};
|
||||
|
||||
export const exportToBlob = async ({
|
||||
data,
|
||||
config,
|
||||
}: {
|
||||
data: ExportToCanvasData;
|
||||
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 exportToSvg = async ({
|
||||
data,
|
||||
config,
|
||||
}: {
|
||||
data: ExportToCanvasData;
|
||||
config?: ExportToSvgConfig;
|
||||
}): Promise<SVGSVGElement> => {
|
||||
const { elements: restoredElements, appState: restoredAppState } = restore(
|
||||
{ ...data, files: data.files || {} },
|
||||
null,
|
||||
null,
|
||||
);
|
||||
|
||||
const appState = { ...restoredAppState, exportPadding: config?.padding };
|
||||
const elements = getNonDeletedElements(restoredElements);
|
||||
const files = data.files || {};
|
||||
|
||||
return _exportToSvg({
|
||||
data: { elements, appState, files },
|
||||
config: {
|
||||
exportingFrame: config?.exportingFrame,
|
||||
renderEmbeddables: config?.renderEmbeddables,
|
||||
skipInliningFonts: config?.skipInliningFonts,
|
||||
reuseImages: config?.reuseImages,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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, 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");
|
||||
}
|
||||
};
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
export * from "./export";
|
||||
export * from "./withinBounds";
|
||||
export * from "./bbox";
|
||||
export { getCommonBounds } from "../excalidraw/element/bounds";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { decodePngMetadata, decodeSvgMetadata } from "../excalidraw/data/image";
|
||||
import type { ImportedDataState } from "../excalidraw/data/types";
|
||||
import * as utils from "../utils";
|
||||
import { exportToBlob, exportToSvg } from "../excalidraw/scene/export";
|
||||
import { API } from "../excalidraw/tests/helpers/api";
|
||||
|
||||
// NOTE this test file is using the actual API, unmocked. Hence splitting it
|
||||
|
|
@ -15,13 +15,14 @@ describe("embedding scene data", () => {
|
|||
|
||||
const sourceElements = [rectangle, ellipse];
|
||||
|
||||
const svgNode = await utils.exportToSvg({
|
||||
const svgNode = await exportToSvg({
|
||||
data: {
|
||||
elements: sourceElements,
|
||||
appState: {
|
||||
viewBackgroundColor: "#ffffff",
|
||||
gridModeEnabled: false,
|
||||
exportEmbedScene: true,
|
||||
exportBackground: true,
|
||||
},
|
||||
files: null,
|
||||
},
|
||||
|
|
@ -47,7 +48,7 @@ describe("embedding scene data", () => {
|
|||
|
||||
const sourceElements = [rectangle, ellipse];
|
||||
|
||||
const blob = await utils.exportToBlob({
|
||||
const blob = await exportToBlob({
|
||||
data: {
|
||||
elements: sourceElements,
|
||||
appState: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue