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

Lazily render PlayerList

Browse Source
This commit is contained in:
James Lyne 2021-01-26 18:20:47 +00:00
parent 2251ca3e25
commit f7b3c4d551
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Sidebar.vue
View File

@ -17,21 +17,21 @@
<template> <template>
<aside class="sidebar"> <aside class="sidebar">
<header class="sidebar__buttons"> <header class="sidebar__buttons">
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':visibleUIElements.has('maps')}" <button v-if="mapCount > 1" :class="{'button--maps': true, 'active':currentlyVisible.has('maps')}"
@click="toggleElement('maps')" title="Map list" aria-label="Map list"> @click="toggleElement('maps')" title="Map list" aria-label="Map list">
<SvgIcon name="maps"></SvgIcon> <SvgIcon name="maps"></SvgIcon>
</button> </button>
<button :class="{'button--players': true, 'active': visibleUIElements.has('players')}" <button :class="{'button--players': true, 'active': currentlyVisible.has('players')}"
@click="toggleElement('players')" title="Player list" aria-label="Player list"> @click="toggleElement('players')" title="Player list" aria-label="Player list">
<SvgIcon name="players"></SvgIcon> <SvgIcon name="players"></SvgIcon>
</button> </button>
<!-- <button :class="{'button&#45;&#45;settings': true, 'active': visibleUIElements.has('settings'))}"--> <!-- <button :class="{'button&#45;&#45;settings': true, 'active': currentlyVisible.has('settings'))}"-->
<!-- @click="toggleElement('settings')" title="Settings" aria-label="Settings">--> <!-- @click="toggleElement('settings')" title="Settings" aria-label="Settings">-->
<!-- <SvgIcon name="settings"></SvgIcon>--> <!-- <SvgIcon name="settings"></SvgIcon>-->
<!-- </button>--> <!-- </button>-->
</header> </header>
<WorldList v-if="mapCount > 1" v-show="visibleUIElements.has('maps')"></WorldList> <WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
<PlayerList v-show="visibleUIElements.has('players')"></PlayerList> <PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget> <FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
</aside> </aside>
</template> </template>
@ -56,7 +56,8 @@ export default defineComponent({
setup() { setup() {
const store = useStore(), const store = useStore(),
visibleUIElements = computed(() => store.state.ui.visibleElements), currentlyVisible = computed(() => store.state.ui.visibleElements),
previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
smallScreen = computed(() => store.state.ui.smallScreen), smallScreen = computed(() => store.state.ui.smallScreen),
mapCount = computed(() => store.state.maps.size), mapCount = computed(() => store.state.maps.size),
following = computed(() => store.state.followTarget), following = computed(() => store.state.followTarget),
@ -68,12 +69,13 @@ export default defineComponent({
followActive = computed(() => { followActive = computed(() => {
//Show following alongside playerlist on small screens //Show following alongside playerlist on small screens
return (!smallScreen.value && following) return (!smallScreen.value && following)
|| (smallScreen.value && visibleUIElements.value.has('players')); || (smallScreen.value && currentlyVisible.value.has('players'));
}); });
return { return {
mapCount, mapCount,
visibleUIElements, currentlyVisible,
previouslyVisible,
toggleElement, toggleElement,
followActive, followActive,
following, following,

5
src/store/mutations.ts
View File

@ -425,6 +425,7 @@ export const mutations: MutationTree<State> & Mutations = {
state.ui.visibleElements.clear(); state.ui.visibleElements.clear();
} }
state.ui.previouslyVisibleElements.add(element);
newState ? state.ui.visibleElements.add(element) : state.ui.visibleElements.delete(element); newState ? state.ui.visibleElements.add(element) : state.ui.visibleElements.delete(element);
}, },
@ -433,6 +434,10 @@ export const mutations: MutationTree<State> & Mutations = {
state.ui.visibleElements.clear(); state.ui.visibleElements.clear();
} }
if(payload.state || state.ui.visibleElements.has(payload.element)) {
state.ui.previouslyVisibleElements.add(payload.element);
}
payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element); payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
}, },

2
src/store/state.ts
View File

@ -61,6 +61,7 @@ export type State = {
ui: { ui: {
smallScreen: boolean; smallScreen: boolean;
visibleElements: Set<DynmapUIElement>; visibleElements: Set<DynmapUIElement>;
previouslyVisibleElements: Set<DynmapUIElement>;
}; };
parsedUrl: DynmapParsedUrl; parsedUrl: DynmapParsedUrl;
@ -171,6 +172,7 @@ export const state: State = {
ui: { ui: {
smallScreen: false, smallScreen: false,
visibleElements:new Set(), visibleElements:new Set(),
previouslyVisibleElements: new Set(),
}, },
parsedUrl: { parsedUrl: {