merge conflicts

Author: katherinek123

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
@@ -62,6 +64,7 @@ export default {
     return {
       attributeText: "",
       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/right-sidebar/CodeSnippet.vue

@@ -74,7 +74,15 @@ export default {
     // Creates beginner boilerplate
     createTemplate(componentName) {
       let templateTagStr = this.writeTemplateTag(componentName);
-      return `<template>\n  <div>\n${templateTagStr}  </div>\n</template>`;
+
+      //if/else statement to determine if there are class and id attributes present in the html element
+      if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id !== "") {
+        return `<template>\n  <div id = "${this.activeComponentObj.htmlAttributes.id}" class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
+      } else if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id === "") {
+        return `<template>\n  <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
+      } else if (this.activeComponentObj.htmlAttributes.class === "" && this.activeComponentObj.htmlAttributes.id !== "")
+        return `<template>\n  <div id = "${this.activeComponentObj.htmlAttributes.id}">\n${templateTagStr}  </div>\n</template>`;
+      else return `<template>\n  <div>\n${templateTagStr}  </div>\n</template>`;
     },
     // Creates <template> boilerplate
     writeTemplateTag(componentName) {
@@ -238,7 +246,8 @@ export default {
       for (const html of htmlArray) {
         if (html.class === ' ') styleString = "";
         if (html.class) {
-          styleString += `.${html.class} {\n}\n`
+          styleString += `.${html.class} {\n
+}\n`
         }
       }
 

src/store/mutations.js

@@ -631,6 +631,21 @@ const mutations = {
     updatedComponent.x = payload.x;
     updatedComponent.y = payload.y;
   },
+  //color updater
+  [types.UPDATE_COLOR]: (state, payload) => {
+    const updatedComponent = state.routes[state.activeRoute].filter(
+      (element) => element.componentName === payload.activeComponent
+    )[0];
+
+    updatedComponent.color = payload.color
+  },
+
+  [types.EDIT_ATTRIBUTE]: (state, payload) => {
+    const updatedComponent = state.routes[state.activeRoute].filter(
+      (element) => element.componentName === payload.activeComponent
+    )[0];
+    updatedComponent.htmlAttributes[payload.attribute] = payload.value
+  },
 
   [types.UPDATE_COMPONENT_LAYER]: (state, payload) => {
     const updatedComponent = state.routes[state.activeRoute].filter(