bugs fixed from selecting HTML Elements then having nested html elements, this is done by having a clearActiveHTML function in the closing button for editing HTML Element properties

Author: JaceCrowe

src/components/Canvas.vue

@@ -44,7 +44,7 @@
     >
 
       <div class="component-title">
-        <p>{{ componentData.componentName }}</p>
+        <p>{{ componentData.componentName }}{{this.activeLayer.id}}</p>
       </div>
       <q-icon v-if="componentData.componentName === this.activeComponent" 
         size="25px" 

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

@@ -23,6 +23,7 @@
             v-model="heightText"
             :min="0"
             :max="100"
+            tabindex="element.h"
             vertical
             label
             label-always
@@ -93,7 +94,8 @@
               @click="submitLeft(leftText, this.activeHTML)">
             </i>
           </q-input>
-          <q-btn label="Close" @click="this.openAttributeModal" />
+          <q-btn label="Close HTML Element"  class="closeBtn" @click="closeMenu({text: 'reset', id: 'reset' })" />
+          <!-- setParentLayer -->
         </q-form>
       </div>
     </div>
@@ -137,6 +139,7 @@ export default {
       'addActiveComponentWidth',
       'addActiveComponentTop',
       'addActiveComponentLeft',
+      'clearActiveHTML'
       ]),
     submitClass(element, idNum) {
       if (element === '') {
@@ -204,7 +207,12 @@ export default {
       this.addActiveComponentLeft(payload);
       this.leftText = '';
     },
-
+    closeMenu(element) {
+      if (this.activeComponent !== '') {
+        this.clearActiveHTML()
+        this.openAttributeModal(element);
+      }
+    },
   },
   watch: {
     attributeModalOpen() {
@@ -230,4 +238,10 @@ export default {
 .title {
   font-size: 1.3em
 }
+
+.closeBtn {
+  background-color: $primary;
+  margin-bottom: 2em;
+  width: 100%;
+} 
 </style>

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

@@ -167,6 +167,7 @@ export default {
       "routes",
       "activeRoute",
       "activeComponent",
+      "activeHTML",
       "activeComponentObj",
       "componentMap",
       "exportAsTypescript",

src/components/right-sidebar/HTMLQueue.vue

@@ -8,8 +8,7 @@ Description:
   <section class="html-queue" @dragover="dragOver($event), false">
     <span class='list-title' v-if='this.activeLayer.id !== ""'>
       <i class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
-      
-      &nbsp; &nbsp; Viewing Elements in {{this.activeComponent}} '{{ depth }}'
+        &nbsp; &nbsp; Viewing Elements in {{this.activeComponent}} '{{ depth }}'
       <hr>
     </span>
     <span class='list-title' v-else-if='!this.activeComponent'></span>
@@ -109,7 +108,14 @@ export default {
     }
   },
   computed: {
-    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer', 'attributeModalOpen']),
+    ...mapState([
+      'selectedElementList', 
+      'componentMap', 
+      'activeComponent', 
+      'activeHTML', 
+      'activeLayer', 
+      'attributeModalOpen'
+      ]),
     renderList: {
       get() {
         if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])
@@ -139,17 +145,29 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'setSelectedIdDrag', 'setIdDrag', 'setSelectedIdDrop', 'setIdDrop', 'dragDropSortHtmlElements', 'dragDropSortSelectedHtmlElements', 'openAttributeModal', 'addActiveComponentClass']),
+    ...mapActions([
+      'setActiveHTML', 
+      'setActiveLayer', 
+      'upOneLayer', 
+      'setSelectedIdDrag', 
+      'setIdDrag', 
+      'setSelectedIdDrop', 
+      'setIdDrop', 
+      'dragDropSortHtmlElements', 
+      'dragDropSortSelectedHtmlElements', 
+      'openAttributeModal', 
+      'addActiveComponentClass']),
     deleteElement (id) {
       if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
       else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
     },
     setActiveElement(element) {
       if (this.activeComponent !== '') {
         this.setActiveHTML(element);
-        this.openAttributeModal(element);
+        if (this.attributeModal === false) {
+          this.openAttributeModal(element);
         }
-      
+      }
     },
     setLayer(element) {
       this.setActiveLayer(element)

src/store/actions.js

@@ -319,6 +319,10 @@ const actions = {
     commit(types.SET_ACTIVE_HTML_ELEMENT, payload);
   },
 
+  [types.clearActiveHTML]: ({ commit }, payload) => {
+    commit(types.CLEAR_ACTIVE_HTML, payload);
+  },
+
   [types.setActiveLayer]: ({ commit }, payload) => {
     commit(types.SET_ACTIVE_LAYER, payload);
   },

src/store/mutations.js

@@ -358,6 +358,10 @@ const mutations = {
     });
   },
 
+  [types.CLEAR_ACTIVE_HTML]: (state) => {
+    state.activeHTML = '';
+  },
+
   [types.ADD_NESTED_NO_ACTIVE]: (state, payload) => {
     const componentName = state.activeComponent;
     const { activeLayer } = state;

src/store/types.js

@@ -79,7 +79,7 @@ export const ADD_ACTIVE_COMPONENT_WIDTH = 'ADD_ACTIVE_COMPONENT_WIDTH'
 export const ADD_ACTIVE_COMPONENT_TOP = 'ADD_ACTIVE_COMPONENT_TOP'
 export const ADD_ACTIVE_COMPONENT_LEFT = 'ADD_ACTIVE_COMPONENT_LEFT'
 export const ADD_ACTIVE_COMPONENT_ELEMENT_NOTE = 'ADD_ACTIVE_COMPONENT_ELEMENT_NOTE'
-
+export const CLEAR_ACTIVE_HTML = 'CLEAR_ACTIVE_HTML'
 
 //
 export const REMOVE_ALL_STATE_PROPS_ACTIONS = 'REMOVE_ALL_STATE_PROPS_ACTIONS'
@@ -104,7 +104,7 @@ export const addActiveComponentWidth = 'addActiveComponentWidth'
 export const addActiveComponentTop = 'addActiveComponentTop'
 export const addActiveComponentLeft = 'addActiveComponentLeft'
 export const addActiveComponentElementNote = 'addActiveComponentElementNote'
-
+export const clearActiveHTML = 'clearActiveHTML'
 
 
 //