smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: image support (#4011)

Browse source 
Co-authored-by: Emil Atanasov <heitara@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2021-10-21 22:05:48 +02:00 • committed by GitHub
parent 0f0244224d
commit 163ad1f4c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
85 changed files with 3536 additions and 618 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/tests/__snapshots__/contextmenu.test.tsx.snap
View file

@ -49,6 +49,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -216,6 +217,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -529,6 +531,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -842,6 +845,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -1009,6 +1013,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -1209,6 +1214,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -1462,6 +1468,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id1": true,
},
@ -1793,6 +1800,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -2526,6 +2534,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -2839,6 +2848,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -3152,6 +3162,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id1": true,
},
@ -3539,6 +3550,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
@ -3798,6 +3810,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
@ -4132,6 +4145,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -4234,6 +4248,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -4314,6 +4329,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,

52
src/tests/__snapshots__/regressionTests.test.tsx.snap
View file

@ -49,6 +49,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -518,6 +519,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -993,6 +995,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -1783,6 +1786,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -1991,6 +1995,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id3": true,
@ -2457,6 +2462,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -2714,6 +2720,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -2881,6 +2888,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id2": true,
},
@ -3330,6 +3338,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -3571,6 +3580,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -3779,6 +3789,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -4028,6 +4039,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id1": true,
},
@ -4284,6 +4296,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id2": true,
},
@ -4672,6 +4685,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -4971,6 +4985,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -5248,6 +5263,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -5459,6 +5475,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -5626,6 +5643,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -6087,6 +6105,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -6410,6 +6429,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -8474,6 +8494,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
@ -8841,6 +8862,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
@ -9098,6 +9120,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
@ -9319,6 +9342,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
@ -9603,6 +9627,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -9770,6 +9795,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -9937,6 +9963,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -10104,6 +10131,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -10301,6 +10329,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -10498,6 +10527,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -10713,6 +10743,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -10910,6 +10941,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -11077,6 +11109,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -11244,6 +11277,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -11441,6 +11475,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -11608,6 +11643,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -11823,6 +11859,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -12550,6 +12587,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id3": true,
@ -12807,6 +12845,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": -5.416666666666667,
@ -12911,6 +12950,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -13013,6 +13053,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -13183,6 +13224,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -13509,6 +13551,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -13713,6 +13756,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
@ -14549,6 +14593,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 60,
@ -14651,6 +14696,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id0": true,
},
@ -15420,6 +15466,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id1": true,
"id2": true,
@ -15830,6 +15877,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {
"id1": true,
},
@ -16107,6 +16155,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 11.046099290780141,
@ -16211,6 +16260,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -16715,6 +16765,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
@ -16817,6 +16868,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,

4
src/tests/appState.test.tsx
View file

@ -2,7 +2,7 @@ import { render, waitFor } from "./test-utils";
import ExcalidrawApp from "../excalidraw-app";
import { API } from "./helpers/api";
import { getDefaultAppState } from "../appState";
import { EXPORT_DATA_TYPES } from "../constants";
import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
const { h } = window;
@ -36,7 +36,7 @@ describe("appState", () => {
elements: [API.createElement({ type: "rectangle", id: "A" })],
}),
],
{ type: "application/json" },
{ type: MIME_TYPES.json },
),
);

10
src/tests/collab.test.tsx
View file

@ -19,11 +19,21 @@ jest.mock("../excalidraw-app/data/firebase.ts", () => {
const loadFromFirebase = async () => null;
const saveToFirebase = () => {};
const isSavedToFirebase = () => true;
const loadFilesFromFirebase = async () => ({
loadedFiles: [],
erroredFiles: [],
});
const saveFilesToFirebase = async () => ({
savedFiles: new Map(),
erroredFiles: new Map(),
});
return {
loadFromFirebase,
saveToFirebase,
isSavedToFirebase,
loadFilesFromFirebase,
saveFilesToFirebase,
};
});

4
src/tests/export.test.tsx
View file

