Skip to content

Commit 68d6f38

Browse files
JojuOlaodeJojuOlaode
committed
pulled from alex
2 parents 881663a + 0944cb8 commit 68d6f38

File tree

11 files changed

+661
-108
lines changed

11 files changed

+661
-108
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: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,119 @@
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+
12+
13+
let redoMixin = {
14+
data() {
15+
return {
16+
// banana:[],
17+
doneAction:[],
18+
undoneAction:[],
19+
isTimetraveling: false
20+
}
21+
},
22+
23+
created(){
24+
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+
}
41+
else{
42+
this.undoneAction = []
43+
}
44+
}
45+
}
46+
})
47+
// this.blankState = cloneDeep(this.$store)
48+
},
49+
50+
mounted(){
51+
window.addEventListener("keydown", event => {
52+
if (event.ctrlKey && event.key === "z") {
53+
event.preventDefault()
54+
this.undo()
55+
}
56+
});
57+
window.addEventListener("keydown", event => {
58+
if (event.ctrlKey && event.key === "y") {
59+
event.preventDefault()
60+
this.redo()
61+
}
62+
});
63+
},
64+
65+
methods: {
66+
undo: function() {
67+
// do {
68+
// console.log("How far back?")
69+
70+
this.isTimetraveling = true;
71+
72+
let undone = this.doneAction.pop()
73+
74+
if(undone !== undefined){
75+
this.undoneAction.push(undone)
76+
if(undone.type==="setActiveComponent"){
77+
console.log("We did something useless!")
78+
do{
79+
this.undoneAction.push(this.doneAction.pop())
80+
}
81+
while (this.doneAction[this.doneAction.length-1] &&
82+
(this.doneAction[this.doneAction.length - 1].type === "setActiveComponent"))
83+
}
84+
}
85+
86+
// while (this.doneAction[this.doneAction.length-1] &&
87+
// (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
88+
// this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
89+
this.$store.commit("EMPTY_STATE",this.$store)
90+
console.log(this.$store)
91+
this.doneAction.forEach(action => {
92+
console.log("In the loop",this.$store)
93+
//this.$store.commit(`${mutation.type}`, mutation.payload);
94+
this.$store.dispatch(action.type, cloneDeep(action.payload));
95+
this.doneAction.pop();
96+
});
97+
this.isTimetraveling = false;
98+
99+
},
100+
redo: function() {
101+
102+
let action = this.undoneAction.pop()
103+
this.isTimetraveling = true;
104+
if(action){
105+
this.$store.dispatch(action.type, cloneDeep(action.payload))
106+
}
107+
this.isTimetraveling = false;
108+
if(action && (action.type === "setActiveComponent")){
109+
console.log("WE GOTTA DO MORE")
110+
this.redo();
111+
}
112+
}
113+
114+
}
115+
}
116+
117+
8118
export default {
9-
name: 'App'
119+
name: 'App',
120+
mixins:[redoMixin]
10121
}
11122
</script>
12123

‎src/components/ComponentDisplay.vue

