Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add window size to vuex state

Browse Source
This commit is contained in:
James Lyne 2022-01-10 19:30:21 +00:00
parent 6d29a0f195
commit df1d2ee73b
4 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -123,7 +123,7 @@ export default defineComponent({
},
onResize = () => {
store.commit(MutationTypes.SET_SMALL_SCREEN, window.innerWidth < 480 || window.innerHeight < 500);
store.commit(MutationTypes.SET_SCREEN_SIZE, {width: window.innerWidth, height: window.innerHeight});
},
onKeydown = (e: KeyboardEvent) => {

2
src/store/mutation-types.ts
View File

@ -49,7 +49,7 @@ export enum MutationTypes {
CLEAR_FOLLOW_TARGET = 'clearFollow',
CLEAR_PAN_TARGET = 'clearPanTarget',
SET_SMALL_SCREEN = 'setSmallScreen',
SET_SCREEN_SIZE = 'setScreenSize',
TOGGLE_UI_ELEMENT_VISIBILITY = 'toggleUIElementVisibility',
SET_UI_ELEMENT_VISIBILITY = 'setUIElementVisibility',
SHOW_UI_MODAL = 'showUIModal',

9
src/store/mutations.ts
View File

@ -82,7 +82,7 @@ export type Mutations<S = State> = {
[MutationTypes.CLEAR_FOLLOW_TARGET](state: S, a?: void): void
[MutationTypes.CLEAR_PAN_TARGET](state: S, a?: void): void
[MutationTypes.SET_SMALL_SCREEN](state: S, payload: boolean): void
[MutationTypes.SET_SCREEN_SIZE](state: S, payload: {width: number, height: number}): void
[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: S, payload: LiveAtlasUIElement): void
[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: S, payload: {element: LiveAtlasUIElement, state: boolean}): void
[MutationTypes.SHOW_UI_MODAL](state: S, payload: LiveAtlasUIModal): void
@ -564,7 +564,12 @@ export const mutations: MutationTree<State> & Mutations = {
state.panTarget = undefined;
},
[MutationTypes.SET_SMALL_SCREEN](state: State, smallScreen: boolean): void {
[MutationTypes.SET_SCREEN_SIZE](state: State, payload: {width: number, height: number}): void {
state.ui.screenWidth = payload.width;
state.ui.screenHeight = payload.height;
const smallScreen = state.ui.screenWidth < 480 || state.ui.screenHeight < 500;
if(!state.ui.smallScreen && smallScreen && state.ui.visibleElements.size > 1) {
state.ui.visibleElements.clear();
}

4
src/store/state.ts
View File

@ -78,6 +78,8 @@ export type State = {
playersSearch: boolean;
compactPlayerMarkers: boolean;
screenWidth: number;
screenHeight: number;
smallScreen: boolean;
visibleElements: Set<LiveAtlasUIElement>;
visibleModal?: LiveAtlasUIModal;
@ -255,6 +257,8 @@ export const state: State = {
playersSearch: true,
compactPlayerMarkers: false,
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
smallScreen: false,
visibleElements: new Set(),
visibleModal: undefined,