Skip to content

Commit 280519e

Browse files
EGenesenEGenesen
authored
Merge pull request #6 from oslabs-beta/chris/moreGrid
added grid manipulation functionality
2 parents e1ee5f5 + f1338bc commit 280519e

File tree

8 files changed

+172
-22
lines changed

8 files changed

+172
-22
lines changed

‎src/components/Canvas.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -600,14 +600,8 @@ export default {
600600
routeArray: this.routes[this.activeRoute],
601601
activeComponentData: this.activeComponentData,
602602
};
603-
// graveyard if statement- only used in canvas.vue
604-
// if (
605-
// payload.x !== this.initialPosition.x ||
606-
// payload.y !== this.initialPosition.y
607-
// ) {
608603
this.updateComponentPosition(payload);
609604
this.updateComponentGridPosition(payload);
610-
// }
611605
this.wasDragged = true;
612606
setTimeout(() => this.wasDragged = false, 100)
613607
this.refresh();

‎src/components/left-sidebar/ComponentTab/CreateMenu.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ Description:
1111

1212

1313
<q-expansion-item group="accordion" label="Import Component">
14-
<!-- !THIS IS THE IMPORT COMPONENT TAB WE NEED TO WORK ON -->
1514
<ImportComponent v-if="activeComponent === ''" @imported="createComponent" title="Import Component (coming soon)" class="sidebar-btn" :disable = "true"/>
1615
</q-expansion-item>
1716
<q-expansion-item group="accordion" label="Create Component" >

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -466,6 +466,8 @@ export default {
466466
.router-view {
467467
margin:auto;
468468
background-color: gray;
469+
height: 720px;
470+
width: 1280px;
469471
}
470472
</style >`
471473
} else return `\n\n<style scoped>\n${styleString}</style >`;

‎src/components/nav-buttons/GridDensity.vue

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<div id="gridDensity">
3+
<q-btn-dropdown class="q-btn" color="purple" label="Width">
4+
<q-list>
5+
<q-item clickable v-close-popup @click="pickGridDensity('width', 5)">
6+
<q-item-section>
7+
<q-item-label>5 increments</q-item-label>
8+
</q-item-section>
9+
</q-item>
10+
11+
<q-item clickable v-close-popup @click="pickGridDensity('width', 10)">
12+
<q-item-section>
13+
<q-item-label>10 increments</q-item-label>
14+
</q-item-section>
15+
</q-item>
16+
17+
<q-item clickable v-close-popup @click="pickGridDensity('width', 15)">
18+
<q-item-section>
19+
<q-item-label>15 increments</q-item-label>
20+
</q-item-section>
21+
</q-item>
22+
23+
<q-item clickable v-close-popup @click="pickGridDensity('width', 30)">
24+
<q-item-section>
25+
<q-item-label>30 increments</q-item-label>
26+
</q-item-section>
27+
</q-item>
28+
29+
<q-item clickable v-close-popup @click="pickGridDensity('width', 40)">
30+
<q-item-section>
31+
<q-item-label>40 increments</q-item-label>
32+
</q-item-section>
33+
</q-item>
34+
</q-list>
35+
</q-btn-dropdown>
36+
<q-btn-dropdown color="purple" label="Height">
37+
<q-list>
38+
<q-item clickable v-close-popup @click="pickGridDensity('height', 5)">
39+
<q-item-section>
40+
<q-item-label>5 increments</q-item-label>
41+
</q-item-section>
42+
</q-item>
43+
44+
<q-item clickable v-close-popup @click="pickGridDensity('height', 10)">
45+
<q-item-section>
46+
<q-item-label>10 increments</q-item-label>
47+
</q-item-section>
48+
</q-item>
49+
50+
<q-item clickable v-close-popup @click="pickGridDensity('height', 15)">
51+
<q-item-section>
52+
<q-item-label>15 increments</q-item-label>
53+
</q-item-section>
54+
</q-item>
55+
56+
<q-item clickable v-close-popup @click="pickGridDensity('height', 30)">
57+
<q-item-section>
58+
<q-item-label>30 increments</q-item-label>
59+
</q-item-section>
60+
</q-item>
61+
62+
<q-item clickable v-close-popup @click="pickGridDensity('height', 40)">
63+
<q-item-section>
64+
<q-item-label>40 increments</q-item-label>
65+
</q-item-section>
66+
</q-item>
67+
</q-list>
68+
</q-btn-dropdown>
69+
</div>
70+
</template>
71+
72+
<script>
73+
import { mapState, mapActions } from "vuex";
74+
75+
export default {
76+
name: "GridDensity",
77+
computed: {
78+
...mapState([
79+
"gridLayout",
80+
]),
81+
},
82+
methods: {
83+
...mapActions([
84+
"changeGridDensity"
85+
]),
86+
pickGridDensity(direction, densityNum){
87+
let payload = {
88+
direction:direction,
89+
densityNum:densityNum,
90+
}
91+
this.changeGridDensity(payload);
92+
},
93+
},
94+
}
95+
</script>
96+
97+
<style scoped lang="scss">
98+
#gridDensity {
99+
margin-left: 15px;
100+
}
101+
.q-btn {
102+
padding: 5px 20px;
103+
margin-right: 15px;
104+
}
105+
.q-expansion-item {
106+
margin-bottom: 10px;
107+
}
108+
</style>

‎src/layouts/MyLayout.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ Description:
3636
></i>
3737
<i v-else class="fa fa-redo unavailable" aria-hidden="true"></i>
3838
</q-btn>
39+
<GridDensity />
3940
</div></q-toolbar-title>
4041
<div></div>
4142

@@ -143,6 +144,7 @@ import RightSidebar from "../components/right-sidebar/RightSidebar.vue";
143144
import ExportMenu from "../components/nav-buttons/ExportMenu.vue";
144145
import SaveProject from "../components/nav-buttons/SaveProject.vue";
145146
import ImportMenu from "../components/nav-buttons/ImportMenu.vue";
147+
import GridDensity from "../components/nav-buttons/GridDensity.vue";
146148
import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
147149
import ComponentTab from "../components/left-sidebar/ComponentTab/ComponentTab.vue";
148150
import StoreTab from "../components/left-sidebar/StoreTab/StoreTab.vue";
@@ -171,6 +173,7 @@ export default {
171173
SlackLoginWindow,
172174
ComponentTab,
173175
StoreTab,
176+
GridDensity
174177
},
175178
computed: {
176179
...mapState(["exportAsTypescript"]),

‎src/store/actions.js

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -401,21 +401,29 @@ const actions = {
401401
[types.addProject]: ({ commit }, payload) => {
402402
commit(types.ADD_PROJECT, payload);
403403
},
404-
//change library array
405-
[types.changeLib]: ({ commit }, payload) => {
406-
commit(types.CHANGE_LIB, payload)
407-
},
408-
[types.changeLibComponentDisplay]: ({ commit }, payload) => {
409-
commit(types.CHANGE_LIB_COMPONENT_DISPLAY, payload)
410-
},
411-
[types.addLibComponents]: ({ commit }, payload) => {
412-
// adds element to the HTMLQueue
413-
commit(types.ADD_LIB_COMPONENTS, payload);
414-
},
404+
405+
//change library array
406+
[types.changeLib]: ({ commit }, payload) => {
407+
commit(types.CHANGE_LIB, payload)
408+
},
409+
410+
[types.changeLibComponentDisplay]: ({ commit }, payload) => {
411+
commit(types.CHANGE_LIB_COMPONENT_DISPLAY, payload)
412+
},
413+
414+
[types.addLibComponents]: ({ commit }, payload) => {
415+
// adds element to the HTMLQueue
416+
commit(types.ADD_LIB_COMPONENTS, payload);
417+
},
418+
419+
//change grid density
420+
[types.changeGridDensity]: ({ commit }, payload) => {
421+
commit(types.CHANGE_GRID_DENSITY, payload);
422+
},
423+
415424
// end of loading///////////////////////////////////////////////////
416425
};
417426

418-
419427
// Action Graveyard/////////////////////////////////////////
420428
// These actions are either not called or have been removed, maybe you have use for them so we kept them here
421429

‎src/store/mutations.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1047,26 +1047,59 @@ const mutations = {
10471047
[payload.route]: payload.img.replace(/\\/g, "/"),
10481048
};
10491049
},
1050+
10501051
[types.CLEAR_IMAGE]: (state, payload) => {
10511052
if (state.imagePath[payload.route]) state.imagePath[payload.route] = "";
10521053
},
1054+
10531055
[types.SET_IMAGE_PATH]: (state, payload) => {
10541056
state.imagePath = { ...state.imagePath, ...payload };
10551057
},
1058+
10561059
//change library array
10571060
[types.CHANGE_LIB]: (state, payload) => {
10581061
state.importLibraries.push(payload.libName);
10591062

10601063
},
1064+
10611065
[types.CHANGE_LIB_COMPONENT_DISPLAY]: (state, payload) => {
10621066
state.displaylibComponent = payload.displaylibComponent;
1063-
},
1067+
},
10641068

1065-
[types.ADD_LIB_COMPONENTS]: (state, payload) => {
1069+
[types.ADD_LIB_COMPONENTS]: (state, payload) => {
10661070
for(let key in payload){
10671071
state.icons[key] = payload[key];
10681072
}
1069-
},
1073+
},
1074+
1075+
// change grid density
1076+
[types.CHANGE_GRID_DENSITY]: (state, payload) => {
1077+
// state.gridLayout = payload.direction === 'height' ? [state.gridLayout[0], payload.densityNum]:[payload.densityNum, state.gridLayout[1]];
1078+
console.log(payload);
1079+
if (payload.direction === 'height'){
1080+
state.gridLayout[1] = payload.densityNum;
1081+
1082+
}
1083+
else {
1084+
state.gridLayout[0] = payload.densityNum;
1085+
}
1086+
state.routes[state.activeRoute].forEach((updatedComponent) => {
1087+
if (updatedComponent.w === undefined) { updatedComponent.w = (2 * state.containerW / state.gridLayout[0]); }
1088+
if (updatedComponent.h === undefined) { updatedComponent.h = (2 * state.containerH / state.gridLayout[1]); }
1089+
// add one - CSS grid-area is one-indexed
1090+
const rowStart = 1 + Math.round(state.gridLayout[0] * updatedComponent.x / state.containerW) ;
1091+
const colStart = 1 + Math.round(state.gridLayout[1] * updatedComponent.y / state.containerH);
1092+
const rowEnd = 1 + Math.round(state.gridLayout[0] * (updatedComponent.x + updatedComponent.w) / state.containerW);
1093+
const colEnd = 1 + Math.round(state.gridLayout[1] * (updatedComponent.y + updatedComponent.h) / state.containerH);
1094+
updatedComponent.htmlAttributes.gridArea = [rowStart, colStart, rowEnd, colEnd];
1095+
updatedComponent.x = (rowStart - 1) * state.containerW / state.gridLayout[0];
1096+
updatedComponent.y = (colStart - 1) * state.containerH / state.gridLayout[1];
1097+
updatedComponent.w = (rowEnd - 1) * state.containerW / state.gridLayout[0] - updatedComponent.x;
1098+
updatedComponent.h = (colEnd - 1) * state.containerH / state.gridLayout[1] - updatedComponent.y;
1099+
// Math.round((rowEnd - 1) * state.containerW / state.gridLayout[0]) - updatedComponent.x
1100+
}
1101+
);
1102+
},
10701103
// *** INACTIVE MUTATIONS - kept for reference *** //////////////////////////////////////////////
10711104

10721105
// [types.SET_STATE]: (state, payload) => {

‎src/store/types.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export const OPEN_COLOR_MODAL = 'OPEN_COLOR_MODAL'
7575
export const CHANGE_LIB = 'CHANGE_LIB'
7676
export const CHANGE_LIB_COMPONENT_DISPLAY = 'CHANGE_LIB_COMPONENT_DISPLAY'
7777
export const ADD_LIB_COMPONENTS ='ADD_LIB_COMPONENTS'
78+
export const CHANGE_GRID_DENSITY = 'CHANGE_GRID_DENSITY'
7879
//Jace practest
7980
export const OPEN_ATTRIBUTE_MODAL = 'OPEN_ATTRIBUTE_MODAL'
8081
export const ADD_ACTIVE_COMPONENT_CLASS = 'ADD_ACTIVE_COMPONENT_CLASS'
@@ -197,6 +198,8 @@ export const changeLib= 'changeLib'
197198
export const changeLibComponentDisplay ='changeLibComponentDisplay'
198199

199200
export const addLibComponents ='addLibComponents'
201+
//change grid density
202+
export const changeGridDensity = 'changeGridDensity'
200203
// inactive mutations
201204
// export const SET_STATE = 'SET_STATE'
202205
// export const DELETE_COMPONENT = 'DELETE_COMPONENT'

0 commit comments

Comments
 (0)