Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor MapLayer to use component api

Browse Source
This commit is contained in:
James Lyne 2020-12-11 15:44:22 +00:00
parent b70eae48cb
commit b0e53b5fc9
1 changed files with 26 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/map/layer/MapLayer.vue
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import {defineComponent} from "@vue/runtime-core"; import {defineComponent, onMounted, onUnmounted, computed, watch} from "@vue/runtime-core";
import {DynmapMap} from "@/dynmap"; import {DynmapMap} from "@/dynmap";
import L from 'leaflet'; import {Map} from 'leaflet';
import {useStore} from "@/store"; import {useStore} from "@/store";
import {HDMapType} from "@/leaflet/mapType/HDMapType"; import {HDMapType} from "@/leaflet/mapType/HDMapType";
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
@ -17,85 +17,43 @@ export default defineComponent({
required: true required: true
}, },
leaflet: { leaflet: {
type: Object as () => L.Map, type: Object as () => Map,
required: true, required: true,
} }
}, },
setup() { setup(props) {
let layer = undefined as HDMapType | undefined; const store = useStore(),
layer = new HDMapType({
errorTileUrl: 'images/blank.png',
mapSettings: Object.freeze(JSON.parse(JSON.stringify(props.map))),
}),
active = computed(() => props.map === store.state.currentMap),
return { enableLayer = () => {
layer, useStore().commit(MutationTypes.SET_CURRENT_PROJECTION, layer.getProjection());
} props.leaflet.addLayer(layer);
}, props.leaflet.panTo(layer.getProjection().locationToLatLng(props.map.world.center), {
noMoveStart: true,
animate: false,
});
},
computed: { disableLayer = () => layer.remove();
active(): boolean {
return this.map === useStore().state.currentMap;
}
},
watch: { watch(active, (newValue) => newValue ? enableLayer() : disableLayer());
active(newValue) {
console.warn(`Active for ${this.map.world.name} ${this.map.name} now ${newValue}`);
if(newValue) { onMounted(() => {
this.enableLayer(); if(active.value) {
} else { enableLayer();
this.disableLayer();
} }
} });
},
mounted() { onUnmounted(() => disableLayer());
// console.log('mounted ' + this.name + ' ' + this.active);
this.layer = new HDMapType({
errorTileUrl: 'images/blank.png',
mapSettings: Object.freeze(JSON.parse(JSON.stringify(this.map))),
}) as HDMapType;
console.log(this.layer);
if(this.active) {
this.enableLayer();
}
},
unmounted() {
// console.log('unmounted ' + this.name);
this.disableLayer();
}, },
render() { render() {
return null; return null;
}, },
});
methods: {
enableLayer() {
if(!this.layer) {
return;
}
console.warn('Enabling layer ' + this.map.world.name + ' ' + this.map.name);
useStore().commit(MutationTypes.SET_CURRENT_PROJECTION, this.layer.getProjection());
this.leaflet.addLayer(this.layer);
this.leaflet.panTo(this.layer.getProjection().locationToLatLng(this.map.world.center), {
noMoveStart: true,
animate: false,
});
},
disableLayer() {
if(this.layer) {
console.warn('Disabling layer ' + this.map.world.name + ' ' + this.map.name);
this.layer.remove();
}
}
}
})
</script> </script>
<style scoped>
</style>