Skip to content

Commit 3b6a85a

Browse files
keliphankeliphan
committed
nesting elements completed
2 parents 79c0c54 + ebaf691 commit 3b6a85a

File tree

5 files changed

+178
-132
lines changed

5 files changed

+178
-132
lines changed

‎src/App.vue

Lines changed: 57 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,36 @@
88
import { SET_ACTIVE_COMPONENT } from './store/types'
99
const deepEqual = require('lodash.isequal')
1010
const cloneDeep = require('lodash.clonedeep')
11-
import {defaultState} from './store/state/index.js'
11+
import { defaultState } from './store/state/index.js'
1212
1313
let redoMixin = {
14-
data() {
14+
data () {
1515
return {
1616
// banana:[],
17-
doneAction:[],
18-
undoneAction:[],
17+
doneAction: [],
18+
undoneAction: [],
1919
isTimetraveling: false,
20-
initialState:{}
20+
initialState: {}
2121
}
2222
},
23-
24-
created() {
2523
24+
created () {
2625
this.$store.subscribeAction((action, state) => {
2726
// console.log("We are saving this action!", action)
28-
if (typeof action.payload === "object") {
27+
if (typeof action.payload === 'object') {
2928
// console.log("We saved the world with a deepclone!", action.payload === cloneDeep)
3029
action.payload = cloneDeep(action.payload)
3130
}
3231
this.doneAction.push(action)
3332
// console.log('this is the action we are logging',action)
3433
// console.log('this is in our redo queue', this.undoneAction[this.undoneAction.length-1])
3534
// console.log("Are these equal to each other?", action == this.undoneAction[this.undoneAction.length-1])
36-
if(!this.isTimetraveling) {
37-
if (this.undoneAction[this.undoneAction.length-1]) {
38-
if(action.type == this.undoneAction[this.undoneAction.length-1].type &&
39-
deepEqual(action.payload,this.undoneAction[this.undoneAction.length-1].payload)) {
35+
if (!this.isTimetraveling) {
36+
if (this.undoneAction[this.undoneAction.length - 1]) {
37+
if (action.type == this.undoneAction[this.undoneAction.length - 1].type &&
38+
deepEqual(action.payload, this.undoneAction[this.undoneAction.length - 1].payload)) {
4039
this.undoneAction.pop()
41-
}
42-
else {
40+
} else {
4341
this.undoneAction = []
4442
}
4543
}
@@ -48,60 +46,59 @@ let redoMixin = {
4846
// this.blankState = cloneDeep(this.$store)
4947
},
5048
51-
mounted() {
52-
window.addEventListener("keydown", event => {
53-
if (event.ctrlKey && event.key === "z") {
49+
mounted () {
50+
window.addEventListener('keydown', event => {
51+
if (event.ctrlKey && event.key === 'z') {
5452
event.preventDefault()
5553
this.undo()
5654
}
57-
});
58-
window.addEventListener("keydown", event => {
59-
if (event.ctrlKey && event.key === "y") {
55+
})
56+
window.addEventListener('keydown', event => {
57+
if (event.ctrlKey && event.key === 'y') {
6058
event.preventDefault()
6159
this.redo()
6260
}
63-
});
61+
})
6462
65-
window.addEventListener('keydown', event => {
66-
if (event.ctrlKey && event.key === 'a') {
67-
event.preventDefault()
68-
if (this.$store.state.activeHTML !== '') {
69-
this.$store.dispatch('setActiveLayer', this.$store.state.activeHTML)
70-
}
71-
}
72-
});
73-
window.addEventListener('keydown', event => {
74-
if (event.ctrlKey && event.key === 'd') {
75-
event.preventDefault()
76-
if (this.$store.state.activeLayer.id !== '') {
77-
this.$store.dispatch('upOneLayer', this.$store.state.activeLayer.id)
78-
}
79-
}
80-
});
63+
// window.addEventListener('keydown', event => {
64+
// if (event.ctrlKey && event.key === 'a') {
65+
// event.preventDefault()
66+
// if (this.$store.state.activeHTML !== '') {
67+
// this.$store.dispatch('setActiveLayer', {id:this.$store.state.activeHTML, text:"banana"})
68+
// }
69+
// }
70+
// });
71+
// window.addEventListener('keydown', event => {
72+
// if (event.ctrlKey && event.key === 'd') {
73+
// event.preventDefault()
74+
// if (this.$store.state.activeLayer.id !== '') {
75+
// this.$store.dispatch('upOneLayer', this.$store.state.activeLayer.id)
76+
// }
77+
// }
78+
// });
8179
8280
// console.log("do we want this? or this.$store.state?", this.$store.state)
8381
this.initialState = defaultState(this.$store.state)
84-
8582
},
8683
8784
methods: {
8885
undo: function () {
8986
// do {
9087
// console.log("How far back?")
9188
92-
this.isTimetraveling = true;
89+
this.isTimetraveling = true
9390
9491
let undone = this.doneAction.pop()
95-
96-
if(undone !== undefined) {
92+
93+
if (undone !== undefined) {
9794
this.undoneAction.push(undone)
98-
if(undone.type==="setActiveComponent") {
99-
console.log("We did something useless!")
100-
do{
95+
if (undone.type === 'setActiveComponent') {
96+
console.log('We did something useless!')
97+
do {
10198
this.undoneAction.push(this.doneAction.pop())
10299
}
103-
while (this.doneAction[this.doneAction.length-1] &&
104-
(this.doneAction[this.doneAction.length - 1].type === "setActiveComponent"))
100+
while (this.doneAction[this.doneAction.length - 1] &&
101+
(this.doneAction[this.doneAction.length - 1].type === 'setActiveComponent'))
105102
}
106103
}
107104
@@ -112,38 +109,35 @@ let redoMixin = {
112109
initialState: this.initialState,
113110
store: this.$store
114111
}
115-
this.$store.commit("EMPTY_STATE",payload)
112+
this.$store.commit('EMPTY_STATE', payload)
116113
console.log(this.$store)
117114
this.doneAction.forEach(action => {
118-
console.log("In the loop",this.$store)
115+
console.log('In the loop', this.$store)
119116
// this.$store.commit(`${mutation.type}`, mutation.payload);
120-
this.$store.dispatch(action.type, cloneDeep(action.payload));
121-
this.doneAction.pop();
122-
});
123-
this.isTimetraveling = false;
124-
117+
this.$store.dispatch(action.type, cloneDeep(action.payload))
118+
this.doneAction.pop()
119+
})
120+
this.isTimetraveling = false
125121
},
126-
redo: function() {
127-
122+
redo: function () {
128123
let action = this.undoneAction.pop()
129-
this.isTimetraveling = true;
130-
if(action) {
124+
this.isTimetraveling = true
125+
if (action) {
131126
this.$store.dispatch(action.type, cloneDeep(action.payload))
132127
}
133-
this.isTimetraveling = false;
134-
if(action && (action.type === "setActiveComponent")) {
135-
console.log("WE GOTTA DO MORE")
136-
this.redo();
128+
this.isTimetraveling = false
129+
if (action && (action.type === 'setActiveComponent')) {
130+
console.log('WE GOTTA DO MORE')
131+
this.redo()
137132
}
138133
}
139134
140135
}
141136
}
142137
143-
144138
export default {
145139
name: 'App',
146-
mixins:[redoMixin]
140+
mixins: [redoMixin]
147141
}
148142
</script>
149143

‎src/components/CreateComponent.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import Icons from './Icons'
3939
import ParentMultiselect from '../components/ParentMultiselect'
4040
import { mapState, mapActions } from 'vuex'
4141
42+
4243
export default {
4344
name: 'HomeSidebar',
4445
components: {

‎src/components/HomeQueue.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<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()">
1717
<i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
1818
{{ element[0] }}
19-
<i class="fas fa fa-trash fa-md" @click.self="deleteElement(element[1])"></i>
19+
<i class="fas fa fa-trash fa-md" @click.self="deleteElement(element[2])"></i>
2020
</div>
2121
</draggable>
2222
</section>
@@ -82,9 +82,9 @@ export default {
8282
},
8383
methods: {
8484
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),
85-
deleteElement (index) {
86-
if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, index)
87-
else this.$store.dispatch(deleteFromComponentHtmlList, index)
85+
deleteElement (id) {
86+
if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id)
87+
else this.$store.dispatch(deleteFromComponentHtmlList, id)
8888
},
8989
setActiveElement (element) {
9090
this.setActiveHTML(element)

‎src/components/Icons.vue

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,20 @@
1717

1818
<script>
1919
import { mapState } from 'vuex'
20-
20+
const breadthFirstSearch = (array, id) => {
21+
let queue = [...array.filter(el => typeof el === 'object')]
22+
while (queue.length) {
23+
let evaluated = queue.shift()
24+
if (evaluated.id === id) {
25+
return evaluated
26+
} else {
27+
if (evaluated.children.length) {
28+
queue.push(...evaluated.children)
29+
}
30+
}
31+
}
32+
console.log("We shouldn't be ever getting here, how did you even search an id that didn't exist?")
33+
}
2134
export default {
2235
data () {
2336
return {
@@ -56,7 +69,26 @@ export default {
5669
}
5770
// console.log('storage is ', this.elementStorage)
5871
},
72+
activeLayer: {
73+
deep: true,
74+
handler () {
75+
if (this.activeComponent) {
76+
this.elementStorage = {}
77+
if (this.activeLayer.id !== '' && this.activeHTML === '') {
78+
let activeLayerObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
79+
activeLayerObj.children.forEach(el => {
80+
if (!this.elementStorage[el.text]) {
81+
this.elementStorage[el.text] = 1
82+
} else {
83+
this.elementStorage[el.text] += 1
84+
}
85+
})
86+
}
87+
}
88+
}
89+
},
5990
// if componentMap is updated (i.e. element is added to component's htmlList), elementStorage will update its cache of elements & frequency
91+
6092
componentMap: {
6193
deep: true,
6294
handler () {
@@ -65,14 +97,67 @@ export default {
6597
// console.log('htmlList', this.componentMap[this.activeComponent].htmlList)
6698
if (this.activeComponent) {
6799
this.elementStorage = {}
100+
if (this.activeLayer.id !== '' && this.activeHTML === '') {
101+
let activeLayerObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
102+
activeLayerObj.children.forEach(el => {
103+
if (!this.elementStorage[el.text]) {
104+
this.elementStorage[el.text] = 1
105+
} else {
106+
this.elementStorage[el.text] += 1
107+
}
108+
})
109+
} else if (this.activeHTML !== '') {
110+
let activeHtmlObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeHTML)
111+
activeHtmlObj.children.forEach(el => {
112+
if (!this.elementStorage[el.text]) {
113+
this.elementStorage[el.text] = 1
114+
} else {
115+
this.elementStorage[el.text] += 1
116+
}
117+
})
118+
} else {
119+
this.componentMap[this.activeComponent].htmlList.forEach(el => {
120+
if (!this.elementStorage[el.text]) {
121+
this.elementStorage[el.text] = 1
122+
} else {
123+
this.elementStorage[el.text] += 1
124+
}
125+
})
126+
}
127+
// console.log('elementStorage is ', this.elementStorage);
128+
}
129+
}
130+
},
131+
132+
activeHTML: function () {
133+
this.elementStorage = {}
134+
if (this.activeHTML !== '') {
135+
let activeHtmlObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeHTML)
136+
activeHtmlObj.children.forEach(el => {
137+
if (!this.elementStorage[el.text]) {
138+
this.elementStorage[el.text] = 1
139+
} else {
140+
this.elementStorage[el.text] += 1
141+
}
142+
})
143+
} else {
144+
if (this.activeLayer.id !== '' && this.activeHTML === '') {
145+
let activeLayerObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
146+
activeLayerObj.children.forEach(el => {
147+
if (!this.elementStorage[el.text]) {
148+
this.elementStorage[el.text] = 1
149+
} else {
150+
this.elementStorage[el.text] += 1
151+
}
152+
})
153+
} else {
68154
this.componentMap[this.activeComponent].htmlList.forEach(el => {
69155
if (!this.elementStorage[el.text]) {
70156
this.elementStorage[el.text] = 1
71157
} else {
72158
this.elementStorage[el.text] += 1
73159
}
74160
})
75-
// console.log('elementStorage is ', this.elementStorage);
76161
}
77162
}
78163
},

0 commit comments

Comments
 (0)