@rural-environmental-registry/map_component 1.0.0 → 1.2.0

package/src/assets/styles/leaflet.css

@@ -0,0 +1,361 @@
+@import 'leaflet/dist/leaflet.css';
+
+.map-container {
+  --map-control-size: var(--mapa-size-base-30);
+  --map-control-icon-size: var(--mapa-size-base-20);
+
+  .leaflet-control-layers {
+    border: none !important;
+    border-radius: var(--mapa-base-radius-10);
+    background-color: var(--mapa-base-white);
+    box-shadow: var(--mapa-base-box-shadow);
+    box-sizing: border-box;
+  }
+
+  .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
+    width: var(--map-control-size) !important;
+    min-width: var(--map-control-size);
+  }
+
+  .leaflet-control-layers.leaflet-control-layers-expanded {
+    width: auto !important;
+    min-width: 10rem;
+  }
+
+  .leaflet-control-layers-separator {
+    display: none;
+  }
+
+  .leaflet-control-layers label {
+    font-size: var(--mapa-fs-15);
+    color: var(--mapa-base-black);
+    padding: var(--mapa-size-base-5);
+    cursor: pointer;
+    margin-top: var(--mapa-size-base-2);
+    margin-bottom: var(--mapa-size-base-2);
+  }
+
+  .leaflet-control-layers input[type='radio'] {
+    accent-color: var(--mapa-base-green);
+  }
+
+  .leaflet-control-layers-overlays {
+    display: none;
+  }
+
+  .leaflet-control-layers-toggle {
+    background-image: url('../icons/layer-icon.svg');
+    background-size: var(--map-control-icon-size) var(--map-control-icon-size) !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    width: var(--map-control-size) !important;
+    height: var(--map-control-size) !important;
+    line-height: var(--map-control-size) !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-sizing: border-box !important;
+  }
+
+  /* zoom */
+
+  .leaflet-control-zoom {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: var(--mapa-base-box-shadow);
+    border-radius: var(--mapa-base-radius-10);
+    overflow: hidden;
+    width: var(--map-control-size) !important;
+    box-sizing: border-box;
+  }
+
+  .leaflet-control-zoom a {
+    width: var(--map-control-size) !important;
+    height: var(--map-control-size) !important;
+    font-size: var(--mapa-fs-22) !important;
+    line-height: var(--map-control-size) !important;
+    border: none !important;
+    background-color: var(--mapa-base-white) !important;
+    color: var(--mapa-base-gray);
+    box-sizing: border-box;
+  }
+
+  .leaflet-control-zoom a:first-child {
+    border-top-left-radius: var(--mapa-base-radius-10) !important;
+    border-top-right-radius: var(--mapa-base-radius-10) !important;
+  }
+
+  .leaflet-control-zoom a:last-child {
+    border-bottom-left-radius: var(--mapa-base-radius-10) !important;
+    border-bottom-right-radius: var(--mapa-base-radius-10) !important;
+  }
+
+  .leaflet-control-zoom a:hover {
+    background-color: #f4f4f4 !important;
+  }
+
+  /* Geoman.io */
+
+  .leaflet-pm-toolbar {
+    border-radius: var(--mapa-base-radius-10);
+    background-color: var(--mapa-base-white);
+    box-shadow: var(--mapa-base-box-shadow);
+  }
+
+  .leaflet-pm-toolbar.leaflet-pm-draw.leaflet-bar.leaflet-control {
+    transform: translateX(-1.5px);
+  }
+
+  .leaflet-pm-toolbar .button-container {
+    padding: 0;
+    margin: 0;
+
+    &:first-child a {
+      border-top-right-radius: var(--mapa-base-radius-10);
+      border-top-left-radius: var(--mapa-base-radius-10);
+    }
+
+    &:last-child a {
+      border-bottom-right-radius: var(--mapa-base-radius-10);
+      border-bottom-left-radius: var(--mapa-base-radius-10);
+    }
+  }
+
+  .leaflet-pm-toolbar .control-icon,
+  .leaflet-pm-toolbar .leaflet-pm-action {
+    width: var(--map-control-size) !important;
+    height: var(--map-control-size) !important;
+    line-height: var(--map-control-size) !important;
+    background-size: var(--map-control-icon-size) var(--map-control-icon-size) !important;
+    background-position: center center !important;
+    background-repeat: no-repeat !important;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .leaflet-pm-toolbar .leaflet-pm-icon-shapefile {
+    background-image: url('../icons/file-import-regular-full-gray.svg');
+  }
+
+  /* Ajuste óptico: polígono e importar no glyph do Geoman/FA */
+  .leaflet-pm-toolbar .leaflet-pm-icon-polygon {
+    background-position: calc(50%) center !important;
+  }
+
+  .leaflet-pm-toolbar .leaflet-pm-icon-shapefile {
+    background-position: calc(50% + 1px) center !important;
+  }
+
+  .leaflet-pm-toolbar .button-container a,
+  .leaflet-pm-toolbar .button-container .leaflet-buttons-control-button {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    width: var(--map-control-size) !important;
+    height: var(--map-control-size) !important;
+    padding: 0 !important;
+    box-sizing: border-box;
+  }
+
+  .leaflet-pm-actions-container {
+    display: none !important;
+  }
+
+  .map-container--measuring .leaflet-pm-actions-container {
+    display: flex !important;
+  }
+
+  /* Ferramentas de medida — dois botões (reta / polígono) + painel estilo leaflet-measure */
+  .leaflet-control-measure-tools {
+    position: relative;
+    background: transparent;
+    box-shadow: none;
+    width: var(--map-control-size) !important;
+    min-width: var(--map-control-size) !important;
+    max-width: var(--map-control-size) !important;
+    height: auto !important;
+    min-height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  .leaflet-control-measure-tools .measure-tools-buttons {
+    display: flex;
+    flex-direction: column;
+    width: var(--map-control-size);
+    border-radius: var(--mapa-base-radius-10);
+    overflow: hidden;
+    box-shadow: var(--mapa-base-box-shadow);
+  }
+
+  .leaflet-control-measure-tools .measure-tools-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--map-control-size);
+    height: var(--map-control-size);
+    padding: 0;
+    border: none;
+    background-color: var(--mapa-base-white);
+    color: var(--mapa-base-gray);
+    cursor: pointer;
+    box-sizing: border-box;
+    line-height: 1;
+  }
+
+  .leaflet-control-measure-tools .measure-tools-btn:not(:last-child) {
+    border-bottom: var(--mapa-size-base-1) solid rgba(0, 0, 0, 0.08);
+  }
+
+  .leaflet-control-measure-tools .measure-tools-btn:hover {
+    background-color: #f4f4f4;
+    color: var(--mapa-base-black);
+  }
+
+  .leaflet-control-measure-tools .measure-tools-btn--active {
+    background-color: var(--mapa-base-green);
+    color: var(--mapa-base-white);
+  }
+
+  .leaflet-control-measure-tools .measure-tools-btn svg {
+    display: block;
+    width: var(--map-control-icon-size);
+    height: var(--map-control-icon-size);
+  }
+
+  .leaflet-control-measure-tools .measure-tools-interaction {
+    position: absolute;
+    top: calc(100% + var(--mapa-size-base-10));
+    right: 0;
+    left: auto;
+    width: 17.5rem;
+    min-width: 12rem;
+    max-width: 17.5rem;
+    max-height: min(24rem, 50vh);
+    overflow-y: auto;
+    padding: 10px 12px;
+    border-radius: var(--mapa-base-radius-10);
+    box-shadow: var(--mapa-base-box-shadow);
+    background-color: var(--mapa-base-white);
+    box-sizing: border-box;
+    z-index: 1000;
+    pointer-events: auto;
+  }
+
+  .leaflet-control-measure-tools.measure-tools-expanded {
+    z-index: 1001;
+  }
+
+  .leaflet-control-measure-tools h3 {
+    margin: 0 0 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+    font-size: var(--mapa-fs-15);
+    color: var(--mapa-base-black);
+  }
+
+  .leaflet-control-measure-tools .js-measure-help {
+    margin: 0 0 10px;
+    line-height: 1.5;
+    color: var(--mapa-base-black);
+    font-size: var(--mapa-fs-15);
+  }
+
+  .leaflet-control-measure-tools .results .group {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dotted #eaeaea;
+  }
+
+  .leaflet-control-measure-tools .tasks {
+    margin: 12px 0 0;
+    padding: 10px 0 0;
+    border-top: 1px solid #ddd;
+    text-align: right;
+    list-style: none;
+  }
+
+  .leaflet-control-measure-tools .tasks li {
+    display: inline;
+    margin: 0 10px 0 0;
+  }
+
+  .leaflet-control-measure-tools a.cancel,
+  .leaflet-control-measure-tools a.finish,
+  .leaflet-measure-resultpopup a.zoomto,
+  .leaflet-measure-resultpopup a.deletemarkup {
+    color: var(--mapa-base-green);
+    text-decoration: none;
+  }
+
+  .leaflet-measure-resultpopup h3 {
+    margin: 0 0 8px;
+    font-size: var(--mapa-fs-15);
+  }
+
+  .leaflet-measure-resultpopup p {
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .map-container--measuring .leaflet-container,
+  .map-container--measuring .leaflet-container.leaflet-grab,
+  .map-container--measuring .leaflet-container.leaflet-dragging {
+    cursor: crosshair !important;
+  }
+
+  /* Controles suspensos alinhados (topright) */
+  .leaflet-top.leaflet-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding: var(--mapa-size-base-10);
+    gap: var(--mapa-size-base-10);
+    box-sizing: border-box;
+
+    .leaflet-control:not(.leaflet-control-layers-expanded):not(.leaflet-control-measure-tools) {
+      float: none !important;
+      clear: none !important;
+      margin: 0 !important;
+      width: var(--map-control-size);
+      box-sizing: border-box;
+    }
+
+    .leaflet-control.leaflet-control-measure-tools {
+      float: none !important;
+      clear: none !important;
+      margin: 0 !important;
+      width: var(--map-control-size) !important;
+      box-sizing: border-box;
+    }
+
+    .leaflet-control.leaflet-control-layers-expanded {
+      float: none !important;
+      clear: none !important;
+      margin: 0 !important;
+      box-sizing: border-box;
+    }
+
+    .leaflet-control-map-tools,
+    .leaflet-control-zoom,
+    .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
+      width: var(--map-control-size) !important;
+    }
+
+    .leaflet-control-layers.leaflet-control-layers-expanded {
+      width: auto !important;
+      min-width: 10rem;
+    }
+  }
+
+  /* Vértices Geoman — área de clique maior para fechar polígono no primeiro ponto */
+  .geoman-draw-cursor .marker-icon {
+    width: 14px !important;
+    height: 14px !important;
+    margin-left: -7px !important;
+    margin-top: -7px !important;
+  }
+
+  .leaflet-top.leaflet-left {
+    padding-top: var(--mapa-size-base-10);
+  }
+}

