pulled

Author: JojuOlaode

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
@@ -185,16 +185,16 @@ export default {
   },
   updated() {
     //console.log("updated")
-    if (this.activeComponent === '') {
-      if (this.$refs.boxes) {
-        this.$refs.boxes.forEach((element) => {
+    if(this.activeComponent === '')
+    {
+      if(this.$refs.boxes){
+      this.$refs.boxes.forEach((element)=> {
           element.enabled = false;
           element.$emit('deactivated')
           element.$emit('update:active', false)
-        })
-      }
-    }
-    else {
+        
+      })}
+    } else {
       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.
@@ -214,6 +214,7 @@ export default {
       "updateActiveComponentChildrenValue",
       "updateComponentPosition",
       "updateStartingPosition",
+      "updateComponentLayer",
       "updateStartingSize",
       "updateComponentSize",
     ]),
@@ -300,11 +301,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")
@@ -322,11 +318,11 @@ export default {
       }
     },
 
-    onActivated (componentData) {
+    onActivated(componentData) {
       //console.log("I RAN!")
-      this.$refs.boxes.forEach((element) => {
-        if (element.$attrs.id !== componentData.componentName) {
-          element.enabled = false;
+          this.$refs.boxes.forEach((element)=> {
+        if (element.$attrs.id !== componentData.componentName){
+           element.enabled = false;
           element.$emit('deactivated')
           element.$emit('update:active', false)
         }
@@ -371,31 +367,24 @@ export default {
     },
     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('');
-        }
+    handleClick(event){
+      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

@@ -297,8 +297,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 =
@@ -92,6 +93,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'