Skip to content

Commit 50cc65c

Browse files
JojuOlaodeJojuOlaode
committed
pulled from master
2 parents 881663a + 5653461 commit 50cc65c

File tree

11 files changed

+698
-97
lines changed

11 files changed

+698
-97
lines changed

‎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: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,127 @@
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+
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+
},
50+
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)
66+
67+
},
68+
69+
methods: {
70+
undo: function() {
71+
// do {
72+
// console.log("How far back?")
73+
74+
this.isTimetraveling = true;
75+
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+
}
89+
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;
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+
}
123+
}
124+
125+
8126
export default {
9-
name: 'App'
127+
name: 'App',
128+
mixins:[redoMixin]
10129
}
11130
</script>
12131

‎src/components/ComponentDisplay.vue

Lines changed: 144 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
:key="componentData.componentName"
99
:id ="componentData.componentName"
1010
:x="componentData.x"
11-
:y="componentData.y + 20"
11+
:y="componentData.y"
1212
:z="componentData.z"
1313
:w="componentData.w"
1414
:h="componentData.h"
@@ -19,7 +19,13 @@
1919
@dragging="onDrag"
2020
@resizing="onResize"
2121
@dblclick.native="onDoubleClick(componentData)"
22+
@dragstop="finishedDrag"
23+
@resizestop="finishedResize"
24+
:onDragStart="recordInitialPosition"
25+
:onResizeStart="recordInitialSize"
2226
>
27+
<!-- :onDragStart="recordInitialPosition"
28+
:onResizeStart="recordInitialSize" -->
2329
<div class="component-title">
2430
<p>{{ componentData.componentName }}</p>
2531
</div>
@@ -85,7 +91,9 @@ export default {
8591
testOptions: ["parent", "child", "grandchild"],
8692
testModel: [],
8793
mockImg: false,
88-
counter: 0
94+
counter: 0,
95+
initialPosition:{x:0, y:0,},
96+
initialSize:{w:0,h:0,},
8997
};
9098
},
9199
mounted() {
@@ -176,32 +184,47 @@ export default {
176184
}
177185
},
178186
updated() {
179-
console.log("updated")
187+
//console.log("updated")
180188
if(this.activeComponent === '')
181189
{
190+
if(this.$refs.boxes){
182191
this.$refs.boxes.forEach((element)=> {
192+
<<<<<<< HEAD
183193
element.enabled = false;
184194
element.$emit('deactivated')
185195
element.$emit('update:active', false)
186196
})
197+
=======
198+
element.enabled = false;
199+
element.$emit('deactivated')
200+
element.$emit('update:active', false)
201+
202+
})}
203+
>>>>>>> master
187204
}
188205
else{
189-
this.$refs.boxes.forEach((element)=>{
190-
if(this.activeComponent === element.$attrs.id)
191-
{
192-
element.enabled = true
193-
element.$emit('activated')
194-
element.$emit('update:active', true)
195-
}
196-
})
197-
}
198-
},
206+
this.$refs.boxes.forEach((element)=>{
207+
// added "element.enabled === false to stop it from emitting a change every frame the box moves
208+
//may need to re-enable to track box movement and resizing since that stuff isn't part of a single source of truth.
209+
if(this.activeComponent === element.$attrs.id && element.enabled === false)
210+
{
211+
element.enabled = true
212+
element.$emit('activated')
213+
element.$emit('update:active', true)
214+
}
215+
})
216+
}
217+
},
199218
200219
methods: {
201220
...mapActions([
202221
"setActiveComponent",
203222
"updateComponentChildrenMultiselectValue",
204-
"updateActiveComponentChildrenValue"
223+
"updateActiveComponentChildrenValue",
224+
"updateComponentPosition",
225+
"updateStartingPosition",
226+
"updateStartingSize",
227+
"updateComponentSize",
205228
]),
206229
onResize: function(x, y, width, height) {
207230
this.activeComponentData.x = x;
@@ -214,6 +237,71 @@ export default {
214237
this.componentMap[this.activeComponent].w = width;
215238
this.componentMap[this.activeComponent].h = height;
216239
},
240+
241+
recordInitialPosition: function(e) {
242+
console.log("we started a drag")
243+
console.log("this.intialPosition",this.initialPosition)
244+
console.log("WHAT IS THIS", this)
245+
if(this.activeComponent !== e.target.id){
246+
this.setActiveComponent(e.target.id)
247+
}
248+
this.initialPosition.x = this.activeComponentData.x
249+
this.initialPosition.y = this.activeComponentData.y
250+
// console.log(this.activeComponentData)
251+
// console.log(this.activeComponentData.x)
252+
// console.log(this.initialPosition.x)
253+
// console.log(this.initialPosition.y)
254+
255+
let payload = {
256+
x: this.initialPosition.x,
257+
y: this.initialPosition.y,
258+
activeComponent: this.activeComponent,
259+
routeArray: this.routes[this.activeRoute],
260+
activeComponentData: this.activeComponentData
261+
}
262+
console.log("x: ",payload.x,"y: ",payload.y)
263+
//this.updateStartingPosition(payload);
264+
},
265+
266+
recordInitialSize: function(e){
267+
console.log("MAKE MY MONSTER GROW!")
268+
269+
this.initialSize.h = this.activeComponentData.h
270+
this.initialSize.w = this.activeComponentData.w
271+
this.initialPosition.x = this.activeComponentData.x
272+
this.initialPosition.y = this.activeComponentData.y
273+
274+
let payload = {
275+
h: this.initialSize.h,
276+
w: this.initialSize.w,
277+
x: this.activeComponentData.x,
278+
y: this.activeComponentData.y,
279+
activeComponent: this.activeComponent,
280+
routeArray: this.routes[this.activeRoute],
281+
activeComponentData: this.activeComponentData
282+
}
283+
284+
//this.updateStartingSize(payload);
285+
286+
},
287+
288+
finishedResize: function(x,y,w,h){
289+
console.log("FINISHED RESIZING")
290+
let payload = {
291+
x: x,
292+
y: y,
293+
w: w,
294+
h: h,
295+
activeComponent: this.activeComponent,
296+
routeArray: this.routes[this.activeRoute],
297+
activeComponentData: this.activeComponentData
298+
}
299+
if(payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y ||
300+
payload.w !== this.initialSize.w || payload.h !==this.initialSize.h){
301+
this.updateComponentSize(payload)
302+
}
303+
},
304+
217305
onDrag: function(x, y) {
218306
this.activeComponentData.x = x;
219307
this.activeComponentData.y = y;
@@ -222,19 +310,51 @@ export default {
222310
this.componentMap[this.activeComponent].y = y;
223311
this.userImage;
224312
},
225-
onLayer: function(z) {
226-
this.activeComponentData.z = z;
313+
// onLayer: function(z) {
314+
// this.activeComponentData.z = z;
315+
// // Want to change the "Z" of the component found in Routes[activeRoute][whatever the component is]
316+
// //have to do this via an action or it won't be preserved in our undo/redo
317+
// },
318+
319+
finishedDrag: function(x,y){
320+
console.log("FINISHED DRAGGING")
321+
let payload = {
322+
x: x,
323+
y: y,
324+
activeComponent: this.activeComponent,
325+
routeArray: this.routes[this.activeRoute],
326+
activeComponentData: this.activeComponentData
327+
}
328+
// console.log("Payload.x = ", payload.x, "this.initialPosition.x", this.initialPosition.x)
329+
// console.log("Payload.y = ", payload.y, "this.initialPosition.y", this.initialPosition.y)
330+
if(payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y){
331+
this.updateComponentPosition(payload);
332+
}
227333
},
334+
228335
onActivated(componentData) {
336+
<<<<<<< HEAD
229337
this.$refs.boxes.forEach((element)=> {
230338
if (element.$attrs.id !== componentData.componentName) {
231339
element.enabled = false;
340+
=======
341+
//console.log("I RAN!")
342+
this.$refs.boxes.forEach((element)=> {
343+
if (element.$attrs.id !== componentData.componentName){
344+
element.enabled = false;
345+
>>>>>>> master
232346
element.$emit('deactivated')
233347
element.$emit('update:active', false)
234348
}
235349
})
236-
this.setActiveComponent(componentData.componentName);
350+
// console.log("this is what is currently active",this.activeComponent)
351+
// console.log("this is this", this)
352+
// console.log('!(componentData.componentName === this.activeComponent)?',!(componentData.componentName === this.activeComponent))
353+
if(!(componentData.componentName === this.activeComponent)){
354+
this.setActiveComponent(componentData.componentName);
355+
}
237356
this.activeComponentData.isActive = true;
357+
238358
239359
},
240360
@@ -252,7 +372,9 @@ export default {
252372
// }
253373
},
254374
onDoubleClick(compData) {
255-
this.setActiveComponent(compData.componentName);
375+
if(!(componentData.componentName === this.activeComponent)){
376+
this.setActiveComponent(componentData.componentName);
377+
}
256378
this.activeComponentData.isActive = true;
257379
},
258380
handleAddChild() {
@@ -290,7 +412,9 @@ export default {
290412
handleClick(event) {
291413
if(event.target.className === "component-display grid-bg")
292414
{
293-
this.setActiveComponent('')
415+
if(!('' === this.activeComponent)){
416+
this.setActiveComponent('');
417+
}
294418
}
295419
}
296420
}
@@ -309,7 +433,7 @@ export default {
309433
/* width: 1rem; */
310434
line-height: 1.2;
311435
/* margin: 10px; */
312-
z-index: 0;
436+
z-index: -1;
313437
}
314438
.component-children {
315439
position: absolute;

0 commit comments

Comments
 (0)