Merge pull request #485 from vcync/next

Next

Author: TimPietrusky

build/icon.ico

@@ -56,7 +56,7 @@
     "vue-class-component": "^7.2.3",
     "vue-color": "^2.7.1",
     "vue-fragment": "^1.5.1",
-    "vue-golden-layout": "^2.0.8",
+    "vue-golden-layout": "^2.1.0",
     "vue-property-decorator": "^8.3.0",
     "vue-smooth-dnd": "^0.8.1",
     "vuex": "^3.1.2",

package.json

@@ -7,6 +7,7 @@
       :showMaximiseIcon="false"
       :state.sync="layoutState"
       @state="updateLayoutState"
+      @creation-error="reset"
       :headerHeight="18"
     >
       <gl-col>
@@ -70,10 +71,6 @@
             <gl-component title="Preview" :closable="false">
               <Preview />
             </gl-component>
-
-            <gl-component title="Swap" :closable="false">
-              <ABSwap />
-            </gl-component>
           </gl-stack>
         </gl-row>
       </gl-col>
@@ -86,7 +83,6 @@
 
 <script>
 import Preview from "@/components/Preview";
-import ABSwap from "@/components/ABSwap";
 import Groups from "@/components/Groups";
 import Gallery from "@/components/Gallery";
 import InputConfig from "@/components/InputConfig";
@@ -99,14 +95,15 @@ import ModuleInspector from "@/components/ModuleInspector";
 import InfoView from "@/components/InfoView";
 import Search from "@/components/Search";
 
+import getNextName from "@/application/utils/get-next-name";
+import constants from "@/application/constants";
 import * as GoldenLayout from "golden-layout";
 
 export default {
   name: "app",
 
   components: {
     Preview,
-    ABSwap,
     Groups,
     Gallery,
     InputConfig,
@@ -156,7 +153,18 @@ export default {
   },
 
   created() {
-    const layoutState = window.localStorage.getItem("layoutState");
+    const layoutErroredLastLoad = window.localStorage.getItem(
+      constants.LAYOUT_LOAD_ERROR_KEY
+    );
+
+    if (layoutErroredLastLoad) {
+      console.warn(
+        "Layout could not be restored. Default layout loaded and old layout was saved to a backup local storage key"
+      );
+      window.localStorage.removeItem(constants.LAYOUT_LOAD_ERROR_KEY);
+    }
+
+    const layoutState = window.localStorage.getItem(constants.LAYOUT_STATE_KEY);
     if (layoutState) {
       this.layoutState = JSON.parse(layoutState);
     }
@@ -306,7 +314,7 @@ export default {
     /**
      * @description Called when <golden-layout /> updates its state.
      * Unminifies config, purges dynamically added panels, minifies and saves to
-     * localStorage key "layoutState".
+     * localStorage key `constants.LAYOUT_STATE_KEY`.
      *
      * @param {GoldenLayout config} value
      */
@@ -315,9 +323,29 @@ export default {
       const cleanedConfig = this.purgeDynamicPanels(config);
 
       window.localStorage.setItem(
-        "layoutState",
+        constants.LAYOUT_STATE_KEY,
         JSON.stringify(GoldenLayout.minifyConfig(cleanedConfig))
       );
+    },
+
+    async reset() {
+      console.log("golden layout creation error");
+      const localStorageKeys = Object.keys(window.localStorage);
+
+      const nextKey = await getNextName(
+        constants.LAYOUT_STATE_KEY,
+        localStorageKeys
+      );
+      window.localStorage.setItem(nextKey, JSON.stringify(this.layoutState));
+
+      window.localStorage.removeItem(constants.LAYOUT_STATE_KEY);
+
+      window.localStorage.setItem(
+        constants.LAYOUT_LOAD_ERROR_KEY,
+        JSON.stringify(true)
+      );
+
+      window.location.reload();
     }
   },
 

src/App.vue

@@ -1,5 +1,13 @@
 export default {
   get GALLERY_GROUP_NAME() {
     return "modV internal Gallery Group";
+  },
+
+  get LAYOUT_STATE_KEY() {
+    return "layoutState";
+  },
+
+  get LAYOUT_LOAD_ERROR() {
+    return "layoutLoadError";
   }
 };