Nikolay Tatarinov
52c34ef8f2
- Introduced a new MapBookmarkNameModal for adding and editing bookmarks. - Updated MapView to manage selected markers for bookmarking and handle bookmark name submissions. - Enhanced MapContextMenu with an option to add markers to bookmarks. - Improved MapBookmarks component to support editing bookmark names and adding selected markers. - Refactored MapControls and MapControlsContent to integrate selected marker functionality for bookmarks. - Updated useMapBookmarks composable to include bookmark updating logic. - Removed unused grid coordinates toggle from the UI for a cleaner interface.
83 lines
2.5 KiB
Vue
83 lines
2.5 KiB
Vue
<template>
|
|
<!-- Context menu (tile) — Teleport so it is not clipped by map/overflow -->
|
|
<Teleport to="body">
|
|
<div
|
|
v-show="contextMenu.tile.show"
|
|
class="fixed z-[9999] bg-base-100/95 backdrop-blur-xl shadow-xl rounded-lg border border-base-300 py-1 min-w-[180px] transition-opacity duration-150"
|
|
:style="{ left: contextMenu.tile.x + 'px', top: contextMenu.tile.y + 'px' }"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
|
|
@click="onWipeTile(contextMenu.tile.data?.coords)"
|
|
>
|
|
Wipe tile {{ contextMenu.tile.data?.coords?.x }}, {{ contextMenu.tile.data?.coords?.y }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
|
|
@click="onRewriteCoords(contextMenu.tile.data?.coords)"
|
|
>
|
|
Rewrite tile coords
|
|
</button>
|
|
</div>
|
|
<!-- Context menu (marker) -->
|
|
<div
|
|
v-show="contextMenu.marker.show"
|
|
class="fixed z-[9999] bg-base-100/95 backdrop-blur-xl shadow-xl rounded-lg border border-base-300 py-1 min-w-[180px] transition-opacity duration-150"
|
|
:style="{ left: contextMenu.marker.x + 'px', top: contextMenu.marker.y + 'px' }"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
|
|
@click="onAddToBookmarks"
|
|
>
|
|
Add to bookmarks
|
|
</button>
|
|
<button
|
|
v-if="isAdmin"
|
|
type="button"
|
|
class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
|
|
@click="onHideMarker(contextMenu.marker.data?.id)"
|
|
>
|
|
Hide marker {{ contextMenu.marker.data?.name }}
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ContextMenuState } from '~/composables/useMapLogic'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
contextMenu: ContextMenuState
|
|
isAdmin?: boolean
|
|
}>(),
|
|
{ isAdmin: false }
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
wipeTile: [coords: { x: number; y: number } | undefined]
|
|
rewriteCoords: [coords: { x: number; y: number } | undefined]
|
|
hideMarker: [id: number | undefined]
|
|
addToBookmarks: []
|
|
}>()
|
|
|
|
function onWipeTile(coords: { x: number; y: number } | undefined) {
|
|
if (coords) emit('wipeTile', coords)
|
|
}
|
|
|
|
function onRewriteCoords(coords: { x: number; y: number } | undefined) {
|
|
if (coords) emit('rewriteCoords', coords)
|
|
}
|
|
|
|
function onAddToBookmarks() {
|
|
emit('addToBookmarks')
|
|
}
|
|
|
|
function onHideMarker(id: number | undefined) {
|
|
if (id != null) emit('hideMarker', id)
|
|
}
|
|
</script>
|