From 7b1afa1c20286e6c86ce748403322f5e75fea02b Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Fri, 18 Dec 2020 23:01:32 +0000
Subject: [PATCH] Handle showLabels config setting

---
 src/components/map/layer/MarkerSetLayer.vue | 18 ++++++++++++++
 src/leaflet/icon/DynmapIcon.ts              | 11 ---------
 src/leaflet/layer/DynmapLayerGroup.ts       | 26 +++++++++++++++++++++
 src/scss/style.scss                         |  2 +-
 src/util/markers.ts                         |  2 --
 5 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/map/layer/MarkerSetLayer.vue b/src/components/map/layer/MarkerSetLayer.vue
index 55f44d2..cc338aa 100644
--- a/src/components/map/layer/MarkerSetLayer.vue
+++ b/src/components/map/layer/MarkerSetLayer.vue
@@ -69,6 +69,24 @@ export default defineComponent({
 		}
 	},
 
+	watch: {
+		markerSet: {
+			handler(newValue) {
+				if(newValue && this.layerGroup) {
+					console.log('Updating layer group');
+					this.layerGroup.update({
+						id: this.markerSet.id,
+						minZoom: this.markerSet.minZoom,
+						maxZoom: this.markerSet.maxZoom,
+						showLabels: this.markerSet.showLabels || useStore().state.components.markers.showLabels,
+						priority: this.markerSet.priority,
+					});
+				}
+			},
+			deep: true,
+		}
+	},
+
 	mounted() {
 		if(this.markerSet.hidden) {
 			this.leaflet.getLayerManager().addHiddenLayer(this.layerGroup, this.markerSet.label, 1);
diff --git a/src/leaflet/icon/DynmapIcon.ts b/src/leaflet/icon/DynmapIcon.ts
index 4b0e160..bb83ff2 100644
--- a/src/leaflet/icon/DynmapIcon.ts
+++ b/src/leaflet/icon/DynmapIcon.ts
@@ -22,7 +22,6 @@ import {DivIconOptions, PointExpression, Icon, DivIcon, DomUtil, point} from 'le
 export interface DynmapIconOptions extends DivIconOptions {
 	icon: string;
 	label: string;
-	showLabel: boolean;
 	isHtml?: boolean;
 }
 
@@ -40,7 +39,6 @@ export class DynmapIcon extends DivIcon {
 		icon: 'default',
 		label: '',
 		iconSize: [16, 16],
-		showLabel: false,
 		isHtml: false,
 		className: '',
 	};
@@ -72,10 +70,6 @@ export class DynmapIcon extends DivIcon {
 		this._image.height = size.y;
 		this._image.src = url;
 
-		if(this.options.showLabel) {
-			this._label.classList.add('marker__label--show');
-		}
-
 		this._label.classList.add(/*'markerName_' + set.id,*/ `marker__label--${sizeClass}`);
 
 		if (this.options.isHtml) {
@@ -99,11 +93,6 @@ export class DynmapIcon extends DivIcon {
 	}
 
 	update(options: DynmapIconOptions) {
-		if(options.showLabel !== this.options.showLabel) {
-			this._label!.classList.toggle('marker__label--show', this.options.showLabel);
-			this.options.showLabel = options.showLabel;
-		}
-
 		if(options.icon !== this.options.icon) {
 			this._image!.src = `${window.config.url.markers}_markers_/${options.icon}.png`;
 			this.options.icon = options.icon;
diff --git a/src/leaflet/layer/DynmapLayerGroup.ts b/src/leaflet/layer/DynmapLayerGroup.ts
index c20d3b6..7cc2006 100644
--- a/src/leaflet/layer/DynmapLayerGroup.ts
+++ b/src/leaflet/layer/DynmapLayerGroup.ts
@@ -50,6 +50,8 @@ export default class DynmapLayerGroup extends LayerGroup {
 		this._markerPane = map.createPane(`${this.options.id}-markers`);
 		this._vectorPane = map.createPane(`${this.options.id}-vectors`);
 
+		this._markerPane.classList.toggle('leaflet-pane--show-labels', this.options.showLabels);
+
 		this._markerPane.style.zIndex = (401 + this.options.priority).toString();
 		this._vectorPane.style.zIndex = (400 + this.options.priority).toString();
 
@@ -106,6 +108,30 @@ export default class DynmapLayerGroup extends LayerGroup {
 		return super.addLayer(layer);
 	}
 
+	update(options: DynmapLayerGroupOptions) {
+		this.options.showLabels = options.showLabels;
+
+		if(this._markerPane) {
+			this._markerPane.classList.toggle('leaflet-pane--show-labels', options.showLabels);
+		}
+
+		if(options.minZoom !== this.options.minZoom || options.maxZoom !== this.options.maxZoom) {
+			this.options.minZoom = options.minZoom;
+			this.options.maxZoom = options.maxZoom;
+
+			this._updateLayerVisibility();
+		}
+
+		if(options.priority !== this.options.priority) {
+			this.options.priority = options.priority;
+
+			if(this._markerPane) {
+				this._markerPane.style.zIndex = (401 + this.options.priority).toString();
+				this._vectorPane!.style.zIndex = (400 + this.options.priority).toString();
+			}
+		}
+	}
+
 	_updateLayerVisibility(onAdd?: boolean) {
 		if(!this._map) {
 			return;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index f91d0dc..ae8b3a4 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -338,7 +338,7 @@ button {
 		text-overflow: ellipsis;
 		overflow: hidden;
 
-		&.marker__label--show {
+		@at-root .leaflet-pane--show-labels .marker__label {
 			display: block;
 		}
 	}
diff --git a/src/util/markers.ts b/src/util/markers.ts
index 9d01caa..e4c14a4 100644
--- a/src/util/markers.ts
+++ b/src/util/markers.ts
@@ -29,7 +29,6 @@ export const createMarker = (options: DynmapMarker, projection: DynmapProjection
 			icon: options.icon,
 			label: options.label,
 			iconSize: options.dimensions,
-			showLabel: false,
 			isHtml: options.isHTML,
 		}),
 		maxZoom: options.maxZoom,
@@ -57,7 +56,6 @@ export const updateMarker = (marker: Marker | undefined, options: DynmapMarker,
 				icon: options.icon,
 				label: options.label,
 				iconSize: options.dimensions,
-				showLabel: false,
 				isHtml: options.isHTML,
 			});
 		}