From 6eec608eb12547ffec5b3db65ce89fb3e3011743 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 18 May 2021 22:01:07 +0100
Subject: [PATCH] Improve handling of component config updates

---
 src/components/Map.vue                        |  2 +-
 src/components/map/control/ClockControl.vue   | 18 ++++++++--
 .../map/control/CoordinatesControl.vue        | 33 +++++++++----------
 src/scss/leaflet/_controls.scss               | 13 ++++++--
 src/store/mutations.ts                        |  2 +-
 5 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 1f414d7..960fe13 100644
--- a/src/components/Map.vue
+++ b/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>
diff --git a/src/components/map/control/ClockControl.vue b/src/components/map/control/ClockControl.vue
index 10f938c..fe70951 100644
--- a/src/components/map/control/ClockControl.vue
+++ b/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,
-			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));
diff --git a/src/components/map/control/CoordinatesControl.vue b/src/components/map/control/CoordinatesControl.vue
index 8e92b32..47de186 100644
--- a/src/components/map/control/CoordinatesControl.vue
+++ b/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,
-			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>
\ No newline at end of file
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index ad8c84d..180e0af 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -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) {
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 796014a..610b5c8 100644
--- a/src/store/mutations.ts
+++ b/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