cleaned up code and added comments

Author: jchan444

src/components/Canvas.vue

@@ -12,6 +12,8 @@
     <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
     <p class="cssContainerText">
     CSS Container</p>
+  
+    <!--each component box in canvas will have these properties-->
     <vue-draggable-resizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
@@ -217,13 +219,14 @@
         </div>
         <div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
       </div>
+      <!--change color icon-->
       <q-icon v-if="componentData.componentName === this.activeComponent"
         size="25px" 
         z-layer="0" 
         name="palette" 
         class="colorLogo" 
         @click="handleEditColor" />
-        <!-- start of right click function-->
+        <!-- start of right click on component box function-->
         <q-menu context-menu>
           <q-list color="black" class="menu">
             <q-item clickable v-ripple v-close-popup id="layer-item">
@@ -298,9 +301,8 @@
           </div>
         </q-dialog>
 
-        <!--color selector-->
+        <!--color selector logic - color changer will start at current state of the color-->
         <q-dialog v-model="colorModal" @update:model-value="handleEditColor">
-          <!--may need to change starting to be current state?-->
           <ColorPicker class="colorPicker" default-format="hex" id="color-picker-1" :visible-formats="['hex']"
             :color="this.activeComponentData.color" @color-change="updateColors">
             <template #hue-range-input-label>
@@ -376,21 +378,6 @@ export default {
     };
   },
   mounted() {
-    // when component is mounted, add ability to delete
-    // window.addEventListener("keyup", (event) => {
-    //   if (event.key === "Backspace") {
-    //     if (this.activeComponent !== '' && this.noteModalOpen === false) {
-    //       this.$store.dispatch("deleteActiveComponent");
-    //     }
-    //   }
-    // });
-    // window.addEventListener("keyup", (event) => {
-    //   if (event.key === "Delete") {
-    //     if (this.activeComponent !== '' && this.noteModalOpen === false) {
-    //       this.$store.dispatch("deleteActiveComponent");
-    //     }
-    //   }
-    // });
     // listener for the copy
     window.addEventListener("copy", () => {
       // if there is an activeComponent, copy info to state using dispatch
@@ -588,7 +575,7 @@ export default {
       payload.z--;
       this.updateComponentLayer(payload);
     },
-
+//drag and drop function
     finishedDrag: function (x, y) {
       let payload = {
         x: x,
@@ -647,7 +634,7 @@ export default {
         this.openNoteModal();
       }
     },
-
+//color editor - opens the pop up
     handleEditColor() {
       if (this.wasDragged === false && this.activeComponent !== '') {
         this.openColorModal();

src/components/composables/useExportComponent.js

@@ -148,6 +148,7 @@ export function useExportComponent() {
         // writes the HTML tag boilerplate
         let templateTagStr = writeTemplateTag(componentName);
 
+        //used to loop through - and apply class/id in code snippet
         if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
         return `<template>\n  <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
       } else if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id === "") {

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

@@ -16,30 +16,19 @@
         </q-item>
       </q-list>
     </q-btn-dropdown>
-
+<!--Attribute (id/class so far) change function for main component parent-->
     <q-input @keyup.enter="createAttribute(attributeText)" color="white" dark outlined bottom-slots
       v-model="attributeText" label="Enter Label" dense class="input-add" v-on:keyup.delete.stop>
       <template v-slot:append>
         <q-btn flat icon="add" @click="createAttribute(attributeText)" />
       </template>
     </q-input>
-
+<!--delete buttons to remove class/id-->
     <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
-        v-if="selectProps.length"
-        id="add-props-btn"
-        class="add-btn"
-        color="secondary"
-        label="Add Prop(s)"
-        @click="addPropsToComp"
-      />
-    </div> -->
   </div>
 </template>
 
@@ -79,7 +68,7 @@ export default {
     stopDelete(e) {
       if (e.code === "Backspace") e.stopPropogation();
     },
-
+//attribute change function to create attribute
     createAttribute(attributeText) {
       this.editAttribute({
         attribute: this.attributeSelection,
@@ -90,11 +79,12 @@ export default {
       })
       this.attributeText = "";
     },
-
+//function to change the state of the attribute selection dropdown menu
     changeAttribute(attribute) {
       this.attributeSelection = attribute;
     },
 
+//delete attribute after the delete bvutton has been clicked
     deleteAttribute(attribute) {
       this.editAttribute({
         attribute: attribute,
@@ -116,9 +106,6 @@ export default {
 }
 
 .input-add {
-  // position:absolute;
-  // margin-left: 7em;
-  // bottom:-100%;
   margin-top: 1em;
   margin-bottom: -1em;
 }

src/components/nav-buttons/ExportMenu.vue

@@ -250,7 +250,7 @@ export default {
 
       // writes the HTML tag boilerplate
       let templateTagStr = this.writeTemplateTag(componentName);
-
+//adds class/id into code snippet with exporting
     if(this.componentMap[componentName].htmlAttributes) {
       if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
         return `<template>\n  <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
@@ -285,22 +285,9 @@ export default {
         if (this.exportAsTypescript === "on") {
           imports += 'import { defineComponent } from "vue";\n';
         }
-        // add imports for children
-        // for (let child in children) {
-        //   imports += `import ${children[child].componentName} from '@/components/${children[child].componentName}.vue';\n`;
-        // }
-        // children.forEach((name) => {
-        // });
-        // add components section
 
-        // if true add data section and populate with props
         let childrenComponentNames = "";
-        // for (let child in children) {
-        //   childrenComponentNames += `    ${children[child].componentName},\n`;
-        // }
-        // children.forEach((name) => {
-        // });
-        // if true add data section and populate with props
+
         let data = "";
         data += "  data () {\n    return {";
         if (currentComponent.props.length) {
@@ -365,14 +352,8 @@ export default {
       } else {
         let str = "";
 
-      // for (let child in children) {
-      //   str += `import ${children[child].componentName} from '@/components/${children[child].componentName}.vue';\n`;
-      // }
-
         let childrenComponentNames = "";
-        // for (let child in children) {
-        //   childrenComponentNames += `    ${children[child].componentName},\n`;
-        // }
+
         // eslint-disable-next-line no-useless-escape
         if (this.exportAsTypescript === "on") {
           return `\n\n<script lang="ts">\nimport { defineComponent } from "vue";\n ${str}\nexport default defineComponent ({\n  name: '${componentName}',\n  components: {\n${childrenComponentNames}  }\n});\n<\/script>`;

src/components/nav-buttons/SaveProject.vue

@@ -102,25 +102,7 @@ export default {
 
         let state = this.$store.state;
         let routes = state.routes;
-
-        // for each route call parseAndDelete on htmlList
-        // eslint-disable-next-line no-unused-vars
-        /* Cannot mutatue outside of Vuex
-        for (let view in routes ) {
-          routes[view].forEach((component) => {
-            let htmlList = component.htmlList;
-            this.parseAndDelete(htmlList);
-          });
-        }
-        let componentMap = this.$store.state.componentMap;
-        // eslint-disable-next-line no-unused-vars
-        for (let component in componentMap) {
-          if (component.htmlList) {
-            let comphtml = component.htmlList;
-            this.parseAndDelete(comphtml);
-          }
-        }
-      */
+        
         fs.writeFileSync(data, JSON.stringify(state));
         localforage.setItem(
           fileName,