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

Move context menu outside of map element

Browse Source
This commit is contained in:
James Lyne 2021-05-24 20:51:19 +01:00
parent b184ed775b
commit 1b91c04d1e
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Map.vue
View File

@ -15,7 +15,7 @@
-->
<template>
<div class="map" :style="{backgroundColor: mapBackground }">
<div class="map" :style="{backgroundColor: mapBackground }" v-bind="$attrs">
<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>
@ -25,8 +25,8 @@
<LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
<ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl>
<ChatControl v-if="chatBoxEnabled" :leaflet="leaflet"></ChatControl>
<MapContextMenu :leaflet="leaflet" v-if="leaflet"></MapContextMenu>
</div>
<MapContextMenu :leaflet="leaflet" v-if="leaflet"></MapContextMenu>
</template>
<script lang="ts">
@ -188,7 +188,7 @@ export default defineComponent({
},
mounted() {
this.leaflet = new DynmapMap(this.$el, Object.freeze({
this.leaflet = new DynmapMap(this.$el.nextElementSibling, Object.freeze({
zoom: this.configuration.defaultZoom,
center: new LatLng(0, 0),
fadeAnimation: false,

9
src/components/map/MapContextMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<nav id="map__context-menu" v-show="menuVisible" ref="menuElement" :style="style">
<nav id="map-context-menu" v-show="menuVisible" ref="menuElement" :style="style">
<ul class="menu">
<li>
<button type="button" v-clipboard="locationCopy">{{ locationLabel }}</button>
@ -130,7 +130,6 @@ export default defineComponent({
});
props.leaflet.on('contextmenu', (e: LeafletMouseEvent) => {
console.log('This event handler');
e.originalEvent.stopImmediatePropagation();
e.originalEvent.preventDefault();
props.leaflet.closePopup();
@ -158,15 +157,17 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
#map__context-menu {
#map-context-menu {
background-color: var(--background-base);
color: var(--text-base);
border-radius: var(--border-radius);
position: fixed;
z-index: 1001;
z-index: 150;
padding: 0.5rem;
min-width: 15rem;
max-width: 22.5rem;
top: 0;
left: 0;
::v-deep(.world) {
padding: 0.2rem 0 0.2rem 0.8rem;