Save to local storage

src/index.tsx

@@ -13,6 +13,8 @@ type ExcaliburTextElement = ExcaliburElement & {
   actualBoundingBoxAscent: number;
 };
 
+const LOCAL_STORAGE_KEY = "excalibur";
+
 var elements = Array.of<ExcaliburElement>();
 
 // https://stackoverflow.com/a/6853926/232122
@@ -348,6 +350,31 @@ function deleteSelectedElements() {
   }
 }
 
+function save() {
+  if (elements && elements.length > 0) {
+    const items = [...elements];
+    for (const item of items) {
+      item.isSelected = false;
+    }
+
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(items));
+  }
+}
+
+function restore() {
+  const el = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+  if (el) {
+    const items = JSON.parse(el);
+    for (let item of items) {
+      item = generateDraw(item);
+    }
+    elements = [...items];
+
+    drawScene();
+  }
+}
+
 type AppState = {
   draggingElement: ExcaliburElement | null;
   elementType: string;
@@ -436,8 +463,19 @@ class App extends React.Component<{}, AppState> {
   }
 
   public render() {
+    const hasSavedItems = !!localStorage.getItem(LOCAL_STORAGE_KEY);
+
     return (
       <>
+        <div className="wrappers">
+          <div className="saveWrapper">
+            <button disabled={elements.length === 0} onClick={save}>
+              Save
+            </button>
+            <button disabled={!hasSavedItems} onClick={restore}>
+              Restore
+            </button>
+          </div>
           <div className="exportWrapper">
             <button
               onClick={() => {
@@ -481,6 +519,7 @@ class App extends React.Component<{}, AppState> {
             />
             px)
           </div>
+        </div>
         <div
           onCut={e => {
             e.clipboardData.setData(

src/styles.css

@@ -4,8 +4,13 @@
   src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
 }
 
-.exportWrapper {
+.wrappers {
+  display: flex;
+  align-items: center;
   margin-bottom: 10px;
+}
+
+.exportWrapper {
   display: flex;
   align-items: center;
 }

yarn.lock

@@ -1402,16 +1402,16 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
-"@types/react-dom@^16.9.4":
+"@types/react-dom@16.9.4":
   version "16.9.4"
-  resolved "http://storage.mds.yandex.net/get-npm/1893413/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
   integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.17":
+"@types/react@*", "@types/react@16.9.17":
   version "16.9.17"
-  resolved "http://storage.mds.yandex.net/get-npm/1891400/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
   integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
   dependencies:
     "@types/prop-types" "*"
@@ -5011,9 +5011,9 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-husky@^3.1.0:
+husky@3.1.0:
   version "3.1.0"
-  resolved "http://storage.mds.yandex.net/get-npm/1893478/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
   integrity sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==
   dependencies:
     chalk "^2.4.2"
@@ -6274,9 +6274,9 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-lint-staged@^9.5.0:
+lint-staged@9.5.0:
   version "9.5.0"
-  resolved "http://storage.mds.yandex.net/get-npm/1893478/lint-staged-9.5.0.tgz#290ec605252af646d9b74d73a0fa118362b05a33"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-9.5.0.tgz#290ec605252af646d9b74d73a0fa118362b05a33"
   integrity sha512-nawMob9cb/G1J98nb8v3VC/E8rcX1rryUYXVZ69aT9kde6YWX+uvNOEHY5yf2gcWcTJGiD0kqXmCnS3oD75GIA==
   dependencies:
     chalk "^2.4.2"
@@ -8308,9 +8308,9 @@ prepend-http@^1.0.0:
   resolved "http://storage.mds.yandex.net/get-npm/35308/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-prettier@^1.19.1:
+prettier@1.19.1:
   version "1.19.1"
-  resolved "http://storage.mds.yandex.net/get-npm/1893478/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 pretty-bytes@^5.1.0: