z index

Author: AP

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() {
@@ -191,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;
@@ -211,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) {
@@ -233,6 +258,7 @@ export default {
   /* width: 1rem; */
   line-height: 1.2;
   /* margin: 10px; */
+  z-index: 0;
 }
 .component-children {
   position: absolute;
@@ -293,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

@@ -67,6 +67,7 @@ export default {
         componentName: this.componentNameInputValue,
         x: 0,
         y: 0,
+        z: 0,
         w: 200,
         h: 200,
         htmlList: this.selectedElementList,

src/store/mutations.js

@@ -10,6 +10,7 @@ const mutations = {
           componentName,
           x: 0,
           y: 0,
+          z: 0,
           w: 200,
           h: 200,
           children,