LiveAtlas/src/components/Map.vue

185 lines
5.6 KiB
Vue
Raw Normal View History

2020-12-01 23:20:38 +00:00
<template>
<div class="map" :style="{'background-color': mapBackground }">
<MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer>
<PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer>
<MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer>
<LogoControl v-for="(logo, index) in logoControls" :key="index" :options="logo" :leaflet="leaflet"></LogoControl>
<CoordinatesControl v-if="coordinatesControlEnabled" :leaflet="leaflet"></CoordinatesControl>
<LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
<ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl>
</div>
</template>
<script lang="ts">
import {defineComponent, computed} from "@vue/runtime-core";
2020-12-12 22:04:56 +00:00
import {LatLng, CRS} from 'leaflet';
2020-12-01 23:20:38 +00:00
import {useStore} from '@/store';
import MapLayer from "@/components/map/layer/MapLayer.vue";
import PlayersLayer from "@/components/map/layer/PlayersLayer.vue";
import MarkerSetLayer from "@/components/map/layer/MarkerSetLayer.vue";
import CoordinatesControl from "@/components/map/control/CoordinatesControl.vue";
import ClockControl from "@/components/map/control/ClockControl.vue";
import LinkControl from "@/components/map/control/LinkControl.vue";
import LogoControl from "@/components/map/control/LogoControl.vue";
import {MutationTypes} from "@/store/mutation-types";
import {DynmapPlayer} from "@/dynmap";
import {ActionTypes} from "@/store/action-types";
2020-12-11 21:38:50 +00:00
import DynmapMap from "@/leaflet/DynmapMap";
2020-12-01 23:20:38 +00:00
export default defineComponent({
components: {
MapLayer,
PlayersLayer,
MarkerSetLayer,
CoordinatesControl,
ClockControl,
LinkControl,
LogoControl
},
setup() {
const store = useStore(),
2020-12-12 22:04:56 +00:00
leaflet = undefined as DynmapMap | undefined,
2020-12-01 23:20:38 +00:00
maps = computed(() => store.state.maps),
markerSets = computed(() => store.state.markerSets),
configuration = computed(() => store.state.configuration),
playerMarkersEnabled = computed(() => store.getters.playerMarkersEnabled),
coordinatesControlEnabled = computed(() => store.getters.coordinatesControlEnabled),
clockControlEnabled = computed(() => store.getters.clockControlEnabled),
linkControlEnabled = computed(() => store.state.components.linkControl),
logoControls = computed(() => store.state.components.logoControls),
currentWorld = computed(() => store.state.currentWorld),
currentMap = computed(() => store.state.currentMap),
currentProjection = computed(() => store.state.currentProjection),
following = computed(() => store.state.following),
2020-12-10 02:22:29 +00:00
mapBackground = computed(() => store.getters.mapBackground);
2020-12-01 23:20:38 +00:00
return {
leaflet,
maps,
markerSets,
configuration,
playerMarkersEnabled,
coordinatesControlEnabled,
clockControlEnabled,
linkControlEnabled,
logoControls,
following,
mapBackground,
currentWorld,
currentMap,
currentProjection
}
},
watch: {
following: {
handler(newValue, oldValue) {
if (newValue) {
this.updateFollow(newValue, !oldValue || newValue.account !== oldValue.account);
}
},
deep: true
},
currentWorld(newValue) {
if(newValue) {
useStore().dispatch(ActionTypes.GET_MARKER_SETS, undefined);
}
},
configuration: {
handler(newValue) {
if(this.leaflet) {
this.leaflet.setZoom(newValue.defaultZoom, {
animate: false,
noMoveStart: true,
});
}
},
deep: true,
}
},
mounted() {
2020-12-11 21:38:50 +00:00
this.leaflet = new DynmapMap(this.$el, Object.freeze({
2020-12-01 23:20:38 +00:00
zoom: this.configuration.defaultZoom,
2020-12-12 22:04:56 +00:00
center: new LatLng(0, 0),
2020-12-01 23:20:38 +00:00
fadeAnimation: false,
zoomAnimation: true,
zoomControl: true,
2020-12-11 21:38:50 +00:00
layerControl: true,
2020-12-01 23:20:38 +00:00
preferCanvas: true,
attributionControl: false,
2020-12-12 22:04:56 +00:00
crs: CRS.Simple,
2020-12-01 23:20:38 +00:00
worldCopyJump: false,
2020-12-10 02:22:29 +00:00
// markerZoomAnimation: false,
2020-12-01 23:20:38 +00:00
}));
this.leaflet.on('moveend', () => {
const location = this.currentProjection.latLngToLocation(this.leaflet!.getCenter(), 64),
locationString = `${Math.round(location.x)},${Math.round(location.y)},${Math.round(location.z)}`,
url = `#${this.currentWorld!.name};${this.currentMap!.name};${locationString}`;
window.history.replaceState({
location,
world: this.currentWorld!.name,
map: this.currentMap!.name,
}, '', url);
})
},
methods: {
updateFollow(player: DynmapPlayer, newFollow: boolean) {
const store = useStore(),
currentWorld = store.state.currentWorld;
if(!this.leaflet) {
console.warn('Map isn\'t initialized yet. Ignoring follow');
}
if(!player.location.world) {
console.error('Player isn\'t in a world somehow');
return;
}
if(!currentWorld || currentWorld.name !== player.location.world) {
const followMapName = store.state.configuration.followMap,
world = store.state.worlds.get(player.location.world);
if(!world) {
console.error('Player isn\'t in a known world somehow');
return;
}
let map = followMapName && world.maps.has(followMapName)
? world.maps.get(followMapName)
: world.maps.entries().next().value[1]
if(map !== store.state.currentMap) {
console.log(`Switching map to match player ${world.name} ${map.name}`);
store.commit(MutationTypes.SET_CURRENT_MAP, {worldName: world.name, mapName: map.name});
}
}
this.leaflet!.panTo(store.state.currentProjection.locationToLatLng(player.location));
if(newFollow) {
console.log(`Setting zoom for new follow ${store.state.configuration.followZoom}`);
this.leaflet!.setZoom(store.state.configuration.followZoom);
}
}
}
})
</script>
<style scoped>
.map {
width: 100%;
height: 100%;
background: #000;
z-index: 0;
}
</style>