undo/redo has been refined with throttle and ignored categories

Author: LOLDragoon

package-lock.json

@@ -25,6 +25,7 @@
     "localforage": "^1.7.3",
     "lodash": ">=4.17.13",
     "lodash.isequal": "^4.5.0",
+    "lodash.throttle": "^4.1.1",
     "mousetrap": "^1.6.3",
     "prismjs": "^1.16.0",
     "quasar": "^1.0.0",

package.json

@@ -8,8 +8,19 @@
 import { SET_ACTIVE_COMPONENT } from './store/types'
 const deepEqual = require('lodash.isequal')
 const cloneDeep = require('lodash.clonedeep')
+const throttle = require('lodash.throttle')
 import { defaultState } from './store/state/index.js'
 
+
+//use this to make sure these actions don't count as things you "undo"
+const ignoredActions = new Set([
+  "setActiveComponent",
+  "setActiveLayer",
+  "upOneLayer",
+  "setActiveHTML"
+  ])
+
+
 let redoMixin = {
   data () {
     return {
@@ -47,19 +58,24 @@ let redoMixin = {
   },
 
   mounted () {
+
+    const throttledUndo = throttle(this.undo,300)
+    const throttledRedo = throttle(this.redo,300)
+
     window.addEventListener('keydown', event => {
       if (event.ctrlKey && event.key === 'z') {
         event.preventDefault()
-        this.undo()
+        throttledUndo()
       }
     })
     window.addEventListener('keydown', event => {
       if (event.ctrlKey && event.key === 'y') {
         event.preventDefault()
-        this.redo()
+        throttledRedo()
       }
     })
 
+    // commented code for hotkeys for debuging///////////////////////
     // window.addEventListener('keydown', event => {
     //   if (event.ctrlKey && event.key === 'a') {
     //     event.preventDefault()
@@ -76,6 +92,7 @@ let redoMixin = {
     //     }
     //   }
     // });
+    //////////////////////////////////////////////////////////////////////
 
     // console.log("do we want this? or this.$store.state?", this.$store.state)
     this.initialState = defaultState(this.$store.state)
@@ -85,49 +102,63 @@ let redoMixin = {
     undo: function () {
       // do {
       // console.log("How far back?")
+      if(this.doneAction.length ===0){
+        return
+      }
 
       this.isTimetraveling = true
 
       let undone = this.doneAction.pop()
 
+      // assuming we have have something to undo, we check if we are undoing an action that has no feedback
+      // like say changing active elements or active components or going up and down a layer since these can be obscured from immediate feedback
+      // will just feel bad to undo (Imagine someone just clicking around out of boredom and then deciding to undo
+      // will force them to have to undo the 30 highlights they just did instead of the last "Real" action)
+      // if this happens we keep popping the doneAction queue and building up the redo queue.
       if (undone !== undefined) {
         this.undoneAction.push(undone)
-        if (undone.type === 'setActiveComponent') {
-          console.log('We did something useless!')
-          do {
+        if (ignoredActions.has(undone.type)) {
+          // console.log('We did something useless!')
+          while (this.doneAction[this.doneAction.length - 1] &&
+          ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)){
             this.undoneAction.push(this.doneAction.pop())
           }
-          while (this.doneAction[this.doneAction.length - 1] &&
-          (this.doneAction[this.doneAction.length - 1].type === 'setActiveComponent'))
+          let finalPop = this.doneAction.pop()
+          if(finalPop !== undefined){
+            this.undoneAction.push(finalPop)
+          }
         }
+        // if we get here, that means we have undone all "useless" actions 
+        // so we have to do one more final pop and push, have to make sure it isn't null though
+         
       }
 
-      //  while (this.doneAction[this.doneAction.length-1] &&
-      //   (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
-      //    this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
       let payload = {
         initialState: this.initialState,
         store: this.$store
       }
       this.$store.commit('EMPTY_STATE', payload)
       console.log(this.$store)
       this.doneAction.forEach(action => {
-        console.log('In the loop', this.$store)
+        //console.log('In the loop', this.$store)
         // this.$store.commit(`${mutation.type}`, mutation.payload);
         this.$store.dispatch(action.type, cloneDeep(action.payload))
         this.doneAction.pop()
       })
       this.isTimetraveling = false
     },
+
     redo: function () {
       let action = this.undoneAction.pop()
+
+      //we have to set timeTraveling to true to preserve the undoneAction array while we make changes
       this.isTimetraveling = true
       if (action) {
         this.$store.dispatch(action.type, cloneDeep(action.payload))
       }
       this.isTimetraveling = false
-      if (action && (action.type === 'setActiveComponent')) {
-        console.log('WE GOTTA DO MORE')
+      if (action && ignoredActions.has(action.type)) {
+        //console.log('WE GOTTA DO MORE')
         this.redo()
       }
     }