@excalidraw/excalidraw 0.17.1-7441-e31f307 → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/data/filesystem.js

@@ -0,0 +1,65 @@
+import { fileOpen as _fileOpen, fileSave as _fileSave, supported as nativeFileSystemSupported, } from "browser-fs-access";
+import { EVENT, MIME_TYPES } from "../constants";
+import { AbortError } from "../errors";
+import { debounce } from "../utils";
+const INPUT_CHANGE_INTERVAL_MS = 500;
+export const fileOpen = (opts) => {
+    const mimeTypes = opts.extensions?.reduce((mimeTypes, type) => {
+        mimeTypes.push(MIME_TYPES[type]);
+        return mimeTypes;
+    }, []);
+    const extensions = opts.extensions?.reduce((acc, ext) => {
+        if (ext === "jpg") {
+            return acc.concat(".jpg", ".jpeg");
+        }
+        return acc.concat(`.${ext}`);
+    }, []);
+    return _fileOpen({
+        description: opts.description,
+        extensions,
+        mimeTypes,
+        multiple: opts.multiple ?? false,
+        legacySetup: (resolve, reject, input) => {
+            const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS);
+            const focusHandler = () => {
+                checkForFile();
+                document.addEventListener(EVENT.KEYUP, scheduleRejection);
+                document.addEventListener(EVENT.POINTER_UP, scheduleRejection);
+                scheduleRejection();
+            };
+            const checkForFile = () => {
+                // this hack might not work when expecting multiple files
+                if (input.files?.length) {
+                    const ret = opts.multiple ? [...input.files] : input.files[0];
+                    resolve(ret);
+                }
+            };
+            requestAnimationFrame(() => {
+                window.addEventListener(EVENT.FOCUS, focusHandler);
+            });
+            const interval = window.setInterval(() => {
+                checkForFile();
+            }, INPUT_CHANGE_INTERVAL_MS);
+            return (rejectPromise) => {
+                clearInterval(interval);
+                scheduleRejection.cancel();
+                window.removeEventListener(EVENT.FOCUS, focusHandler);
+                document.removeEventListener(EVENT.KEYUP, scheduleRejection);
+                document.removeEventListener(EVENT.POINTER_UP, scheduleRejection);
+                if (rejectPromise) {
+                    // so that something is shown in console if we need to debug this
+                    console.warn("Opening the file was canceled (legacy-fs).");
+                    rejectPromise(new AbortError());
+                }
+            };
+        },
+    });
+};
+export const fileSave = (blob, opts) => {
+    return _fileSave(blob, {
+        fileName: `${opts.name}.${opts.extension}`,
+        description: opts.description,
+        extensions: [`.${opts.extension}`],
+    }, opts.fileHandle);
+};
+export { nativeFileSystemSupported };

package/dist/packages/excalidraw/data/image.js

@@ -0,0 +1,91 @@
+import decodePng from "png-chunks-extract";
+import tEXt from "png-chunk-text";
+import encodePng from "png-chunks-encode";
+import { stringToBase64, encode, decode, base64ToString } from "./encode";
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import { blobToArrayBuffer } from "./blob";
+// -----------------------------------------------------------------------------
+// PNG
+// -----------------------------------------------------------------------------
+export const getTEXtChunk = async (blob) => {
+    const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+    const metadataChunk = chunks.find((chunk) => chunk.name === "tEXt");
+    if (metadataChunk) {
+        return tEXt.decode(metadataChunk.data);
+    }
+    return null;
+};
+export const encodePngMetadata = async ({ blob, metadata, }) => {
+    const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+    const metadataChunk = tEXt.encode(MIME_TYPES.excalidraw, JSON.stringify(await encode({
+        text: metadata,
+        compress: true,
+    })));
+    // insert metadata before last chunk (iEND)
+    chunks.splice(-1, 0, metadataChunk);
+    return new Blob([encodePng(chunks)], { type: MIME_TYPES.png });
+};
+export const decodePngMetadata = async (blob) => {
+    const metadata = await getTEXtChunk(blob);
+    if (metadata?.keyword === MIME_TYPES.excalidraw) {
+        try {
+            const encodedData = JSON.parse(metadata.text);
+            if (!("encoded" in encodedData)) {
+                // legacy, un-encoded scene JSON
+                if ("type" in encodedData &&
+                    encodedData.type === EXPORT_DATA_TYPES.excalidraw) {
+                    return metadata.text;
+                }
+                throw new Error("FAILED");
+            }
+            return await decode(encodedData);
+        }
+        catch (error) {
+            console.error(error);
+            throw new Error("FAILED");
+        }
+    }
+    throw new Error("INVALID");
+};
+// -----------------------------------------------------------------------------
+// SVG
+// -----------------------------------------------------------------------------
+export const encodeSvgMetadata = async ({ text }) => {
+    const base64 = await stringToBase64(JSON.stringify(await encode({ text })), true /* is already byte string */);
+    let metadata = "";
+    metadata += `<!-- payload-type:${MIME_TYPES.excalidraw} -->`;
+    metadata += `<!-- payload-version:2 -->`;
+    metadata += "<!-- payload-start -->";
+    metadata += base64;
+    metadata += "<!-- payload-end -->";
+    return metadata;
+};
+export const decodeSvgMetadata = async ({ svg }) => {
+    if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
+        const match = svg.match(/<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/);
+        if (!match) {
+            throw new Error("INVALID");
+        }
+        const versionMatch = svg.match(/<!-- payload-version:(\d+) -->/);
+        const version = versionMatch?.[1] || "1";
+        const isByteString = version !== "1";
+        try {
+            const json = await base64ToString(match[1], isByteString);
+            const encodedData = JSON.parse(json);
+            if (!("encoded" in encodedData)) {
+                // legacy, un-encoded scene JSON
+                if ("type" in encodedData &&
+                    encodedData.type === EXPORT_DATA_TYPES.excalidraw) {
+                    return json;
+                }
+                throw new Error("FAILED");
+            }
+            return await decode(encodedData);
+        }
+        catch (error) {
+            console.error(error);
+            throw new Error("FAILED");
+        }
+    }
+    throw new Error("INVALID");
+};

