Move tileUpdateInterval handling to LiveAtlasTileLayer

src/components/map/layer/MapLayer.vue

@@ -41,47 +41,23 @@ export default defineComponent({
 		const store = useStore(),
 			active = computed(() => props.map === store.state.currentMap);
 
-		let refreshTimeout: null | ReturnType<typeof setTimeout> = null,
+		let layer: LiveAtlasTileLayer;
-			layer: LiveAtlasTileLayer;
-
-		const refresh = () => {
-			if(active.value) {
-				layer.refresh();
-			}
-
-			refreshTimeout = setTimeout(refresh, props.map.tileUpdateInterval);
-		};
 
 		layer = store.state.currentMapProvider!.createTileLayer({
 			errorTileUrl: 'images/blank.png',
 			mapSettings: Object.freeze(JSON.parse(JSON.stringify(props.map))),
 		});
 
-		const enableLayer = () => {
+		const enableLayer = () => props.leaflet.addLayer(layer),
-				props.leaflet.addLayer(layer);
+			disableLayer = () => layer.remove();
-			},
 
-			disableLayer = () => {
+		watch(active, newValue => newValue ? enableLayer() : disableLayer());
-				layer.remove();
-			};
-
-		watch(active, (newValue) => newValue ? enableLayer() : disableLayer());
 
 		if(active.value) {
 			enableLayer();
 		}
 
-		if(props.map.tileUpdateInterval) {
+		onUnmounted(() => disableLayer());
-			refreshTimeout = setTimeout(refresh, props.map.tileUpdateInterval);
-		}
-
-		onUnmounted(() => {
-			disableLayer();
-
-			if(refreshTimeout) {
-				clearTimeout(refreshTimeout);
-			}
-		});
 	},
 
 	render() {

src/leaflet/tileLayer/LiveAtlasTileLayer.ts

@@ -15,7 +15,7 @@
  */
 
 import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
-import {Coords, DomUtil, DoneCallback, TileLayer, TileLayerOptions, Util} from "leaflet";
+import {Map as LeafletMap, Coords, DomUtil, DoneCallback, TileLayer, TileLayerOptions, Util} from "leaflet";
 import {LiveAtlasInternalTiles, LiveAtlasTileElement} from "@/index";
 import falseFn = Util.falseFn;
 
@@ -33,6 +33,7 @@ export abstract class LiveAtlasTileLayer extends TileLayer {
 	private readonly tileTemplate: LiveAtlasTileElement;
 	protected readonly loadQueue: LiveAtlasTileElement[] = [];
 	private readonly loadingTiles: Set<LiveAtlasTileElement> = Object.seal(new Set());
+	private refreshTimeout?: ReturnType<typeof setTimeout>;
 
 	private static genericLoadError = new Error('Tile failed to load');
 
@@ -60,10 +61,6 @@ export abstract class LiveAtlasTileLayer extends TileLayer {
 		options.minZoom = 0;
 
 		Util.setOptions(this, options);
-
-		if (options.mapSettings === null) {
-			throw new TypeError("mapSettings missing");
-		}
 	}
 
 	// @method createTile(coords: Object, done?: Function): HTMLElement
@@ -210,4 +207,28 @@ export abstract class LiveAtlasTileLayer extends TileLayer {
 		// @ts-ignore
 		super._removeTile(key);
 	}
+
+	onAdd(map: LeafletMap): this {
+		if(this._mapSettings.tileUpdateInterval) {
+			this.refreshTimeout = setTimeout(() => this.handlePeriodicRefresh(), this._mapSettings.tileUpdateInterval);
+		}
+
+		return super.onAdd(map);
+	}
+
+	remove() {
+		if(this.refreshTimeout) {
+			clearTimeout(this.refreshTimeout);
+		}
+
+		return super.remove();
+	}
+
+	private handlePeriodicRefresh() {
+		if(this._map) {
+			this.refresh();
+		}
+
+		this.refreshTimeout = setTimeout(() => this.handlePeriodicRefresh(), this._mapSettings.tileUpdateInterval);
+	}
 }