Merge pull request #23 from LOLDragoon/master

Refined undo/redo logic

Author: keliphan

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,48 +102,62 @@ 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') {
+        if (ignoredActions.has(undone.type)) {
           // console.log('We did something useless!')
-          do {
+          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)
       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()
       }
     }

src/App.vue

@@ -177,28 +177,6 @@ export default {
       return this.imagePath[this.activeRoute]
         ? {
           background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
-          // 'background-color': 'rgba(223, 218, 218, 0.886)',
-          // 'background-size': '100px 100px, 100px 100px, 20px 20px, 20px 20px',
-          // 'background-position':' -2px -2px, -2px -2px, -1px -1px, -1px -1px',
-          // 'background-image': `-webkit-linear-gradient(white 2px, transparent 2px),
-          // -webkit-linear-gradient(0, white 2px, transparent 2px),
-          // -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
-          // -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
-          // 'background-image': `-moz-linear-gradient(white 2px, transparent 2px),
-          // -moz-linear-gradient(0, white 2px, transparent 2px),
-          // -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
-          // -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
-          // 'background-image': `linear-gradient(white 2px, transparent 2px),
-          // linear-gradient(90deg, white 2px, transparent 2px),
-          // linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
-          // linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
-          // '-pie-background': `linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
-          // linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
-          // linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
-          // 20px, linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
-          // 20px, #269`,
-          // 'background-image': `url(${this.userImage})`,
-          // behavior: 'url(/pie/PIE.htc)',
         }
         : {}
     }