undo/redo working for some things but NOT BUTTONS

Author: AP

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,12 +5,17 @@
 </template>
 
 <script>
+import { SET_ACTIVE_COMPONENT } from './store/types'
+const deepEqual = require('lodash.isequal')
+
 
 let redoMixin = {
   data() {
         return {
           // banana:[],
           doneAction:[],
+          undoneAction:[],
+          isTimetraveling: false
         }
       },
       
@@ -22,6 +27,19 @@ let redoMixin = {
 
         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)
       },
@@ -33,11 +51,25 @@ let redoMixin = {
            this.undo()
           }
         });
+          window.addEventListener("keyup", event => {
+          if (event.key === "y") {
+           this.redo()
+          }
+        });
       },
 
       methods: {
         undo: function() {
-          this.doneAction.pop();
+          // 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 => {
@@ -46,8 +78,23 @@ let redoMixin = {
             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();
+            // }
+          }
+
       }
 }
 

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() {
@@ -205,7 +208,9 @@ export default {
     ...mapActions([
       "setActiveComponent",
       "updateComponentChildrenMultiselectValue",
-      "updateActiveComponentChildrenValue"
+      "updateActiveComponentChildrenValue",
+      "updateComponentPosition",
+      "updateStartingPosition",
     ]),
     onResize: function(x, y, width, height) {
       this.activeComponentData.x = x;
@@ -218,6 +223,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;
@@ -226,19 +251,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;
+      
   
     },
 
@@ -256,7 +307,9 @@ export default {
       // }
     },
     onDoubleClick(compData) {
-      this.setActiveComponent(compData.componentName);
+       if(!(componentData.componentName === this.activeComponent)){
+        this.setActiveComponent(componentData.componentName);
+      }
       this.activeComponentData.isActive = true;
     },
     handleAddChild() {
@@ -294,7 +347,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

@@ -2,11 +2,11 @@ import * as types from './types'
 import icons from './state/icons.js'
 import htmlElementMap from './state/htmlElementMap.js'
 // import VuexStore from './index'
-//import { getDefault, defaultState } from './state/index.js'
+// import { getDefault, defaultState } from './state/index.js'
 
 import localforage from 'localforage'
 
-const defaultState = 
+const defaultState =
 {
   icons,
   htmlElementMap,
@@ -47,9 +47,6 @@ const defaultState =
   imagePath: ''
 }
 
-
-
-
 const mutations = {
   // pushs new component to componentMap
   [types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
@@ -123,8 +120,7 @@ const mutations = {
       modalOpen: false,
       parentSelected: false,
       imagePath: ''
-    });
-
+    })
   },
 
   // add parent
@@ -275,6 +271,10 @@ const mutations = {
     const { component, value } = payload
     state.componentMap[component].children = value
   },
+  [types.UPDATE_COMPONENT_POSITION]: (state, payload) => {
+    payload.activeComponentData.x = payload.x
+    payload.activeComponentData.y = payload.y //Object.assign({}, state.componentMap[payload.activeComponent], {x: payload.x, y: payload.y});
+  },
   [types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
     // original line
     let temp = state.componentMap[state.activeComponent].children // b c  and we are removing c

src/store/mutations.js

@@ -34,6 +34,7 @@ export const UPDATE_COMPONENT_NAME_INPUT_VALUE =
   'UPDATE_COMPONENT_NAME_INPUT_VALUE'
 export const UPDATE_COMPONENT_CHILDREN_VALUE =
   'UPDATE_COMPONENT_CHILDREN_VALUE'
+export const UPDATE_COMPONENT_POSITION = "UPDATE_COMPONENT_POSITION"
 export const UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE =
   'UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE'
 export const ADD_COMPONENT_TO_COMPONENT_CHILDREN =
@@ -76,6 +77,7 @@ export const incrementProjectId = 'incrementProjectId'
 export const setRoutes = 'setRoutes'
 export const setComponentHtmlList = 'setComponentHtmlList'
 export const deleteProjectTab = 'deleteProjectTab'
+export const updateStartingPosition = 'updateStartingPosition'
 // ChildrenMultiselect actions
 export const updateComponentChildrenMultiselectValue =
   'updateComponentChildrenMultiselectValue'
@@ -84,6 +86,7 @@ export const updateActiveComponentChildrenValue =
 
 export const updateComponentChildrenValue = 'updateComponentChildrenValue'
 export const updateComponentNameInputValue = 'updateComponentNameInputValue'
+export const updateComponentPosition = 'updateComponentPosition' 
 export const updateOpenModal = 'updateOpenModal'
 export const parentSelected = 'parentSelected'
 export const deleteRoute = 'deleteRoute'