@ -45,7 +45,7 @@ describe("export", () => {
const pngBlob = await API.loadFile("./fixtures/smiley.png");
const pngBlobEmbedded = await encodePngMetadata({
blob: pngBlob,
metadata: serializeAsJSON(testElements, h.state),
metadata: serializeAsJSON(testElements, h.state, {}, "local"),
});
API.drop(pngBlobEmbedded);
@ -58,7 +58,7 @@ describe("export", () => {
it("test encoding/decoding scene for SVG export", async () => {
const encoded = await encodeSvgMetadata({
text: serializeAsJSON(testElements, h.state),
text: serializeAsJSON(testElements, h.state, {}, "local"),
});
const decoded = JSON.parse(await decodeSvgMetadata({ svg: encoded }));
expect(decoded.elements).toEqual([

1
src/tests/fixtures/diagramFixture.ts vendored
View file

@ -13,6 +13,7 @@ export const diagramFixture = {
viewBackgroundColor: "#ffffff",
gridSize: null,
},
files: {},
};
export const diagramFactory = ({

4
src/tests/history.test.tsx
View file

@ -5,7 +5,7 @@ import { API } from "./helpers/api";
import { getDefaultAppState } from "../appState";
import { waitFor } from "@testing-library/react";
import { createUndoAction, createRedoAction } from "../actions/actionHistory";
import { EXPORT_DATA_TYPES } from "../constants";
import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
const { h } = window;
@ -86,7 +86,7 @@ describe("history", () => {
elements: [API.createElement({ type: "rectangle", id: "B" })],
}),
],
{ type: "application/json" },
{ type: MIME_TYPES.json },
),
);

1
src/tests/packages/__snapshots__/utils.test.ts.snap
View file

@ -47,6 +47,7 @@ Object {
"data": null,
"shown": false,
},
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,

18
src/tests/packages/utils.test.ts
View file

@ -1,6 +1,7 @@
import * as utils from "../../packages/utils";
import { diagramFactory } from "../fixtures/diagramFixture";
import * as mockedSceneExportUtils from "../../scene/export";
import { MIME_TYPES } from "../../constants";
jest.mock("../../scene/export", () => ({
__esmodule: true,
@ -11,8 +12,8 @@ jest.mock("../../scene/export", () => ({
describe("exportToCanvas", () => {
const EXPORT_PADDING = 10;
it("with default arguments", () => {
const canvas = utils.exportToCanvas({
it("with default arguments", async () => {
const canvas = await utils.exportToCanvas({
...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
});
@ -20,8 +21,8 @@ describe("exportToCanvas", () => {
expect(canvas.height).toBe(100 + 2 * EXPORT_PADDING);
});
it("when custom width and height", () => {
const canvas = utils.exportToCanvas({
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 }),
});
@ -39,16 +40,17 @@ describe("exportToBlob", () => {
const blob = await utils.exportToBlob({
...diagramFactory(),
getDimensions: (width, height) => ({ width, height, scale: 1 }),
// testing typo in MIME type (jpg → jpeg)
mimeType: "image/jpg",
});
expect(blob?.type).toBe("image/jpeg");
expect(blob?.type).toBe(MIME_TYPES.jpg);
});
it("should default to image/png", async () => {
const blob = await utils.exportToBlob({
...diagramFactory(),
});
expect(blob?.type).toBe("image/png");
expect(blob?.type).toBe(MIME_TYPES.png);
});
it("should warn when using quality with image/png", async () => {
@ -58,12 +60,12 @@ describe("exportToBlob", () => {
await utils.exportToBlob({
...diagramFactory(),
mimeType: "image/png",
mimeType: MIME_TYPES.png,
quality: 1,
});
expect(consoleSpy).toHaveBeenCalledWith(
'"quality" will be ignored for "image/png" mimeType',
`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`,
);
});
});

2
src/tests/scene/__snapshots__/export.test.ts.snap
View file

@ -74,7 +74,7 @@ exports[`exportToSvg with default arguments 1`] = `
exports[`exportToSvg with exportEmbedScene 1`] = `
"
<!-- svg-source:excalidraw -->
<!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SQW7CMFx1MDAxMLzzisi9XCKRpIFQbrRUVaWqPXBAatWDiTexhbGD7Vx1MDAwMFx1MDAxMeLvtVx1MDAxZEjaqP1BfbC0szO76/WcXHUwMDA2QYBMXVx1MDAwMppcdTAwMDVcYo5cdTAwMTnmjCh8QEOH70FpJoVNxT7WslKZZ1JjytloxKVcdTAwMTVQqU3DXHUwMDA3XHUwMDBlW1x1MDAxMEZbxoeNg+Dkb5thxKn2K7V7m+dcdTAwMWImSLzLtunLYv707qWedLScJErauHaNb9M2PjBiqMWiMGwxXG6soKZcdTAwMDdiUXA3Zodoo+RcdTAwMDZcdTAwMWUkl8pccnJcdTAwMTP607Ve42xTKFlcdNJxojHG67zj5Izzpal5s1x1MDAwMJzRSlx1MDAwMep1WF1H7OGtTku74E5lW1x1MDAxNlSA1j80ssRcdTAwMTkzde9Vbr7ymfjtfvbrU6zKS1x1MDAxZKRd8G0yXHUwMDAw4ksl0WSc3oXTNtP9b1x1MDAxNId99FVcbv/XUTSdhmFcdTAwMTKnk5bB9MJ+tfFlc8w1dHt0K3xsbNCMKirO2/TVaIThrVx1MDAxNFx1MDAwNHn8PPz3yr9X/vRcbnDOSlxyXHUwMDE3r9jbv1x1MDAwN+GyXFxcdTAwMWFsXHUwMDFjpXFcdTAwMGXaMzjc//I3uT9Of1x1MDAxZZy/XHUwMDAw6cxEtiJ9<!-- payload-end -->
<!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SQW7CMFx1MDAxMLzzisi9XCKRpIFQbrRUVaWqPXBAatWDiTexhbGD7Vx1MDAwMFx1MDAxMeLvtVx1MDAxZEjaqP1BfbC045nd9e6cXHUwMDA2QYBMXVx1MDAwMppcdTAwMDVcYo5cdTAwMTnmjCh8QEOH70FpJoV9in2sZaUyz6TGlLPRiEsroFKbhlx1MDAwZlx1MDAxY7YgjLaMXHUwMDBmXHUwMDFiXHUwMDA3wcnf9oVcdTAwMTGn2q/U7m2eb5gg8S7bpi+L+dO7l3rS0XKSKGnj2lx1MDAxNb5N2/jAiKFcdTAwMTaLwrDFKLCCmlx1MDAxZYhFwV2bXHUwMDFkoo2SXHUwMDFieJBcXCrXyE3oT1d6jbNNoWQlSMeJxlx1MDAxOK/zjpMzzpem5s1cdTAwMDBwRitcdTAwMDWoV2F1bbGHtzot7YA7lS1ZUFx1MDAwMVr/0MhcdTAwMTJnzNS9X7n+ymfip/vZz0+xKi95kHbBt85cdTAwMDCIT5VEk3F6XHUwMDE3TtuXbr9RXHUwMDFj9tFXKfyuo2g6XHLDJE4nLYPphV218WlzzDV0c3QjfGxs0LQqKs7b56vRXGLDWylcYvL4efjvlX+v/OlcdTAwMTXgnJVcdTAwMWEuXrG3/1x1MDAwZsJluTTYOErjXHUwMDFjtGdwuP9lN7k/Tu+d5nZcdTAwMDOu2uk8OH9cdTAwMDFcZrNI1SJ9<!-- payload-end -->
<defs>
<style>
@font-face {

71
src/tests/scene/export.test.ts
View file

@ -13,10 +13,15 @@ describe("exportToSvg", () => {
const DEFAULT_OPTIONS = {
exportBackground: false,
viewBackgroundColor: "#ffffff",
files: {},
};
it("with default arguments", async () => {
const svgElement = await exportUtils.exportToSvg(ELEMENTS, DEFAULT_OPTIONS);
const svgElement = await exportUtils.exportToSvg(
ELEMENTS,
DEFAULT_OPTIONS,
null,
);
expect(svgElement).toMatchSnapshot();
});
@ -24,11 +29,15 @@ describe("exportToSvg", () => {
it("with background color", async () => {
const BACKGROUND_COLOR = "#abcdef";
const svgElement = await exportUtils.exportToSvg(ELEMENTS, {
...DEFAULT_OPTIONS,
exportBackground: true,
viewBackgroundColor: BACKGROUND_COLOR,
});
const svgElement = await exportUtils.exportToSvg(
ELEMENTS,
{
...DEFAULT_OPTIONS,
exportBackground: true,
viewBackgroundColor: BACKGROUND_COLOR,
},
null,
);
expect(svgElement.querySelector("rect")).toHaveAttribute(
"fill",
@ -37,10 +46,14 @@ describe("exportToSvg", () => {
});
it("with dark mode", async () => {
const svgElement = await exportUtils.exportToSvg(ELEMENTS, {
...DEFAULT_OPTIONS,
exportWithDarkMode: true,
});
const svgElement = await exportUtils.exportToSvg(
ELEMENTS,
{
...DEFAULT_OPTIONS,
exportWithDarkMode: true,
},
null,
);
expect(svgElement.getAttribute("filter")).toMatchInlineSnapshot(
`"themeFilter"`,
@ -48,10 +61,14 @@ describe("exportToSvg", () => {
});
it("with exportPadding", async () => {
const svgElement = await exportUtils.exportToSvg(ELEMENTS, {
...DEFAULT_OPTIONS,
exportPadding: 0,
});
const svgElement = await exportUtils.exportToSvg(
ELEMENTS,
{
...DEFAULT_OPTIONS,
exportPadding: 0,
},
null,
);
expect(svgElement).toHaveAttribute("height", ELEMENT_HEIGHT.toString());
expect(svgElement).toHaveAttribute("width", ELEMENT_WIDTH.toString());
@ -64,11 +81,15 @@ describe("exportToSvg", () => {
it("with scale", async () => {
const SCALE = 2;
const svgElement = await exportUtils.exportToSvg(ELEMENTS, {
...DEFAULT_OPTIONS,
exportPadding: 0,
exportScale: SCALE,
});
const svgElement = await exportUtils.exportToSvg(
ELEMENTS,
{
...DEFAULT_OPTIONS,
exportPadding: 0,
exportScale: SCALE,
},
null,
);
expect(svgElement).toHaveAttribute(
"height",
@ -81,10 +102,14 @@ describe("exportToSvg", () => {
});
it("with exportEmbedScene", async () => {
const svgElement = await exportUtils.exportToSvg(ELEMENTS, {
...DEFAULT_OPTIONS,
exportEmbedScene: true,
});
const svgElement = await exportUtils.exportToSvg(
ELEMENTS,
{
...DEFAULT_OPTIONS,
exportEmbedScene: true,
},
null,
);
expect(svgElement.innerHTML).toMatchSnapshot();
});
});

2
src/tests/test-utils.ts
View file

@ -16,6 +16,8 @@ import { SceneData } from "../types";
import { getSelectedElements } from "../scene/selection";
import { ExcalidrawElement } from "../element/types";
require("fake-indexeddb/auto");
const customQueries = {
...queries,
...toolQueries,