trying to figure out undo/redo

Author: LOLDragoon

package-lock.json

@@ -21,9 +21,10 @@
     "aws-amplify": "^1.1.30",
     "aws-amplify-vue": "^0.2.13",
     "aws-appsync": "^1.8.1",
-    "lodash": ">=4.17.13",
     "fs-extra": "^8.1.0",
     "localforage": "^1.7.3",
+    "lodash": ">=4.17.13",
+    "lodash.isequal": "^4.5.0",
     "mousetrap": "^1.6.3",
     "prismjs": "^1.16.0",
     "quasar": "^1.0.0",

package.json

@@ -5,8 +5,103 @@
 </template>
 
 <script>
+import { SET_ACTIVE_COMPONENT } from './store/types'
+const deepEqual = require('lodash.isequal')
+
+
+let redoMixin = {
+  data() {
+        return {
+          // banana:[],
+          doneAction:[],
+          undoneAction:[],
+          isTimetraveling: false
+        }
+      },
+      
+      created(){
+        // this.$store.subscribe(mutation => {
+        //   console.log("What is this?",this)
+        //   this.banana.push(mutation);
+        // })
+
+        this.$store.subscribeAction((action,state)=>{
+          this.doneAction.push(action)
+          // console.log('this is the action we are logging',action)
+          // console.log('this is in our redo queue', this.undoneAction[this.undoneAction.length-1])
+          // console.log("Are these equal to each other?", action == this.undoneAction[this.undoneAction.length-1])
+          if(!this.isTimetraveling){
+            if (this.undoneAction[this.undoneAction.length-1]){
+              if(action.type == this.undoneAction[this.undoneAction.length-1].type && deepEqual(action.payload,this.undoneAction[this.undoneAction.length-1].payload)){
+                this.undoneAction.pop()
+              }
+              else{
+                this.undoneAction = []
+              }
+            }
+          }
+        })
+        //  this.blankState = cloneDeep(this.$store)
+      },
+
+      mounted(){
+        window.addEventListener("keyup", event => {
+          if (event.key === "z") {
+          
+           this.undo()
+          }
+        });
+          window.addEventListener("keyup", event => {
+          if (event.key === "y") {
+           this.redo()
+          }
+        });
+      },
+
+      methods: {
+        undo: function() {
+          // do {
+            // console.log("How far back?")
+            let undone = this.doneAction.pop()
+            this.isTimetraveling = true;
+            if(undone !== undefined){
+              this.undoneAction.push(undone)
+            }
+          // } while (this.doneAction[this.doneAction.length-1] &&
+          //   (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
+          //    this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
+          this.$store.commit("EMPTY_STATE",this.$store)
+          console.log(this.$store)
+          this.doneAction.forEach(action => {
+            console.log("In the loop",this.$store)
+            //this.$store.commit(`${mutation.type}`, mutation.payload);
+            this.$store.dispatch(action.type, action.payload);
+            this.doneAction.pop();
+          });
+          this.isTimetraveling = false;
+    
+        },
+          redo: function() {
+            
+              let action = this.undoneAction.pop()
+              this.isTimetraveling = true;
+              if(action){
+              this.$store.dispatch(action.type, action.payload)
+              }
+            this.isTimetraveling = false;
+            //  if(action && (action.type === "setActiveComponent" || action.type === "updateStartingPosition")){
+            //   console.log("WE GOTTA DO MORE")
+            //   this.redo();
+            // }
+          }
+
+      }
+}
+
+
 export default {
-  name: 'App'
+  name: 'App',
+  mixins:[redoMixin]
 }
 </script>
 

src/App.vue

@@ -19,6 +19,8 @@
       @dragging="onDrag"
       @resizing="onResize"
       @dblclick.native="onDoubleClick(componentData)"
+      @dragstop="finishedDrag"
+      :onDragStart="recordInitialPosition"
     >
       <div class="component-title">
         <p>{{ componentData.componentName }}</p>
@@ -85,7 +87,8 @@ export default {
       testOptions: ["parent", "child", "grandchild"],
       testModel: [],
       mockImg: false,
-      counter: 0
+      counter: 0,
+      initialPosition:{x:0, y:0,},
     };
   },
   mounted() {
@@ -179,14 +182,16 @@ export default {
     console.log("updated")
     if(this.activeComponent === '')
     {
+      if(this.$refs.boxes){
       this.$refs.boxes.forEach((element)=> {
           element.enabled = false;
           element.$emit('deactivated')
           element.$emit('update:active', false)
         
-      })
+      })}
     }
     else{
+<<<<<<< HEAD
       this.$refs.boxes.forEach((element)=>{
         // added "element.enabled === false to stop it from emitting a change every frame the box moves
         //may need to re-enable to track box movement and resizing since that stuff isn't part of a single source of truth.
@@ -199,12 +204,28 @@ export default {
       })
     }
   },
