Add undo/redo functionality

package.json

@@ -35,7 +35,8 @@
     "vue-router": "^3.1.4",
     "vue-virtual-scroll-list": "^2.3.0",
     "vuedraggable": "^2.23.2",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "vuex-multi-history": "^3.0.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",

src/components/Editor/Meta.vue

@@ -125,9 +125,6 @@ export default {
       padding: 0;
       list-style: none;
       display: flex;
-      flex-direction: column;
-      max-height: 40vh;
-      overflow-y: auto;
 
       li {
         margin-right: .5em;
@@ -169,6 +166,8 @@ export default {
         flex-direction: column;
         z-index: 100;
         box-shadow: 0 .2rem 1rem rgba(0,0,0,.2);
+        max-height: 40vh;
+        overflow-y: auto;
 
         li {
           padding: .25rem 1rem;

src/store.js

@@ -2,13 +2,17 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from 'axios';
 import { compareVersions } from './util/version';
+import { editorHistory } from '@/util/vuexMultiHistory';
 
 const uuid = require('uuid/v4');
 const config = require('../config');
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  plugins: [
+    editorHistory.plugin
+  ],
   state: {
     version: null,
     config: null,
@@ -28,6 +32,7 @@ export default new Vuex.Store({
     patreonCount: null,
     editor: {
       sessionId: null,
+      historyEnabled: false,
     },
     verbose: {
       status: 0,
@@ -107,6 +112,8 @@ export default new Vuex.Store({
 
       return compareVersions(state.version, state.editor.metaData.pluginVersion);
     },
+
+    editorHistoryEnabled: state => state.editor.historyEnabled,
   },
 
 
@@ -137,6 +144,7 @@ export default new Vuex.Store({
 
     initEditorData(state, sessionId) {
       state.editor = {
+        ...state.editor,
         sessionId,
         sessions: {},
         sessionList: [],
@@ -398,6 +406,10 @@ export default new Vuex.Store({
       state.editor.save.key = key;
     },
 
+    setEditorHistoryState(state, value) {
+      state.editor.historyEnabled = value;
+    },
+
     setVerboseData(state, { data, status }) {
       state.verbose.status = status;
       if (!data) return;
@@ -431,12 +443,12 @@ export default new Vuex.Store({
     getAppData: async ({ commit, dispatch }) => {
       commit('setConfig', config);
       try {
-        const appData = await axios.get(`${config.api_url}/data/all`);
-        commit('setVersion', appData.data.version);
-        commit('setDownloads', appData.data.downloads);
-        commit('setExtensions', appData.data.extensions);
-        commit('setDiscordUserCount', appData.data.discordUserCount);
-        commit('setPatreonCount', appData.data.patreonCount);
+        const { data } = await axios.get(`${config.api_url}/data/all`);
+        commit('setVersion', data.version);
+        commit('setDownloads', data.downloads);
+        commit('setExtensions', data.extensions);
+        commit('setDiscordUserCount', data.discordUserCount);
+        commit('setPatreonCount', data.patreonCount);
       } catch (error) {
         console.error('Error getting data, trying again in 10 seconds...');
         setTimeout(async () => {
@@ -486,6 +498,9 @@ export default new Vuex.Store({
       commit('setKnownPermissions', data.knownPermissions);
       commit('setPotentialContexts', data.potentialContexts);
       commit('setTracks', data.tracks);
+
+      commit('setEditorHistoryState', true);
+      this.history('editor').clearHistory();
     },
 
     addKnownPermission({ commit }, permission) {

src/util/vuexMultiHistory.js

@@ -0,0 +1,30 @@
+import { VuexMultiHistory } from 'vuex-multi-history';
+
+export const editorHistory = new VuexMultiHistory({
+  debug: true,
+  histories: {
+    keys: ['editor'],
+    resolve: () => ['editor'],
+  },
+  filter(mutation) {
+    if (!this.store.getters.editorHistoryEnabled) return false;
+    const historyTypes = [
+      'addEditorNode',
+      'addEditorSession',
+      'toggleNodeValue',
+      'updateNode',
+      'updateNodeContext',
+      'deleteNode',
+      'addTrack',
+      'updateTrack',
+      'deleteTrack',
+      'updateTrackOrder',
+      'deleteSession',
+      'bulkUpdateNode',
+      'addNodeToSession',
+    ];
+    const result = historyTypes.includes(mutation.type);
+    console.log(mutation, result);
+    return result;
+  },
+});

src/views/Editor.vue

@@ -74,13 +74,23 @@
                 Web Permissions Editor
               </div>
               <div class="buttons">
-<!--                <button>-->
-<!--                  <font-awesome icon="undo" />-->
-<!--                </button>-->
-<!--                <button>-->
-<!--                  <font-awesome icon="redo" />-->
-<!--                </button>-->
-                <button @click="saveData" title="Save and generate code">
+                <button
+                  @click="undo"
+                  :disabled="!canUndo"
+                  class="history undo"
+                  title="Undo last action"
+                >
+                  <font-awesome icon="undo" />
+                </button>
+                <button
+                  @click="redo"
+                  :disabled="!canRedo"
+                  class="history redo"
+                  title="Redo last action"
+                >
+                  <font-awesome icon="redo" />
+                </button>
+                <button @click="saveData" class="save-button" title="Save and generate code">
                   <span v-if="saveStatus !== 'saving'">
                     <font-awesome icon="save" fixed-width />
                     Save
@@ -214,6 +224,15 @@ export default {
     userVersion() {
       return this.$store.getters.metaData.pluginVersion;
     },
+    history() {
+      return this.$store.history('editor');
+    },
+    canUndo() {
+      return this.history.canUndo();
+    },
+    canRedo() {
+      return this.history.canRedo();
+    },
   },
 
   created() {
@@ -246,6 +265,12 @@ export default {
     checkVersion(version) {
       return checkVersion(version, this.userVersion);
     },
+    undo() {
+      if (this.canUndo) this.history.undo();
+    },
+    redo() {
+      if (this.canRedo) this.history.redo();
+    },
   },
 };
 </script>
@@ -316,18 +341,24 @@ main.editor {
 
           .buttons {
             button {
-              background: $brand-color;
-              color: $navy;
               font: inherit;
               font-size: 1rem;
               font-weight: bold;
               padding: .25rem .5rem;
               border:0;
               margin-left: .5rem;
-              cursor: pointer;
 
-              &:hover {
-                opacity: .8;
+              &:not([disabled]) {
+                cursor: pointer;
+              }
+
+              &.save-button {
+                background: $brand-color;
+                color: $navy;
+              }
+
+              &:not([disabled]):hover {
+                filter: brightness(1.25);
               }
             }
           }