Merge pull request #9 from allisons11/parentState

Parent state

Author: LOLDragoon

src/components/ComponentDisplay.vue

@@ -7,6 +7,7 @@
       :key="componentData.componentName"
       :x="componentData.x"
       :y="componentData.y + 20"
+      :z="componentData.z"
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
@@ -25,19 +26,22 @@
         <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
       </ul>
       <q-menu context-menu>
-        <q-list class="menu">
+        <q-list color='black' class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
             <q-item-section style="color: white">Update Children</q-item-section>
             <q-item-section avatar>
               <q-icon color="primary" name="add" />
             </q-item-section>
           </q-item>
-          <!-- <q-item clickable v-ripple v-close-popup auto-close>
-            <q-item-section style="color: pink">Delete Children</q-item-section>
-            <q-item-section avatar>
-              <q-icon color="primary" name="delete" />
-            </q-item-section>
-          </q-item> -->
+          <q-item clickable v-ripple v-close-popup>
+            <q-item-section class='layer' style="color: pink">Layer</q-item-section>
+              <q-btn class='btn' color='transparent' text-color='primary' label='-' @click='(e)=>handleLayer(e)'/>
+              <p id='counter' style="color: white"> {{componentData.z}} </p>
+              <q-btn class='btn' color='transparent' text-color='primary' label='+' @click='(e)=>handleLayer(e)'/>
+            <!-- <q-item-section avatar>
+              <q-icon color="primary" name="layer" />
+            </q-item-section> -->
+          </q-item>
         </q-list>
       </q-menu>
     </VueDraggableResizable>
@@ -77,7 +81,8 @@ export default {
       abilityToDelete: false,
       testOptions: ["parent", "child", "grandchild"],
       testModel: [],
-      mockImg: false
+      mockImg: false,
+      counter: 0
     };
   },
   mounted() {
@@ -116,16 +121,37 @@ export default {
       return this.componentMap[componentData.componentName].children;
     },
     options() {
+      const checkParents = (component, lineage=[component.componentName]) => {
+        // console.log('component', component)
+        // component parent is an object of parents
+        // console.log('component parent',component.parent)
+        // console.log('component parent parent', component.parent.parent)
+        if (!Object.keys(component.parent).length) return lineage;
+        for(var parents in component.parent){
+          //for each parent in our component
+          console.log('parents', parents)
+          lineage.push(parents); //push the parent into lineage
+          console.log('lineage pre push', component, lineage)
+          checkParents(component.parent[parents], lineage);
+          console.log('lineage post recursive call', lineage)
+        }
+        // lineage.push(component.parent[component.componentName]);
+        // return checkParents(component.parent, lineage);
+        return lineage
+      };
+      let lineage = [this.activeComponent];
       // PROBLEM: the objects on childrenmultiselectvalue are applied
       // check to see if there are any existing children
       if (this.componentMap[this.activeComponent]) {
         // console.log('active component', this.activeComponent)
         // console.log('testmodel', this.testModel)
         // console.log(this.componentMap[this.activeComponent].children)
         this.testModel = this.componentMap[this.activeComponent].children;
+        lineage = checkParents(this.componentMap[this.activeComponent]);
+        console.log('Lineage', lineage);
       }
       const routes = Object.keys(this.routes);
-      const exceptions = new Set(["App", this.activeComponent, ...routes, ...this.testModel]);
+      const exceptions = new Set(["App", ...lineage, ...routes, ...this.testModel]);
       return Object.keys(this.componentMap).filter(component => {
         if (!exceptions.has(component)) return component;
       });
@@ -170,6 +196,9 @@ export default {
       this.componentMap[this.activeComponent].y = y;
       this.userImage;
     },
+    onLayer: function(z) {
+      this.activeComponentData.z = z;
+    },
     onActivated(componentData) {
       this.setActiveComponent(componentData.componentName);
       this.activeComponentData.isActive = true;
@@ -190,6 +219,23 @@ export default {
       console.log("Multiselect: ", value);
       this.updateActiveComponentChildrenValue(value);
       // this.updateComponentChildrenMultiselectValue(value)
+    },
+    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--;
+      }
+      console.log('counter', this.counter)
+      this.activeComponentData.z = this.counter;
+      this.componentMap[this.activeComponent].z = this.counter;
+
     }
     //       @dblclick.native="onDoubleClick(componentData)"
     // onDoubleClick (compData) {
@@ -212,6 +258,7 @@ export default {
   /* width: 1rem; */
   line-height: 1.2;
   /* margin: 10px; */
+  z-index: 0;
 }
 .component-children {
   position: absolute;
@@ -272,4 +319,23 @@ export default {
   background-color: rgba(105, 179, 190, 0.514);
   border: 1px dashed rgb(227, 203, 71);
 }
+.btn {
+  font-size: 25px;
+  /* margin-top: 0;
+  margin-bottom: 0; */
+  padding: 0 20px;
+  width: 10px;
+  height: 10px;
+  transition: none;
+}
+.btn:hover, .btn:focus, .btn:active {
+  color: white;
+  background-color: transparent;
+}
+#counter {
+  margin-top: 20px;
+}
+/* .layer {
+  padding: 0 20px;
+} */
 </style>

src/components/CreateComponent.vue

@@ -71,10 +71,12 @@ export default {
         componentName: this.componentNameInputValue,
         x: 0,
         y: 0,
+        z: 0,
         w: 200,
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
+        parent: {},
         isActive: false
       }
 

src/components/ParentMultiselect.vue

@@ -37,14 +37,15 @@ export default {
   },
   methods: {
     ...mapActions([
-      'setActiveComponent',
+      // 'addParent',
       'parentSelected'
     ]),
     handleSelect (value) {
       // Set Active Component to selected Parent
-      this.setActiveComponent(value)
+      // this.setActiveComponent(value)
+      // this.addParent(value)
       // Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
-      this.parentSelected(true)
+      this.parentSelected(value)
     }
   }
 }

