Skip to content

Commit 8ee7bde

Browse files
JojuOlaodeJojuOlaode
committed
Merge branch 'master' into componentSort
2 parents cee3217 + 14f5c04 commit 8ee7bde

24 files changed

+1287
-252
lines changed

‎HomeView.png

Lines changed: 1 addition & 0 deletions
Loading

‎Route2.png

Lines changed: 1 addition & 0 deletions
Loading

‎Route3.png

Lines changed: 1 addition & 0 deletions
Loading

‎package-lock.json

Lines changed: 125 additions & 44 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@
2121
"aws-amplify": "^1.1.30",
2222
"aws-amplify-vue": "^0.2.13",
2323
"aws-appsync": "^1.8.1",
24-
"lodash": ">=4.17.13",
2524
"fs-extra": "^8.1.0",
2625
"localforage": "^1.7.3",
26+
"lodash": ">=4.17.13",
27+
"lodash.isequal": "^4.5.0",
2728
"mousetrap": "^1.6.3",
2829
"prismjs": "^1.16.0",
2930
"quasar": "^1.0.0",

‎src/App.vue

Lines changed: 132 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,139 @@
55
</template>
66

77
<script>
8+
import { SET_ACTIVE_COMPONENT } from './store/types'
9+
const deepEqual = require('lodash.isequal')
10+
const cloneDeep = require('lodash.clonedeep')
11+
import { defaultState } from './store/state/index.js'
12+
13+
let redoMixin = {
14+
data () {
15+
return {
16+
// banana:[],
17+
doneAction: [],
18+
undoneAction: [],
19+
isTimetraveling: false,
20+
initialState: {}
21+
}
22+
},
23+
24+
created () {
25+
this.$store.subscribeAction((action, state) => {
26+
// console.log("We are saving this action!", action)
27+
if (typeof action.payload === 'object') {
28+
// console.log("We saved the world with a deepclone!", action.payload === cloneDeep)
29+
action.payload = cloneDeep(action.payload)
30+
}
31+
this.doneAction.push(action)
32+
// console.log('this is the action we are logging',action)
33+
// console.log('this is in our redo queue', this.undoneAction[this.undoneAction.length-1])
34+
// console.log("Are these equal to each other?", action == this.undoneAction[this.undoneAction.length-1])
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)) {
39+
this.undoneAction.pop()
40+
} else {
41+
this.undoneAction = []
42+
}
43+
}
44+
}
45+
})
46+
// this.blankState = cloneDeep(this.$store)
47+
},
48+
49+
mounted () {
50+
window.addEventListener('keydown', event => {
51+
if (event.ctrlKey && event.key === 'z') {
52+
event.preventDefault()
53+
this.undo()
54+
}
55+
})
56+
window.addEventListener('keydown', event => {
57+
if (event.ctrlKey && event.key === 'y') {
58+
event.preventDefault()
59+
this.redo()
60+
}
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+
// });
79+
80+
// console.log("do we want this? or this.$store.state?", this.$store.state)
81+
this.initialState = defaultState(this.$store.state)
82+
},
83+
84+
methods: {
85+
undo: function () {
86+
// do {
87+
// console.log("How far back?")
88+
89+
this.isTimetraveling = true
90+
91+
let undone = this.doneAction.pop()
92+
93+
if (undone !== undefined) {
94+
this.undoneAction.push(undone)
95+
if (undone.type === 'setActiveComponent') {
96+
console.log('We did something useless!')
97+
do {
98+
this.undoneAction.push(this.doneAction.pop())
99+
}
100+
while (this.doneAction[this.doneAction.length - 1] &&
101+
(this.doneAction[this.doneAction.length - 1].type === 'setActiveComponent'))
102+
}
103+
}
104+
105+
// while (this.doneAction[this.doneAction.length-1] &&
106+
// (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
107+
// this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
108+
let payload = {
109+
initialState: this.initialState,
110+
store: this.$store
111+
}
112+
this.$store.commit('EMPTY_STATE', payload)
113+
console.log(this.$store)
114+
this.doneAction.forEach(action => {
115+
console.log('In the loop', this.$store)
116+
// this.$store.commit(`${mutation.type}`, mutation.payload);
117+
this.$store.dispatch(action.type, cloneDeep(action.payload))
118+
this.doneAction.pop()
119+
})
120+
this.isTimetraveling = false
121+
},
122+
redo: function () {
123+
let action = this.undoneAction.pop()
124+
this.isTimetraveling = true
125+
if (action) {
126+
this.$store.dispatch(action.type, cloneDeep(action.payload))
127+
}
128+
this.isTimetraveling = false
129+
if (action && (action.type === 'setActiveComponent')) {
130+
console.log('WE GOTTA DO MORE')
131+
this.redo()
132+
}
133+
}
134+
135+
}
136+
}
137+
8138
export default {
9-
name: 'App'
139+
name: 'App',
140+
mixins: [redoMixin]
10141
}
11142
</script>
12143

‎src/components/CodeSnippet.vue

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,16 @@ export default {
5353
createTemplate(componentName, children) {
5454
let output = ``;
5555
output += ` <div>\n`;
56-
children.forEach(name => {
57-
output += ` <${name}>\n </${name}>\n`;
58-
});
56+
// children.forEach(name => {
57+
// output += ` <${name}>\n </${name}>\n`;
58+
// });
5959
let templateTagStr = this.writeTemplateTag(componentName);
6060
return `<template>\n ${output}${templateTagStr} </div>\n</template>`;
6161
},
62+
63+
// We need a helper function to recursively iterate through the given html element's children and their children's children.
64+
65+
6266
writeTemplateTag(componentName) {
6367
// console.log('writeTemplateTag invoked!')
6468
// create reference object
@@ -75,14 +79,59 @@ export default {
7579
input: ['<input />', ''],
7680
navbar: ['<nav>', '</nav>'],
7781
};
82+
83+
function writeNested(childrenArray, indent){
84+
if(!childrenArray.length){
85+
return ''
86+
}
87+
let indented = indent + ' '
88+
let nestedString = ''
89+
90+
childrenArray.forEach(child => {
91+
nestedString += indented
92+
//console.log(child)
93+
if(!child.text){
94+
nestedString += `<${child}/>\n`
95+
}
96+
else{
97+
if(child.children.length){
98+
nestedString += htmlElementMap[child.text][0]
99+
nestedString += '\n';
100+
nestedString += writeNested(child.children,indented)
101+
nestedString += indented + htmlElementMap[child.text][1]
102+
nestedString += '\n'
103+
}
104+
else{
105+
nestedString += htmlElementMap[child.text][0]+htmlElementMap[child.text][1]+'\n';
106+
}
107+
}
108+
})
109+
return nestedString
110+
}
111+
112+
78113
// loop to iterate through compName arr
79114
let htmlArr = this.componentMap[componentName].htmlList;
80115
let outputStr = ``;
81116
for (let el of htmlArr) {
117+
//console.log(el)
118+
if(!el.text){
119+
outputStr += ` <${el}/>\n`
120+
}
121+
else{
82122
outputStr += ` `;
83-
outputStr += htmlElementMap[el.text][0];
84-
outputStr += htmlElementMap[el.text][1];
85-
outputStr += ` \n`;
123+
if(el.children.length){
124+
outputStr += htmlElementMap[el.text][0];
125+
outputStr += '\n'
126+
outputStr += writeNested(el.children,` `)
127+
outputStr += ` `
128+
outputStr += htmlElementMap[el.text][1];
129+
outputStr += ` \n`;
130+
}
131+
else{
132+
outputStr += htmlElementMap[el.text][0]+htmlElementMap[el.text][1]+'\n';
133+
}
134+
}
86135
}
87136
// console.log(`outputStr from writeTemplateTag: ${outputStr}`)
88137
return outputStr;

0 commit comments

Comments
 (0)