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

Fix library dnd (#2314)

Browse source
This commit is contained in:
David Luzar 2020-10-30 21:01:41 +01:00 • committed by GitHub
parent 8a50916ef2
commit ba3f548b91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 261 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/data/blob.ts
View file

@ -55,13 +55,24 @@ export const parseFileContents = async (blob: Blob | File) => {
return contents;
};
const getMimeType = (blob: Blob): string => {
if (blob.type) {
return blob.type;
export const getMimeType = (blob: Blob | string): string => {
let name: string;
if (typeof blob === "string") {
name = blob;
} else {
if (blob.type) {
return blob.type;
}
name = blob.name || "";
}
const name = blob.name || "";
if (/\.(excalidraw|json)$/.test(name)) {
return "application/json";
} else if (/\.png$/.test(name)) {
return "image/png";
} else if (/\.jpe?g$/.test(name)) {
return "image/jpeg";
} else if (/\.svg$/.test(name)) {
return "image/svg+xml";
}
return "";
};

3
src/data/json.ts
View file

@ -4,7 +4,6 @@ import { cleanAppStateForExport } from "../appState";
import { fileOpen, fileSave } from "browser-nativefs";
import { loadFromBlob } from "./blob";
import { loadLibrary } from "./localStorage";
import { Library } from "./library";
import { MIME_TYPES } from "../constants";
@ -65,7 +64,7 @@ export const isValidLibrary = (json: any) => {
};
export const saveLibraryAsJSON = async () => {
const library = await loadLibrary();
const library = await Library.loadLibrary();
const serialized = JSON.stringify(
{
type: "excalidrawlib",

55
src/data/library.ts
View file

@ -1,8 +1,16 @@
import { loadLibraryFromBlob } from "./blob";
import { LibraryItems, LibraryItem } from "../types";
import { loadLibrary, saveLibrary } from "./localStorage";
import { restoreElements } from "./restore";
import { STORAGE_KEYS } from "../constants";
export class Library {
private static libraryCache: LibraryItems | null = null;
static resetLibrary = () => {
Library.libraryCache = null;
localStorage.removeItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
};
/** imports library (currently merges, removing duplicates) */
static async importLibrary(blob: Blob) {
const libraryFile = await loadLibraryFromBlob(blob);
@ -34,10 +42,51 @@ export class Library {
});
};
const existingLibraryItems = await loadLibrary();
const existingLibraryItems = await Library.loadLibrary();
const filtered = libraryFile.library!.filter((libraryItem) =>
isUniqueitem(existingLibraryItems, libraryItem),
);
saveLibrary([...existingLibraryItems, ...filtered]);
Library.saveLibrary([...existingLibraryItems, ...filtered]);
}
static loadLibrary = (): Promise<LibraryItems> => {
return new Promise(async (resolve) => {
if (Library.libraryCache) {
return resolve(JSON.parse(JSON.stringify(Library.libraryCache)));
}
try {
const data = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
if (!data) {
return resolve([]);
}
const items = (JSON.parse(data) as LibraryItems).map((elements) =>
restoreElements(elements),
) as Mutable<LibraryItems>;
// clone to ensure we don't mutate the cached library elements in the app
Library.libraryCache = JSON.parse(JSON.stringify(items));
resolve(items);
} catch (e) {
console.error(e);
resolve([]);
}
});
};
static saveLibrary = (items: LibraryItems) => {
const prevLibraryItems = Library.libraryCache;
try {
const serializedItems = JSON.stringify(items);
// cache optimistically so that consumers have access to the latest
// immediately
Library.libraryCache = JSON.parse(serializedItems);
localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
} catch (e) {
Library.libraryCache = prevLibraryItems;
console.error(e);
}
};
}

63
src/data/localStorage.ts
View file

@ -1,59 +1,12 @@
import { ExcalidrawElement } from "../element/types";
import { AppState, LibraryItems } from "../types";
import { AppState } from "../types";
import { clearAppStateForLocalStorage, getDefaultAppState } from "../appState";
import { restoreElements } from "./restore";
const LOCAL_STORAGE_KEY = "excalidraw";
const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
const LOCAL_STORAGE_KEY_COLLAB = "excalidraw-collab";
const LOCAL_STORAGE_KEY_LIBRARY = "excalidraw-library";
let _LATEST_LIBRARY_ITEMS: LibraryItems | null = null;
export const loadLibrary = (): Promise<LibraryItems> => {
return new Promise(async (resolve) => {
if (_LATEST_LIBRARY_ITEMS) {
return resolve(JSON.parse(JSON.stringify(_LATEST_LIBRARY_ITEMS)));
}
try {
const data = localStorage.getItem(LOCAL_STORAGE_KEY_LIBRARY);
if (!data) {
return resolve([]);
}
const items = (JSON.parse(data) as LibraryItems).map((elements) =>
restoreElements(elements),
) as Mutable<LibraryItems>;
// clone to ensure we don't mutate the cached library elements in the app
_LATEST_LIBRARY_ITEMS = JSON.parse(JSON.stringify(items));
resolve(items);
} catch (e) {
console.error(e);
resolve([]);
}
});
};
export const saveLibrary = (items: LibraryItems) => {
const prevLibraryItems = _LATEST_LIBRARY_ITEMS;
try {
const serializedItems = JSON.stringify(items);
// cache optimistically so that consumers have access to the latest
// immediately
_LATEST_LIBRARY_ITEMS = JSON.parse(serializedItems);
localStorage.setItem(LOCAL_STORAGE_KEY_LIBRARY, serializedItems);
} catch (e) {
_LATEST_LIBRARY_ITEMS = prevLibraryItems;
console.error(e);
}
};
import { STORAGE_KEYS } from "../constants";
export const saveUsernameToLocalStorage = (username: string) => {
try {
localStorage.setItem(
LOCAL_STORAGE_KEY_COLLAB,
STORAGE_KEYS.LOCAL_STORAGE_COLLAB,
JSON.stringify({ username }),
);
} catch (error) {
@ -64,7 +17,7 @@ export const saveUsernameToLocalStorage = (username: string) => {
export const importUsernameFromLocalStorage = (): string | null => {
try {
const data = localStorage.getItem(LOCAL_STORAGE_KEY_COLLAB);
const data = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
if (data) {
return JSON.parse(data).username;
}
@ -82,11 +35,11 @@ export const saveToLocalStorage = (
) => {
try {
localStorage.setItem(
LOCAL_STORAGE_KEY,
STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
JSON.stringify(elements.filter((element) => !element.isDeleted)),
);
localStorage.setItem(
LOCAL_STORAGE_KEY_STATE,
STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
JSON.stringify(clearAppStateForLocalStorage(appState)),
);
} catch (error) {
@ -100,8 +53,8 @@ export const importFromLocalStorage = () => {
let savedState = null;
try {
savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
savedElements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS);
savedState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
} catch (error) {
// Unable to access localStorage
console.error(error);