|
|
@@ -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