src/store/actions.js

@@ -1,12 +1,18 @@
 import * as types from './types'
 
 const actions = {
+
+  // add selected parent to component
+  // [types.addParent]: ({ commit }, payload) => {
+  //   commit(types.ADD_PARENT, payload)
+  // },
+
   // creates a new component in componentMap
   [types.registerComponent]: ({ state, commit }, payload) => {
     const { componentName } = payload
     if (!state.componentMap[componentName]) {
       commit(types.ADD_COMPONENT_TO_COMPONENT_MAP, payload)
-      if (!state.parentSelected) {
+      if (!state.parentSelected.length) {
         commit(
           types.ADD_COMPONENT_TO_ACTIVE_ROUTE_CHILDREN,
           payload.componentName
@@ -20,19 +26,22 @@ const actions = {
         return state.componentMap[component]
       })
 
-      if (state.parentSelected) {
-        commit(types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE, [
-          ...state.componentMap[state.activeComponent].children,
-          payload.componentName
-        ])
+      if (state.parentSelected.length) {
+        // we want to replace this with an 'add parent' mutation
+        commit(types.ADD_PARENT, payload)
+        // commit(types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE, [
+        //   ...state.componentMap[state.activeComponent].children,
+        //   payload.componentName
+        // ])
       }
 
       commit(types.UPDATE_COMPONENT_CHILDREN_VALUE, { component, value })
       commit(types.UPDATE_COMPONENT_CHILDREN_MULTISELECT_VALUE, [])
       commit(types.UPDATE_COMPONENT_NAME_INPUT_VALUE, '')
       commit(types.SET_SELECTED_ELEMENT_LIST, [])
       commit(types.SET_ACTIVE_COMPONENT, '')
-      commit(types.PARENT_SELECTED, false)
+      // commit(types.PARENT_SELECTED, false)
+      commit(types.PARENT_SELECTED, '')
     }
   },
   // sets component inside componentDisplay

src/store/mutations.js

@@ -5,14 +5,16 @@ import localforage from 'localforage'
 const mutations = {
   // pushs new component to componentMap
   [types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
-    const { componentName, htmlList, children, isActive } = payload
+    const { componentName, htmlList, children, parent, isActive } = payload
     state.componentMap = Object.assign({},state.componentMap,{[componentName]: {
           componentName,
           x: 0,
           y: 0,
+          z: 0,
           w: 200,
           h: 200,
           children,
+          parent,
           htmlList,
           isActive
         }})
@@ -32,6 +34,12 @@ const mutations = {
     //   }
     //}
   },
+// add parent
+[types.ADD_PARENT]: (state, payload) => {
+  state.componentMap[payload.componentName].parent[state.parentSelected] = state.componentMap[state.parentSelected]
+  state.componentMap[state.parentSelected].children.push(payload.componentName)
+},
+
   // adds a html tag from the Icons.vue to the HomeQueue.vue
   // event: getClickedIcon @Icons.vue
   [types.ADD_TO_SELECTED_ELEMENT_LIST]: (state, payload) => {
@@ -164,15 +172,21 @@ const mutations = {
   [types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
     // original line
     let temp = state.componentMap[state.activeComponent].children // b c  and we are removing c
-    if (payload.length<temp.length){ // we will get a payload of [b] and our temp is currently [b,c]
+    if (payload.length<temp.length) { // we will get a payload of [b] and our temp is currently [b,c]
+      let child = temp.filter(el => !payload.includes(el))
+      console.log('delete child: ', child)
       state.componentMap[state.activeComponent].children = payload
       state.componentMap[state.activeRoute].children.push(...temp.filter(el => !payload.includes(el)))
+      delete state.componentMap[child[0]].parent[state.activeComponent]
     }
     else {
+      let child = payload.filter(el => !temp.includes(el))
+      console.log('child added', child)
       state.componentMap[state.activeComponent].children = payload
       state.componentMap[state.activeRoute].children = state.componentMap[
         state.activeRoute
       ].children.filter(el => !payload.includes(el))
+      state.componentMap[child[0]].parent[state.activeComponent] = state.componentMap[state.activeComponent]
     } 
 
   },

src/store/types.js

@@ -39,6 +39,7 @@ export const ADD_COMPONENT_TO_COMPONENT_CHILDREN =
   'ADD_COMPONENT_TO_COMPONENT_CHILDREN'
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
 export const PARENT_SELECTED = 'PARENT_SELECTED'
+export const ADD_PARENT = 'ADD_PARENT'
 export const DELETE_ROUTE = 'DELETE_ROUTE'
 export const DELETE_COMPONENT = 'DELETE_COMPONENT'
 // Image upload mutations