Save scene in URL (#220)

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

src/index.tsx

@@ -25,6 +25,8 @@ import {
   exportAsPNG,
   restoreFromLocalStorage,
   saveToLocalStorage,
+  restoreFromURL,
+  saveToURL,
   hasBackground,
   hasStroke,
   getElementAtPosition,
@@ -122,7 +124,8 @@ class App extends React.Component<{}, AppState> {
     document.addEventListener("keydown", this.onKeyDown, false);
     window.addEventListener("resize", this.onResize, false);
 
-    const savedState = restoreFromLocalStorage(elements);
+    const savedState =
+      restoreFromURL(elements) || restoreFromLocalStorage(elements);
     if (savedState) {
       this.setState(savedState);
     }
@@ -997,6 +1000,11 @@ class App extends React.Component<{}, AppState> {
     }));
   };
 
+  private saveDebounced = debounce(() => {
+    saveToLocalStorage(elements, this.state);
+    saveToURL(elements, this.state);
+  }, 300);
+
   private addElementsFromPaste = (paste: string, x?: number, y?: number) => {
     let parsedElements;
     try {
@@ -1037,7 +1045,7 @@ class App extends React.Component<{}, AppState> {
       scrollY: this.state.scrollY,
       viewBackgroundColor: this.state.viewBackgroundColor
     });
-    saveToLocalStorage(elements, this.state);
+    this.saveDebounced();
     if (history.isRecording()) {
       history.pushEntry(history.generateCurrentEntry(elements));
       history.clearRedoStack();
@@ -1046,6 +1054,14 @@ class App extends React.Component<{}, AppState> {
   }
 }
 
+function debounce<T extends any[]>(fn: (...args: T) => void, timeout: number) {
+  let handle = 0;
+  return (...args: T) => {
+    clearTimeout(handle);
+    handle = window.setTimeout(() => fn(...args), timeout);
+  };
+}
+
 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);
 const canvas = document.getElementById("canvas") as HTMLCanvasElement;