Merge pull request #14 from allisons11/UndoRedo

Undo redo - works with layering

Author: LOLDragoon

src/components/ComponentDisplay.vue

@@ -91,7 +91,7 @@ export default {
       testOptions: ["parent", "child", "grandchild"],
       testModel: [],
       mockImg: false,
-      counter: 0,
+      // counter: 6,
       initialPosition:{x:0, y:0,},
       initialSize:{w:0,h:0,},
     };
@@ -119,7 +119,7 @@ export default {
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {
-      // console.log("active route array method", this.routes[this.activeRoute]);
+      console.log("active route array method", this.routes[this.activeRoute]);
       return this.routes[this.activeRoute];
     },
     // used to delete components
@@ -216,6 +216,7 @@ export default {
       "updateActiveComponentChildrenValue",
       "updateComponentPosition",
       "updateStartingPosition",
+      "updateComponentLayer",
       "updateStartingSize",
       "updateComponentSize",
     ]),
@@ -303,11 +304,6 @@ export default {
       this.componentMap[this.activeComponent].y = y;
       this.userImage;
     },
-    // 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")
@@ -374,34 +370,26 @@ export default {
       this.updateActiveComponentChildrenValue(value);
       // this.updateComponentChildrenMultiselectValue(value)
     },
-    handleLayer(e){
+    handleLayer(e) {
       e.preventDefault()
-      console.log('event object', e.target.innerText)
-      console.log('Layer handled')
-      
-      if(e.target.innerText === '+'){
-        this.counter++;
-        // this.activeComponentData.z = z;
-      }
-      if(e.target.innerText === '-' && this.counter > 0){
-        this.counter--;
+      const payload = {
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData,
+        z: this.activeComponentData.z,
       }
-      console.log('counter', this.counter)
-      this.activeComponentData.z = this.counter;
-      this.componentMap[this.activeComponent].z = this.counter;
-
+      if(e.target.innerText === '+') payload.z++;
+      if(e.target.innerText === '-' && payload.z > 0) payload.z--;
+      this.updateComponentLayer(payload)
     },
     //       @dblclick.native="onDoubleClick(componentData)"
     // onDoubleClick (compData) {
     //   this.setActiveComponent(compData.componentName)
     //   this.activeComponentData.isActive = true
     // }
     handleClick(event){
-      if(event.target.className === "component-display grid-bg")
-      {
-         if(!('' === this.activeComponent)){
-        this.setActiveComponent('');
-        }
+      if(event.target.className === "component-display grid-bg") {
+         if(!('' === this.activeComponent)) this.setActiveComponent('');
       }
     }
   }

src/store/actions.js

@@ -63,6 +63,9 @@ const actions = {
         commit(types.UPDATE_COMPONENT_POSITION, payload)
 
   },
+  [types.updateComponentLayer]: ({ commit }, payload) => {
+    commit(types.UPDATE_COMPONENT_LAYER, 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

src/store/mutations.js

@@ -295,8 +295,14 @@ const mutations = {
     updatedComponent.x = payload.x
     updatedComponent.y = payload.y
   },
-
-
+  [types.UPDATE_COMPONENT_LAYER]: (state, payload) => {
+    const updatedComponent = state.routes[state.activeRoute].filter(element => {
+      return element.componentName === payload.activeComponent
+    })[0]
+    updatedComponent.z = payload.z
+    state.componentMap[payload.activeComponent].z = payload.z
+    // payload.activeComponentData.z = payload.z
+  },
   [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/types.js

@@ -35,6 +35,7 @@ export const 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_COMPONENT_LAYER = "UPDATE_COMPONENT_LAYER"
 export const UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE =
   'UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE'
 export const ADD_COMPONENT_TO_COMPONENT_CHILDREN =
@@ -90,6 +91,7 @@ export const updateActiveComponentChildrenValue =
 export const updateComponentChildrenValue = 'updateComponentChildrenValue'
 export const updateComponentNameInputValue = 'updateComponentNameInputValue'
 export const updateComponentPosition = 'updateComponentPosition' 
+export const updateComponentLayer = 'updateComponentLayer'
 export const updateOpenModal = 'updateOpenModal'
 export const parentSelected = 'parentSelected'
 export const deleteRoute = 'deleteRoute'