package/src/components/MapDPG.vue

@@ -0,0 +1,302 @@
+<template>
+  <div
+    ref="mapContainerRef"
+    class="map-container"
+  >
+    <Loading :isLoading="(isLoading || showLoading) && !disableLoading" />
+    <Map
+      ref="mapRef"
+      :drawingOptions="options.drawing"
+      :fullscreenContainer="mapContainerRef"
+      :layers="layers"
+      :mapOptions="options.map"
+      :toolsOptions="options.tools"
+      @onDrawing="emit('onDrawing', $event)"
+      @onFullscreenChange="emit('onFullscreenChange', $event)"
+      @onMeasureComplete="emit('onMeasureComplete', $event)"
+      @startLoading="isLoading = true"
+      @stopLoading="isLoading = false"
+    />
+    <LayerMenu
+      v-if="mapRef?.map && layers?.customLayers"
+      :layerControl="mapRef.layerControl"
+      :layersConfig="layers.customLayers"
+      :map="mapRef.map"
+      :options="options.layersMenu"
+      @onChildLayerToggle="emit('onChildLayerToggle', $event)"
+      @onGroupLayerToggle="emit('onGroupLayerToggle', $event)"
+      @startLoading="isLoading = true"
+      @stopLoading="isLoading = false"
+    />
+    <CoordinatePanel
+      v-if="mapRef && descriptiveMemorial?.show"
+      ref="coordinatePanelRef"
+      :descriptiveMemorial="descriptiveMemorial"
+      :map="mapRef.map"
+      @geometryChange="handleGeometryChange"
+      @geometryGeoJsonChange="handleGeometryGeoJsonChange"
+      @geometryRemoved="handleGeometryRemoved"
+      @systemChange="handleCoordinateSystemChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import L from 'leaflet'
+  import { computed, ref } from 'vue'
+  import {
+    DrawingEvent,
+    GroupLayerData,
+    IncrementedLayer,
+    LayerData,
+    MapLayers,
+    MapOptionsConfig,
+    DescriptiveMemorial,
+    MeasureCompleteEvent
+  } from '../types'
+  import Loading from './loading/Loading.vue'
+  import Map from './map/LeafletMap.vue'
+  import LayerMenu from './menu/LayerMenu.vue'
+  import CoordinatePanel from './coordinate/CoordinatePanel.vue'
+  import { isMemorialLayer, MEMORIAL_KEY } from '../utils/memorialLayer'
+  import { calculateLayerArea } from '../utils/geometryCalculator'
+  import { resolveDrawingPathOptions } from '../utils/drawingPathOptions'
+  import type { MemorialDrawShape } from '../utils/drawingPathOptions'
+  import type { Feature, MultiPolygon, Polygon } from 'geojson'
+
+  type MapaDPGProps = {
+    layers: MapLayers
+    options: MapOptionsConfig
+    showLoading: boolean
+    disableLoading: boolean
+    descriptiveMemorial: DescriptiveMemorial
+  }
+
+  const props = withDefaults(defineProps<MapaDPGProps>(), {
+    options: () => ({
+      map: {},
+      layersMenu: {
+        size: 'medium',
+        persist: false
+      }
+    }),
+    descriptiveMemorial: () => ({
+      show: false
+    })
+  })
+
+  const emit = defineEmits<{
+    (e: 'onGroupLayerToggle', data: GroupLayerData): void
+    (e: 'onChildLayerToggle', data: LayerData): void
+    (e: 'onDrawing', data: DrawingEvent): void
+    (e: 'onCoordinateSystemChange', system: string): void
+    (e: 'onFullscreenChange', active: boolean): void
+    (e: 'onMeasureComplete', data: MeasureCompleteEvent): void
+  }>()
+
+  type MapRef = {
+    map: L.Map
+    layerControl: L.Control.Layers
+    drawItemsGroup: L.FeatureGroup
+    leaflet: typeof L
+    getDrawingPathOptions: (shape: MemorialDrawShape) => L.PathOptions
+    centerMap: () => void
+    enterFullscreen: () => void
+    exitFullscreen: () => void
+    toggleFullscreen: () => void
+    toggleMeasureArea: () => void
+  }
+
+  const mapRef = ref<MapRef>()
+  const mapContainerRef = ref<HTMLElement | null>(null)
+  const coordinatePanelRef = ref()
+  const isLoading = ref<boolean>(false)
+
+  const getMemorialPathOptions = (shape: MemorialDrawShape): L.PathOptions =>
+    mapRef.value?.getDrawingPathOptions(shape) ??
+    resolveDrawingPathOptions(mapRef.value?.map, props.options.drawing, shape)
+
+  const handleCoordinateSystemChange = (system: string) => {
+    emit('onCoordinateSystemChange', system)
+  }
+
+  const incrementLayerWithDrawnArea = (layer: L.Layer): IncrementedLayer => {
+    if (layer instanceof L.GeoJSON) {
+      const innerLayer = layer.getLayers()[0]
+      const drawnArea = innerLayer ? calculateLayerArea(innerLayer) : { m2: 0, km2: 0, ha: 0 }
+      return Object.assign(layer, { drawnArea }) as IncrementedLayer
+    }
+
+    const incrementedLayer = layer as IncrementedLayer
+    incrementedLayer.drawnArea = calculateLayerArea(layer)
+    return incrementedLayer
+  }
+
+  const handleGeometryChange = (geometry: string) => {
+    if (!mapRef.value?.map || !mapRef.value?.drawItemsGroup) return
+
+    const coordinates = geometry
+      .replace(/[A-Z()]/g, '')
+      .trim()
+      .split(',')
+      .map(coord => {
+        const [x, y] = coord.trim().split(' ')
+        return [parseFloat(y), parseFloat(x)] as [number, number]
+      })
+
+    const polylineStyle = getMemorialPathOptions('polyline')
+    const polygonStyle = getMemorialPathOptions('polygon')
+
+    let leafletGeometry: L.Layer & { options: { memorialKey?: string } }
+
+    if (geometry.startsWith('POINT')) {
+      leafletGeometry = L.marker(coordinates[0])
+    } else if (geometry.startsWith('LINESTRING')) {
+      leafletGeometry = L.polyline(coordinates as [number, number][], polylineStyle)
+    } else if (geometry.startsWith('POLYGON')) {
+      leafletGeometry = L.polygon(coordinates as [number, number][], polygonStyle)
+    } else {
+      console.error('Tipo de geometria não suportado:', geometry)
+      return
+    }
+
+    leafletGeometry.options.memorialKey = MEMORIAL_KEY
+
+    mapRef.value.drawItemsGroup.addLayer(leafletGeometry)
+
+    emit('onDrawing', {
+      type: 'created',
+      layer: incrementLayerWithDrawnArea(leafletGeometry)
+    })
+
+    if (leafletGeometry instanceof L.Marker) {
+      mapRef.value.map.setView(coordinates[0], 15)
+    } else if (leafletGeometry instanceof L.Polyline || leafletGeometry instanceof L.Polygon) {
+      mapRef.value.map.fitBounds(leafletGeometry.getBounds())
+    }
+  }
+
+  const removeMemorialLayers = (): L.Layer[] => {
+    if (!mapRef.value?.drawItemsGroup) return []
+
+    const layersToRemove: L.Layer[] = []
+
+    mapRef.value.drawItemsGroup.eachLayer(layer => {
+      if (isMemorialLayer(layer)) {
+        layersToRemove.push(layer)
+      }
+    })
+
+    layersToRemove.forEach(layer => {
+      mapRef.value?.drawItemsGroup.removeLayer(layer)
+    })
+
+    return layersToRemove
+  }
+
+  const handleGeometryGeoJsonChange = (feature: Feature<Polygon | MultiPolygon>) => {
+    if (!mapRef.value?.map || !mapRef.value?.drawItemsGroup) return
+
+    removeMemorialLayers()
+
+    const polygonStyle = getMemorialPathOptions('polygon')
+
+    const leafletGeometry = L.geoJSON(feature, {
+      style: polygonStyle,
+      onEachFeature: (_geoJsonFeature, layer) => {
+        ;(layer as L.Layer & { options: { memorialKey?: string } }).options.memorialKey = MEMORIAL_KEY
+      }
+    }) as L.Layer & { options: { memorialKey?: string } }
+
+    leafletGeometry.options.memorialKey = MEMORIAL_KEY
+
+    mapRef.value.drawItemsGroup.addLayer(leafletGeometry)
+    mapRef.value.map.fitBounds(leafletGeometry.getBounds())
+
+    emit('onDrawing', {
+      type: 'created',
+      layer: incrementLayerWithDrawnArea(leafletGeometry)
+    })
+  }
+
+  const handleGeometryRemoved = () => {
+    if (!mapRef.value?.map || !mapRef.value?.drawItemsGroup) return
+
+    const layersToRemove = removeMemorialLayers()
+
+    if (layersToRemove.length > 0) {
+      emit('onDrawing', {
+        type: 'deleted',
+        layers: layersToRemove
+      })
+    }
+  }
+
+  const toggleCoordinatePanel = () => {
+    if (coordinatePanelRef.value) {
+      coordinatePanelRef.value.togglePanel()
+    }
+  }
+
+  const closeCoordinatePanel = () => {
+    if (coordinatePanelRef.value) {
+      coordinatePanelRef.value.closePanel()
+    }
+  }
+
+  const centerMap = () => {
+    mapRef.value?.centerMap()
+  }
+
+  const enterFullscreen = () => {
+    mapRef.value?.enterFullscreen()
+  }
+
+  const exitFullscreen = () => {
+    mapRef.value?.exitFullscreen()
+  }
+
+  const toggleFullscreen = () => {
+    mapRef.value?.toggleFullscreen()
+  }
+
+  const toggleMeasureArea = () => {
+    mapRef.value?.toggleMeasureArea()
+  }
+
+  defineExpose({
+    map: computed(() => mapRef.value?.map),
+    layerControl: computed(() => mapRef.value?.layerControl),
+    drawItemsGroup: computed(() => mapRef.value?.drawItemsGroup),
+    leaflet: computed(() => mapRef.value?.leaflet),
+    getDrawingPathOptions: getMemorialPathOptions,
+    toggleCoordinatePanel,
+    closeCoordinatePanel,
+    centerMap,
+    enterFullscreen,
+    exitFullscreen,
+    toggleFullscreen,
+    toggleMeasureArea
+  })
+</script>
+
+<style>
+  @import '/src/assets/main.css';
+
+  .map-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--mapa-base-radius-5);
+  }
+
+  .map-container--fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
+</style>