Nikolay Tatarinov
225aaa36e7
- Updated API documentation for the `rebuildZooms` endpoint to clarify its long execution time and response behavior. - Modified MapView component to manage tile cache invalidation after rebuilding zoom levels, ensuring fresh tile display. - Introduced a new composable for handling tile cache invalidation state after admin actions. - Enhanced character icon creation to reflect ownership status with distinct colors. - Improved loading state handling in various components for better user experience during data fetching.
634 lines
23 KiB
Vue
634 lines
23 KiB
Vue
<template>
|
|
<div ref="mapContainerRef" class="relative h-full w-full" @click="(e: MouseEvent) => e.button === 0 && mapLogic.closeContextMenus()">
|
|
<div
|
|
v-if="!mapReady"
|
|
class="absolute inset-0 z-[400] flex flex-col items-center justify-center gap-6 bg-base-200/95 p-8"
|
|
aria-busy="true"
|
|
aria-label="Loading map"
|
|
>
|
|
<Skeleton class="h-12 w-48" />
|
|
<div class="flex gap-3">
|
|
<Skeleton class="h-10 w-24" />
|
|
<Skeleton class="h-10 w-32" />
|
|
<Skeleton class="h-10 w-28" />
|
|
</div>
|
|
<Skeleton class="h-64 w-72 max-w-full" />
|
|
</div>
|
|
<div
|
|
v-if="mapsLoaded && maps.length === 0"
|
|
class="absolute inset-0 z-[500] flex flex-col items-center justify-center gap-4 bg-base-200/90 p-6"
|
|
>
|
|
<p class="text-center text-lg">Map list is empty.</p>
|
|
<p class="text-center text-sm opacity-80">
|
|
Make sure you are logged in and at least one map exists in Admin (uncheck «Hidden» if needed).
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<NuxtLink to="/login" class="btn btn-sm">Login</NuxtLink>
|
|
<NuxtLink to="/admin" class="btn btn-sm btn-primary">Admin</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div ref="mapRef" class="map h-full w-full" />
|
|
<MapCoordsDisplay
|
|
:mapid="mapLogic.state.mapid.value"
|
|
:display-coords="mapLogic.state.displayCoords.value"
|
|
/>
|
|
<div
|
|
v-if="sseConnectionState === 'error' && mapReady"
|
|
class="absolute bottom-4 left-1/2 z-[501] -translate-x-1/2 rounded-lg px-3 py-2 text-sm bg-warning/90 text-warning-content shadow"
|
|
role="status"
|
|
title="Live updates will resume when reconnected"
|
|
>
|
|
<span class="inline-flex items-center gap-2">
|
|
<span class="inline-block size-2 animate-pulse rounded-full bg-current" aria-hidden="true" />
|
|
Reconnecting…
|
|
</span>
|
|
</div>
|
|
<div class="absolute top-2 right-2 z-[501] flex flex-col gap-1">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-sm btn-square rounded-lg bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow hover:border-primary/50"
|
|
:title="fullscreen.isFullscreen.value ? 'Exit fullscreen' : 'Fullscreen'"
|
|
:aria-label="fullscreen.isFullscreen.value ? 'Exit fullscreen' : 'Fullscreen'"
|
|
@click="fullscreen.toggle()"
|
|
>
|
|
<icons-icon-fullscreen-exit v-if="fullscreen.isFullscreen.value" class="size-4" />
|
|
<icons-icon-fullscreen v-else class="size-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-sm btn-square rounded-lg bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow hover:border-primary/50"
|
|
:class="{ 'border-primary bg-primary/10': measureMode }"
|
|
:title="measureMode ? 'Exit measure mode' : 'Measure distance'"
|
|
aria-label="Measure distance"
|
|
@click="measureMode = !measureMode; if (!measureMode) clearMeasure()"
|
|
>
|
|
<icons-icon-ruler class="size-4" />
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-if="measureMode && mapReady"
|
|
class="absolute top-24 right-2 z-[500] rounded-lg px-3 py-2 text-sm bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow"
|
|
>
|
|
<template v-if="measurePointB == null">
|
|
<span class="text-base-content/80">{{ measurePointA == null ? 'Click first point on map' : 'Click second point' }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="font-mono">Distance: {{ measureDistance.toFixed(3) }} units</span>
|
|
<button type="button" class="btn btn-ghost btn-xs ml-2" @click="clearMeasure">Clear</button>
|
|
</template>
|
|
</div>
|
|
<MapControls
|
|
:show-grid-coordinates="mapLogic.state.showGridCoordinates.value"
|
|
@update:show-grid-coordinates="(v) => (mapLogic.state.showGridCoordinates.value = v)"
|
|
:hide-markers="mapLogic.state.hideMarkers.value"
|
|
@update:hide-markers="(v) => (mapLogic.state.hideMarkers.value = v)"
|
|
:selected-map-id="mapLogic.state.selectedMapId.value"
|
|
@update:selected-map-id="(v) => (mapLogic.state.selectedMapId.value = v)"
|
|
:overlay-map-id="mapLogic.state.overlayMapId.value"
|
|
@update:overlay-map-id="(v) => (mapLogic.state.overlayMapId.value = v)"
|
|
:selected-marker-id="mapLogic.state.selectedMarkerId.value"
|
|
@update:selected-marker-id="(v) => (mapLogic.state.selectedMarkerId.value = v)"
|
|
:selected-player-id="mapLogic.state.selectedPlayerId.value"
|
|
@update:selected-player-id="(v) => (mapLogic.state.selectedPlayerId.value = v)"
|
|
:maps="maps"
|
|
:quest-givers="questGivers"
|
|
:players="players"
|
|
:current-map-id="mapLogic.state.mapid.value"
|
|
:current-coords="mapLogic.state.displayCoords.value"
|
|
@zoom-in="mapLogic.zoomIn(leafletMap)"
|
|
@zoom-out="mapLogic.zoomOutControl(leafletMap)"
|
|
@reset-view="mapLogic.resetView(leafletMap)"
|
|
@jump-to-marker="mapLogic.state.selectedMarkerId.value = $event"
|
|
/>
|
|
<MapContextMenu
|
|
:context-menu="mapLogic.contextMenu"
|
|
@wipe-tile="onWipeTile"
|
|
@rewrite-coords="onRewriteCoords"
|
|
@hide-marker="onHideMarker"
|
|
/>
|
|
<MapCoordSetModal
|
|
:coord-set-from="mapLogic.coordSetFrom.value"
|
|
:coord-set="mapLogic.coordSet.value"
|
|
:open="mapLogic.coordSetModalOpen.value"
|
|
@close="mapLogic.closeCoordSetModal()"
|
|
@submit="onSubmitCoordSet"
|
|
/>
|
|
<MapShortcutsOverlay :open="showShortcutsOverlay" @close="showShortcutsOverlay = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MapControls from '~/components/map/MapControls.vue'
|
|
import MapCoordsDisplay from '~/components/map/MapCoordsDisplay.vue'
|
|
import MapContextMenu from '~/components/map/MapContextMenu.vue'
|
|
import MapCoordSetModal from '~/components/map/MapCoordSetModal.vue'
|
|
import MapShortcutsOverlay from '~/components/map/MapShortcutsOverlay.vue'
|
|
import { HnHDefaultZoom, HnHMaxZoom, HnHMinZoom, TileSize } from '~/lib/LeafletCustomTypes'
|
|
import { initLeafletMap, type MapInitResult } from '~/composables/useMapInit'
|
|
import { useMapNavigate } from '~/composables/useMapNavigate'
|
|
import { useFullscreen } from '~/composables/useFullscreen'
|
|
import { startMapUpdates, type UseMapUpdatesReturn, type SseConnectionState } from '~/composables/useMapUpdates'
|
|
import { createMapLayers, type MapLayersManager } from '~/composables/useMapLayers'
|
|
import type { MapInfo, ConfigResponse, MeResponse } from '~/types/api'
|
|
import type L from 'leaflet'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
characterId?: number
|
|
mapId?: number
|
|
gridX?: number
|
|
gridY?: number
|
|
zoom?: number
|
|
}>(),
|
|
{ characterId: -1, mapId: undefined, gridX: 0, gridY: 0, zoom: 1 }
|
|
)
|
|
|
|
const mapContainerRef = ref<HTMLElement | null>(null)
|
|
const mapRef = ref<HTMLElement | null>(null)
|
|
const api = useMapApi()
|
|
/** Global state for navbar Live/Offline: true when at least one character is owned by current user's tokens. */
|
|
const mapLive = useState<boolean>('mapLive', () => false)
|
|
const mapLogic = useMapLogic()
|
|
const { resolvePath } = useAppPaths()
|
|
const mapNavigate = useMapNavigate()
|
|
const fullscreen = useFullscreen(mapContainerRef)
|
|
const showShortcutsOverlay = ref(false)
|
|
const sseConnectionState = ref<SseConnectionState>('connecting')
|
|
const measureMode = ref(false)
|
|
const measurePointA = ref<{ x: number; y: number } | null>(null)
|
|
const measurePointB = ref<{ x: number; y: number } | null>(null)
|
|
const measureLayer = ref<L.LayerGroup | null>(null)
|
|
const measureDistance = computed(() => {
|
|
const a = measurePointA.value
|
|
const b = measurePointB.value
|
|
if (!a || !b) return 0
|
|
return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)
|
|
})
|
|
|
|
function clearMeasure() {
|
|
measurePointA.value = null
|
|
measurePointB.value = null
|
|
if (measureLayer.value && leafletMap) {
|
|
measureLayer.value.clearLayers()
|
|
}
|
|
}
|
|
|
|
/** Fallback marker icon (simple pin) when the real icon image fails to load. */
|
|
const FALLBACK_MARKER_ICON =
|
|
'data:image/svg+xml,' +
|
|
encodeURIComponent(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path fill="%236366f1" stroke="%234f46e5" stroke-width="1.5" d="M16 4c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z"/><circle cx="16" cy="11" r="3" fill="white"/></svg>'
|
|
)
|
|
|
|
const mapReady = ref(false)
|
|
const maps = ref<MapInfo[]>([])
|
|
const mapsLoaded = ref(false)
|
|
const questGivers = ref<Array<{ id: number; name: string }>>([])
|
|
const players = ref<Array<{ id: number; name: string }>>([])
|
|
const auths = ref<string[]>([])
|
|
|
|
let leafletMap: L.Map | null = null
|
|
let mapInit: MapInitResult | null = null
|
|
let updatesHandle: UseMapUpdatesReturn | null = null
|
|
let layersManager: MapLayersManager | null = null
|
|
let intervalId: ReturnType<typeof setInterval> | null = null
|
|
let autoMode = false
|
|
let mapContainer: HTMLElement | null = null
|
|
let contextMenuHandler: ((ev: MouseEvent) => void) | null = null
|
|
let mounted = false
|
|
let visibilityChangeHandler: (() => void) | null = null
|
|
|
|
function toLatLng(x: number, y: number) {
|
|
return leafletMap!.unproject([x, y], HnHMaxZoom)
|
|
}
|
|
|
|
function onWipeTile(coords: { x: number; y: number } | undefined) {
|
|
if (!coords) return
|
|
mapLogic.closeContextMenus()
|
|
api.adminWipeTile({ map: mapLogic.state.mapid.value, x: coords.x, y: coords.y })
|
|
}
|
|
|
|
function onRewriteCoords(coords: { x: number; y: number } | undefined) {
|
|
if (!coords) return
|
|
mapLogic.closeContextMenus()
|
|
mapLogic.openCoordSet(coords)
|
|
}
|
|
|
|
function onHideMarker(id: number | undefined) {
|
|
if (id == null) return
|
|
mapLogic.closeContextMenus()
|
|
api.adminHideMarker({ id })
|
|
const m = layersManager?.findMarkerById(id)
|
|
if (m) m.remove({ map: leafletMap!, markerLayer: mapInit!.markerLayer, mapid: mapLogic.state.mapid.value })
|
|
}
|
|
|
|
function onSubmitCoordSet(from: { x: number; y: number }, to: { x: number; y: number }) {
|
|
api.adminSetCoords({
|
|
map: mapLogic.state.mapid.value,
|
|
fx: from.x,
|
|
fy: from.y,
|
|
tx: to.x,
|
|
ty: to.y,
|
|
})
|
|
mapLogic.closeCoordSetModal()
|
|
}
|
|
|
|
function onKeydown(e: KeyboardEvent) {
|
|
const target = e.target as HTMLElement
|
|
const inInput = /^(INPUT|TEXTAREA|SELECT)$/.test(target?.tagName ?? '')
|
|
if (e.key === 'Escape') {
|
|
if (showShortcutsOverlay.value) showShortcutsOverlay.value = false
|
|
else mapLogic.closeContextMenus()
|
|
return
|
|
}
|
|
if (showShortcutsOverlay.value) return
|
|
if (e.key === '?') {
|
|
showShortcutsOverlay.value = true
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
if (inInput) return
|
|
if (e.key === 'H') {
|
|
mapLogic.state.hideMarkers.value = !mapLogic.state.hideMarkers.value
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
if (e.key === 'G') {
|
|
mapLogic.state.showGridCoordinates.value = !mapLogic.state.showGridCoordinates.value
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
if (e.key === 'f' || e.key === 'F') {
|
|
mapNavigate.focusSearch()
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
mounted = true
|
|
if (import.meta.client) {
|
|
window.addEventListener('keydown', onKeydown)
|
|
}
|
|
if (!import.meta.client || !mapRef.value) return
|
|
|
|
const L = (await import('leaflet')).default
|
|
|
|
// Load maps, characters, config and me in parallel so map can show sooner.
|
|
const [charactersData, mapsData, config, user] = await Promise.all([
|
|
api.getCharacters().then((d) => (Array.isArray(d) ? d : [])).catch(() => []),
|
|
api.getMaps().then((d) => (d && typeof d === 'object' ? d : {})).catch(() => ({})),
|
|
api.getConfig().catch(() => ({})) as Promise<ConfigResponse>,
|
|
api.me().catch(() => null) as Promise<MeResponse | null>,
|
|
])
|
|
|
|
const mapsList: MapInfo[] = []
|
|
const raw = mapsData as Record<
|
|
string,
|
|
{ ID?: number; Name?: string; id?: number; name?: string; size?: number; Hidden?: boolean; hidden?: boolean }
|
|
>
|
|
for (const id in raw) {
|
|
const m = raw[id]
|
|
if (!m || typeof m !== 'object') continue
|
|
const idVal = m.ID ?? m.id
|
|
const nameVal = m.Name ?? m.name
|
|
if (idVal == null || nameVal == null) continue
|
|
const hidden = !!(m.Hidden ?? m.hidden)
|
|
if (hidden) continue
|
|
mapsList.push({ ID: Number(idVal), Name: String(nameVal), size: m.size })
|
|
}
|
|
mapsList.sort((a, b) => (b.size ?? 0) - (a.size ?? 0))
|
|
maps.value = mapsList
|
|
mapsLoaded.value = true
|
|
|
|
if (config?.title) document.title = config.title
|
|
auths.value = user?.auths ?? config?.auths ?? []
|
|
|
|
const initialMapId =
|
|
props.mapId != null && props.mapId >= 1 ? props.mapId : mapsList.length > 0 ? (mapsList[0]?.ID ?? 0) : 0
|
|
mapLogic.state.mapid.value = initialMapId
|
|
|
|
mapInit = await initLeafletMap(mapRef.value, mapsList, initialMapId)
|
|
leafletMap = mapInit.map
|
|
|
|
// Document-level capture so we get contextmenu before any map layer or iframe can swallow it
|
|
mapContainer = leafletMap.getContainer()
|
|
contextMenuHandler = (ev: MouseEvent) => {
|
|
const target = ev.target as Node
|
|
if (!mapContainer?.contains(target)) return
|
|
const isAdmin = auths.value.includes('admin')
|
|
if (import.meta.dev) console.log('[MapView contextmenu]', { isAdmin, auths: auths.value })
|
|
if (isAdmin) {
|
|
ev.preventDefault()
|
|
ev.stopPropagation()
|
|
const rect = mapContainer.getBoundingClientRect()
|
|
const containerPoint = L.point(ev.clientX - rect.left, ev.clientY - rect.top)
|
|
const latlng = leafletMap!.containerPointToLatLng(containerPoint)
|
|
const point = leafletMap!.project(latlng, 6)
|
|
const coords = { x: Math.floor(point.x / TileSize), y: Math.floor(point.y / TileSize) }
|
|
mapLogic.openTileContextMenu(ev.clientX, ev.clientY, coords)
|
|
}
|
|
}
|
|
document.addEventListener('contextmenu', contextMenuHandler, true)
|
|
|
|
layersManager = createMapLayers({
|
|
L,
|
|
map: leafletMap,
|
|
markerLayer: mapInit.markerLayer,
|
|
layer: mapInit.layer,
|
|
overlayLayer: mapInit.overlayLayer,
|
|
getCurrentMapId: () => mapLogic.state.mapid.value,
|
|
setCurrentMapId: (id: number) => { mapLogic.state.mapid.value = id },
|
|
setSelectedMapId: (id: number) => { mapLogic.state.selectedMapId.value = id },
|
|
getAuths: () => auths.value,
|
|
getTrackingCharacterId: () => mapLogic.state.trackingCharacterId.value,
|
|
setTrackingCharacterId: (id: number) => { mapLogic.state.trackingCharacterId.value = id },
|
|
onMarkerContextMenu: mapLogic.openMarkerContextMenu,
|
|
resolveIconUrl: (path) => resolvePath(path),
|
|
fallbackIconUrl: FALLBACK_MARKER_ICON,
|
|
})
|
|
|
|
updatesHandle = startMapUpdates({
|
|
backendBase: mapInit.backendBase,
|
|
layer: mapInit.layer,
|
|
overlayLayer: mapInit.overlayLayer,
|
|
map: leafletMap,
|
|
getCurrentMapId: () => mapLogic.state.mapid.value,
|
|
connectionStateRef: sseConnectionState,
|
|
onMerge: (mapTo: number, shift: { x: number; y: number }) => {
|
|
if (!mounted) return
|
|
const latLng = toLatLng(shift.x * 100, shift.y * 100)
|
|
layersManager!.changeMap(mapTo)
|
|
api.getMarkers().then((body) => {
|
|
if (!mounted) return
|
|
layersManager!.updateMarkers(Array.isArray(body) ? body : [])
|
|
questGivers.value = layersManager!.getQuestGivers()
|
|
})
|
|
leafletMap!.setView(latLng, leafletMap!.getZoom())
|
|
},
|
|
})
|
|
|
|
const { shouldInvalidateTileCache, clearRebuildDoneFlag } = useRebuildZoomsInvalidation()
|
|
if (shouldInvalidateTileCache()) {
|
|
mapInit.layer.cache = {}
|
|
mapInit.overlayLayer.cache = {}
|
|
clearRebuildDoneFlag()
|
|
nextTick(() => {
|
|
mapInit.layer.redraw()
|
|
mapInit.overlayLayer.redraw()
|
|
})
|
|
}
|
|
|
|
const charsList = Array.isArray(charactersData) ? charactersData : []
|
|
layersManager.updateCharacters(charsList)
|
|
players.value = layersManager.getPlayers()
|
|
mapLive.value = charsList.some((c) => c.ownedByMe)
|
|
|
|
if (props.characterId !== undefined && props.characterId >= 0) {
|
|
mapLogic.state.trackingCharacterId.value = props.characterId
|
|
} else if (props.mapId != null && props.gridX != null && props.gridY != null && props.zoom != null) {
|
|
const latLng = toLatLng(props.gridX * 100, props.gridY * 100)
|
|
if (mapLogic.state.mapid.value !== props.mapId) layersManager.changeMap(props.mapId)
|
|
mapLogic.state.selectedMapId.value = props.mapId
|
|
leafletMap.setView(latLng, props.zoom, { animate: false })
|
|
} else if (mapsList.length > 0) {
|
|
const first = mapsList[0]
|
|
if (first) {
|
|
layersManager.changeMap(first.ID)
|
|
mapLogic.state.selectedMapId.value = first.ID
|
|
leafletMap.setView([0, 0], HnHDefaultZoom, { animate: false })
|
|
}
|
|
}
|
|
|
|
// Show map as soon as canvas and layers are ready; markers load in background.
|
|
if (leafletMap) leafletMap.invalidateSize()
|
|
nextTick(() => {
|
|
requestAnimationFrame(() => {
|
|
if (leafletMap) leafletMap.invalidateSize()
|
|
mapReady.value = true
|
|
})
|
|
})
|
|
|
|
// Markers load asynchronously after map is visible.
|
|
api.getMarkers().then((body) => {
|
|
if (!mounted) return
|
|
layersManager!.updateMarkers(Array.isArray(body) ? body : [])
|
|
questGivers.value = layersManager!.getQuestGivers()
|
|
})
|
|
|
|
const CHARACTER_POLL_MS = 4000
|
|
const CHARACTER_POLL_MS_HIDDEN = 30000
|
|
|
|
function pollCharacters() {
|
|
api
|
|
.getCharacters()
|
|
.then((body) => {
|
|
if (!mounted) return
|
|
const list = Array.isArray(body) ? body : []
|
|
layersManager!.updateCharacters(list)
|
|
players.value = layersManager!.getPlayers()
|
|
mapLive.value = list.some((c) => c.ownedByMe)
|
|
})
|
|
.catch(() => {
|
|
if (intervalId) clearInterval(intervalId)
|
|
intervalId = null
|
|
})
|
|
}
|
|
|
|
function startCharacterPoll() {
|
|
if (intervalId) clearInterval(intervalId)
|
|
const ms =
|
|
typeof document !== 'undefined' && document.visibilityState === 'hidden'
|
|
? CHARACTER_POLL_MS_HIDDEN
|
|
: CHARACTER_POLL_MS
|
|
pollCharacters()
|
|
intervalId = setInterval(pollCharacters, ms)
|
|
}
|
|
|
|
startCharacterPoll()
|
|
if (import.meta.client) {
|
|
visibilityChangeHandler = () => {
|
|
startCharacterPoll()
|
|
}
|
|
document.addEventListener('visibilitychange', visibilityChangeHandler)
|
|
}
|
|
|
|
watch(mapLogic.state.showGridCoordinates, (v) => {
|
|
if (!mapInit?.coordLayer || !leafletMap) return
|
|
const coordLayer = mapInit.coordLayer
|
|
const layerWithMap = coordLayer as L.GridLayer & { _map?: L.Map }
|
|
if (v) {
|
|
;(coordLayer.options as { visible?: boolean }).visible = true
|
|
if (!layerWithMap._map) {
|
|
coordLayer.addTo(leafletMap)
|
|
coordLayer.setZIndex(500)
|
|
coordLayer.setOpacity(1)
|
|
coordLayer.bringToFront?.()
|
|
}
|
|
leafletMap.invalidateSize()
|
|
nextTick(() => {
|
|
coordLayer.redraw?.()
|
|
})
|
|
} else {
|
|
coordLayer.setOpacity(0)
|
|
coordLayer.remove()
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => fullscreen.isFullscreen.value,
|
|
() => {
|
|
nextTick(() => {
|
|
requestAnimationFrame(() => {
|
|
if (leafletMap) leafletMap.invalidateSize()
|
|
})
|
|
})
|
|
}
|
|
)
|
|
|
|
watch(mapLogic.state.hideMarkers, (v) => {
|
|
layersManager?.refreshMarkersVisibility(v)
|
|
})
|
|
|
|
watch(mapLogic.state.trackingCharacterId, (value) => {
|
|
if (value === -1) return
|
|
const character = layersManager?.findCharacterById(value)
|
|
if (character) {
|
|
layersManager!.changeMap(character.map)
|
|
const latlng = leafletMap!.unproject([character.position.x, character.position.y], HnHMaxZoom)
|
|
leafletMap!.setView(latlng, HnHMaxZoom)
|
|
autoMode = true
|
|
} else {
|
|
leafletMap!.setView([0, 0], HnHMinZoom)
|
|
mapLogic.state.trackingCharacterId.value = -1
|
|
}
|
|
})
|
|
|
|
watch(mapLogic.state.selectedMapId, (value) => {
|
|
if (value == null) return
|
|
layersManager?.changeMap(value)
|
|
const zoom = leafletMap!.getZoom()
|
|
leafletMap!.setView([0, 0], zoom)
|
|
})
|
|
|
|
watch(mapLogic.state.overlayMapId, (value) => {
|
|
layersManager?.refreshOverlayMarkers(value ?? -1)
|
|
})
|
|
|
|
watch(mapLogic.state.selectedMarkerId, (value) => {
|
|
if (value == null) return
|
|
const marker = layersManager?.findMarkerById(value)
|
|
if (marker?.leafletMarker) leafletMap!.setView(marker.leafletMarker.getLatLng(), leafletMap!.getZoom())
|
|
})
|
|
|
|
watch(mapLogic.state.selectedPlayerId, (value) => {
|
|
if (value != null) mapLogic.state.trackingCharacterId.value = value
|
|
})
|
|
|
|
mapNavigate.setGoTo((mapId: number, x: number, y: number, zoom?: number) => {
|
|
if (mapLogic.state.mapid.value !== mapId && layersManager) {
|
|
layersManager.changeMap(mapId)
|
|
mapLogic.state.selectedMapId.value = mapId
|
|
}
|
|
const latLng = toLatLng(x * TileSize, y * TileSize)
|
|
leafletMap!.setView(latLng, zoom ?? leafletMap!.getZoom(), { animate: true })
|
|
})
|
|
|
|
leafletMap.on('moveend', () => mapLogic.updateDisplayCoords(leafletMap))
|
|
mapLogic.updateDisplayCoords(leafletMap)
|
|
leafletMap.on('drag', () => {
|
|
mapLogic.state.trackingCharacterId.value = -1
|
|
})
|
|
leafletMap.on('zoom', () => {
|
|
if (autoMode) {
|
|
autoMode = false
|
|
} else {
|
|
mapLogic.state.trackingCharacterId.value = -1
|
|
}
|
|
})
|
|
|
|
const measureLayerGroup = L.layerGroup().addTo(leafletMap)
|
|
measureLayerGroup.setZIndex(550)
|
|
measureLayer.value = measureLayerGroup
|
|
leafletMap.on('click', (e: L.LeafletMouseEvent) => {
|
|
if (!measureMode.value) return
|
|
e.originalEvent.stopPropagation()
|
|
const point = leafletMap!.project(e.latlng, HnHMaxZoom)
|
|
const x = point.x / TileSize
|
|
const y = point.y / TileSize
|
|
if (measurePointA.value == null) {
|
|
measurePointA.value = { x, y }
|
|
} else if (measurePointB.value == null) {
|
|
measurePointB.value = { x, y }
|
|
} else {
|
|
measurePointA.value = { x, y }
|
|
measurePointB.value = null
|
|
}
|
|
})
|
|
|
|
watch([measurePointA, measurePointB], () => {
|
|
const layer = measureLayer.value
|
|
if (!layer) return
|
|
layer.clearLayers()
|
|
const a = measurePointA.value
|
|
const b = measurePointB.value
|
|
if (!a) return
|
|
const latLngA = toLatLng(a.x * TileSize, a.y * TileSize)
|
|
L.circleMarker(latLngA, { radius: 6, color: '#6366f1', fillColor: '#6366f1', fillOpacity: 0.8, weight: 2 }).addTo(layer)
|
|
if (b) {
|
|
const latLngB = toLatLng(b.x * TileSize, b.y * TileSize)
|
|
L.circleMarker(latLngB, { radius: 6, color: '#6366f1', fillColor: '#6366f1', fillOpacity: 0.8, weight: 2 }).addTo(layer)
|
|
L.polyline([latLngA, latLngB], { color: '#6366f1', weight: 2, opacity: 0.9 }).addTo(layer)
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
mounted = false
|
|
if (import.meta.client) {
|
|
window.removeEventListener('keydown', onKeydown)
|
|
if (visibilityChangeHandler) {
|
|
document.removeEventListener('visibilitychange', visibilityChangeHandler)
|
|
}
|
|
}
|
|
mapNavigate.setGoTo(null)
|
|
if (contextMenuHandler) {
|
|
document.removeEventListener('contextmenu', contextMenuHandler, true)
|
|
}
|
|
if (intervalId) clearInterval(intervalId)
|
|
updatesHandle?.cleanup()
|
|
if (leafletMap) leafletMap.remove()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.map {
|
|
height: 100%;
|
|
min-height: 400px;
|
|
}
|
|
:deep(.leaflet-container .leaflet-tile-pane img.leaflet-tile) {
|
|
mix-blend-mode: normal;
|
|
visibility: visible !important;
|
|
}
|
|
:deep(.map-tile) {
|
|
width: 100px;
|
|
height: 100px;
|
|
min-width: 100px;
|
|
min-height: 100px;
|
|
position: relative;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
pointer-events: none;
|
|
text-shadow: 0 0 2px #000, 0 1px 2px #000;
|
|
}
|
|
:deep(.map-tile-text) {
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 2px;
|
|
}
|
|
</style>
|