Move context menu outside of map element
This commit is contained in:
parent
b184ed775b
commit
1b91c04d1e
@ -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,
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user