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();
+}
+
function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) {
// πβ²π₯=(ππ₯βππ₯)cosπβ(ππ¦βππ¦)sinπ+ππ₯
// πβ²π¦=(ππ₯βππ₯)sinπ+(ππ¦βππ¦)cosπ+ππ¦.
@@ -709,13 +756,26 @@ function save(state: AppState) {
localStorage.setItem(LOCAL_STORAGE_KEY_STATE, JSON.stringify(state));
}
-function restore() {
- try {
- const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
- const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
+function restoreFromLocalStorage() {
+ const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
+ const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
+ return restore(savedElements, savedState);
+}
+
+function restore(
+ savedElements: string | ExcalidrawElement[] | null,
+ savedState: string | null
+) {
+ try {
if (savedElements) {
- elements.splice(0, elements.length, ...JSON.parse(savedElements));
+ elements.splice(
+ 0,
+ elements.length,
+ ...(typeof savedElements === "string"
+ ? JSON.parse(savedElements)
+ : savedElements)
+ );
elements.forEach((element: ExcalidrawElement) => generateDraw(element));
}
@@ -843,7 +903,7 @@ class App extends React.Component<{}, AppState> {
document.addEventListener("keydown", this.onKeyDown, false);
window.addEventListener("resize", this.onResize, false);
- const savedState = restore();
+ const savedState = restoreFromLocalStorage();
if (savedState) {
this.setState(savedState);
}
@@ -1117,6 +1177,23 @@ class App extends React.Component<{}, AppState> {
background
+ Save/Load
+
+
+
+
{someElementIsSelected() && (
<>
Shape options