Move all other local storage into the store.

webapp/src/components/tabContentComponents/aboutComponents/devTools.vue

@@ -23,23 +23,15 @@ export default {
 
   data: function() {
     return {
-      newOrigin: this.$store.state.origin,
+      newOrigin: this.$store.state.overrideOrigin,
       reloadWhenOverridingOrigin: true,
     };
   },
 
-  mounted() {
-    if (localStorage.overrideOrigin) {
-      this.newOrigin = localStorage.overrideOrigin;
-    } else {
-      this.newOrigin = "http://microscope.local:5000";
-    }
-  },
-
   methods: {
     overrideAPIHost: function(event) {
       // Save the origin override, so that if we reload the web app, you can easily
-      localStorage.overrideOrigin = this.newOrigin;
+      this.$store.commit("changeOverrideOrigin", this.newOrigin);
 
       // If we have elected not to reload the interface, just update the origin
       // in the store.  Otherwise, the form's default action will do the job for us.

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -10,12 +10,7 @@
               <div>
                 <label class="uk-form-label" for="form-stacked-text">x</label>
                 <div class="uk-form-controls">
-                  <input
+                  <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
-                    v-model="stepSize.x"
-                    class="uk-input uk-form-small"
-                    type="number"
-                    name="inputStepXy"
-                  />
                 </div>
                 <label class="uk-margin-small-right"
                   ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
@@ -25,12 +20,7 @@
               <div>
                 <label class="uk-form-label" for="form-stacked-text">y</label>
                 <div class="uk-form-controls">
-                  <input
+                  <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
-                    v-model="stepSize.y"
-                    class="uk-input uk-form-small"
-                    type="number"
-                    name="inputStepY"
-                  />
                 </div>
                 <label class="uk-margin-small-right"
                   ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
@@ -40,12 +30,7 @@
               <div>
                 <label class="uk-form-label" for="form-stacked-text">z</label>
                 <div class="uk-form-controls">
-                  <input
+                  <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
-                    v-model="stepSize.z"
-                    class="uk-input uk-form-small"
-                    type="number"
-                    name="inputStepZz"
-                  />
                 </div>
               </div>
             </div>
@@ -177,18 +162,6 @@ export default {
 
   data: function() {
     return {
-      stepXy: 200,
-      stepZz: 50,
-      stepSize: {
-        x: 200,
-        y: 200,
-        z: 50,
-      },
-      invert: {
-        x: false,
-        y: false,
-        z: false,
-      },
       setPosition: null,
       isAutofocusing: 0,
       moveLock: false,
@@ -196,6 +169,15 @@ export default {
   },
 
   computed: {
+    // Note that as stepSize and invert are set based on internals we can use
+    // get() and set() to interact with the store. Instead use a deep watcher to
+    // update the store (see ``watch:`` below)
+    stepSize() {
+      return this.$store.state.navigationStepSize;
+    },
+    invert() {
+      return this.$store.state.navigationInvert;
+    },
     baseUri: function() {
       return this.$store.getters.baseUri;
     },
@@ -210,22 +192,19 @@ export default {
   watch: {
     stepSize: {
       deep: true,
-      handler() {
+      handler(newVal) {
-        this.setLocalStorageObj("navigation_stepSize", this.stepSize);
+        this.$store.commit("changeNavigationStepSize", newVal);
       },
     },
     invert: {
       deep: true,
-      handler() {
+      handler(newVal) {
-        this.setLocalStorageObj("navigation_invert", this.invert);
+        this.$store.commit("changeNavigationInvert", newVal);
       },
     },
   },
 
   async mounted() {
-    // Reload saved settings
-    this.stepSize = this.getLocalStorageObj("navigation_stepSize") || this.stepSize;
-    this.invert = this.getLocalStorageObj("navigation_invert") || this.invert;
     let self = this;
     // A global signal listener to perform a move action
     this.$root.$on("globalMoveEvent", self.move);

webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue

@@ -32,14 +32,6 @@ export default {
       },
     },
   },
-
-  watch: {
-    // Cache the stream settings to local storage for persistence
-    // (the next 3 functions all relate to this)
-    disableStream: function(newValue) {
-      this.setLocalStorageObj("disableStream", newValue);
-    },
-  },
 };
 </script>
 

webapp/src/main.js

@@ -193,22 +193,6 @@ Vue.mixin({
     toggleModalElement: function(element) {
       UIkit.modal(element).toggle();
     },
-
-    getLocalStorageObj: function(keyName) {
-      if (localStorage.getItem(keyName)) {
-        try {
-          return JSON.parse(localStorage.getItem(keyName));
-        } catch (e) {
-          localStorage.removeItem(keyName);
-          return null;
-        }
-      }
-    },
-
-    setLocalStorageObj: function(keyName, object) {
-      const parsed = JSON.stringify(object);
-      localStorage.setItem(keyName, parsed);
-    },
   },
 });
 

webapp/src/store.js

@@ -4,8 +4,6 @@ import wotStoreModule from "./wot-client";
 
 Vue.use(Vuex);
 
-const LOCALSTORAGE_KEYS = ["appTheme"];
-
 function getOriginFromLocation() {
   // This will default to the same origin that's serving
   // the web app - but can be overridden by the URL.
@@ -49,6 +47,14 @@ function mutationToKey(mutationName) {
   return key.charAt(0).toLowerCase() + key.slice(1);
 }
 
+const LOCALSTORAGE_KEYS = [
+  "appTheme",
+  "disableStream",
+  "overrideOrigin",
+  "navigationStepSize",
+  "navigationInvert",
+];
+
 export default new Vuex.Store({
   modules: {
     wot: wotStoreModule,
@@ -58,13 +64,29 @@ export default new Vuex.Store({
     available: false,
     waiting: false,
     error: "",
-    disableStream: false,
     autoGpuPreview: false,
     trackWindow: true,
     galleryEnabled: true,
-    appTheme: "system",
     activeStreams: {},
     microscopeHostname: "",
+    // Persistent items:
+    // The app theme (e.g. light/dark)
+    appTheme: "system",
+    disableStream: false,
+    // The origin to use if overriding with dev tools
+    overrideOrigin: "http://microscope.local:5000",
+    // The step sizes for navigation via control pane/keys presses
+    navigationStepSize: {
+      x: 200,
+      y: 200,
+      z: 50,
+    },
+    // The axis inversion for navigation via control pane/keys presses
+    navigationInvert: {
+      x: false,
+      y: false,
+      z: false,
+    },
   },
 
   mutations: {
@@ -110,6 +132,15 @@ export default new Vuex.Store({
     changeMicroscopeHostname(state, value) {
       state.microscopeHostname = value;
     },
+    changeOverrideOrigin(state, value) {
+      state.overrideOrigin = value;
+    },
+    changeNavigationStepSize(state, value) {
+      state.navigationStepSize = value;
+    },
+    changeNavigationInvert(state, value) {
+      state.navigationInvert = value;
+    },
   },
 
   actions: {},
@@ -123,10 +154,17 @@ export default new Vuex.Store({
     store => {
       // Load initial state from localStorage
       LOCALSTORAGE_KEYS.forEach(key => {
+        console.log(key);
         const saved = localStorage.getItem(key);
         if (saved !== null) {
-          const mutationName = keyToMutationName(key);
+          try {
-          store.commit(mutationName, JSON.parse(saved));
+            const parsed = JSON.parse(saved);
+            const mutationName = keyToMutationName(key);
+            store.commit(mutationName, parsed);
+          } catch (e) {
+            console.warn(`Failed to parse localStorage key "${key}":`, e);
+            localStorage.removeItem(key);
+          }
         }
       });