lz compression on asciibird state import/export, lz compression on ctrl z history

package.json

@@ -12,6 +12,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "lz-string": "^1.4.4",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-draggable-resizable": "^2.3.0",

src/Dashboard.vue

@@ -102,12 +102,11 @@ import ContextMenu from "./components/parts/ContextMenu.vue";
 
 import NewAscii from "./components/modals/NewAscii.vue";
 // import AsciiCursor from './components/parts/AsciiCursor.vue';
-// import pako from 'pako';
+import LZString from 'lz-string';
 
 export default {
   async created() {
     // Load from irc watch if present in the URL bar
-    console.log(window.asciiList);
     const asciiUrl = new URL(location.href).searchParams.get("ascii");
     if (asciiUrl) {
       const res = await fetch(`https://ascii.jewbird.live/${asciiUrl}`, {
@@ -467,24 +466,16 @@ export default {
       // Update the browsers title to the ASCII filename
       document.title = `asciibird - ${this.$store.getters.currentAscii.title}`;
     },
-    importAsciibirdState(fileContents, fileName) {
-      // Import from a gzipped json file
-
-      // const restored = JSON.parse(pako.inflate(fileContents, { to: 'string' }));
-      console.log(restored)
-
-      // No gz for now unless can get the above working
-      // this.$store.commit("changeState", { ...JSON.parse(fileContents) });
+    importAsciibirdState(fileContents) {
+      let contents = JSON.parse(LZString.decompressFromEncodedURIComponent(fileContents))
+      this.$store.commit("changeState", { ... contents });
     },
     exportAsciibirdState() {
       // Download to a gzipped json file
       let output;
 
       try {
-        // Make a gzipped JSON of the asciibird app state
-        // While making a gzip bellow works, had some trouble gunzipping in importAsciibirdState(fileContents, fileName)
-        // output = pako.gzip(JSON.stringify(this.$store.getters.getState), {level:"6"});
-        output = JSON.stringify(this.$store.getters.getState);
+        output = LZString.compressToEncodedURIComponent(JSON.stringify(this.$store.getters.getState));
 
         // Default timestamp for filename
         const today = new Date();
@@ -498,7 +489,7 @@ export default {
         this.downloadToFile(
           output,
           `asciibird-${y}-${m}-${d}-${h}-${mi}-${s}.asb`,
-          "application/json"
+          "application/gzip"
         );
       } catch (err) {
         console.log(err);

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex, { Store } from 'vuex';
 import VuexPersistence from 'vuex-persist';
+import LZString from 'lz-string';
 
 Vue.use(Vuex);
 const vuexLocal = new VuexPersistence({
@@ -209,30 +210,23 @@ export default new Vuex.Store({
       // current - payload
 
       if (!skipUndo) {
-        state.asciibirdMeta[state.tab].history.push(JSON.stringify(state.asciibirdMeta[state.tab].blocks))
+        state.asciibirdMeta[state.tab].history.push(LZString.compressToUTF16(JSON.stringify(state.asciibirdMeta[state.tab].blocks)))
       }
 
       Object.assign(state.asciibirdMeta[state.tab].blocks, payload);
     },
     undoBlocks(state) {
-      // let blocksHistory = state.asciibirdMeta[state.tab].history[store.getters.undoIndex]
- // Object.assign(state.asciibirdMeta[state.tab].history, );
-      if (this.getters.undoIndex === 0) {
-        Object.assign(state.asciibirdMeta[state.tab].blocks, JSON.parse(state.asciibirdMeta[state.tab].history[this.getters.undoIndex]));
-        state.asciibirdMeta[state.tab].history.pop()
-      }
-
       if (state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]) {
-        Object.assign(state.asciibirdMeta[state.tab].blocks, JSON.parse(state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]));
+
+        // {decompressed: 45465, compressed: 2029} huge saving!
+        // console.log({
+        //   decompressed: LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]).length,
+        //   compressed: state.asciibirdMeta[state.tab].history[this.getters.undoIndex - 1].length
+        // })
+
+        Object.assign(state.asciibirdMeta[state.tab].blocks, JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1])));
         state.asciibirdMeta[state.tab].history.pop()
       }
-
-      // if (blocksHistory[blocksHistory.length - 1]) {
-        // let prevBlockHistory = blocksHistory[store.getters.undoIndex];
-        
-
-        // state.asciibirdMeta[state.tab].history.pop()
-      // }
     },
     // redoBlocks(state) {
     //   let blocksHistory = state.asciibirdMeta[state.tab].history

yarn.lock

@@ -5859,6 +5859,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
 make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"