Skip to content

Commit 14f5c04

Browse files
LOLDragoonLOLDragoon
authored
Merge pull request #18 from keliphan/finalMVP
Nesting of HTML Elements completed
2 parents 850c0c2 + 3b6a85a commit 14f5c04

File tree

10 files changed

+469
-201
lines changed

10 files changed

+469
-201
lines changed

‎src/App.vue

Lines changed: 63 additions & 51 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,42 +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") {
54-
event.preventDefault()
49+
mounted () {
50+
window.addEventListener('keydown', event => {
51+
if (event.ctrlKey && event.key === 'z') {
52+
event.preventDefault()
5553
this.undo()
5654
}
57-
});
58-
window.addEventListener("keydown", event => {
59-
if (event.ctrlKey && event.key === "y") {
60-
event.preventDefault()
55+
})
56+
window.addEventListener('keydown', event => {
57+
if (event.ctrlKey && event.key === 'y') {
58+
event.preventDefault()
6159
this.redo()
6260
}
63-
});
64-
//console.log("do we want this? or this.$store.state?", this.$store.state)
65-
this.initialState = defaultState(this.$store.state)
61+
})
62+
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+
// });
6679
80+
// console.log("do we want this? or this.$store.state?", this.$store.state)
81+
this.initialState = defaultState(this.$store.state)
6782
},
6883
6984
methods: {
70-
undo: function() {
85+
undo: function () {
7186
// do {
7287
// console.log("How far back?")
7388
74-
this.isTimetraveling = true;
89+
this.isTimetraveling = true
7590
7691
let undone = this.doneAction.pop()
77-
78-
if(undone !== undefined) {
92+
93+
if (undone !== undefined) {
7994
this.undoneAction.push(undone)
80-
if(undone.type==="setActiveComponent") {
81-
console.log("We did something useless!")
82-
do{
95+
if (undone.type === 'setActiveComponent') {
96+
console.log('We did something useless!')
97+
do {
8398
this.undoneAction.push(this.doneAction.pop())
8499
}
85-
while (this.doneAction[this.doneAction.length-1] &&
86-
(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'))
87102
}
88103
}
89104
@@ -94,38 +109,35 @@ let redoMixin = {
94109
initialState: this.initialState,
95110
store: this.$store
96111
}
97-
this.$store.commit("EMPTY_STATE",payload)
112+
this.$store.commit('EMPTY_STATE', payload)
98113
console.log(this.$store)
99114
this.doneAction.forEach(action => {
100-
console.log("In the loop",this.$store)
115+
console.log('In the loop', this.$store)
101116
// this.$store.commit(`${mutation.type}`, mutation.payload);
102-
this.$store.dispatch(action.type, cloneDeep(action.payload));
103-
this.doneAction.pop();
104-
});
105-
this.isTimetraveling = false;
106-
117+
this.$store.dispatch(action.type, cloneDeep(action.payload))
118+
this.doneAction.pop()
119+
})
120+
this.isTimetraveling = false
107121
},
108-
redo: function() {
109-
122+
redo: function () {
110123
let action = this.undoneAction.pop()
111-
this.isTimetraveling = true;
112-
if(action) {
124+
this.isTimetraveling = true
125+
if (action) {
113126
this.$store.dispatch(action.type, cloneDeep(action.payload))
114127
}
115-
this.isTimetraveling = false;
116-
if(action && (action.type === "setActiveComponent")) {
117-
console.log("WE GOTTA DO MORE")
118-
this.redo();
128+
this.isTimetraveling = false
129+
if (action && (action.type === 'setActiveComponent')) {
130+
console.log('WE GOTTA DO MORE')
131+
this.redo()
119132
}
120133
}
121134
122135
}
123136
}
124137
125-
126138
export default {
127139
name: 'App',
128-
mixins:[redoMixin]
140+
mixins: [redoMixin]
129141
}
130142
</script>
131143

‎src/components/CodeSnippet.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,11 @@ export default {
8585
return ''
8686
}
8787
let indented = indent + ' '
88-
let nestedString = indented
88+
let nestedString = ''
8989
9090
childrenArray.forEach(child => {
91-
console.log(child)
91+
nestedString += indented
92+
//console.log(child)
9293
if(!child.text){
9394
nestedString += `<${child}/>\n`
9495
}
@@ -113,7 +114,7 @@ export default {
113114
let htmlArr = this.componentMap[componentName].htmlList;
114115
let outputStr = ``;
115116
for (let el of htmlArr) {
116-
console.log(el)
117+
//console.log(el)
117118
if(!el.text){
118119
outputStr += ` <${el}/>\n`
119120
}

‎src/components/ComponentDisplay.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export default {
276276
277277
},
278278
279-
finishedResize: function(x,y,w,h) {
279+
finishedResize: function(x, y, w, h) {
280280
console.log("FINISHED RESIZING")
281281
let payload = {
282282
x: x,
@@ -289,7 +289,7 @@ export default {
289289
}
290290
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y ||
291291
payload.w !== this.initialSize.w || payload.h !==this.initialSize.h) {
292-
this.updateComponentSize(payload)
292+
this.updateComponentSize(payload)
293293
}
294294
},
295295
@@ -302,7 +302,7 @@ export default {
302302
this.userImage;
303303
},
304304
305-
finishedDrag: function(x,y) {
305+
finishedDrag: function(x, y) {
306306
console.log("FINISHED DRAGGING")
307307
let payload = {
308308
x: x,
@@ -319,10 +319,10 @@ export default {
319319
},
320320
321321
onActivated(componentData) {
322-
//console.log("I RAN!")
323-
this.$refs.boxes.forEach((element)=> {
324-
if (element.$attrs.id !== componentData.componentName){
325-
element.enabled = false;
322+
// console.log("I RAN!")
323+
this.$refs.boxes.forEach((element) => {
324+
if (element.$attrs.id !== componentData.componentName) {
325+
element.enabled = false;
326326
element.$emit('deactivated')
327327
element.$emit('update:active', false)
328328
}
@@ -382,9 +382,9 @@ export default {
382382
// this.setActiveComponent(compData.componentName)
383383
// this.activeComponentData.isActive = true
384384
// }
385-
handleClick(event){
386-
if(event.target.className === "component-display grid-bg") {
387-
if(!('' === this.activeComponent)) this.setActiveComponent('');
385+
handleClick(event) {
386+
if (event.target.className === 'component-display grid-bg') {
387+
if (!(this.activeComponent === '')) this.setActiveComponent('');
388388
}
389389
}
390390
}

‎src/components/CreateComponent.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
class="icons"
1818
@getClickedIcon="addToSelectedElementList"
1919
@activeElement="addToComponentElementList"
20+
@activeHTML="addNestedHTML"
21+
@activeLayer="addNestedNoActive"
2022
/>
2123
</div>
2224
<ParentMultiselect />
@@ -37,14 +39,15 @@ import Icons from './Icons'
3739
import ParentMultiselect from '../components/ParentMultiselect'
3840
import { mapState, mapActions } from 'vuex'
3941
42+
4043
export default {
4144
name: 'HomeSidebar',
4245
components: {
4346
Icons,
4447
ParentMultiselect
4548
},
4649
computed: {
47-
...mapState(['componentMap', 'selectedElementList', 'activeComponent']),
50+
...mapState(['componentMap', 'selectedElementList', 'activeComponent', 'activeHTML']),
4851
componentNameInputValue: {
4952
get () {
5053
return this.$store.state.componentNameInputValue
@@ -60,7 +63,9 @@ export default {
6063
'addToSelectedElementList',
6164
'updateComponentNameInputValue',
6265
'setActiveComponent',
63-
'addToComponentElementList'
66+
'addToComponentElementList',
67+
'addNestedHTML',
68+
'addNestedNoActive'
6469
]),
6570
handleClick () {
6671
if (!this.componentNameInputValue.trim()) {

0 commit comments

Comments
 (0)