Skip to content

Commit 48f5be2

Browse files
keliphankeliphan
committed
level up and down in HTML Elements merged
2 parents 17c381c + b55451a commit 48f5be2

File tree

7 files changed

+98
-42
lines changed

7 files changed

+98
-42
lines changed

‎src/App.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,14 @@ let redoMixin = {
7070
}
7171
}
7272
});
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+
});
7381
7482
// console.log("do we want this? or this.$store.state?", this.$store.state)
7583
this.initialState = defaultState(this.$store.state)

‎src/components/CreateComponent.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@getClickedIcon="addToSelectedElementList"
1919
@activeElement="addToComponentElementList"
2020
@activeHTML="addNestedHTML"
21+
@activeLayer="addNestedNoActive"
2122
/>
2223
</div>
2324
<ParentMultiselect />
@@ -62,7 +63,8 @@ export default {
6263
'updateComponentNameInputValue',
6364
'setActiveComponent',
6465
'addToComponentElementList',
65-
'addNestedHTML'
66+
'addNestedHTML',
67+
'addNestedNoActive'
6668
]),
6769
handleClick () {
6870
if (!this.componentNameInputValue.trim()) {

‎src/components/HomeQueue.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,12 @@ import { mapState, mapActions } from 'vuex'
2828
import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList, setActiveHTML, setActiveLayer } from '../store/types'
2929
3030
const breadthFirstSearch = (array, id) => {
31-
let queue = [...array.filter(el => typeof el === 'object')];
31+
let queue = [...array.filter(el => typeof el === 'object')]
3232
while (queue.length) {
3333
let evaluated = queue.shift()
3434
if (evaluated.id === id) {
3535
return evaluated
36-
}
37-
else {
36+
} else {
3837
if (evaluated.children.length) {
3938
queue.push(...evaluated.children)
4039
}

‎src/components/Icons.vue

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,31 @@ export default {
2626
},
2727
name: 'Icons',
2828
computed: {
29-
...mapState(['icons', 'activeComponent', 'componentMap', 'selectedElementList','activeHTML'])
29+
...mapState(['icons', 'activeComponent', 'componentMap', 'selectedElementList', 'activeHTML', 'activeLayer'])
3030
},
3131
methods: {
3232
changeState (elementName) {
33-
if (this.activeComponent === '') { this.$emit('getClickedIcon', {elementName, date:Date.now()}) }
34-
else {
35-
if(this.activeHTML === '') {
36-
this.$emit('activeElement', {elementName,date:Date.now()})
37-
}
38-
else {
39-
this.$emit('activeHTML', {elementName, date:Date.now()})
40-
}
41-
}
33+
if (this.activeComponent === '') { this.$emit('getClickedIcon', { elementName, date: Date.now() }) } else {
34+
if (this.activeHTML === '' && this.activeLayer.id === '') {
35+
this.$emit('activeElement', { elementName, date: Date.now() })
36+
} else if (this.activeLayer.id !== '' && this.activeHTML === '') {
37+
this.$emit('activeLayer', { elementName, date: Date.now() })
38+
} else {
39+
this.$emit('activeHTML', { elementName, date: Date.now() })
40+
}
41+
}
4242
}
4343
},
4444
watch: {
45-
selectedElementList: function() {
45+
selectedElementList: function () {
4646
// console.log('watching selectedElementList');
4747
if (this.activeComponent === '') {
48-
this.elementStorage = {};
48+
this.elementStorage = {}
4949
this.selectedElementList.forEach(el => {
5050
if (!this.elementStorage[el.text]) {
51-
this.elementStorage[el.text] = 1;
51+
this.elementStorage[el.text] = 1
5252
} else {
53-
this.elementStorage[el.text] += 1;
53+
this.elementStorage[el.text] += 1
5454
}
5555
})
5656
}
@@ -64,40 +64,40 @@ export default {
6464
// console.log('activecomponent is ', this.activeComponent)
6565
// console.log('htmlList', this.componentMap[this.activeComponent].htmlList)
6666
if (this.activeComponent) {
67-
this.elementStorage = {};
67+
this.elementStorage = {}
6868
this.componentMap[this.activeComponent].htmlList.forEach(el => {
6969
if (!this.elementStorage[el.text]) {
70-
this.elementStorage[el.text] = 1;
70+
this.elementStorage[el.text] = 1
7171
} else {
72-
this.elementStorage[el.text] += 1;
72+
this.elementStorage[el.text] += 1
7373
}
7474
})
7575
// console.log('elementStorage is ', this.elementStorage);
7676
}
77-
},
77+
}
7878
},
7979
// if activeComponent is updated, elementStorage will update its cache of elements & frequency to reflect new active component
80-
activeComponent: function() {
80+
activeComponent: function () {
8181
// console.log('watching activeComponent', this.activeComponent);
8282
if (this.activeComponent) {
83-
this.elementStorage = {};
83+
this.elementStorage = {}
8484
this.componentMap[this.activeComponent].htmlList.forEach(el => {
8585
if (!this.elementStorage[el.text]) {
86-
this.elementStorage[el.text] = 1;
86+
this.elementStorage[el.text] = 1
8787
} else {
88-
this.elementStorage[el.text] += 1;
88+
this.elementStorage[el.text] += 1
8989
}
9090
})
9191
// console.log('elementStorage is ', this.elementStorage);
9292
} else if (this.activeComponent === '') {
9393
// console.log(`watching activeComponent, current active is ''`)
9494
// if component was switched from existing component to '', reset cache and update items
95-
if (this.elementStorage !== {}) this.elementStorage = {};
95+
if (this.elementStorage !== {}) this.elementStorage = {}
9696
this.selectedElementList.forEach(el => {
9797
if (!this.elementStorage[el.text]) {
98-
this.elementStorage[el.text] = 1;
98+
this.elementStorage[el.text] = 1
9999
} else {
100-
this.elementStorage[el.text] += 1;
100+
this.elementStorage[el.text] += 1
101101
}
102102
})
103103
}
@@ -131,7 +131,7 @@ button:hover {
131131
cursor: pointer;
132132
color: #00ffff;
133133
}
134-
button:focus {
134+
button:focus {
135135
outline: none;
136136
color: #00ffff;
137137
}

‎src/store/actions.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ const actions = {
1313
commit(types.SET_ACTIVE_LAYER, payload)
1414
},
1515

16+
[types.upOneLayer]:({commit}, payload) => {
17+
commit(types.UP_ONE_LAYER, payload)
18+
},
19+
1620
[types.registerComponent]: ({ state, commit }, payload) => {
1721
const { componentName } = payload
1822
if (!state.componentMap[componentName]) {
@@ -118,6 +122,10 @@ const actions = {
118122
commit(types.ADD_NESTED_HTML, payload)
119123
},
120124

125+
[types.addNestedNoActive]:( {commit}, payload) =>{
126+
commit(types.ADD_NESTED_NO_ACTIVE,payload)
127+
},
128+
121129

122130
[types.setState]: ({ commit }, payload) => {
123131
commit(types.SET_STATE, payload)

‎src/store/mutations.js

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import localforage from 'localforage'
1010
// we have to do a search because undo/redo saves payloads as deep clones so passing a memory ref would be detrimental
1111
// This will find you the actual object by ID
1212
const breadthFirstSearch = (array, id) => {
13-
let queue = [...array.filter(el => typeof el === 'object')];
13+
let queue = [...array.filter(el => typeof el === 'object')]
1414
while (queue.length) {
1515
let evaluated = queue.shift()
1616
if (evaluated.id === id) {
1717
return evaluated
18-
}
19-
else {
18+
} else {
2019
if (evaluated.children.length) {
2120
queue.push(...evaluated.children)
2221
}
@@ -27,11 +26,11 @@ const breadthFirstSearch = (array, id) => {
2726

2827
// this would find you the parent of a given id
2928
const breadthFirstSearchParent = (array, id) => {
30-
let queue = [...array.filter(el => typeof el === 'object')];
29+
let queue = [...array.filter(el => typeof el === 'object')]
3130
while (queue.length) {
3231
let evaluated = queue.shift()
3332
for (let i = 0; i < evaluated.children.length; i++) {
34-
if (evaluated.children[i] === id) {
33+
if (evaluated.children[i].id === id) {
3534
return evaluated
3635
}
3736
}
@@ -52,6 +51,26 @@ const mutations = {
5251
state.activeHTML = ''
5352
},
5453

54+
[types.UP_ONE_LAYER]: (state, payload) => {
55+
// console.log("This is our payload",payload)
56+
// console.log("we are looking for the parent in here",state.componentMap[state.activeComponent].htmlList)
57+
if (state.activeLayer.lineage.length === 1) {
58+
state.activeLayer = {
59+
id: '',
60+
lineage: []
61+
}
62+
} else {
63+
let newID = breadthFirstSearchParent(state.componentMap[state.activeComponent].htmlList, payload)
64+
console.log("new ID here", newID)
65+
let newLayer = { ...state.activeLayer }
66+
newLayer.id = newID.id
67+
newLayer.lineage.pop()
68+
console.log('We should have gone up a level', newLayer)
69+
state.activeLayer = newLayer
70+
}
71+
state.activeHTML = ''
72+
},
73+
5574
// pushs new component to componentMap
5675
[types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
5776
const { componentName, htmlList, children, parent, isActive } = payload
@@ -85,7 +104,7 @@ const mutations = {
85104
// empty state
86105
[types.EMPTY_STATE]: (state, payload) => {
87106
// console.log('This is our defaultstate still', defaultState)
88-
console.log("hopefully this stays pure", payload)
107+
console.log('hopefully this stays pure', payload)
89108
payload.store.replaceState(cloneDeep(payload.initialState))
90109
// {
91110
// icons,
@@ -155,7 +174,7 @@ const mutations = {
155174
})
156175
},
157176

158-
[types.ADD_NESTED_HTML]:(state, payload) => {
177+
[types.ADD_NESTED_HTML]: (state, payload) => {
159178
const componentName = state.activeComponent
160179
const activeHTML = state.activeHTML
161180
state.componentMap[componentName] = { ...state.componentMap[componentName] }
@@ -167,6 +186,19 @@ const mutations = {
167186
})
168187
},
169188

189+
// effectively the same as add nested, not happy with this, could do control flow earlier up somewhere?
190+
[types.ADD_NESTED_NO_ACTIVE]: (state, payload) => {
191+
const componentName = state.activeComponent
192+
const activeLayer = state.activeLayer
193+
state.componentMap[componentName] = { ...state.componentMap[componentName] }
194+
let nestedElement = breadthFirstSearch(state.componentMap[componentName].htmlList, activeLayer.id)
195+
nestedElement.children.push({
196+
text: payload.elementName,
197+
id: payload.date,
198+
children: []
199+
})
200+
},
201+
170202
[types.DELETE_FROM_COMPONENT_HTML_LIST]: (state, idx) => {
171203
const componentName = state.activeComponent
172204
const htmlList = state.componentMap[componentName].htmlList.slice(0)
@@ -239,7 +271,7 @@ const mutations = {
239271
...state.routes,
240272
[payload]: []
241273
}
242-
state.imagePath[payload] = '';
274+
state.imagePath[payload] = ''
243275
// console.log('payload in add_route', payload)
244276
},
245277
// Changes the component map
@@ -266,6 +298,10 @@ const mutations = {
266298
[types.SET_ACTIVE_COMPONENT]: (state, payload) => {
267299
state.activeComponent = payload
268300
state.activeHTML = ''
301+
state.activeLayer = {
302+
id: '',
303+
lineage: []
304+
}
269305
},
270306
[types.SET_ACTIVE_HTML_ELEMENT]: (state, payload) => {
271307
// console.log('text is ', payload[0])
@@ -308,13 +344,12 @@ const mutations = {
308344
state.componentMap[component].children = value
309345
},
310346
[types.UPDATE_COMPONENT_POSITION]: (state, payload) => {
311-
const updatedComponent = state.routes[state.activeRoute].filter(element => {
347+
const updatedComponent = state.routes[state.activeRoute].filter(element => {
312348
return element.componentName === payload.activeComponent
313349
})[0]
314350

315351
updatedComponent.x = payload.x
316-
updatedComponent.y = payload.y //Object.assign({}, state.componentMap[payload.activeComponent], {x: payload.x, y: payload.y});
317-
352+
updatedComponent.y = payload.y // Object.assign({}, state.componentMap[payload.activeComponent], {x: payload.x, y: payload.y});
318353
},
319354

320355
[types.UPDATE_COMPONENT_SIZE]: (state, payload) => {
@@ -441,7 +476,7 @@ const mutations = {
441476
delete state.userStore[payload]
442477
},
443478
[types.SET_IMAGE_PATH]: (state, payload) => {
444-
console.log('mutation to set image path', { ...state.imagePath, ...payload })
479+
console.log('mutation to set image path', { ...state.imagePath, ...payload })
445480
state.imagePath = { ...state.imagePath, ...payload }
446481
}
447482
}

‎src/store/types.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
// Mutations
2+
export const UP_ONE_LAYER = 'UP_ONE_LAYER'
3+
export const ADD_NESTED_NO_ACTIVE = 'ADD_NESTED_NO_ACTIVE'
24
export const SET_ACTIVE_LAYER = 'SET_ACTIVE_LAYER'
35
export const EMPTY_STATE = 'EMPTY_STATE'
46
export const ADD_NESTED_HTML = 'ADD_NESTED_HTML'
@@ -64,6 +66,8 @@ export const DELETE_USER_STATE = 'DELETE_USER_STATE'
6466
export const SET_IMAGE_PATH = 'SET_IMAGE_PATH'
6567

6668
// Actions
69+
export const upOneLayer = 'upOneLayer'
70+
export const addNestedNoActive ='addNestedNoActive'
6771
export const setActiveLayer = 'setActiveLayer'
6872
export const addNestedHTML = 'addNestedHTML'
6973
export const updateComponentSize = 'updateComponentSize'

0 commit comments

Comments
 (0)