Nikolay Tatarinov
49af08c13f
- Updated API documentation to clarify the initial data message structure for real-time tile updates. - Modified MapView component to load configuration and user data in parallel, improving map loading speed. - Implemented asynchronous loading for markers after the map is visible, enhancing user experience. - Introduced batching for tile updates to optimize rendering performance during map updates. - Refactored character and marker creation functions to utilize dynamic Leaflet imports, improving modularity.
114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
import type L from 'leaflet'
|
|
import { HnHMaxZoom } from '~/lib/LeafletCustomTypes'
|
|
|
|
export type LeafletApi = typeof import('leaflet')
|
|
|
|
/** SVG data URL for character marker icon (teal pin, bottom-center anchor). */
|
|
const CHARACTER_ICON_URL =
|
|
'data:image/svg+xml,' +
|
|
encodeURIComponent(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32" width="24" height="32">' +
|
|
'<path fill="#0d9488" stroke="#0f766e" stroke-width="1" d="M12 2a6 6 0 0 1 6 6c0 4-6 10-6 10s-6-6-6-10a6 6 0 0 1 6-6z"/>' +
|
|
'<circle cx="12" cy="8" r="2.5" fill="white"/>' +
|
|
'</svg>'
|
|
)
|
|
|
|
function createCharacterIcon(L: LeafletApi): L.Icon {
|
|
return new L.Icon({
|
|
iconUrl: CHARACTER_ICON_URL,
|
|
iconSize: [24, 32],
|
|
iconAnchor: [12, 32],
|
|
popupAnchor: [0, -32],
|
|
})
|
|
}
|
|
|
|
export interface CharacterData {
|
|
name: string
|
|
position: { x: number; y: number }
|
|
type: string
|
|
id: number
|
|
map: number
|
|
}
|
|
|
|
export interface CharacterMapViewRef {
|
|
map: L.Map
|
|
mapid: number
|
|
markerLayer?: L.LayerGroup
|
|
}
|
|
|
|
export interface MapCharacter {
|
|
id: number
|
|
name: string
|
|
position: { x: number; y: number }
|
|
type: string
|
|
map: number
|
|
text: string
|
|
value: number
|
|
leafletMarker: L.Marker | null
|
|
remove: (mapview: CharacterMapViewRef) => void
|
|
add: (mapview: CharacterMapViewRef) => void
|
|
update: (mapview: CharacterMapViewRef, updated: CharacterData | MapCharacter) => void
|
|
setClickCallback: (callback: (e: L.LeafletMouseEvent) => void) => void
|
|
}
|
|
|
|
export function createCharacter(data: CharacterData, L: LeafletApi): MapCharacter {
|
|
let leafletMarker: L.Marker | null = null
|
|
let onClick: ((e: L.LeafletMouseEvent) => void) | null = null
|
|
const characterIcon = createCharacterIcon(L)
|
|
|
|
const character: MapCharacter = {
|
|
id: data.id,
|
|
name: data.name,
|
|
position: { ...data.position },
|
|
type: data.type,
|
|
map: data.map,
|
|
text: data.name,
|
|
value: data.id,
|
|
|
|
get leafletMarker() {
|
|
return leafletMarker
|
|
},
|
|
|
|
remove(mapview: CharacterMapViewRef): void {
|
|
if (leafletMarker) {
|
|
const layer = mapview.markerLayer ?? mapview.map
|
|
layer.removeLayer(leafletMarker)
|
|
leafletMarker = null
|
|
}
|
|
},
|
|
|
|
add(mapview: CharacterMapViewRef): void {
|
|
if (character.map === mapview.mapid) {
|
|
const position = mapview.map.unproject([character.position.x, character.position.y], HnHMaxZoom)
|
|
leafletMarker = L.marker(position, { icon: characterIcon, title: character.name })
|
|
leafletMarker.on('click', (e: L.LeafletMouseEvent) => {
|
|
if (onClick) onClick(e)
|
|
})
|
|
const targetLayer = mapview.markerLayer ?? mapview.map
|
|
leafletMarker.addTo(targetLayer)
|
|
}
|
|
},
|
|
|
|
update(mapview: CharacterMapViewRef, updated: CharacterData | MapCharacter): void {
|
|
if (character.map !== updated.map) {
|
|
character.remove(mapview)
|
|
}
|
|
character.map = updated.map
|
|
character.position = { ...updated.position }
|
|
if (!leafletMarker && character.map === mapview.mapid) {
|
|
character.add(mapview)
|
|
}
|
|
if (leafletMarker) {
|
|
const position = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
|
|
leafletMarker.setLatLng(position)
|
|
}
|
|
},
|
|
|
|
setClickCallback(callback: (e: L.LeafletMouseEvent) => void): void {
|
|
onClick = callback
|
|
},
|
|
}
|
|
|
|
return character
|
|
}
|