@rural-environmental-registry/map_component 1.0.0 → 1.1.0

package/src/handlers/memorialButtonControl.ts

@@ -0,0 +1,171 @@
+import L, { Map } from 'leaflet'
+
+import fileIconMemorial from '../assets/icons/file-lines-regular-full-gray.svg'
+
+/** Controles Leaflet do memorial descritivo e importação de shapefile no toolbar de desenho. */
+export default class MemorialButtonControl {
+  private readonly _map: Map
+  private _memorialButtonControl: L.Control | null = null
+  private _shapefileRetryTimeoutId: number | null = null
+
+  constructor(map: Map) {
+    this._map = map
+  }
+
+  private getOrCreateMemorialContainer(): HTMLElement {
+    let controlContainer = this._map.getContainer().querySelector('.leaflet-control-memorial') as HTMLElement
+
+    if (!controlContainer) {
+      controlContainer = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-memorial')
+    }
+
+    return controlContainer
+  }
+
+  private ensureMemorialControlOnMap(): void {
+    if (this._memorialButtonControl) return
+
+    const handler = this
+
+    const MemorialControl = L.Control.extend({
+      options: {
+        position: 'topright'
+      },
+      onAdd: () => handler.getOrCreateMemorialContainer()
+    })
+
+    this._memorialButtonControl = new MemorialControl()
+    this._map.addControl(this._memorialButtonControl)
+  }
+
+  private getPolygonButtonContainer(): HTMLElement | null {
+    const polygonIcon = this._map.getContainer().querySelector('.leaflet-pm-toolbar .leaflet-pm-icon-polygon')
+
+    return polygonIcon?.closest('.button-container') as HTMLElement | null
+  }
+
+  public addMemorial(toggleCallback: () => void, buttonTitle: string): void {
+    const existingButton = this._map.getContainer().querySelector('.memorial-btn')
+    if (existingButton) return
+
+    this.ensureMemorialControlOnMap()
+    const controlContainer = this.getOrCreateMemorialContainer()
+
+    const btn = L.DomUtil.create('button', 'memorial-btn leaflet-pm-icon-memorial', controlContainer)
+
+    btn.innerHTML = `<img src="${fileIconMemorial}" alt="${buttonTitle}" />`
+    btn.title = buttonTitle
+
+    L.DomEvent.on(btn, 'click', (e: Event) => {
+      e.stopPropagation()
+      e.preventDefault()
+      toggleCallback()
+    })
+  }
+
+  public attachShapefileToDrawToolbar(importCallback: () => void, buttonTitle: string): boolean {
+    try {
+      const container = this._map.getContainer()
+      if (!container) return false
+
+      if (container.querySelector('.shapefile-toolbar-btn')) {
+        return true
+      }
+
+      const polygonContainer = this.getPolygonButtonContainer()
+      if (!polygonContainer) return false
+
+      const shapefileContainer = L.DomUtil.create('div', 'button-container button-container-shapefile')
+
+      const link = L.DomUtil.create('a', 'leaflet-buttons-control-button shapefile-toolbar-btn', shapefileContainer) as HTMLAnchorElement
+      link.href = '#'
+      link.title = buttonTitle
+      link.setAttribute('role', 'button')
+      link.innerHTML = '<div class="control-icon leaflet-pm-icon-shapefile"></div>'
+
+      polygonContainer.insertAdjacentElement('afterend', shapefileContainer)
+
+      L.DomEvent.on(link, 'click', (e: Event) => {
+        e.stopPropagation()
+        e.preventDefault()
+        importCallback()
+      })
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  public addShapefile(importCallback: () => void, buttonTitle: string, retries = 8): void {
+    const attached = this.attachShapefileToDrawToolbar(importCallback, buttonTitle)
+
+    if (!attached && retries > 0) {
+      this.cancelShapefileRetries()
+      this._shapefileRetryTimeoutId = window.setTimeout(() => {
+        this._shapefileRetryTimeoutId = null
+        this.addShapefile(importCallback, buttonTitle, retries - 1)
+      }, 150)
+    }
+  }
+
+  private cancelShapefileRetries(): void {
+    if (this._shapefileRetryTimeoutId !== null) {
+      window.clearTimeout(this._shapefileRetryTimeoutId)
+      this._shapefileRetryTimeoutId = null
+    }
+  }
+
+  public updateMemorialTitle(newTitle: string): void {
+    const existingButton = this._map.getContainer().querySelector('.memorial-btn') as HTMLButtonElement
+
+    if (existingButton) {
+      existingButton.title = newTitle
+      const img = existingButton.querySelector('img')
+      if (img) {
+        img.alt = newTitle
+      }
+    }
+  }
+
+  public updateShapefileTitle(newTitle: string): void {
+    const existingButton = this._map.getContainer().querySelector('.shapefile-toolbar-btn') as HTMLAnchorElement
+
+    if (existingButton) {
+      existingButton.title = newTitle
+    }
+  }
+
+  public removeShapefileFromToolbar(): void {
+    this._map.getContainer().querySelector('.button-container-shapefile')?.remove()
+  }
+
+  public remove(): void {
+    this.cancelShapefileRetries()
+    try {
+      this.removeShapefileFromToolbar()
+
+      const container = this._map.getContainer()
+      const controlContainer = container?.querySelector('.leaflet-control-memorial')
+
+      if (controlContainer) {
+        controlContainer.querySelector('.memorial-btn')?.remove()
+
+        if (controlContainer.children.length === 0) {
+          controlContainer.remove()
+        }
+      }
+    } catch {
+      // Map container might already be destroyed or unavailable
+    }
+
+    if (this._memorialButtonControl) {
+      try {
+        this._map.removeControl(this._memorialButtonControl)
+      } catch {
+        // Ignore if map is already destroyed
+      }
+      this._memorialButtonControl = null
+    }
+  }
+}

package/src/handlers/toolsConstants.ts

@@ -0,0 +1,69 @@
+import { MapToolsConfig } from '../types'
+
+export const DEFAULT_MAP_TOOLS: MapToolsConfig = {
+  show: false,
+  position: 'topright',
+  zoom: {
+    show: true,
+    titleIn: 'Zoom in',
+    titleOut: 'Zoom out'
+  },
+  fullscreen: {
+    show: true,
+    title: 'Fullscreen'
+  },
+  center: {
+    show: true,
+    title: 'Center map',
+    target: 'drawn',
+    padding: [20, 20]
+  },
+  measureArea: {
+    show: true,
+    title: 'Measure',
+    shapeOptions: {
+      color: '#e67e22',
+      fillColor: '#e67e22',
+      fillOpacity: 0.2,
+      weight: 2
+    }
+  },
+  measureLine: {
+    show: true,
+    title: 'Measure line'
+  },
+  measurePolygon: {
+    show: true,
+    title: 'Measure polygon'
+  },
+  texts: {
+    measureResult: 'Measurement',
+    measureLength: 'Distance',
+    measureArea: 'Area',
+    measurePanelTitle: 'Measure distances and areas',
+    measureLineTitle: 'Measure line',
+    measurePolygonTitle: 'Measure polygon',
+    measureLineHelp: 'Click two points on the map. Double-click to finish the line.',
+    measurePolygonHelp:
+      'Click to add vertices. Finish on the first point, use Finish, or double-click.',
+    measureCancel: 'Cancel',
+    measureFinish: 'Finish measurement',
+    noGeometry: 'No geometries to center on'
+  }
+}
+
+export function resolveMapToolsConfig(tools?: MapToolsConfig): MapToolsConfig | null {
+  if (!tools?.show) return null
+
+  return {
+    ...DEFAULT_MAP_TOOLS,
+    ...tools,
+    zoom: { ...DEFAULT_MAP_TOOLS.zoom, ...tools.zoom },
+    fullscreen: { ...DEFAULT_MAP_TOOLS.fullscreen, ...tools.fullscreen },
+    center: { ...DEFAULT_MAP_TOOLS.center, ...tools.center },
+    measureArea: { ...DEFAULT_MAP_TOOLS.measureArea, ...tools.measureArea },
+    measureLine: { ...DEFAULT_MAP_TOOLS.measureLine, ...tools.measureLine },
+    measurePolygon: { ...DEFAULT_MAP_TOOLS.measurePolygon, ...tools.measurePolygon },
+    texts: { ...DEFAULT_MAP_TOOLS.texts, ...tools.texts }
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import MapaDPG from './components/MapDPG.vue'
+
+export { createStableMarker, bindMarkerZoomStability, STABLE_MARKER_DEFAULTS } from './utils/stableMarker'
+export type { StableMarkerOptions } from './utils/stableMarker'
+
+export default MapaDPG

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/types/index.ts

@@ -0,0 +1,259 @@
+import { MapOptions, Layer, PathOptions, ControlOptions, ControlPosition } from 'leaflet'
+import { GeoJsonObject } from 'geojson'
+
+// @ts-ignore
+import { PM } from '@geoman-io/leaflet-geoman-free'
+
+export type FaIconName =
+  | 'check'
+  | 'xmark'
+  | 'chevron-right'
+  | 'chevron-left'
+  | 'terminal'
+  | 'file-lines'
+  | 'upload'
+  | 'pencil'
+  | 'trash'
+  | 'chevron-down'
+
+export type DrawnArea = {
+  m2: number
+  km2: number
+  ha: number
+}
+
+export type IncrementedLayer = Layer & { drawnArea: DrawnArea }
+
+export type LayerData = {
+  baseUrl: string
+  geojson?: GeoJsonObject | GeoJsonObject[]
+  layers: string
+  format: string
+  transparent: boolean
+  name: string
+  activeDefault: boolean
+  cqlFilter?: string
+  active: boolean
+  key: string
+  toggle: {
+    active: string
+    inactive: string
+  }
+  style: {
+    color: string
+    fillColor: string
+  }
+  options?: any
+}
+
+export type GroupLayerData = {
+  name: string
+  key: string
+  toggle: {
+    active: string
+    inactive: string
+  }
+  layers: LayerData[]
+}
+
+export type LayersConfig = GroupLayerData[]
+
+export type DrawingEvent = {
+  type: 'created' | 'edited' | 'deleted'
+  layer: IncrementedLayer
+}
+
+export type BaseMapLayer = {
+  name: string
+  key: string
+  default: boolean
+  url: string
+  tms?: boolean
+  minZoom?: number
+  maxZoom?: number
+  maxNativeZoom?: number
+  errorTileUrl?: string
+  minZoomWarning?: number | null
+}
+
+export type BaseMapLayers = BaseMapLayer[]
+
+export type MapLayers = {
+  mapLayers: BaseMapLayers
+  customLayers?: LayersConfig
+}
+
+export type MapConfigConfig = MapOptions & {
+  id: string
+  removeControlLayers?: boolean
+  zoomControlPosition?: ControlPosition
+  /** Reposiciona marcadores após zoom (evita drift de divIcon). Padrão: true. */
+  stabilizeMarkersOnZoom?: boolean
+}
+
+export type MapConfig = {
+  config?: MapConfigConfig
+}
+
+export type LayersMenuConfig = {
+  size: 'small' | 'medium' | 'large'
+  removeMenu?: boolean
+  persist: boolean
+}
+
+export type MemorialConfig = {
+  show: boolean
+  config?: any
+  controlTexts?: any
+}
+
+export type MapToolsConfig = {
+  show?: boolean
+  position?: ControlPosition
+  zoom?: { show?: boolean; titleIn?: string; titleOut?: string }
+  fullscreen?: { show?: boolean; title?: string }
+  center?: {
+    show?: boolean
+    title?: string
+    target?: 'drawn' | 'initial'
+    padding?: [number, number]
+  }
+  measureArea?: {
+    show?: boolean
+    title?: string
+    shapeOptions?: PathOptions
+  }
+  measureLine?: {
+    show?: boolean
+    title?: string
+  }
+  measurePolygon?: {
+    show?: boolean
+    title?: string
+  }
+  texts?: {
+    measureResult?: string
+    measureLength?: string
+    measureArea?: string
+    measureCancel?: string
+    measureFinish?: string
+    measurePanelTitle?: string
+    measureLineTitle?: string
+    measurePolygonTitle?: string
+    measureLineHelp?: string
+    measurePolygonHelp?: string
+    noGeometry?: string
+  }
+}
+
+export type MeasureCompleteEvent = {
+  m2?: number
+  km2?: number
+  ha?: number
+  lengthM?: number
+  lengthKm?: number
+  geojson: GeoJsonObject
+}
+
+export type MapOptionsConfig = {
+  layersMenu?: LayersMenuConfig
+  map: MapConfig
+  drawing?: DrawingConfig
+  tools?: MapToolsConfig
+}
+
+export type DrawingConfig = DrawingControlOptions & DisplayDrawingControl
+
+export type TranslationConfig = {
+  lang?: PM.SupportLocales
+  customTexts?: PM.Translations
+}
+
+export type GeomanDrawingEvent = {
+  shape: PM.SUPPORTED_SHAPES
+  layer: Layer
+  [key: string]: any
+}
+
+export type ToolbarOptions = {
+  [K in PM.ToolbarOptions]: ControlOptions | PM.BlockPositions | boolean | PathOptions | undefined
+}
+
+export type PMToolbarOptions = PM.ToolbarOptions
+
+export type DrawingControlOptions = {
+  options: ToolbarOptions
+  translation: TranslationConfig
+}
+
+type DisplayDrawingControl = {
+  show: boolean
+}
+
+export type PMSupportedShapes = PM.SUPPORTED_SHAPES
+
+export type CoordinatePanelTexts = {
+  title?: string
+  addPoint?: string
+  editPoint?: string
+  removePoint?: string
+  actions?: string
+  clearGeometries?: string
+  index?: string
+  x?: string
+  y?: string
+  azimuth?: string
+  distance?: string
+  noPoints?: string
+  addPointTitle?: string
+  editPointTitle?: string
+  removePointTitle?: string
+  clearGeometriesTitle?: string
+  addPointDescription?: string
+  editPointDescription?: string
+  removePointDescription?: string
+  clearGeometriesDescription?: string
+  memorialDescriptive?: string
+  referenceSystem?: string
+  selectSystem?: string
+  sirgas2000?: string
+  coordinateFormat?: string
+  selectFormat?: string
+  decimalDegrees?: string
+  degreesMinutesSeconds?: string
+  manualInput?: string
+  insertCoordinates?: string
+  xLongitude?: string
+  yLatitude?: string
+  degrees?: string
+  minutes?: string
+  seconds?: string
+  addedPoints?: string
+  finalizeGeometry?: string
+  csvUpload?: string
+  csvFileUpload?: string
+  dragCsvFile?: string
+  csvColumnsInfo?: string
+  applyCsvCoordinates?: string
+  shapefileUpload?: string
+  shapefileFileUpload?: string
+  dragShapefileZip?: string
+  shapefileZipInfo?: string
+  shapefileAppliedSuccess?: string
+  placeholderLongitude?: string
+  placeholderLatitude?: string
+  placeholderAzimuth?: string
+  placeholderDistance?: string
+  placeholderDegrees?: string
+  placeholderMinutes?: string
+  placeholderSeconds?: string
+  errorXYRequired?: string
+  errorDegreesRequired?: string
+  errorFirstRowXY?: string
+  errorProvideCoordinatesOrAzimuthDistance?: string
+}
+
+export type DescriptiveMemorial = {
+  show: boolean
+  customTexts?: CoordinatePanelTexts
+}

package/src/types/json.d.ts

@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: any
+  export default value
+}

package/src/types/shpjs.d.ts

@@ -0,0 +1,7 @@
+declare module 'shpjs' {
+  import type { Feature, FeatureCollection } from 'geojson'
+
+  function shp(buffer: ArrayBuffer): Promise<FeatureCollection | Feature | Feature[]>
+
+  export default shp
+}

package/src/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}

package/src/utils/CoordinateConverter.ts

@@ -0,0 +1,43 @@
+export class CoordinateConverter {
+  static dmsToDD(degrees: number, minutes: number, seconds: number): number {
+    return degrees + minutes / 60 + seconds / 3600
+  }
+
+  static ddToDMS(decimalDegrees: number): { degrees: number; minutes: number; seconds: number } {
+    const degrees = Math.floor(Math.abs(decimalDegrees))
+    const minutesDecimal = (Math.abs(decimalDegrees) - degrees) * 60
+    const minutes = Math.floor(minutesDecimal)
+    const seconds = (minutesDecimal - minutes) * 60
+
+    return {
+      degrees: decimalDegrees < 0 ? -degrees : degrees,
+      minutes,
+      seconds
+    }
+  }
+  static dmmToDD(degrees: number, decimalMinutes: number): number {
+    return degrees + decimalMinutes / 60
+  }
+
+  static ddToDMM(decimalDegrees: number): { degrees: number; decimalMinutes: number } {
+    const degrees = Math.floor(Math.abs(decimalDegrees))
+    const decimalMinutes = (Math.abs(decimalDegrees) - degrees) * 60
+
+    return {
+      degrees: decimalDegrees < 0 ? -degrees : degrees,
+      decimalMinutes
+    }
+  }
+
+  static formatDMS(degrees: number, minutes: number, seconds: number): string {
+    return `${Math.abs(degrees)}° ${minutes}' ${seconds.toFixed(2)}"`
+  }
+
+  static formatDMM(degrees: number, decimalMinutes: number): string {
+    return `${Math.abs(degrees)}° ${decimalMinutes.toFixed(2)}'`
+  }
+
+  static formatDD(decimalDegrees: number): string {
+    return `${decimalDegrees.toFixed(5)}°`
+  }
+}

package/src/utils/areaCalculator.ts

@@ -0,0 +1,9 @@
+import { calculateLayerArea, formatAreaHa } from './geometryCalculator'
+
+export { calculateLayerArea, formatAreaHa }
+
+export function formatAreaValue(value: number, unit: 'ha' | 'm2' | 'km2'): string {
+  const decimals = unit === 'm2' ? 0 : 4
+  const suffix = unit === 'ha' ? ' ha' : unit === 'km2' ? ' km²' : ' m²'
+  return `${value.toLocaleString(undefined, { maximumFractionDigits: decimals })}${suffix}`
+}

package/src/utils/drawingPathOptions.ts

@@ -0,0 +1,57 @@
+import type { Map, PathOptions } from 'leaflet'
+import type { DrawingConfig } from '../types'
+
+const DEFAULT_PATH_OPTIONS: PathOptions = { color: '#3388ff' }
+
+export type MemorialDrawShape = 'polygon' | 'polyline'
+
+const GEOMAN_SHAPE: Record<MemorialDrawShape, 'Polygon' | 'Line'> = {
+  polygon: 'Polygon',
+  polyline: 'Line'
+}
+
+const CONFIG_KEY: Record<MemorialDrawShape, 'drawPolygon' | 'drawPolyline'> = {
+  polygon: 'drawPolygon',
+  polyline: 'drawPolyline'
+}
+
+function isPathOptions(value: unknown): value is PathOptions {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    ('color' in value || 'fillColor' in value || 'weight' in value)
+  )
+}
+
+function fromGeomanDraw(map: Map, shape: MemorialDrawShape): PathOptions | undefined {
+  const pm = (map as Map & { pm?: { Draw?: Record<string, { options?: { pathOptions?: PathOptions } }> } }).pm
+  const pathOptions = pm?.Draw?.[GEOMAN_SHAPE[shape]]?.options?.pathOptions
+  return isPathOptions(pathOptions) ? pathOptions : undefined
+}
+
+function fromDrawingConfig(
+  drawingConfig: DrawingConfig | undefined,
+  shape: MemorialDrawShape
+): PathOptions | undefined {
+  const value = drawingConfig?.options?.[CONFIG_KEY[shape]]
+  return isPathOptions(value) ? value : undefined
+}
+
+/**
+ * Resolve estilos de desenho para geometrias do memorial.
+ * Prioridade: opções ativas do Geoman (camada selecionada) → config estática → padrão.
+ */
+export function resolveDrawingPathOptions(
+  map: Map | undefined,
+  drawingConfig: DrawingConfig | undefined,
+  shape: MemorialDrawShape
+): PathOptions {
+  const fromGeoman = map ? fromGeomanDraw(map, shape) : undefined
+  const fromConfig = fromDrawingConfig(drawingConfig, shape)
+
+  return {
+    ...DEFAULT_PATH_OPTIONS,
+    ...fromConfig,
+    ...fromGeoman
+  }
+}

package/src/utils/geometryCalculator.ts

@@ -0,0 +1,62 @@
+import L, { Layer } from 'leaflet'
+import { area, length } from '@turf/turf'
+import { DrawnArea } from '../types'
+
+export function isClosedPolygonLayer(layer: Layer): boolean {
+  if (layer instanceof L.Polygon || layer instanceof L.Rectangle) return true
+
+  const geo = (layer as L.Polyline).toGeoJSON() as GeoJSON.Feature
+  const geomType = geo.geometry?.type
+  return geomType === 'Polygon' || geomType === 'MultiPolygon'
+}
+
+export function calculateLayerArea(layer: Layer): DrawnArea {
+  if (isClosedPolygonLayer(layer)) {
+    const drawnArea = area((layer as L.Polygon).toGeoJSON())
+
+    return {
+      m2: drawnArea,
+      km2: drawnArea / 1_000_000,
+      ha: drawnArea / 10_000
+    }
+  }
+
+  return { m2: 0, km2: 0, ha: 0 }
+}
+
+export function calculateLayerLength(layer: Layer): { m: number; km: number } {
+  const geo = (layer as L.Polyline).toGeoJSON() as GeoJSON.Feature
+  const geomType = geo.geometry?.type
+
+  if (
+    geomType === 'LineString' ||
+    geomType === 'MultiLineString' ||
+    geomType === 'Polygon' ||
+    geomType === 'MultiPolygon'
+  ) {
+    const km = length(geo, { units: 'kilometers' })
+    return { m: km * 1000, km }
+  }
+
+  return { m: 0, km: 0 }
+}
+
+export function formatLengthKm(km: number): string {
+  return `${km.toLocaleString(undefined, { maximumFractionDigits: 4 })} km`
+}
+
+export function formatAreaKm2(km2: number): string {
+  return `${km2.toLocaleString(undefined, { maximumFractionDigits: 6 })} km²`
+}
+
+export function formatAreaHa(value: number): string {
+  return `${value.toLocaleString(undefined, { maximumFractionDigits: 4 })} ha`
+}
+
+export function formatLengthValue(value: number, unit: 'm' | 'km'): string {
+  const decimals = unit === 'm' ? 2 : 4
+  const suffix = unit === 'km' ? ' km' : ' m'
+  return `${value.toLocaleString(undefined, { maximumFractionDigits: decimals })}${suffix}`
+}
+
+export { formatAreaHa as formatAreaValue }