Skip to content

Commit 9d3bace

Browse files
keliphankeliphan
authored
Merge pull request #16 from LOLDragoon/keriannmerge
Added html-list rendering + delete logic, code-rendering logic.
2 parents 7f3e3f1 + 681c2bf commit 9d3bace

File tree

8 files changed

+216
-124
lines changed

8 files changed

+216
-124
lines changed

‎src/App.vue

Lines changed: 96 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -12,114 +12,114 @@ import {defaultState} from './store/state/index.js'
1212
1313
let redoMixin = {
1414
data() {
15-
return {
16-
// banana:[],
17-
doneAction:[],
18-
undoneAction:[],
19-
isTimetraveling: false,
20-
initialState:{}
21-
}
22-
},
23-
24-
created(){
25-
26-
this.$store.subscribeAction((action,state)=>{
27-
// console.log("We are saving this action!", action)
28-
if (typeof action.payload === "object"){
29-
// console.log("We saved the world with a deepclone!", action.payload === cloneDeep)
30-
action.payload = cloneDeep(action.payload)
31-
}
32-
this.doneAction.push(action)
33-
// console.log('this is the action we are logging',action)
34-
// console.log('this is in our redo queue', this.undoneAction[this.undoneAction.length-1])
35-
// 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)){
40-
this.undoneAction.pop()
41-
}
42-
else{
43-
this.undoneAction = []
44-
}
45-
}
46-
}
47-
})
48-
// this.blankState = cloneDeep(this.$store)
49-
},
15+
return {
16+
// banana:[],
17+
doneAction:[],
18+
undoneAction:[],
19+
isTimetraveling: false,
20+
initialState:{}
21+
}
22+
},
23+
24+
created() {
5025
51-
mounted(){
52-
window.addEventListener("keydown", event => {
53-
if (event.ctrlKey && event.key === "z") {
54-
event.preventDefault()
55-
this.undo()
26+
this.$store.subscribeAction((action, state) => {
27+
// console.log("We are saving this action!", action)
28+
if (typeof action.payload === "object") {
29+
// console.log("We saved the world with a deepclone!", action.payload === cloneDeep)
30+
action.payload = cloneDeep(action.payload)
31+
}
32+
this.doneAction.push(action)
33+
// console.log('this is the action we are logging',action)
34+
// console.log('this is in our redo queue', this.undoneAction[this.undoneAction.length-1])
35+
// 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)) {
40+
this.undoneAction.pop()
5641
}
57-
});
58-
window.addEventListener("keydown", event => {
59-
if (event.ctrlKey && event.key === "y") {
60-
event.preventDefault()
61-
this.redo()
42+
else {
43+
this.undoneAction = []
6244
}
63-
});
64-
//console.log("do we want this? or this.$store.state?", this.$store.state)
65-
this.initialState = defaultState(this.$store.state)
45+
}
46+
}
47+
})
48+
// this.blankState = cloneDeep(this.$store)
49+
},
6650
67-
},
51+
mounted(){
52+
window.addEventListener("keydown", event => {
53+
if (event.ctrlKey && event.key === "z") {
54+
event.preventDefault()
55+
this.undo()
56+
}
57+
});
58+
window.addEventListener("keydown", event => {
59+
if (event.ctrlKey && event.key === "y") {
60+
event.preventDefault()
61+
this.redo()
62+
}
63+
});
64+
//console.log("do we want this? or this.$store.state?", this.$store.state)
65+
this.initialState = defaultState(this.$store.state)
6866
69-
methods: {
70-
undo: function() {
71-
// do {
72-
// console.log("How far back?")
67+
},
7368
74-
this.isTimetraveling = true;
69+
methods: {
70+
undo: function() {
71+
// do {
72+
// console.log("How far back?")
7573
76-
let undone = this.doneAction.pop()
77-
78-
if(undone !== undefined){
79-
this.undoneAction.push(undone)
80-
if(undone.type==="setActiveComponent"){
81-
console.log("We did something useless!")
82-
do{
83-
this.undoneAction.push(this.doneAction.pop())
84-
}
85-
while (this.doneAction[this.doneAction.length-1] &&
86-
(this.doneAction[this.doneAction.length - 1].type === "setActiveComponent"))
87-
}
88-
}
74+
this.isTimetraveling = true;
8975
90-
// while (this.doneAction[this.doneAction.length-1] &&
91-
// (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
92-
// this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
93-
let payload = {
94-
initialState: this.initialState,
95-
store: this.$store
96-
}
97-
this.$store.commit("EMPTY_STATE",payload)
98-
console.log(this.$store)
99-
this.doneAction.forEach(action => {
100-
console.log("In the loop",this.$store)
101-
//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;
76+
let undone = this.doneAction.pop()
10677
107-
},
108-
redo: function() {
109-
110-
let action = this.undoneAction.pop()
111-
this.isTimetraveling = true;
112-
if(action){
113-
this.$store.dispatch(action.type, cloneDeep(action.payload))
114-
}
115-
this.isTimetraveling = false;
116-
if(action && (action.type === "setActiveComponent")){
117-
console.log("WE GOTTA DO MORE")
118-
this.redo();
119-
}
78+
if(undone !== undefined) {
79+
this.undoneAction.push(undone)
80+
if(undone.type==="setActiveComponent") {
81+
console.log("We did something useless!")
82+
do{
83+
this.undoneAction.push(this.doneAction.pop())
12084
}
85+
while (this.doneAction[this.doneAction.length-1] &&
86+
(this.doneAction[this.doneAction.length - 1].type === "setActiveComponent"))
87+
}
88+
}
12189
90+
// while (this.doneAction[this.doneAction.length-1] &&
91+
// (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
92+
// this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
93+
let payload = {
94+
initialState: this.initialState,
95+
store: this.$store
12296
}
97+
this.$store.commit("EMPTY_STATE",payload)
98+
console.log(this.$store)
99+
this.doneAction.forEach(action => {
100+
console.log("In the loop",this.$store)
101+
// 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+
107+
},
108+
redo: function() {
109+
110+
let action = this.undoneAction.pop()
111+
this.isTimetraveling = true;
112+
if(action) {
113+
this.$store.dispatch(action.type, cloneDeep(action.payload))
114+
}
115+
this.isTimetraveling = false;
116+
if(action && (action.type === "setActiveComponent")) {
117+
console.log("WE GOTTA DO MORE")
118+
this.redo();
119+
}
120+
}
121+
122+
}
123123
}
124124
125125

‎src/components/CodeSnippet.vue

Lines changed: 54 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,58 @@ 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 = indented
89+
90+
childrenArray.forEach(child => {
91+
console.log(child)
92+
if(!child.text){
93+
nestedString += `<${child}/>\n`
94+
}
95+
else{
96+
if(child.children.length){
97+
nestedString += htmlElementMap[child.text][0]
98+
nestedString += '\n';
99+
nestedString += writeNested(child.children,indented)
100+
nestedString += indented + htmlElementMap[child.text][1]
101+
nestedString += '\n'
102+
}
103+
else{
104+
nestedString += htmlElementMap[child.text][0]+htmlElementMap[child.text][1]+'\n';
105+
}
106+
}
107+
})
108+
return nestedString
109+
}
110+
111+
78112
// loop to iterate through compName arr
79113
let htmlArr = this.componentMap[componentName].htmlList;
80114
let outputStr = ``;
81115
for (let el of htmlArr) {
116+
console.log(el)
117+
if(!el.text){
118+
outputStr += ` <${el}/>\n`
119+
}
120+
else{
82121
outputStr += ` `;
83-
outputStr += htmlElementMap[el.text][0];
84-
outputStr += htmlElementMap[el.text][1];
85-
outputStr += ` \n`;
122+
if(el.children.length){
123+
outputStr += htmlElementMap[el.text][0];
124+
outputStr += '\n'
125+
outputStr += writeNested(el.children,` `)
126+
outputStr += ` `
127+
outputStr += htmlElementMap[el.text][1];
128+
outputStr += ` \n`;
129+
}
130+
else{
131+
outputStr += htmlElementMap[el.text][0]+htmlElementMap[el.text][1]+'\n';
132+
}
133+
}
86134
}
87135
// console.log(`outputStr from writeTemplateTag: ${outputStr}`)
88136
return outputStr;

‎src/components/ComponentDisplay.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export default {
119119
]),
120120
// used in VueDraggableResizeable component
121121
activeRouteArray() {
122-
console.log("active route array method", this.routes[this.activeRoute]);
122+
// console.log("active route array method", this.routes[this.activeRoute]);
123123
return this.routes[this.activeRoute];
124124
},
125125
// used to delete components
@@ -140,11 +140,11 @@ export default {
140140
if (!Object.keys(component.parent).length) return lineage;
141141
for(var parents in component.parent) {
142142
//for each parent in our component
143-
console.log('parents', parents)
143+
// console.log('parents', parents)
144144
lineage.push(parents); //push the parent into lineage
145-
console.log('lineage pre push', component, lineage)
145+
// console.log('lineage pre push', component, lineage)
146146
checkParents(component.parent[parents], lineage);
147-
console.log('lineage post recursive call', lineage)
147+
// console.log('lineage post recursive call', lineage)
148148
}
149149
// lineage.push(component.parent[component.componentName]);
150150
// return checkParents(component.parent, lineage);
@@ -159,7 +159,7 @@ export default {
159159
// console.log(this.componentMap[this.activeComponent].children)
160160
this.testModel = this.componentMap[this.activeComponent].children;
161161
lineage = checkParents(this.componentMap[this.activeComponent]);
162-
console.log('Lineage', lineage);
162+
//console.log('Lineage', lineage);
163163
}
164164
const routes = Object.keys(this.routes);
165165
const exceptions = new Set(["App", ...lineage, ...routes, ...this.testModel]);
@@ -187,7 +187,7 @@ export default {
187187
//console.log("updated")
188188
if(this.activeComponent === '')
189189
{
190-
if(this.$refs.boxes){
190+
if(this.$refs.boxes) {
191191
this.$refs.boxes.forEach((element)=> {
192192
element.enabled = false;
193193
element.$emit('deactivated')
@@ -272,7 +272,7 @@ export default {
272272
activeComponentData: this.activeComponentData
273273
}
274274
275-
//this.updateStartingSize(payload);
275+
// this.updateStartingSize(payload);
276276
277277
},
278278

‎src/components/ExportProject.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,9 @@ export default {
353353
this.createRouter(data);
354354
for (let [routeImage, imageLocation] of Object.entries(this.imagePath)) {
355355
// console.log('routeImage is ', routeImage);
356-
this.createAssetFile(path.join(data, "src", "assets", routeImage), imageLocation)
356+
if (imageLocation !== '') {
357+
this.createAssetFile(path.join(data, "src", "assets", routeImage), imageLocation)
358+
}
357359
};
358360
for (let componentName in this.componentMap) {
359361
// if componentName is a route:

‎src/components/HomeQueue.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
@start="drag = true"
1212
@end="drag = false"
1313
>
14-
<div class="list-group-item" v-for="(element, index) in renderList" :key="index + Date.now()">
15-
{{ element.text }}
16-
<i class="fas fa fa-trash fa-md" @click="deleteElement(index)"></i>
14+
<!-- <div class="list-group-item" v-for="(element, index) in renderList" :key="index + Date.now()"> -->
15+
<div class="list-group-item" v-for="(element) in renderList" :key="element[1] + Date.now()">
16+
{{ element[0] }}
17+
<i class="fas fa fa-trash fa-md" @click="deleteElement(element[1])"></i>
1718
</div>
1819
</draggable>
1920
</section>
@@ -44,7 +45,11 @@ export default {
4445
renderList: {
4546
get () {
4647
if (this.activeComponent === '') return this.selectedElementList
47-
return this.componentMap[this.activeComponent].htmlList
48+
// change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
49+
let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index]).filter(el => {
50+
return el[0] !== undefined
51+
})
52+
return sortedHTML
4853
},
4954
set (value) {
5055
this.$store.dispatch(setSelectedElementList, value)

0 commit comments

Comments
 (0)