package/dist/packages/excalidraw/data/index.js

@@ -0,0 +1,120 @@
+import { copyBlobToClipboardAsPng, copyTextToSystemClipboard, } from "../clipboard";
+import { DEFAULT_EXPORT_PADDING, isFirefox, MIME_TYPES } from "../constants";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { t } from "../i18n";
+import { elementsOverlappingBBox } from "../../utils/export";
+import { isSomeElementSelected, getSelectedElements } from "../scene";
+import { exportToCanvas, exportToSvg } from "../scene/export";
+import { cloneJSON } from "../utils";
+import { canvasToBlob } from "./blob";
+import { fileSave } from "./filesystem";
+import { serializeAsJSON } from "./json";
+export { loadFromBlob } from "./blob";
+export { loadFromJSON, saveAsJSON } from "./json";
+export const prepareElementsForExport = (elements, { selectedElementIds }, exportSelectionOnly) => {
+    elements = getNonDeletedElements(elements);
+    const isExportingSelection = exportSelectionOnly &&
+        isSomeElementSelected(elements, { selectedElementIds });
+    let exportingFrame = null;
+    let exportedElements = isExportingSelection
+        ? getSelectedElements(elements, { selectedElementIds }, {
+            includeBoundTextElement: true,
+        })
+        : elements;
+    if (isExportingSelection) {
+        if (exportedElements.length === 1 &&
+            isFrameLikeElement(exportedElements[0])) {
+            exportingFrame = exportedElements[0];
+            exportedElements = elementsOverlappingBBox({
+                elements,
+                bounds: exportingFrame,
+                type: "overlap",
+            });
+        }
+        else if (exportedElements.length > 1) {
+            exportedElements = getSelectedElements(elements, { selectedElementIds }, {
+                includeBoundTextElement: true,
+                includeElementsInFrames: true,
+            });
+        }
+    }
+    return {
+        exportingFrame,
+        exportedElements: cloneJSON(exportedElements),
+    };
+};
+export const exportCanvas = async (type, elements, appState, files, { exportBackground, exportPadding = DEFAULT_EXPORT_PADDING, viewBackgroundColor, name, fileHandle = null, exportingFrame = null, }) => {
+    if (elements.length === 0) {
+        throw new Error(t("alerts.cannotExportEmptyCanvas"));
+    }
+    if (type === "svg" || type === "clipboard-svg") {
+        const tempSvg = await exportToSvg(elements, {
+            exportBackground,
+            exportWithDarkMode: appState.exportWithDarkMode,
+            viewBackgroundColor,
+            exportPadding,
+            exportScale: appState.exportScale,
+            exportEmbedScene: appState.exportEmbedScene && type === "svg",
+        }, files, { exportingFrame });
+        if (type === "svg") {
+            return await fileSave(new Blob([tempSvg.outerHTML], { type: MIME_TYPES.svg }), {
+                description: "Export to SVG",
+                name,
+                extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
+                fileHandle,
+            });
+        }
+        else if (type === "clipboard-svg") {
+            await copyTextToSystemClipboard(tempSvg.outerHTML);
+            return;
+        }
+    }
+    const tempCanvas = exportToCanvas(elements, appState, files, {
+        exportBackground,
+        viewBackgroundColor,
+        exportPadding,
+        exportingFrame,
+    });
+    if (type === "png") {
+        let blob = await canvasToBlob(tempCanvas);
+        if (appState.exportEmbedScene) {
+            blob = await (await import("./image")).encodePngMetadata({
+                blob,
+                metadata: serializeAsJSON(elements, appState, files, "local"),
+            });
+        }
+        return await fileSave(blob, {
+            description: "Export to PNG",
+            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,
+        });
+    }
+    else if (type === "clipboard") {
+        try {
+            const blob = canvasToBlob(tempCanvas);
+            await copyBlobToClipboardAsPng(blob);
+        }
+        catch (error) {
+            console.warn(error);
+            if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
+                throw error;
+            }
+            // TypeError *probably* suggests ClipboardItem not defined, which
+            // people on Firefox can enable through a flag, so let's tell them.
+            if (isFirefox && error.name === "TypeError") {
+                throw new Error(`${t("alerts.couldNotCopyToClipboard")}\n\n${t("hints.firefox_clipboard_write")}`);
+            }
+            else {
+                throw new Error(t("alerts.couldNotCopyToClipboard"));
+            }
+        }
+    }
+    else {
+        // shouldn't happen
+        throw new Error("Unsupported export type");
+    }
+};

