|
|
|
|
@ -6,70 +6,26 @@ import { AppState } from "../types";
|
|
|
|
|
import { ExportType } from "./types";
|
|
|
|
|
import { getExportCanvasPreview } from "./getExportCanvasPreview";
|
|
|
|
|
import nanoid from "nanoid";
|
|
|
|
|
import { fileOpenPromise, fileSavePromise } from "browser-nativefs";
|
|
|
|
|
|
|
|
|
|
const LOCAL_STORAGE_KEY = "excalidraw";
|
|
|
|
|
const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
|
|
|
|
|
const BACKEND_POST = "https://json.excalidraw.com/api/v1/post/";
|
|
|
|
|
const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
|
|
|
|
|
|
|
|
|
|
let fileOpen: Function;
|
|
|
|
|
let fileSave: Function;
|
|
|
|
|
|
|
|
|
|
(async () => {
|
|
|
|
|
fileOpen = (await fileOpenPromise).default;
|
|
|
|
|
fileSave = (await fileSavePromise).default;
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
// TODO: Defined globally, since file handles aren't yet serializable.
|
|
|
|
|
// Once `FileSystemFileHandle` can be serialized, make this
|
|
|
|
|
// part of `AppState`.
|
|
|
|
|
(window as any).handle = null;
|
|
|
|
|
|
|
|
|
|
function saveFile(name: string, data: string) {
|
|
|
|
|
// create a temporary <a> elem which we'll use to download the image
|
|
|
|
|
const link = document.createElement("a");
|
|
|
|
|
link.setAttribute("download", name);
|
|
|
|
|
link.setAttribute("href", data);
|
|
|
|
|
link.click();
|
|
|
|
|
|
|
|
|
|
// clean up
|
|
|
|
|
link.remove();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function saveFileNative(name: string, data: Blob) {
|
|
|
|
|
const options = {
|
|
|
|
|
type: "saveFile",
|
|
|
|
|
accepts: [
|
|
|
|
|
{
|
|
|
|
|
description: `Excalidraw ${
|
|
|
|
|
data.type === "image/png" ? "image" : "file"
|
|
|
|
|
}`,
|
|
|
|
|
extensions: [data.type.split("/")[1]],
|
|
|
|
|
mimeTypes: [data.type]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
try {
|
|
|
|
|
let handle;
|
|
|
|
|
if (data.type === "application/json") {
|
|
|
|
|
// For Excalidraw files (i.e., `application/json` files):
|
|
|
|
|
// If it exists, write back to a previously opened file.
|
|
|
|
|
// Else, create a new file.
|
|
|
|
|
if ((window as any).handle) {
|
|
|
|
|
handle = (window as any).handle;
|
|
|
|
|
} else {
|
|
|
|
|
handle = await (window as any).chooseFileSystemEntries(options);
|
|
|
|
|
(window as any).handle = handle;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// For image export files (i.e., `image/png` files):
|
|
|
|
|
// Always create a new file.
|
|
|
|
|
handle = await (window as any).chooseFileSystemEntries(options);
|
|
|
|
|
}
|
|
|
|
|
const writer = await handle.createWriter();
|
|
|
|
|
await writer.truncate(0);
|
|
|
|
|
await writer.write(0, data, data.type);
|
|
|
|
|
await writer.close();
|
|
|
|
|
} catch (err) {
|
|
|
|
|
if (err.name !== "AbortError") {
|
|
|
|
|
console.error(err.name, err.message);
|
|
|
|
|
}
|
|
|
|
|
throw err;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface DataState {
|
|
|
|
|
elements: readonly ExcalidrawElement[];
|
|
|
|
|
appState: AppState;
|
|
|
|
|
@ -94,17 +50,14 @@ export async function saveAsJSON(
|
|
|
|
|
const serialized = serializeAsJSON(elements, appState);
|
|
|
|
|
|
|
|
|
|
const name = `${appState.name}.json`;
|
|
|
|
|
if ("chooseFileSystemEntries" in window) {
|
|
|
|
|
await saveFileNative(
|
|
|
|
|
name,
|
|
|
|
|
new Blob([serialized], { type: "application/json" })
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
saveFile(
|
|
|
|
|
name,
|
|
|
|
|
"data:application/json;charset=utf-8," + encodeURIComponent(serialized)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
await fileSave(
|
|
|
|
|
new Blob([serialized], { type: "application/json" }),
|
|
|
|
|
{
|
|
|
|
|
fileName: name,
|
|
|
|
|
description: "Excalidraw file"
|
|
|
|
|
},
|
|
|
|
|
(window as any).handle
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function loadFromJSON() {
|
|
|
|
|
@ -122,57 +75,34 @@ export async function loadFromJSON() {
|
|
|
|
|
return { elements, appState };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if ("chooseFileSystemEntries" in window) {
|
|
|
|
|
try {
|
|
|
|
|
(window as any).handle = await (window as any).chooseFileSystemEntries({
|
|
|
|
|
accepts: [
|
|
|
|
|
{
|
|
|
|
|
description: "Excalidraw files",
|
|
|
|
|
extensions: ["json"],
|
|
|
|
|
mimeTypes: ["application/json"]
|
|
|
|
|
const blob = await fileOpen({
|
|
|
|
|
description: "Excalidraw files",
|
|
|
|
|
extensions: ["json"],
|
|
|
|
|
mimeTypes: ["application/json"]
|
|
|
|
|
});
|
|
|
|
|
if (blob.handle) {
|
|
|
|
|
(window as any).handle = blob.handle;
|
|
|
|
|
}
|
|
|
|
|
let contents;
|
|
|
|
|
if ("text" in Blob) {
|
|
|
|
|
contents = await blob.text();
|
|
|
|
|
} else {
|
|
|
|
|
contents = await (async () => {
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.readAsText(blob, "utf8");
|
|
|
|
|
reader.onloadend = () => {
|
|
|
|
|
if (reader.readyState === FileReader.DONE) {
|
|
|
|
|
resolve(reader.result as string);
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
const file = await (window as any).handle.getFile();
|
|
|
|
|
const contents = await file.text();
|
|
|
|
|
const { elements, appState } = updateAppState(contents);
|
|
|
|
|
return new Promise<DataState>(resolve => {
|
|
|
|
|
resolve(restore(elements, appState));
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
} catch (err) {
|
|
|
|
|
if (err.name !== "AbortError") {
|
|
|
|
|
console.error(err.name, err.message);
|
|
|
|
|
}
|
|
|
|
|
throw err;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
const input = document.createElement("input");
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
input.type = "file";
|
|
|
|
|
input.accept = ".json";
|
|
|
|
|
|
|
|
|
|
input.onchange = () => {
|
|
|
|
|
if (!input.files!.length) {
|
|
|
|
|
alert("A file was not selected.");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
reader.readAsText(input.files![0], "utf8");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
input.click();
|
|
|
|
|
|
|
|
|
|
return new Promise<DataState>(resolve => {
|
|
|
|
|
reader.onloadend = () => {
|
|
|
|
|
if (reader.readyState === FileReader.DONE) {
|
|
|
|
|
const { elements, appState } = updateAppState(
|
|
|
|
|
reader.result as string
|
|
|
|
|
);
|
|
|
|
|
resolve(restore(elements, appState));
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
}
|
|
|
|
|
const { elements, appState } = updateAppState(contents);
|
|
|
|
|
return new Promise<DataState>(resolve => {
|
|
|
|
|
resolve(restore(elements, appState));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function exportToBackend(
|
|
|
|
|
@ -246,15 +176,14 @@ export async function exportCanvas(
|
|
|
|
|
|
|
|
|
|
if (type === "png") {
|
|
|
|
|
const fileName = `${name}.png`;
|
|
|
|
|
if ("chooseFileSystemEntries" in window) {
|
|
|
|
|
tempCanvas.toBlob(async (blob: any) => {
|
|
|
|
|
if (blob) {
|
|
|
|
|
await saveFileNative(fileName, blob);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
saveFile(fileName, tempCanvas.toDataURL("image/png"));
|
|
|
|
|
}
|
|
|
|
|
tempCanvas.toBlob(async (blob: any) => {
|
|
|
|
|
if (blob) {
|
|
|
|
|
await fileSave(blob, {
|
|
|
|
|
fileName: fileName,
|
|
|
|
|
description: "Excalidraw image"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else if (type === "clipboard") {
|
|
|
|
|
try {
|
|
|
|
|
tempCanvas.toBlob(async function(blob: any) {
|
|
|
|
|
|
Thomas Steiner
5 years ago
committed by
GitHub