WE CAN GO DEEPER

Author: LOLDragoon

src/App.vue

@@ -66,7 +66,7 @@ let redoMixin = {
       if (event.ctrlKey && event.key === 'a') {
         event.preventDefault()
         if (this.$store.state.activeHTML !== '') {
-          this.$store.dispatch('addNestedHTML', { elementName: 'div', date: Date.now() })
+          this.$store.dispatch('setActiveLayer', this.$store.state.activeHTML)
         }
       }
     });

src/components/HomeQueue.vue

@@ -24,7 +24,21 @@
 import draggable from 'vuedraggable'
 import { mapState, mapActions } from 'vuex'
 import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList, setActiveHTML } from '../store/types'
-
+const breadthFirstSearch = (array,id) => {
+  let queue = [...array.filter(el => typeof el === 'object')];
+  while(queue.length){
+    let evaluated = queue.shift()
+    if(evaluated.id === id){
+      return evaluated
+    }
+    else{
+      if (evaluated.children.length){
+      queue.push(...evaluated.children)
+      }
+    }
+  }
+  console.log("We shouldn't be ever getting here, how did you even search an id that didn't exist?")
+}
 export default {
   name: 'HomeQueue',
   props: {
@@ -41,15 +55,23 @@ export default {
   //   }
   // },
   computed: {
-    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML']),
+    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML','activeLayer']),
     renderList: {
       get () {
         if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])
-        // change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
-        let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id]).filter(el => {
-          return el[0] !== undefined
-        })
-        return sortedHTML
+            // change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
+            if (this.activeComponent !== '' && this.activeLayer.id === '') {
+              console.log('this works right?')
+              let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id]).filter(el => {
+                return el[0] !== undefined
+              })
+              return sortedHTML
+            }
+            let activeElement = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
+            let sortedHTML = activeElement.children.map((el, index) => [el.text, index, el.id]).filter(el => {
+              return el[0] !== undefined
+            })
+            return sortedHTML
       },
       set (value) {
         this.$store.dispatch(setSelectedElementList, value)

src/store/actions.js

@@ -8,6 +8,11 @@ const actions = {
   // },
 
   // creates a new component in componentMap
+
+  [types.setActiveLayer]: ({commit}, payload) => {
+    commit(types.SET_ACTIVE_LAYER, payload)
+  },
+
   [types.registerComponent]: ({ state, commit }, payload) => {
     const { componentName } = payload
     if (!state.componentMap[componentName]) {

src/store/mutations.js

@@ -43,6 +43,31 @@ const breadthFirstSearchParent = (array,id) => {
 }
 
 const mutations = {
+
+  [types.SET_ACTIVE_LAYER]: (state, payload) =>{
+    let newLayer = cloneDeep(state.activeLayer)
+
+    //should only be reached if we change active component
+    if (payload === '') {
+      state.activeLayer = {
+        id:'',
+        lineage:[]
+      }
+    }
+    else{
+      //htmlArray = state.componentMap[state.activeComponent].htmlList
+      if(newLayer.id === ''){
+        newLayer.lineage.push(state.activeComponent)
+      }
+      else{
+        newLayer.lineage.push(newLayer.id)
+      }
+      newLayer.id = payload
+    }
+    state.activeLayer = newLayer
+  },
+
+
   // pushs new component to componentMap
   [types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
     const { componentName, htmlList, children, parent, isActive } = payload

src/store/state/index.js

@@ -69,7 +69,6 @@ const newState = {
     lineage:[]
   },
 
-
   selectedElementList: [],
   projectNumber: 2,
   activeTab: 0,

src/store/types.js

@@ -1,4 +1,5 @@
 // Mutations
+export const SET_ACTIVE_LAYER = 'SET_ACTIVE_LAYER'
 export const EMPTY_STATE = 'EMPTY_STATE'
 export const ADD_NESTED_HTML = 'ADD_NESTED_HTML'
 export const ADD_COMPONENT_TO_COMPONENT_MAP = 'ADD_COMPONENT_TO_COMPONENT_MAP'
@@ -63,6 +64,7 @@ export const DELETE_USER_STATE = 'DELETE_USER_STATE'
 export const SET_IMAGE_PATH = 'SET_IMAGE_PATH'
 
 // Actions
+export const setActiveLayer = 'setActiveLayer'
 export const addNestedHTML = 'addNestedHTML'
 export const updateComponentSize = 'updateComponentSize'
 export const updateStartingSize = 'updateStartingSize'