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

Move file system operations to separate module (#510)

Browse source
This commit is contained in:
Thomas Steiner 2020-01-22 13:55:13 +01:00 • committed by GitHub
parent dc0a4f4cb8
commit d1fb824369
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 125 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/scene/browser-native.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare module "browser-nativefs";

175
src/scene/data.ts
View file

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