+=======
+        this.$refs.boxes.forEach((element)=>{
+          // added "element.enabled === false to stop it from emitting a change every frame the box moves
+          //may need to re-enable to track box movement and resizing since that stuff isn't part of a single source of truth.
+          if(this.activeComponent === element.$attrs.id && element.enabled === false)
+          {
+            element.enabled = true
+            element.$emit('activated')
+            element.$emit('update:active', true)
+          }
+        })
+      }
+    },
+>>>>>>> 55581781ee9af1d82fd02398e554577cdc7b71d4
 
   methods: {
     ...mapActions([
       "setActiveComponent",
       "updateComponentChildrenMultiselectValue",
-      "updateActiveComponentChildrenValue"
+      "updateActiveComponentChildrenValue",
+      "updateComponentPosition",
+      "updateStartingPosition",
     ]),
     onResize: function(x, y, width, height) {
       this.activeComponentData.x = x;
@@ -217,6 +238,26 @@ export default {
       this.componentMap[this.activeComponent].w = width;
       this.componentMap[this.activeComponent].h = height;
     },
+
+    recordInitialPosition: function(e) {
+      console.log("we started a drag")
+      console.log("this.intialPosition",this.initialPosition)
+      console.log("WHAT IS THIS", this)
+       if(this.activeComponent !== e.target.id){
+      this.setActiveComponent(e.target.id)
+      }
+      this.initialPosition.x = this.componentMap[this.activeComponent].x
+      this.initialPosition.y = this.componentMap[this.activeComponent].y
+        let payload = {
+        x: this.initialPosition.x,
+        y: this.initialPosition.y,
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData
+      }
+      this.updateStartingPosition(payload);
+    },
+
     onDrag: function(x, y) {
       this.activeComponentData.x = x;
       this.activeComponentData.y = y;
@@ -225,19 +266,45 @@ export default {
       this.componentMap[this.activeComponent].y = y;
       this.userImage;
     },
-    onLayer: function(z) {
-      this.activeComponentData.z = z;
+    // onLayer: function(z) {
+    //   this.activeComponentData.z = z;
+    //   // Want to change the "Z" of the component found in Routes[activeRoute][whatever the component is]
+    //   //have to do this via an action or it won't be preserved in our undo/redo
+    // },
+
+    finishedDrag: function(x,y){
+      console.log("FINISHED DRAGGING")
+      let payload = {
+        x: x,
+        y: y,
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData
+      }
+      console.log("Payload.x = ", payload.x, "this.initialPosition.x", this.initialPosition.x)
+       console.log("Payload.y = ", payload.y, "this.initialPosition.y", this.initialPosition.y)
+      if(payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y){
+        this.updateComponentPosition(payload);
+      }
     },
+
     onActivated(componentData) {
+      console.log("I RAN!")
           this.$refs.boxes.forEach((element)=> {
         if (element.$attrs.id !== componentData.componentName){
            element.enabled = false;
           element.$emit('deactivated')
           element.$emit('update:active', false)
         }
       })
-      this.setActiveComponent(componentData.componentName);
+      // console.log("this is what is currently active",this.activeComponent)
+      // console.log("this is this", this)
+      // console.log('!(componentData.componentName === this.activeComponent)?',!(componentData.componentName === this.activeComponent))
+      if(!(componentData.componentName === this.activeComponent)){
+        this.setActiveComponent(componentData.componentName);
+      }
       this.activeComponentData.isActive = true;
+      
   
     },
 
@@ -255,7 +322,9 @@ export default {
       // }
     },
     onDoubleClick(compData) {
-      this.setActiveComponent(compData.componentName);
+       if(!(componentData.componentName === this.activeComponent)){
+        this.setActiveComponent(componentData.componentName);
+      }
       this.activeComponentData.isActive = true;
     },
     handleAddChild() {
@@ -293,7 +362,9 @@ export default {
     handleClick(event){
       if(event.target.className === "component-display grid-bg")
       {
-        this.setActiveComponent('')
+         if(!('' === this.activeComponent)){
+        this.setActiveComponent('');
+        }
       }
     }
   }

src/components/ComponentDisplay.vue

@@ -84,7 +84,9 @@ export default {
 
     },
     resetActiveComponent () {
+      if(!this.activeComponent === ''){
       this.setActiveComponent('')
+      }
       
     },
     handleIconClick () {

src/components/CreateComponent.vue

@@ -50,6 +50,27 @@ const actions = {
       commit(types.SET_SELECTED_ELEMENT_LIST, payload)
     }
   },
+
+  [types.updateComponentPosition]: ({ commit }, payload) =>{
+    /*  let payload = {
+        x = x,
+        y = y,
+        activeComponent = this.activeComponent,
+        routeArray = this.routes[this.activeRoute],
+        activeComponentData = this.activeComponentData
+      }*/
+    
+        commit(types.UPDATE_COMPONENT_POSITION, payload)
+
+  },
+
+  //does the same as update component position, but needed to record the initial spot of the draggable resizeable in component display
+  // or else undo/redo won't work
+  [types.updateStartingPosition]: ({ commit }, payload) => {
+    commit(types.UPDATE_COMPONENT_POSITION, payload)
+  },
+
+
   // adds component to the homeQueue
   [types.addToSelectedElementList]: ({ commit }, payload) => {
     commit(types.ADD_TO_SELECTED_ELEMENT_LIST, payload)

src/store/actions.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import undoRedo from './plugins.js'
 
 import state from './state'
 import actions from './actions.js'
 import mutations from './mutations.js'
 
 Vue.use(Vuex)
+// Vue.use(undoRedo)
 
 export default new Vuex.Store({
   state,