From 1f3ba13194b7b9ed2a28e0bb8011664cbade28a3 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 31 Dec 2020 13:53:47 +0000
Subject: [PATCH] Move clock update handling to the control

---
 src/components/map/control/ClockControl.vue |  5 +----
 src/leaflet/control/ClockControl.ts         | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/map/control/ClockControl.vue b/src/components/map/control/ClockControl.vue
index 391712b..10f938c 100644
--- a/src/components/map/control/ClockControl.vue
+++ b/src/components/map/control/ClockControl.vue
@@ -15,7 +15,7 @@
   -->
 
 <script lang="ts">
-import {defineComponent, computed, watch, onMounted, onUnmounted} from "@vue/runtime-core";
+import {defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import {ClockControl, ClockControlOptions} from "@/leaflet/control/ClockControl";
 import DynmapMap from "@/leaflet/DynmapMap";
@@ -31,11 +31,8 @@ export default defineComponent({
 	setup(props) {
 		const store = useStore(),
 			componentSettings = store.state.components.clockControl,
-			worldState = computed(() => store.state.currentWorldState),
 			control = new ClockControl(componentSettings as ClockControlOptions) as ClockControl;
 
-		watch(worldState, (newValue) => control.update(newValue), { deep: true });
-
 		onMounted(() => props.leaflet.addControl(control));
 		onUnmounted(() => props.leaflet.removeControl(control));
 	},
diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts
index 5ce0603..a58f4dc 100644
--- a/src/leaflet/control/ClockControl.ts
+++ b/src/leaflet/control/ClockControl.ts
@@ -27,6 +27,8 @@ import sunStorm from '@/assets/icons/clock_sun_storm.svg';
 import moon from '@/assets/icons/clock_moon.svg';
 import moonRain from '@/assets/icons/clock_moon_rain.svg';
 import moonStorm from '@/assets/icons/clock_moon_storm.svg';
+import {watch} from "@vue/runtime-core";
+import {useStore} from "@/store";
 
 export interface ClockControlOptions extends ControlOptions {
 	showTimeOfDay: boolean;
@@ -44,6 +46,7 @@ export class ClockControl extends Control {
 	private _clock?: HTMLElement;
 	private _currentMoonIcon?: BrowserSpriteSymbol;
 	private _currentSunIcon?: BrowserSpriteSymbol;
+	private _unwatchHandler?: Function;
 
 	constructor(options: ClockControlOptions) {
 		super(Object.assign(options, {position: 'topcenter'}));
@@ -52,7 +55,8 @@ export class ClockControl extends Control {
 	}
 
 	onAdd(map: Map) {
-		const digital = !this.options.showTimeOfDay && !this.options.showWeather && this.options.showDigitalClock;
+		const digital = !this.options.showTimeOfDay && !this.options.showWeather && this.options.showDigitalClock,
+			worldState = useStore().state.currentWorldState;
 
 		this._container = DomUtil.create('div', 'clock' + (digital ? ' clock--digital' : ''));
 		this._sun = DomUtil.create('div', 'clock__sun', this._container);
@@ -74,10 +78,20 @@ export class ClockControl extends Control {
 			this._clock = DomUtil.create('div', 'clock__time', this._container)
 		}
 
+		this._unwatchHandler = watch(worldState, (newValue) => {
+			this._update(newValue);
+		}, { deep: true });
+
 		return this._container;
 	}
 
-	update(worldState: DynmapWorldState) {
+	onRemove(map: Map) {
+		if(this._unwatchHandler) {
+			this._unwatchHandler();
+		}
+	}
+
+	_update(worldState: DynmapWorldState) {
 		const timeOfDay = worldState.timeOfDay;
 		let sunAngle;