Lines changed: 136 additions & 31 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>
@@ -77,18 +83,20 @@ export default {
7783
components: {
7884
VueDraggableResizable
7985
},
80-
data() {
86+
data () {
8187
// console.log("Component Map", this.componentMap);
8288
return {
8389
modalOpen: false,
8490
abilityToDelete: false,
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
},
91-
mounted() {
99+
mounted () {
92100
// when component is mounted add ability to delete
93101
94102
window.addEventListener("keyup", event => {
@@ -176,19 +184,21 @@ export default {
176184
}
177185
},
178186
updated() {
179-
console.log("updated")
180-
if(this.activeComponent === '')
181-
{
182-
this.$refs.boxes.forEach((element)=> {
183-
element.enabled = false;
184-
element.$emit('deactivated')
185-
element.$emit('update:active', false)
186-
})
187+
//console.log("updated")
188+
if (this.activeComponent === '') {
189+
if (this.$refs.boxes) {
190+
this.$refs.boxes.forEach((element) => {
191+
element.enabled = false;
192+
element.$emit('deactivated')
193+
element.$emit('update:active', false)
194+
})
195+
}
187196
}
188-
else{
197+
else {
189198
this.$refs.boxes.forEach((element)=>{
190-
if(this.activeComponent === element.$attrs.id)
191-
{
199+
// added "element.enabled === false to stop it from emitting a change every frame the box moves
200+
// may need to re-enable to track box movement and resizing since that stuff isn't part of a single source of truth.
201+
if (this.activeComponent === element.$attrs.id && element.enabled === false) {
192202
element.enabled = true
193203
element.$emit('activated')
194204
element.$emit('update:active', true)
@@ -201,7 +211,11 @@ export default {
201211
...mapActions([
202212
"setActiveComponent",
203213
"updateComponentChildrenMultiselectValue",
204-
"updateActiveComponentChildrenValue"
214+
"updateActiveComponentChildrenValue",
215+
"updateComponentPosition",
216+
"updateStartingPosition",
217+
"updateStartingSize",
218+
"updateComponentSize",
205219
]),
206220
onResize: function(x, y, width, height) {
207221
this.activeComponentData.x = x;
@@ -214,6 +228,70 @@ export default {
214228
this.componentMap[this.activeComponent].w = width;
215229
this.componentMap[this.activeComponent].h = height;
216230
},
231+
232+
recordInitialPosition: function(e) {
233+
console.log("we started a drag")
234+
console.log("this.intialPosition",this.initialPosition)
235+
console.log("WHAT IS THIS", this)
236+
if (this.activeComponent !== e.target.id) {
237+
this.setActiveComponent(e.target.id)
238+
}
239+
this.initialPosition.x = this.activeComponentData.x
240+
this.initialPosition.y = this.activeComponentData.y
241+
// console.log(this.activeComponentData)
242+
// console.log(this.activeComponentData.x)
243+
// console.log(this.initialPosition.x)
244+
// console.log(this.initialPosition.y)
245+
246+
let payload = {
247+
x: this.initialPosition.x,
248+
y: this.initialPosition.y,
249+
activeComponent: this.activeComponent,
250+
routeArray: this.routes[this.activeRoute],
251+
activeComponentData: this.activeComponentData
252+
}
253+
console.log("x: ",payload.x,"y:",payload.y)
254+
// this.updateStartingPosition(payload);
255+
},
256+
257+
recordInitialSize: function (e) {
258+
// console.log("MAKE MY MONSTER GROW!")
259+
this.initialSize.h = this.activeComponentData.h
260+
this.initialSize.w = this.activeComponentData.w
261+
this.initialPosition.x = this.activeComponentData.x
262+
this.initialPosition.y = this.activeComponentData.y
263+
264+
let payload = {
265+
h: this.initialSize.h,
266+
w: this.initialSize.w,
267+
x: this.activeComponentData.x,
268+
y: this.activeComponentData.y,
269+
activeComponent: this.activeComponent,
270+
routeArray: this.routes[this.activeRoute],
271+
activeComponentData: this.activeComponentData
272+
}
273+
274+
//this.updateStartingSize(payload);
275+
276+
},
277+
278+
finishedResize: function(x,y,w,h) {
279+
console.log("FINISHED RESIZING")
280+
let payload = {
281+
x: x,
282+
y: y,
283+
w: w,
284+
h: h,
285+
activeComponent: this.activeComponent,
286+
routeArray: this.routes[this.activeRoute],
287+
activeComponentData: this.activeComponentData
288+
}
289+
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y ||
290+
payload.w !== this.initialSize.w || payload.h !==this.initialSize.h) {
291+
this.updateComponentSize(payload)
292+
}
293+
},
294+
217295
onDrag: function(x, y) {
218296
this.activeComponentData.x = x;
219297
this.activeComponentData.y = y;
@@ -222,26 +300,50 @@ export default {
222300
this.componentMap[this.activeComponent].y = y;
223301
this.userImage;
224302
},
225-
onLayer: function(z) {
226-
this.activeComponentData.z = z;
303+
// onLayer: function(z) {
304+
// this.activeComponentData.z = z;
305+
// // Want to change the "Z" of the component found in Routes[activeRoute][whatever the component is]
306+
// //have to do this via an action or it won't be preserved in our undo/redo
307+
// },
308+
309+
finishedDrag: function(x,y) {
310+
console.log("FINISHED DRAGGING")
311+
let payload = {
312+
x: x,
313+
y: y,
314+
activeComponent: this.activeComponent,
315+
routeArray: this.routes[this.activeRoute],
316+
activeComponentData: this.activeComponentData
317+
}
318+
// console.log("Payload.x = ", payload.x, "this.initialPosition.x", this.initialPosition.x)
319+
// console.log("Payload.y = ", payload.y, "this.initialPosition.y", this.initialPosition.y)
320+
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y) {
321+
this.updateComponentPosition(payload);
322+
}
227323
},
228-
onActivated(componentData) {
229-
this.$refs.boxes.forEach((element)=> {
324+
325+
onActivated (componentData) {
326+
//console.log("I RAN!")
327+
this.$refs.boxes.forEach((element) => {
230328
if (element.$attrs.id !== componentData.componentName) {
231329
element.enabled = false;
232330
element.$emit('deactivated')
233331
element.$emit('update:active', false)
234332
}
235333
})
236-
this.setActiveComponent(componentData.componentName);
334+
// console.log("this is what is currently active",this.activeComponent)
335+
// console.log("this is this", this)
336+
// console.log('!(componentData.componentName === this.activeComponent)?',!(componentData.componentName === this.activeComponent))
337+
if (!(componentData.componentName === this.activeComponent)) {
338+
this.setActiveComponent(componentData.componentName);
339+
}
237340
this.activeComponentData.isActive = true;
238-
239341
},
240342
241343
// deactivated is emitted before activated
242344
243-
onDeactivated(componentData) {
244-
if(this.activeComponent !== '') {
345+
onDeactivated (componentData) {
346+
if (this.activeComponent !== '') {
245347
this.activeComponentData.isActive = false;
246348
}
247349
// console.log("Componentdataname", componentData.componentName)
@@ -251,8 +353,10 @@ export default {
251353
// console.log("We just clicked without making a new active component")
252354
// }
253355
},
254-
onDoubleClick(compData) {
255-
this.setActiveComponent(compData.componentName);
356+
onDoubleClick (compData) {
357+
if (!(componentData.componentName === this.activeComponent)) {
358+
this.setActiveComponent(componentData.componentName);
359+
}
256360
this.activeComponentData.isActive = true;
257361
},
258362
handleAddChild() {
@@ -287,10 +391,11 @@ export default {
287391
// this.setActiveComponent(compData.componentName)
288392
// this.activeComponentData.isActive = true
289393
// }
290-
handleClick(event) {
291-
if(event.target.className === "component-display grid-bg")
292-
{
293-
this.setActiveComponent('')
394+
handleClick (event) {
395+
if (event.target.className === "component-display grid-bg") {
396+
if (!('' === this.activeComponent)) {
397+
this.setActiveComponent('');
398+
}
294399
}
295400
}
296401
}
@@ -309,7 +414,7 @@ export default {
309414
/* width: 1rem; */
310415
line-height: 1.2;
311416
/* margin: 10px; */
312-
z-index: 0;
417+
z-index: -1;
313418
}
314419
.component-children {
315420
position: absolute;

0 commit comments

Comments
 (0)