Improve handling of component config updates

src/components/Map.vue

@@ -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>

src/components/map/control/ClockControl.vue

@@ -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,
+			componentSettings = computed(() => store.state.components.clockControl);
-			control = new ClockControl(componentSettings as ClockControlOptions) as 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));

src/components/map/control/CoordinatesControl.vue

@@ -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,
+			componentSettings = computed(() => store.state.components.coordinatesControl);
-			control = new CoordinatesControl(componentSettings as CoordinatesControlOptions);
+		let control = new CoordinatesControl(componentSettings.value as CoordinatesControlOptions);
 
-		return {
+		watch(componentSettings, (newSettings) => {
-			control,
+			props.leaflet.removeControl(control);
+
+			if(!newSettings) {
+				return;
 			}
-	},
 
-	mounted() {
+			control = new CoordinatesControl(newSettings as CoordinatesControlOptions);
-		this.leaflet.addControl(this.control);
+			props.leaflet.addControl(control);
-	},
+		}, {deep: true});
 
-	unmounted() {
+		onMounted(() => props.leaflet.addControl(control));
-		this.leaflet.removeControl(this.control);
+		onUnmounted(() => props.leaflet.removeControl(control));
 	},
 
 	render() {
@@ -51,7 +54,3 @@ export default defineComponent({
 	}
 })
 </script>
-
-<style scoped>
-
-</style>

src/scss/leaflet/_controls.scss

@@ -260,8 +260,17 @@
 	padding-bottom: 1rem;
 	align-items: stretch;
 
-	&.leaflet-left .leaflet-control + .leaflet-control {
+	.leaflet-control {
-		margin-left: 1rem;
+		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) {

src/store/mutations.ts

@@ -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