package/dist/packages/excalidraw/data/json.js

@@ -0,0 +1,93 @@
+import { fileOpen, fileSave } from "./filesystem";
+import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
+import { EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES, VERSIONS, } from "../constants";
+import { clearElementsForDatabase, clearElementsForExport } from "../element";
+import { isImageFileHandle, loadFromBlob, normalizeFile } from "./blob";
+/**
+ * Strips out files which are only referenced by deleted elements
+ */
+const filterOutDeletedFiles = (elements, files) => {
+    const nextFiles = {};
+    for (const element of elements) {
+        if (!element.isDeleted &&
+            "fileId" in element &&
+            element.fileId &&
+            files[element.fileId]) {
+            nextFiles[element.fileId] = files[element.fileId];
+        }
+    }
+    return nextFiles;
+};
+export const serializeAsJSON = (elements, appState, files, type) => {
+    const data = {
+        type: EXPORT_DATA_TYPES.excalidraw,
+        version: VERSIONS.excalidraw,
+        source: EXPORT_SOURCE,
+        elements: type === "local"
+            ? clearElementsForExport(elements)
+            : clearElementsForDatabase(elements),
+        appState: type === "local"
+            ? cleanAppStateForExport(appState)
+            : clearAppStateForDatabase(appState),
+        files: type === "local"
+            ? filterOutDeletedFiles(elements, files)
+            : // will be stripped from JSON
+                undefined,
+    };
+    return JSON.stringify(data, null, 2);
+};
+export const saveAsJSON = async (elements, appState, files) => {
+    const serialized = serializeAsJSON(elements, appState, files, "local");
+    const blob = new Blob([serialized], {
+        type: MIME_TYPES.excalidraw,
+    });
+    const fileHandle = await fileSave(blob, {
+        name: appState.name,
+        extension: "excalidraw",
+        description: "Excalidraw file",
+        fileHandle: isImageFileHandle(appState.fileHandle)
+            ? null
+            : appState.fileHandle,
+    });
+    return { fileHandle };
+};
+export const loadFromJSON = async (localAppState, localElements) => {
+    const file = await fileOpen({
+        description: "Excalidraw files",
+        // ToDo: Be over-permissive until https://bugs.webkit.org/show_bug.cgi?id=34442
+        // gets resolved. Else, iOS users cannot open `.excalidraw` files.
+        // extensions: ["json", "excalidraw", "png", "svg"],
+    });
+    return loadFromBlob(await normalizeFile(file), localAppState, localElements, file.handle);
+};
+export const isValidExcalidrawData = (data) => {
+    return (data?.type === EXPORT_DATA_TYPES.excalidraw &&
+        (!data.elements ||
+            (Array.isArray(data.elements) &&
+                (!data.appState || typeof data.appState === "object"))));
+};
+export const isValidLibrary = (json) => {
+    return (typeof json === "object" &&
+        json &&
+        json.type === EXPORT_DATA_TYPES.excalidrawLibrary &&
+        (json.version === 1 || json.version === 2));
+};
+export const serializeLibraryAsJSON = (libraryItems) => {
+    const data = {
+        type: EXPORT_DATA_TYPES.excalidrawLibrary,
+        version: VERSIONS.excalidrawLibrary,
+        source: EXPORT_SOURCE,
+        libraryItems,
+    };
+    return JSON.stringify(data, null, 2);
+};
+export const saveLibraryAsJSON = async (libraryItems) => {
+    const serialized = serializeLibraryAsJSON(libraryItems);
+    await fileSave(new Blob([serialized], {
+        type: MIME_TYPES.excalidrawlib,
+    }), {
+        name: "library",
+        extension: "excalidrawlib",
+        description: "Excalidraw library file",
+    });
+};