hnh-map/frontend-nuxt/lib/Marker.ts

import { HnHMaxZoom, ImageIcon } from '~/lib/LeafletCustomTypes'
import * as L from 'leaflet'

export interface MarkerData {
  id: number
  position: { x: number; y: number }
  name: string
  image: string
  hidden: boolean
  map: number
}

export interface MapViewRef {
  map: L.Map
  mapid: number
  markerLayer: L.LayerGroup
}

function detectType(name: string): string {
  if (name === 'gfx/invobjs/small/bush' || name === 'gfx/invobjs/small/bumling') return 'quest'
  if (name === 'custom') return 'custom'
  return name.substring('gfx/terobjs/mm/'.length)
}

export class Marker {
  id: number
  position: { x: number; y: number }
  name: string
  image: string
  type: string
  marker: L.Marker | null = null
  text: string
  value: number
  hidden: boolean
  map: number
  onClick: ((e: L.LeafletMouseEvent) => void) | null = null
  onContext: ((e: L.LeafletMouseEvent) => void) | null = null

  constructor(markerData: MarkerData) {
    this.id = markerData.id
    this.position = markerData.position
    this.name = markerData.name
    this.image = markerData.image
    this.type = detectType(this.image)
    this.text = this.name
    this.value = this.id
    this.hidden = markerData.hidden
    this.map = markerData.map
  }

  remove(_mapview: MapViewRef): void {
    if (this.marker) {
      this.marker.remove()
      this.marker = null
    }
  }

  add(mapview: MapViewRef): void {
    if (!this.hidden) {
      let icon: L.Icon
      if (this.image === 'gfx/terobjs/mm/custom') {
        icon = new ImageIcon({
          iconUrl: 'gfx/terobjs/mm/custom.png',
          iconSize: [21, 23],
          iconAnchor: [11, 21],
          popupAnchor: [1, 3],
          tooltipAnchor: [1, 3],
        })
      } else {
        icon = new ImageIcon({ iconUrl: `${this.image}.png`, iconSize: [32, 32] })
      }

      const position = mapview.map.unproject([this.position.x, this.position.y], HnHMaxZoom)
      this.marker = L.marker(position, { icon, title: this.name })
      this.marker.addTo(mapview.markerLayer)
      this.marker.on('click', this.callClickCallback.bind(this))
      this.marker.on('contextmenu', this.callContextCallback.bind(this))
    }
  }

  update(mapview: MapViewRef, updated: MarkerData): void {
    this.position = updated.position
    this.name = updated.name
    this.hidden = updated.hidden
    this.map = updated.map
    if (this.marker) {
      const position = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
      this.marker.setLatLng(position)
    }
  }

  jumpTo(map: L.Map): void {
    if (this.marker) {
      const position = map.unproject([this.position.x, this.position.y], HnHMaxZoom)
      this.marker.setLatLng(position)
    }
  }

  setClickCallback(callback: (e: L.LeafletMouseEvent) => void): void {
    this.onClick = callback
  }

  callClickCallback(e: L.LeafletMouseEvent): void {
    if (this.onClick != null) this.onClick(e)
  }

  setContextMenu(callback: (e: L.LeafletMouseEvent) => void): void {
    this.onContext = callback
  }

  callContextCallback(e: L.LeafletMouseEvent): void {
    if (this.onContext != null) this.onContext(e)
  }
}