Merge branch 'dev' into keyla/dragAndDrop

Author: keylakoizumin

src/components/Canvas.vue

@@ -451,7 +451,8 @@ export default {
         activeComponentData: this.activeComponentData,
       }
         this.updateColor(payload)
-        },
+        this.refresh();
+  },
 
     // records component's initial size/position in case of resize
     recordInitialSize: function (e) {
@@ -478,8 +479,25 @@ export default {
         payload.h !== this.initialSize.h
       ) {
         this.updateComponentSize(payload);
+        
       }
+      this.refresh();
     },
+
+  //refresh function - super ghetto refresh function
+    refresh() {
+      const payload = {
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData,
+        z: this.activeComponentData.z,
+      };
+      payload.z++;
+      this.updateComponentLayer(payload);
+      payload.z--;
+      this.updateComponentLayer(payload);
+    },
+
     finishedDrag: function (x, y) {
       let payload = {
         x: x,
@@ -496,6 +514,7 @@ export default {
       }
       this.wasDragged = true;
       setTimeout(()=>this.wasDragged = false, 100)
+      this.refresh();
     },
     onActivated(componentData) {
       if (!componentData){
@@ -571,6 +590,7 @@ export default {
         activeComponentData: this.activeComponentData,
         z: this.activeComponentData.z,
       };
+
       if (e.target.innerText === "+") payload.z++;
       if (e.target.innerText === "–" && payload.z > 0) payload.z--;
       this.updateComponentLayer(payload);

src/components/left-sidebar/ComponentTab/AttributesSubMenu.vue

@@ -17,7 +17,6 @@
       </q-list>
     </q-btn-dropdown>
 
-
     <q-input
       @keyup.enter="createAttribute(attributeText)"
       color="white"
@@ -35,6 +34,9 @@
       </template>
     </q-input>
 
+    <button v-if = "this.activeComponentObj.htmlAttributes.class !== ''" class = "deleteButton" @click="deleteAttribute('class')" color="primary">Remove class</button>
+
+    <button v-if = "this.activeComponentObj.htmlAttributes.id !== ''" class = "deleteButton" @click="deleteAttribute('id')" color="primary">Remove id</button>
 
     <!-- <div>
       <q-btn
@@ -61,7 +63,8 @@ export default {
   data() {
     return {
       attributeText: "",
-      attributeSelection: "ID",
+      attributeSelection: "id",
+      deleteText:"",
     };
   },
   computed: {
@@ -94,8 +97,19 @@ export default {
         activeComponentData: this.activeComponentData,
       })
     },
+
     changeAttribute(attribute) {
       this.attributeSelection = attribute;
+    },
+
+    deleteAttribute(attribute) {
+      this.editAttribute({
+        attribute: attribute,
+        value: "",
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData,
+      }) 
     }
   },
 };
@@ -110,9 +124,23 @@ export default {
   }
 
   .input-add {
-    position:absolute;
-    margin-left: 7em;
-    bottom:-60%;
-    // padding:20px;
+    // position:absolute;
+    // margin-left: 7em;
+    // bottom:-100%;
+    margin-top:1em;
+    margin-bottom: -1em;
   }
+  .deleteButton{
+    width:100px;
+    height:30px;
+    background-color:rgba(204, 190, 190, 0.164);
+    color: $menutext;
+    margin-right:2em;
+  }
+
+  .deleteButton:hover{
+    cursor: pointer;
+  }
+
+
 </style>

src/components/left-sidebar/ComponentTab/CreateMenuHTMLQueue.vue

@@ -10,8 +10,8 @@ Description:
       group="people"
       class="list-group"
     >
+    
       <div 
-      :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
       @dblclick.self="setActiveElement(element)"
       v-for="(element) in renderList" :key="element[1] + Date.now()"
       @dragenter="dragEnter($event, element[2])"

src/components/right-sidebar/CodeSnippet.vue

@@ -11,13 +11,7 @@ Description:
     <div class="top-p" v-if="this.activeComponent === ''">
       Select a component
     </div>
-    <div v-else>{{ `${this.activeComponent}.vue` }}</div> <button class="refreshCode">
-      <q-icon
-        size="25px" 
-        z-layer="0" 
-        name="refresh" 
-        @click="this.snippetInvoke" />
-        </button>
+    <div v-else>{{ `${this.activeComponent}.vue` }}</div>
     <prism-editor v-model="code" :highlight="highlighter" line-numbers class="my-editor" readonly />
   </div>
 </template>
@@ -92,6 +86,7 @@ export default {
     },
     // Creates <template> boilerplate
     writeTemplateTag(componentName) {
+      // console.log(this.activeComponentObj)
       // create reference object
       const htmlElementMap = {
         div: ["<div", "</div>"],
@@ -254,14 +249,13 @@ export default {
         styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
 width: ${this.activeComponentObj.w}px;
 height: ${this.activeComponentObj.h}px;
-z-index: ${this.activeComponentObj.z}px;
+z-index: ${this.activeComponentObj.z};
 }\n`
       }
 
       for (const html of htmlArray) {
         if (html.class === ' ') styleString = "";
         if (html.class) {
-          console.log(this.activeComponentObj)
           styleString += `.${html.class} {\n
 }\n`
         }

src/components/right-sidebar/HTMLQueue.vue

@@ -17,15 +17,13 @@ Description:
     <div group="people" class="list-group">
 
       <p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
-      <!---->
         <div 
-        id="tooltipCon"
         v-for="(element) in renderList" :key="element[1] + Date.now()" 
         @dragenter="dragEnter($event, element[2])"
-        >  
+        >
           <div
+          id="tooltipCon"
           :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
-          @dblclick.self="setActiveElement(element)"
           @dragstart="startDrag($event, element[2])" 
           @dragend="endDrag($event)"
           draggable="true"
@@ -42,7 +40,7 @@ Description:
         </div>
     </div>
 
-<!--START OF CHANGES-->>
+<!--START OF CHANGES-->
       <!-- &nbsp; &nbsp; Viewing Elements in {{ this.activeComponent }} '{{ depth }}'
       <hr>
     </span>
@@ -67,11 +65,13 @@ Description:
     <q-dialog v-model="attributeModal">
       <!-- @update:model-value="setActiveElement" -->
       <div class="AttributeBox">
-        <p class="title">Added attributes to {{ this.activeComponent }}</p>
+        <p class="title">Add attributes to: {{ this.activeComponent }}</p>
+        <!--attribute child-->
         <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
           :key="element.id + Date.now()">
           <p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
         </div>
+
         <div class="formBox">
           <q-form autofocus v-on:submit.prevent="submitClass">
             <p class="title">Add Class Name:</p>
@@ -152,13 +152,12 @@ export default {
       if (this.activeComponent !== '') {
         this.setActiveHTML(element);
         this.openAttributeModal(element);
-      }
+        }
+      
     },
     setLayer(element) {
       this.setActiveLayer(element)
       element.id = this.activeHTML
-      console.log(element)
-      console.log(this.activeHTML)
     },
     setParentLayer() {
       if (this.activeLayer.id !== '') {
@@ -298,7 +297,7 @@ hr {
 }
 
 .currentlyDragging {
-  opacity: .5;
+  opacity: 1;
 }
 
 .ignoreByDragover {
@@ -307,7 +306,7 @@ hr {
 #tooltipCon {
   position: relative;
   cursor: pointer;
-  margin-top: 2em;
+  margin-top: 1em;
 }
 
 .tooltip {

src/store/mutations.js

@@ -715,12 +715,11 @@ const mutations = {
 
     updatedComponent.color = payload.color
   },
-
+//Attribute updater for parent
   [types.EDIT_ATTRIBUTE]: (state, payload) => {
     const updatedComponent = state.routes[state.activeRoute].filter(
       (element) => element.componentName === payload.activeComponent
     )[0];
-    console.log(updatedComponent)
     updatedComponent.htmlAttributes[payload.attribute] = payload.value
   },