mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
wip
This commit is contained in:
dwelle
parent
b2a6a87b10
commit
0e02366dee
37 changed files with 1095 additions and 596 deletions
|
|
@ -5,24 +5,27 @@ 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 () => {
|
||||
const EXPORT_PADDING = 10;
|
||||
|
||||
it("with default arguments", async () => {
|
||||
const canvas = await utils.exportToCanvas({
|
||||
...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
|
||||
const canvas = await exportToCanvas({
|
||||
data: diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
|
||||
});
|
||||
|
||||
expect(canvas.width).toBe(100 + 2 * EXPORT_PADDING);
|
||||
expect(canvas.height).toBe(100 + 2 * EXPORT_PADDING);
|
||||
expect(canvas.width).toBe(100);
|
||||
expect(canvas.height).toBe(100);
|
||||
});
|
||||
|
||||
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 }),
|
||||
const canvas = await exportToCanvas({
|
||||
data: {
|
||||
...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
|
||||
},
|
||||
config: {
|
||||
getDimensions: () => ({ width: 200, height: 200, scale: 1 }),
|
||||
},
|
||||
});
|
||||
|
||||
expect(canvas.width).toBe(200);
|
||||
|
|
@ -34,19 +37,24 @@ 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,
|
||||
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({
|
||||
...diagramFactory(),
|
||||
data: diagramFactory(),
|
||||
});
|
||||
expect(blob?.type).toBe(MIME_TYPES.png);
|
||||
});
|
||||
|
|
@ -56,9 +64,11 @@ describe("exportToBlob", async () => {
|
|||
.spyOn(console, "warn")
|
||||
.mockImplementationOnce(() => void 0);
|
||||
await utils.exportToBlob({
|
||||
...diagramFactory(),
|
||||
mimeType: MIME_TYPES.png,
|
||||
quality: 1,
|
||||
data: diagramFactory(),
|
||||
config: {
|
||||
mimeType: MIME_TYPES.png,
|
||||
quality: 1,
|
||||
},
|
||||
});
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`,
|
||||
|
|
@ -68,8 +78,8 @@ describe("exportToBlob", async () => {
|
|||
});
|
||||
|
||||
describe("exportToSvg", () => {
|
||||
const passedElements = () => exportToSvgSpy.mock.calls[0][0];
|
||||
const passedOptions = () => exportToSvgSpy.mock.calls[0][1];
|
||||
const passedElements = () => exportToSvgSpy.mock.calls[0][0].data.elements;
|
||||
const passedOptions = () => exportToSvgSpy.mock.calls[0][0].data.appState;
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
|
@ -77,7 +87,7 @@ describe("exportToSvg", () => {
|
|||
|
||||
it("with default arguments", async () => {
|
||||
await utils.exportToSvg({
|
||||
...diagramFactory({
|
||||
data: diagramFactory({
|
||||
overrides: { appState: void 0 },
|
||||
}),
|
||||
});
|
||||
|
|
@ -96,7 +106,7 @@ describe("exportToSvg", () => {
|
|||
// type-checking for it correctly.
|
||||
it.skip("with deleted elements", async () => {
|
||||
await utils.exportToSvg({
|
||||
...diagramFactory({
|
||||
data: diagramFactory({
|
||||
overrides: { appState: void 0 },
|
||||
elementOverrides: { isDeleted: true },
|
||||
}),
|
||||
|
|
@ -107,8 +117,10 @@ describe("exportToSvg", () => {
|
|||
|
||||
it("with exportPadding", async () => {
|
||||
await utils.exportToSvg({
|
||||
...diagramFactory({ overrides: { appState: { name: "diagram name" } } }),
|
||||
exportPadding: 0,
|
||||
data: diagramFactory({
|
||||
overrides: { appState: { name: "diagram name" } },
|
||||
}),
|
||||
config: { padding: 0 },
|
||||
});
|
||||
|
||||
expect(passedElements().length).toBe(3);
|
||||
|
|
@ -119,7 +131,7 @@ describe("exportToSvg", () => {
|
|||
|
||||
it("with exportEmbedScene", async () => {
|
||||
await utils.exportToSvg({
|
||||
...diagramFactory({
|
||||
data: diagramFactory({
|
||||
overrides: {
|
||||
appState: { name: "diagram name", exportEmbedScene: true },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
import {
|
||||
exportToCanvas as _exportToCanvas,
|
||||
type ExportToCanvasConfig,
|
||||
type ExportToCanvasData,
|
||||
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 { COLOR_WHITE, MIME_TYPES } from "../excalidraw/constants";
|
||||
import { encodePngMetadata } from "../excalidraw/data/image";
|
||||
import { serializeAsJSON } from "../excalidraw/data/json";
|
||||
import {
|
||||
|
|
@ -18,91 +13,48 @@ import {
|
|||
copyTextToSystemClipboard,
|
||||
copyToClipboard,
|
||||
} from "../excalidraw/clipboard";
|
||||
import { getNonDeletedElements } from "../excalidraw";
|
||||
|
||||
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 };
|
||||
type ExportToBlobConfig = ExportToCanvasConfig & {
|
||||
mimeType?: string;
|
||||
quality?: number;
|
||||
};
|
||||
|
||||
export const exportToCanvas = ({
|
||||
elements,
|
||||
appState,
|
||||
files,
|
||||
maxWidthOrHeight,
|
||||
getDimensions,
|
||||
exportPadding,
|
||||
exportingFrame,
|
||||
}: ExportOpts & {
|
||||
exportPadding?: 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;
|
||||
}) => {
|
||||
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,
|
||||
};
|
||||
},
|
||||
);
|
||||
return _exportToCanvas({
|
||||
data,
|
||||
config,
|
||||
});
|
||||
};
|
||||
|
||||
export const exportToBlob = async (
|
||||
opts: ExportOpts & {
|
||||
mimeType?: string;
|
||||
quality?: number;
|
||||
exportPadding?: number;
|
||||
},
|
||||
): Promise<Blob> => {
|
||||
let { mimeType = MIME_TYPES.png, quality } = opts;
|
||||
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`);
|
||||
|
|
@ -113,17 +65,17 @@ export const exportToBlob = async (
|
|||
mimeType = MIME_TYPES.jpg;
|
||||
}
|
||||
|
||||
if (mimeType === MIME_TYPES.jpg && !opts.appState?.exportBackground) {
|
||||
if (mimeType === MIME_TYPES.jpg && !config?.canvasBackgroundColor === false) {
|
||||
console.warn(
|
||||
`Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`,
|
||||
);
|
||||
opts = {
|
||||
...opts,
|
||||
appState: { ...opts.appState, exportBackground: true },
|
||||
config = {
|
||||
...config,
|
||||
canvasBackgroundColor: data.appState?.viewBackgroundColor || COLOR_WHITE,
|
||||
};
|
||||
}
|
||||
|
||||
const canvas = await exportToCanvas(opts);
|
||||
const canvas = await _exportToCanvas({ data, config });
|
||||
|
||||
quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
|
||||
|
||||
|
|
@ -136,7 +88,7 @@ export const exportToBlob = async (
|
|||
if (
|
||||
blob &&
|
||||
mimeType === MIME_TYPES.png &&
|
||||
opts.appState?.exportEmbedScene
|
||||
data.appState?.exportEmbedScene
|
||||
) {
|
||||
blob = await encodePngMetadata({
|
||||
blob,
|
||||
|
|
@ -144,9 +96,9 @@ export const exportToBlob = async (
|
|||
// 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 || {},
|
||||
data.elements,
|
||||
data.appState,
|
||||
data.files || {},
|
||||
"local",
|
||||
),
|
||||
});
|
||||
|
|
@ -160,53 +112,51 @@ export const exportToBlob = async (
|
|||
};
|
||||
|
||||
export const exportToSvg = async ({
|
||||
elements,
|
||||
appState = getDefaultAppState(),
|
||||
files = {},
|
||||
exportPadding,
|
||||
renderEmbeddables,
|
||||
exportingFrame,
|
||||
skipInliningFonts,
|
||||
reuseImages,
|
||||
}: Omit<ExportOpts, "getDimensions"> & {
|
||||
exportPadding?: number;
|
||||
renderEmbeddables?: boolean;
|
||||
skipInliningFonts?: true;
|
||||
reuseImages?: boolean;
|
||||
data,
|
||||
config,
|
||||
}: {
|
||||
data: ExportToCanvasData;
|
||||
config?: ExportToSvgConfig;
|
||||
}): Promise<SVGSVGElement> => {
|
||||
const { elements: restoredElements, appState: restoredAppState } = restore(
|
||||
{ elements, appState },
|
||||
{ ...data, files: data.files || {} },
|
||||
null,
|
||||
null,
|
||||
);
|
||||
|
||||
const exportAppState = {
|
||||
...restoredAppState,
|
||||
exportPadding,
|
||||
};
|
||||
const appState = { ...restoredAppState, exportPadding: config?.padding };
|
||||
const elements = getNonDeletedElements(restoredElements);
|
||||
const files = data.files || {};
|
||||
|
||||
return _exportToSvg(restoredElements, exportAppState, files, {
|
||||
exportingFrame,
|
||||
renderEmbeddables,
|
||||
skipInliningFonts,
|
||||
reuseImages,
|
||||
return _exportToSvg({
|
||||
data: { elements, appState, files },
|
||||
config: {
|
||||
exportingFrame: config?.exportingFrame,
|
||||
renderEmbeddables: config?.renderEmbeddables,
|
||||
skipInliningFonts: config?.skipInliningFonts,
|
||||
reuseImages: config?.reuseImages,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const exportToClipboard = async (
|
||||
opts: ExportOpts & {
|
||||
mimeType?: string;
|
||||
quality?: number;
|
||||
type: "png" | "svg" | "json";
|
||||
},
|
||||
) => {
|
||||
if (opts.type === "svg") {
|
||||
const svg = await exportToSvg(opts);
|
||||
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 (opts.type === "png") {
|
||||
await copyBlobToClipboardAsPng(exportToBlob(opts));
|
||||
} else if (opts.type === "json") {
|
||||
await copyToClipboard(opts.elements, opts.files);
|
||||
} 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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,13 +16,15 @@ describe("embedding scene data", () => {
|
|||
const sourceElements = [rectangle, ellipse];
|
||||
|
||||
const svgNode = await utils.exportToSvg({
|
||||
elements: sourceElements,
|
||||
appState: {
|
||||
viewBackgroundColor: "#ffffff",
|
||||
gridModeEnabled: false,
|
||||
exportEmbedScene: true,
|
||||
data: {
|
||||
elements: sourceElements,
|
||||
appState: {
|
||||
viewBackgroundColor: "#ffffff",
|
||||
gridModeEnabled: false,
|
||||
exportEmbedScene: true,
|
||||
},
|
||||
files: null,
|
||||
},
|
||||
files: null,
|
||||
});
|
||||
|
||||
const svg = svgNode.outerHTML;
|
||||
|
|
@ -46,14 +48,18 @@ describe("embedding scene data", () => {
|
|||
const sourceElements = [rectangle, ellipse];
|
||||
|
||||
const blob = await utils.exportToBlob({
|
||||
mimeType: "image/png",
|
||||
elements: sourceElements,
|
||||
appState: {
|
||||
viewBackgroundColor: "#ffffff",
|
||||
gridModeEnabled: false,
|
||||
exportEmbedScene: true,
|
||||
data: {
|
||||
elements: sourceElements,
|
||||
appState: {
|
||||
viewBackgroundColor: "#ffffff",
|
||||
gridModeEnabled: false,
|
||||
exportEmbedScene: true,
|
||||
},
|
||||
files: null,
|
||||
},
|
||||
config: {
|
||||
mimeType: "image/png",
|
||||
},
|
||||
files: null,
|
||||
});
|
||||
|
||||
const parsedString = await decodePngMetadata(blob);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue