Nikolay Tatarinov
7f990c0c11
- Added fullscreen and measurement mode buttons for improved map interaction. - Introduced a bookmarks section to save and navigate to locations easily. - Implemented a search feature for quick access to coordinates and markers. - Added keyboard shortcuts overlay for enhanced usability. - Refactored MapControls and MapControlsContent to support new functionalities. - Introduced new icon components for better visual representation in the UI.
97 lines
2.8 KiB
Vue
97 lines
2.8 KiB
Vue
<template>
|
||
<section class="flex flex-col gap-2">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 flex items-center gap-1.5">
|
||
<icons-icon-bookmark class="size-3.5 opacity-80" aria-hidden="true" />
|
||
Saved locations
|
||
</h3>
|
||
<div class="flex flex-col gap-1 max-h-40 overflow-y-auto">
|
||
<template v-if="bookmarks.length === 0">
|
||
<p class="text-xs text-base-content/60 py-1">No saved locations.</p>
|
||
</template>
|
||
<template v-else>
|
||
<div
|
||
v-for="b in bookmarks"
|
||
:key="b.id"
|
||
class="flex items-center gap-2 group rounded-lg hover:bg-base-200/50 px-2 py-1.5 -mx-2"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="btn btn-ghost btn-xs flex-1 min-w-0 justify-start text-left truncate font-normal"
|
||
:title="`Go to ${b.name}`"
|
||
@click="onGoTo(b)"
|
||
>
|
||
<span class="truncate">{{ b.name }}</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="btn btn-ghost btn-xs btn-square shrink-0 opacity-70 hover:opacity-100 hover:text-error"
|
||
aria-label="Remove bookmark"
|
||
@click="onRemove(b.id)"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline btn-sm w-full"
|
||
:class="touchFriendly ? 'min-h-11' : ''"
|
||
:disabled="!canAddCurrent"
|
||
title="Save current map position"
|
||
@click="onAddCurrent"
|
||
>
|
||
<icons-icon-plus class="size-4" />
|
||
Add current location
|
||
</button>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { MapInfo } from '~/types/api'
|
||
import { useMapBookmarks } from '~/composables/useMapBookmarks'
|
||
import { useMapNavigate } from '~/composables/useMapNavigate'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
maps: MapInfo[]
|
||
currentMapId: number | null
|
||
currentCoords: { x: number; y: number; z: number } | null
|
||
touchFriendly?: boolean
|
||
}>(),
|
||
{ touchFriendly: false }
|
||
)
|
||
|
||
const { bookmarks, add, remove } = useMapBookmarks()
|
||
const { goToCoords } = useMapNavigate()
|
||
|
||
const canAddCurrent = computed(
|
||
() =>
|
||
props.currentMapId != null &&
|
||
props.currentCoords != null &&
|
||
props.currentMapId >= 0
|
||
)
|
||
|
||
function onGoTo(b: { mapId: number; x: number; y: number; zoom?: number }) {
|
||
goToCoords(b.mapId, b.x, b.y, b.zoom)
|
||
}
|
||
|
||
function onRemove(id: string) {
|
||
remove(id)
|
||
}
|
||
|
||
function onAddCurrent() {
|
||
if (!canAddCurrent.value) return
|
||
const mapId = props.currentMapId!
|
||
const { x, y, z } = props.currentCoords!
|
||
const mapName = props.maps.find((m) => m.ID === mapId)?.Name ?? `Map ${mapId}`
|
||
add({
|
||
name: `${mapName} ${x}, ${y}`,
|
||
mapId,
|
||
x,
|
||
y,
|
||
zoom: z,
|
||
})
|
||
}
|
||
</script>
|