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> <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> <MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer>
<PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer> <PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer>
<MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer> <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> <LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
<ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl> <ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl>
<ChatControl v-if="chatBoxEnabled" :leaflet="leaflet"></ChatControl> <ChatControl v-if="chatBoxEnabled" :leaflet="leaflet"></ChatControl>
<MapContextMenu :leaflet="leaflet" v-if="leaflet"></MapContextMenu>
</div> </div>
<MapContextMenu :leaflet="leaflet" v-if="leaflet"></MapContextMenu>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -188,7 +188,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.leaflet = new DynmapMap(this.$el, Object.freeze({ this.leaflet = new DynmapMap(this.$el.nextElementSibling, Object.freeze({
zoom: this.configuration.defaultZoom, zoom: this.configuration.defaultZoom,
center: new LatLng(0, 0), center: new LatLng(0, 0),
fadeAnimation: false, fadeAnimation: false,

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

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