From 11fbc069befa08a2fb76b4c77504831bd22d7541 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sat, 19 Dec 2020 01:09:31 +0000 Subject: [PATCH] Handle marker set updates --- src/api.ts | 39 +++++++++++------ src/components/map/layer/MarkerSetLayer.vue | 7 ++- src/dynmap.d.ts | 9 ++++ src/leaflet/control/DynmapLayerControl.ts | 7 ++- src/leaflet/layer/LayerManager.ts | 5 +++ src/store/mutations.ts | 48 +++++++++++++++++++-- 6 files changed, 97 insertions(+), 18 deletions(-) diff --git a/src/api.ts b/src/api.ts index 40329ea..5e4351d 100644 --- a/src/api.ts +++ b/src/api.ts @@ -185,6 +185,18 @@ function buildComponents(response: any): DynmapComponentConfig { return components; } +function buildMarkerSet(id: string, data: any): any { + return { + id, + label: data.label || "Unnamed set", + hidden: data.hide || false, + priority: data.layerprio || 0, + showLabels: data.showlabels || undefined, + minZoom: typeof data.minzoom !== 'undefined' && data.minzoom > -1 ? data.minzoom : undefined, + maxZoom: typeof data.maxzoom !== 'undefined' && data.maxzoom > -1 ? data.maxzoom : undefined, + } +} + function buildMarkers(data: any): Map { const markers = Object.freeze(new Map()) as Map; @@ -352,7 +364,10 @@ function buildUpdates(data: Array): DynmapUpdates { continue; } - if(!entry.set) { + //Set updates don't have a set field, the id is the set + const set = entry.msg.startsWith("set") ? entry.id : entry.set; + + if(!set) { dropped.noSet++; continue; } @@ -362,22 +377,26 @@ function buildUpdates(data: Array): DynmapUpdates { continue; } - if(!updates.markerSets.has(entry.set)) { - updates.markerSets.set(entry.set, { + if(!updates.markerSets.has(set)) { + updates.markerSets.set(set, { areaUpdates: [], markerUpdates: [], lineUpdates: [], circleUpdates: [], + removed: false, }); } - const markerSetUpdates = updates.markerSets.get(entry.set), + const markerSetUpdates = updates.markerSets.get(set), update: DynmapUpdate = { id: entry.id, removed: entry.msg.endsWith('deleted'), }; - if(entry.msg.startsWith("marker")) { + if(entry.msg.startsWith("set")) { + markerSetUpdates!.removed = update.removed; + markerSetUpdates!.payload = update.removed ? undefined : buildMarkerSet(set, entry); + } else if(entry.msg.startsWith("marker")) { update.payload = update.removed ? undefined : buildMarker(entry); markerSetUpdates!.markerUpdates.push(Object.freeze(update)); } else if(entry.msg.startsWith("area")) { @@ -565,17 +584,11 @@ export default { lines = buildLines(set.lines || {}); sets.set(key, { - id: key, - label: set.label || "Unnamed set", - hidden: set.hide || false, - priority: set.layerprio || 0, - showLabels: set.showlabels || undefined, - minZoom: typeof set.minzoom !== 'undefined' && set.minzoom > -1 ? set.minzoom : undefined, - maxZoom: typeof set.maxzoom !== 'undefined' && set.maxzoom > -1 ? set.maxzoom : undefined, + ...buildMarkerSet(key, set), markers, + circles, areas, lines, - circles, }); } diff --git a/src/components/map/layer/MarkerSetLayer.vue b/src/components/map/layer/MarkerSetLayer.vue index cc338aa..26a875e 100644 --- a/src/components/map/layer/MarkerSetLayer.vue +++ b/src/components/map/layer/MarkerSetLayer.vue @@ -73,7 +73,6 @@ export default defineComponent({ markerSet: { handler(newValue) { if(newValue && this.layerGroup) { - console.log('Updating layer group'); this.layerGroup.update({ id: this.markerSet.id, minZoom: this.markerSet.minZoom, @@ -81,6 +80,12 @@ export default defineComponent({ showLabels: this.markerSet.showLabels || useStore().state.components.markers.showLabels, priority: this.markerSet.priority, }); + + if(newValue.hidden) { + this.leaflet.getLayerManager().addHiddenLayer(this.layerGroup, newValue.label, 1); + } else { + this.leaflet.getLayerManager().addLayer(this.layerGroup, true, newValue.label, 1); + } } }, deep: true, diff --git a/src/dynmap.d.ts b/src/dynmap.d.ts index 012c3ac..b9dc712 100644 --- a/src/dynmap.d.ts +++ b/src/dynmap.d.ts @@ -250,6 +250,15 @@ interface DynmapMarkerSetUpdates { areaUpdates: Array circleUpdates: Array lineUpdates: Array + removed?: boolean + payload?: { + showLabels: boolean; + hidden: boolean; + minZoom: number; + maxZoom: number; + priority: number; + label: string; + } } interface DynmapUpdate { diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts index 834dd3c..c080b84 100644 --- a/src/leaflet/control/DynmapLayerControl.ts +++ b/src/leaflet/control/DynmapLayerControl.ts @@ -17,7 +17,7 @@ * limitations under the License. */ -import {Util, Control, DomEvent, LeafletEvent, Map} from 'leaflet'; +import {Util, Control, DomEvent, LeafletEvent, Map, Layer} from 'leaflet'; import layers from '@/assets/icons/layers.svg'; import LayersObject = Control.LayersObject; import LayersOptions = Control.LayersOptions; @@ -48,6 +48,11 @@ export class DynmapLayerControl extends Control.Layers { return element; } + hasLayer(layer: Layer): boolean { + // @ts-ignore + return !!super._getLayer(Util.stamp(layer)); + } + _addItem(obj: any) { const container = obj.overlay ? this._overlaysList : this._baseLayersList, item = document.createElement('label'), diff --git a/src/leaflet/layer/LayerManager.ts b/src/leaflet/layer/LayerManager.ts index 715361b..0d442a9 100644 --- a/src/leaflet/layer/LayerManager.ts +++ b/src/leaflet/layer/LayerManager.ts @@ -34,10 +34,15 @@ export default class LayerManager { } } + //TODO: Respect position addLayer(layer: Layer, showInControl: boolean, name: string, position: number) { this.map.addLayer(layer); if(showInControl) { + if(this.layerControl.hasLayer(layer)) { + this.layerControl.removeLayer(layer); + } + this.layerControl.addOverlay(layer, name); } } diff --git a/src/store/mutations.ts b/src/store/mutations.ts index 99c6794..ce33e5e 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -102,7 +102,7 @@ export const mutations: MutationTree & Mutations = { }); }, - //Sets the state and settings of optional compontents, from the initial config fetch + //Sets the state and settings of optional components, from the initial config fetch [MutationTypes.SET_COMPONENTS](state: State, components: DynmapComponentConfig) { state.components = components; }, @@ -140,13 +140,55 @@ export const mutations: MutationTree & Mutations = { [MutationTypes.ADD_MARKER_SET_UPDATES](state: State, updates: Map) { for(const entry of updates) { if(!state.markerSets.has(entry[0])) { - console.warn(`ADD_MARKER_SET_UPDATES: Marker set ${entry[0]} doesn't exist`); - continue; + + //Create marker set if it doesn't exist + if(entry[1].payload) { + state.markerSets.set(entry[0], { + id: entry[0], + showLabels: entry[1].payload.showLabels, + minZoom: entry[1].payload.minZoom, + maxZoom: entry[1].payload.maxZoom, + priority: entry[1].payload.priority, + label: entry[1].payload.label, + hidden: entry[1].payload.hidden, + markers: Object.freeze(new Map()) as Map, + areas: Object.freeze(new Map()) as Map, + circles: Object.freeze(new Map()) as Map, + lines: Object.freeze(new Map()) as Map, + }); + + state.pendingSetUpdates.set(entry[0], { + markerUpdates: [], + areaUpdates: [], + circleUpdates: [], + lineUpdates: [], + }); + } else { + console.warn(`ADD_MARKER_SET_UPDATES: Marker set ${entry[0]} doesn't exist`); + continue; + } } const set = state.markerSets.get(entry[0]) as DynmapMarkerSet, setUpdates = state.pendingSetUpdates.get(entry[0]) as DynmapMarkerSetUpdates; + //Delete the set if it has been deleted + if(entry[1].removed) { + state.markerSets.delete(entry[0]); + state.pendingSetUpdates.delete(entry[0]); + continue; + } + + //Update the set itself if a payload exists + if(entry[1].payload) { + set.showLabels = entry[1].payload.showLabels; + set.minZoom = entry[1].payload.minZoom; + set.maxZoom = entry[1].payload.maxZoom; + set.priority = entry[1].payload.priority; + set.label = entry[1].payload.label; + set.hidden = entry[1].payload.hidden; + } + //Update non-reactive lists for(const update of entry[1].markerUpdates) { if(update.removed) {