Improve handling of component config updates

This commit is contained in:
James Lyne 2021-05-18 22:01:07 +01:00
parent 64fe37e35c
commit 6eec608eb1
5 changed files with 44 additions and 24 deletions

View File

@ -20,7 +20,7 @@
<PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer>
<MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer>
<LogoControl v-for="(logo, index) in logoControls" :key="index" :options="logo" :leaflet="leaflet"></LogoControl>
<LogoControl v-for="logo in logoControls" :key="JSON.stringify(logo)" :options="logo" :leaflet="leaflet"></LogoControl>
<CoordinatesControl v-if="coordinatesControlEnabled" :leaflet="leaflet"></CoordinatesControl>
<LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
<ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl>

View File

@ -15,10 +15,11 @@
-->
<script lang="ts">
import {defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
import {computed, defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
import {useStore} from "@/store";
import {ClockControl, ClockControlOptions} from "@/leaflet/control/ClockControl";
import DynmapMap from "@/leaflet/DynmapMap";
import {watch} from "vue";
export default defineComponent({
props: {
@ -30,8 +31,19 @@ export default defineComponent({
setup(props) {
const store = useStore(),
componentSettings = store.state.components.clockControl,
control = new ClockControl(componentSettings as ClockControlOptions) as ClockControl;
componentSettings = computed(() => store.state.components.clockControl);
let control = new ClockControl(componentSettings.value as ClockControlOptions) as ClockControl;
watch(componentSettings, (newSettings) => {
props.leaflet.removeControl(control);
if(!newSettings) {
return;
}
control = new ClockControl(newSettings as ClockControlOptions);
props.leaflet.addControl(control);
}, {deep: true});
onMounted(() => props.leaflet.addControl(control));
onUnmounted(() => props.leaflet.removeControl(control));

View File

@ -15,10 +15,11 @@
-->
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {computed, defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
import {useStore} from "@/store";
import {CoordinatesControl, CoordinatesControlOptions} from "@/leaflet/control/CoordinatesControl";
import DynmapMap from "@/leaflet/DynmapMap";
import {watch} from "vue";
export default defineComponent({
props: {
@ -28,22 +29,24 @@ export default defineComponent({
}
},
setup() {
setup(props) {
const store = useStore(),
componentSettings = store.state.components.coordinatesControl,
control = new CoordinatesControl(componentSettings as CoordinatesControlOptions);
componentSettings = computed(() => store.state.components.coordinatesControl);
let control = new CoordinatesControl(componentSettings.value as CoordinatesControlOptions);
return {
control,
}
},
watch(componentSettings, (newSettings) => {
props.leaflet.removeControl(control);
mounted() {
this.leaflet.addControl(this.control);
},
if(!newSettings) {
return;
}
unmounted() {
this.leaflet.removeControl(this.control);
control = new CoordinatesControl(newSettings as CoordinatesControlOptions);
props.leaflet.addControl(control);
}, {deep: true});
onMounted(() => props.leaflet.addControl(control));
onUnmounted(() => props.leaflet.removeControl(control));
},
render() {
@ -51,7 +54,3 @@ export default defineComponent({
}
})
</script>
<style scoped>
</style>

View File

@ -260,8 +260,17 @@
padding-bottom: 1rem;
align-items: stretch;
&.leaflet-left .leaflet-control + .leaflet-control {
margin-left: 1rem;
.leaflet-control {
order: 2;
}
/* Always show before other controls */
.leaflet-control-link {
order: 1;
}
&.leaflet-left .leaflet-control {
margin-right: 1rem;
}
@media (max-width: 400px), (max-height: 480px) {

View File

@ -150,7 +150,7 @@ export const mutations: MutationTree<State> & Mutations = {
//Sets the state and settings of optional components, from the initial config fetch
[MutationTypes.SET_COMPONENTS](state: State, components: DynmapComponentConfig) {
state.components = components;
state.components = Object.assign(state.components, components);
},
//Sets the existing marker sets from the last marker fetch