Merge pull request #499 from vcync/next

Next

Author: 2xAA

src/App.vue

@@ -7,8 +7,9 @@
       :showMaximiseIcon="false"
       :state.sync="layoutState"
       @state="updateLayoutState"
-      @creation-error="reset"
+      @creation-error="creationError"
       :headerHeight="18"
+      :key="triggerUiRestart"
     >
       <gl-col>
         <gl-row>
@@ -97,7 +98,9 @@ import Search from "@/components/Search";
 
 import getNextName from "@/application/utils/get-next-name";
 import constants from "@/application/constants";
+
 import * as GoldenLayout from "golden-layout";
+import { ipcRenderer } from "electron";
 
 export default {
   name: "app",
@@ -127,7 +130,8 @@ export default {
 
       showUi: true,
       mouseTimer: null,
-      cursor: "none"
+      cursor: "none",
+      triggerUiRestart: 0
     };
   },
 
@@ -153,21 +157,19 @@ export default {
   },
 
   created() {
-    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);
+      try {
+        this.layoutState = JSON.parse(layoutState);
+      } catch (e) {
+        this.creationError();
+      }
     }
+
+    ipcRenderer.on("reset-layout", () => {
+      this.resetGoldenLayoutState();
+      this.restartLayout();
+    });
   },
 
   async mounted() {
@@ -328,8 +330,7 @@ export default {
       );
     },
 
-    async reset() {
-      console.log("golden layout creation error");
+    async creationError() {
       const localStorageKeys = Object.keys(window.localStorage);
 
       const nextKey = await getNextName(
@@ -338,14 +339,27 @@ export default {
       );
       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)
+      console.warn(
+        "Layout could not be restored. Default layout loaded and old layout was saved to a backup local storage key"
       );
 
-      window.location.reload();
+      this.resetGoldenLayoutState();
+      this.restartLayout();
+    },
+
+    resetGoldenLayoutState() {
+      window.localStorage.removeItem(constants.LAYOUT_STATE_KEY);
+      this.layoutState = undefined;
+    },
+
+    /**
+     * @description Restarts Golden Layout.
+     * We increment a variable which is assigned to the key of the root Golden Layout element.
+     * If the key is updated, the element is forced to dismount and mount again.
+     */
+    restartLayout() {
+      this.resetGoldenLayoutState();
+      this.triggerUiRestart++;
     }
   },
 

src/application/worker/store/modules/inputs.js

@@ -21,6 +21,10 @@ const actions = {
     commit("SET_FOCUSED_INPUT", { id, title, writeToSwap });
   },
 
+  clearFocusedInput({ commit }) {
+    commit("SET_FOCUSED_INPUT", { id: null, title: null });
+  },
+
   addInput({ commit }, { type, location, data, id = uuidv4(), writeToSwap }) {
     const input = { type, location, data, id };
     commit("ADD_INPUT", { input, writeToSwap });

src/background.js

@@ -341,7 +341,26 @@ function generateMenuTemplate() {
         { role: "zoomin" },
         { role: "zoomout" },
         { type: "separator" },
-        { role: "togglefullscreen" }
+        { role: "togglefullscreen" },
+        { type: "separator" },
+        {
+          label: "Reset layout",
+          async click() {
+            const { response } = await dialog.showMessageBox(
+              windows["mainWindow"],
+              {
+                type: "question",
+                buttons: ["Yes", "No"],
+                message: "modV",
+                detail: "Are you sure you want to reset the current layout?"
+              }
+            );
+
+            if (response === 0) {
+              windows["mainWindow"].webContents.send("reset-layout");
+            }
+          }
+        }
       ]
     },
     // { role: 'windowMenu' }

src/components/ActiveModule.vue

@@ -3,7 +3,9 @@
     class="active-module"
     tabindex="0"
     @keydown="removeModule"
+    @focus="clickActiveModule"
     ref="activeModule"
+    :class="{ focused }"
   >
     <div class="active-module__title handle">
       {{ name }}
@@ -13,7 +15,7 @@
         <grid
           columns="6"
           @mousedown="
-            clickActiveModule(module && module.meta.enabledInputId, 'Enable')
+            focusInput(module && module.meta.enabledInputId, 'Enable')
           "
           :class="{
             'has-link': hasLink(module && module.meta.enabledInputId),
@@ -161,6 +163,14 @@ export default {
       }
 
       return this.module.meta.name;
+    },
+
+    focusedModule() {
+      return this.$store.state["focus"].type === "module";
+    },
+
+    focused() {
+      return this.focusedModule && this.id === this.$store.state["focus"].id;
     }
   },
 
@@ -191,9 +201,12 @@ export default {
       });
     },
 
-    clickActiveModule(inputId, title) {
-      this.focusInput(inputId, title);
-      this.$refs.activeModule.focus();
+    async clickActiveModule() {
+      await this.$store.dispatch("focus/setFocus", {
+        id: this.id,
+        type: "module"
+      });
+
       this.$store.commit("ui-modules/SET_FOCUSED", this.id);
     },
 
@@ -205,9 +218,11 @@ export default {
       return this.$modV.store.state.inputs.focusedInput.id === id;
     },
 
-    removeModule(e) {
+    async removeModule(e) {
       if (e.keyCode === 8 || e.keyCode === 46) {
         this.$store.commit("ui-modules/SET_FOCUSED", null);
+        await this.$modV.store.dispatch("inputs/clearFocusedInput");
+
         this.$emit("remove-module", this.id);
       }
     }
@@ -222,7 +237,8 @@ export default {
   font-size: 14px;
 }
 
-.active-module:focus {
+.active-module:focus,
+.active-module.focused {
   outline: #c4c4c4 2px solid;
 }
 

src/components/GalleryItem.vue

@@ -122,7 +122,11 @@ export default {
     },
 
     async doubleClick() {
-      const groupId = this.$store.state["ui-groups"].focused;
+      if (this.$store.state.focus.type !== "group") {
+        return;
+      }
+
+      const groupId = this.$store.state.focus.id;
       if (!groupId) {
         return;
       }

src/components/Group.vue

@@ -8,7 +8,10 @@
       focusElement: true
     }"
     tabindex="0"
-    @keydown="removeGroup"
+    @keydown.self="removeGroup"
+    @focus.self="focus"
+    @mousedown.self="focus"
+    :class="{ focused }"
   >
     <div
       class="group__controls"
@@ -322,6 +325,10 @@ export default {
 
   created() {
     this.localName = this.name;
+
+    if (!this.focusedGroup) {
+      this.focus();
+    }
   },
 
   computed: {
@@ -348,6 +355,16 @@ export default {
       }
     },
 
+    focusedGroup() {
+      return this.$store.state["focus"].type === "group";
+    },
+
+    focused() {
+      return (
+        this.focusedGroup && this.groupId === this.$store.state["focus"].id
+      );
+    },
+
     enabled: {
       get() {
         return this.group.enabled;
@@ -470,6 +487,15 @@ export default {
       return { moduleId, collection: "layer" };
     },
 
+    focus() {
+      if (!this.focused) {
+        this.$store.dispatch("focus/setFocus", {
+          id: this.groupId,
+          type: "group"
+        });
+      }
+    },
+
     removeModule(moduleId) {
       const { groupId } = this;
 
@@ -506,7 +532,7 @@ export default {
     },
 
     focusInput(id, title) {
-      this.$modV.store.dispatch("inputs/setFocusedInput", {
+      this.store.dispatch("inputs/setFocusedInput", {
         id,
         title: `${this.name}: ${title}`
       });
@@ -543,7 +569,8 @@ export default {
   margin-bottom: 8px;
 }
 
-.group:focus {
+.group:focus,
+.group.focused {
   outline: #c4c4c4 2px solid;
 }
 

src/components/Groups.vue

@@ -94,7 +94,6 @@ export default {
     },
 
     onDrop(e) {
-      console.log("drop");
       this.groups = applyDrag(this.groups, e);
     }
   }

src/ui-store/modules/focus.js

@@ -0,0 +1,32 @@
+const state = {
+  id: null,
+  type: null
+};
+
+const actions = {
+  setFocus({ commit }, args) {
+    if (!args.id) {
+      throw new Error("Missing ID");
+    }
+
+    if (!args.type) {
+      throw new Error("Missing type");
+    }
+
+    commit("SET_FOCUS", args);
+  }
+};
+
+const mutations = {
+  SET_FOCUS(state, { id, type }) {
+    state.id = id;
+    state.type = type;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations
+};