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

96
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({
return {
layer,
}
},
computed: {
active(): boolean {
return this.map === useStore().state.currentMap;
}
},
watch: {
active(newValue) {
console.warn(`Active for ${this.map.world.name} ${this.map.name} now ${newValue}`);
if(newValue) {
this.enableLayer();
} else {
this.disableLayer();
}
}
},
mounted() {
// console.log('mounted ' + this.name + ' ' + this.active);
this.layer = new HDMapType({
errorTileUrl: 'images/blank.png', errorTileUrl: 'images/blank.png',
mapSettings: Object.freeze(JSON.parse(JSON.stringify(this.map))), mapSettings: Object.freeze(JSON.parse(JSON.stringify(props.map))),
}) as HDMapType; }),
active = computed(() => props.map === store.state.currentMap),
console.log(this.layer); enableLayer = () => {
useStore().commit(MutationTypes.SET_CURRENT_PROJECTION, layer.getProjection());
if(this.active) { props.leaflet.addLayer(layer);
this.enableLayer(); props.leaflet.panTo(layer.getProjection().locationToLatLng(props.map.world.center), {
} noMoveStart: true,
animate: false,
});
}, },
unmounted() { disableLayer = () => layer.remove();
// console.log('unmounted ' + this.name);
this.disableLayer(); watch(active, (newValue) => newValue ? enableLayer() : disableLayer());
onMounted(() => {
if(active.value) {
enableLayer();
}
});
onUnmounted(() => 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>