all integrated with other features

Author: LOLDragoon

src/components/ComponentDisplay.vue

@@ -9,6 +9,7 @@
       :id ="componentData.componentName"
       :x="componentData.x"
       :y="componentData.y + 20"
+      :z="componentData.z"
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
@@ -28,19 +29,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>
@@ -80,7 +84,8 @@ export default {
       abilityToDelete: false,
       testOptions: ["parent", "child", "grandchild"],
       testModel: [],
-      mockImg: false
+      mockImg: false,
+      counter: 0
     };
   },
   mounted() {
@@ -119,16 +124,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;
       });
@@ -197,6 +223,9 @@ export default {
       this.componentMap[this.activeComponent].y = y;
       this.userImage;
     },
+    onLayer: function(z) {
+      this.activeComponentData.z = z;
+    },
     onActivated(componentData) {
           this.$refs.boxes.forEach((element)=> {
         if (element.$attrs.id !== componentData.componentName){
@@ -237,6 +266,23 @@ export default {
       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) {
     //   this.setActiveComponent(compData.componentName)
@@ -247,11 +293,6 @@ export default {
       {
         this.setActiveComponent('')
       }
-      // console.log(this.$children)
-      // this.$children[1].
-      // this.$children[1].enabled = false;
-      // this.$children[1].$emit('deactivated')
-      // this.$children[1].$emit('update:active', false)
     }
   }
 };
@@ -269,6 +310,7 @@ export default {
   /* width: 1rem; */
   line-height: 1.2;
   /* margin: 10px; */
+  z-index: 0;
 }
 .component-children {
   position: absolute;
@@ -329,4 +371,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

@@ -27,7 +27,7 @@
       color="secondary"
       label="Create Component"
       @click="handleClick"
-      :disabled="!componentNameInputValue"
+      :disabled="!componentNameInputValue.trim()"
     />
   </div>
 </template>
@@ -63,18 +63,25 @@ export default {
       'addToComponentElementList'
     ]),
     handleClick () {
+      if (!this.componentNameInputValue.trim()) {
+        event.preventDefault();
+        return false;
+      }
       const component = {
         componentName: this.componentNameInputValue,
         x: 0,
         y: 0,
+        z: 0,
         w: 200,
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
+        parent: {},
         isActive: false
       }
 
       this.registerComponent(component)
+
     },
     resetActiveComponent () {
       this.setActiveComponent('')

src/components/Footer.vue

@@ -15,6 +15,7 @@
         indicator-color="secondary"
         align="left"
       >
+
         <q-tab name="code" label="Code Snippet" id="label-text" />
         <q-tab name="detail" label="Component Details" id="label-text" />
         <q-tab name="tree" label="Project Tree" id="label-text" />
@@ -43,6 +44,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import Tree from './Tree'
 import HomeQueue from './HomeQueue'
 import CodeSnippet from './CodeSnippet'
@@ -53,6 +55,9 @@ export default {
     HomeQueue,
     CodeSnippet
   },
+  computed: {
+    ...mapState(['activeComponent', 'componentNameInputValue', 'selectedElementList'])
+  },
   data () {
     return {
       tab: 'code',
@@ -71,6 +76,30 @@ export default {
       this.height === 40 ? (this.height = minHeight) : (this.height = 40)
       this.open === true ? (this.open = false) : (this.open = true)
     }
+  },
+  // toggles footer to "html" tab when existing component is not in focus
+  watch: {
+    activeComponent: function () {
+      // console.log('watching activeComponent in Footer');
+      if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
+        this.tab = 'html'
+      }
+    },
+  // toggles footer to "html" tab if component name has value & elements are in queue
+    componentNameInputValue: function() {
+      // console.log('watching componentNameInputVal')
+      if (this.componentNameInputValue !== '' && this.selectedElementList.length !== 0 && this.activeComponent === '') {
+        // console.log(this.selectedElementList)
+        this.tab = 'html'
+      }
+    },
+    // toggles footer to "html" tab if elements are added to queue on component creation
+    selectedElementList: function() {
+      // console.log('watching selectedElementList')
+      if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
+        this.tab = 'html'
+      }
+    }
   }
 }
 </script>

src/components/HomeQueue.vue

@@ -1,5 +1,8 @@
 <template>
   <section class="home-queue">
+    <span class='list-title' v-if='component'> Viewing Elements in '{{ this.activeComponent }}' </span>
+    <span class='list-title' v-else> Elements in Queue </span>
+    <hr>
     <draggable
       v-model="renderList"
       group="people"
@@ -31,7 +34,11 @@ export default {
       type: Array
     }
   },
-
+  data () {
+    return {
+      component: false
+    }
+  },
   computed: {
     ...mapState(['selectedElementList', 'componentMap', 'activeComponent']),
     renderList: {
@@ -52,6 +59,16 @@ export default {
   },
   components: {
     draggable
+  },
+  watch: {
+    activeComponent: function () {
+      // console.log('watching activeComponent in HomeQueue')
+      if (this.activeComponent !== '') {
+        this.component = true
+      } else {
+        this.component = false
+      }
+    }
   }
 }
 </script>
@@ -63,6 +80,9 @@ export default {
 li {
   list-style-type: none;
 }
+.list-title {
+  // font-weight: bold;
+}
 .list-group-item {
   display: inline-block;
   margin: 2px 1.5%;
@@ -81,4 +101,7 @@ li {
   position: relative;
   left: 20px;
 }
+hr {
+  border: 1px solid grey
+}
 </style>

src/components/Icons.vue

@@ -26,19 +26,34 @@ export default {
   },
   name: 'Icons',
   computed: {
-    ...mapState(['icons', 'activeComponent', 'componentMap'])
+    ...mapState(['icons', 'activeComponent', 'componentMap', 'selectedElementList'])
   },
   methods: {
     changeState (elementName) {
       if (this.activeComponent === '') { this.$emit('getClickedIcon', elementName) } else this.$emit('activeElement', elementName)
     }
   },
   watch: {
+    selectedElementList: function() {
+      // console.log('watching selectedElementList');
+      if (this.activeComponent === '') {
+        this.elementStorage = {};
+        this.selectedElementList.forEach(el => {
+          if (!this.elementStorage[el.text]) {
+            this.elementStorage[el.text] = 1;
+          } else {
+            this.elementStorage[el.text] += 1;
+          }
+        })
+      }
+      // console.log('storage is ', this.elementStorage)
+    },
+    // if componentMap is updated (i.e. element is added to component's htmlList), elementStorage will update its cache of elements & frequency
     componentMap: {
       deep: true,
       handler () {
-        //console.log('watching componentMap');
-        //console.log('activecomponent is ', this.activeComponent)
+        // console.log('watching componentMap');
+        // console.log('activecomponent is ', this.activeComponent)
         // console.log('htmlList', this.componentMap[this.activeComponent].htmlList)
         if (this.activeComponent) {
           this.elementStorage = {};
@@ -49,12 +64,13 @@ export default {
               this.elementStorage[el.text] += 1;
             }
           })
-          //console.log('elementStorage is ', this.elementStorage);
+          // console.log('elementStorage is ', this.elementStorage);
         }
       },
     },
+    // if activeComponent is updated, elementStorage will update its cache of elements & frequency to reflect new active component
     activeComponent: function() {
-     // console.log('watching activeComponent', this.activeComponent);
+      // console.log('watching activeComponent', this.activeComponent);
       if (this.activeComponent) {
         this.elementStorage = {};
         this.componentMap[this.activeComponent].htmlList.forEach(el => {
@@ -64,12 +80,21 @@ export default {
             this.elementStorage[el.text] += 1;
           }
         })
-        //console.log('elementStorage is ', this.elementStorage);
-      } else {
-        this.elementStorage = {};
+        // console.log('elementStorage is ', this.elementStorage);
+      } else if (this.activeComponent === '') {
+        // console.log(`watching activeComponent, current active is ''`)
+        // if component was switched from existing component to '', reset cache and update items
+        if (this.elementStorage !== {}) this.elementStorage = {};
+        this.selectedElementList.forEach(el => {
+          if (!this.elementStorage[el.text]) {
+            this.elementStorage[el.text] = 1;
+          } else {
+            this.elementStorage[el.text] += 1;
+          }
+        })
       }
     }
-  },
+  }
 }
 </script>