@rural-environmental-registry/map_component 1.1.0 → 2.0.0

package/src/components/menu/SectionMenu.vue

@@ -0,0 +1,512 @@
+<template>
+  <div
+    class="section-menu"
+    :class="{ 'section-menu--editing': isEditing }"
+  >
+    <div
+      v-if="sections.length"
+      class="section-menu-selector"
+      role="tablist"
+      aria-label="Seções do menu de camadas"
+    >
+      <button
+        v-for="item in sections"
+        :key="item.key"
+        type="button"
+        role="tab"
+        class="section-menu-selector-item"
+        :class="{ 'section-menu-selector-item--active': item.key === activeSectionKey }"
+        :aria-selected="item.key === activeSectionKey"
+        @click.stop="onSelectSection(item.key)"
+      >
+        {{ item.name || item.key }}
+      </button>
+    </div>
+
+    <template v-if="section">
+      <template v-if="isEditing && editingLayer && editingGroup">
+        <div class="section-edit-panel">
+          <ChildMenu
+            :actionDefaults="section.actionDefaults"
+            :data="editingLayer"
+            :groupKey="editingGroup.key"
+            :hideControls="true"
+            :persist="persist"
+            :sectionKey="section.key"
+            :visibilityMode="visibilityMode"
+            @onChildLayerToggle="emit('onChildLayerToggle', $event)"
+            @onLayerAction="emit('onLayerAction', $event)"
+          />
+
+          <div
+            v-if="editPanelActions.length"
+            class="section-edit-panel-actions"
+          >
+            <button
+              v-for="action in editPanelActions"
+              :key="action.key"
+              type="button"
+              class="section-edit-action-button"
+              :style="actionButtonStyle(action)"
+              :disabled="action.disabled"
+              @click.stop="onEditPanelAction(action)"
+            >
+              <FontAwesomeIcon
+                v-if="action.icon"
+                :iconName="action.icon"
+              />
+              <span>{{ action.name }}</span>
+            </button>
+          </div>
+
+          <div
+            v-if="editingMetrics.length"
+            class="section-edit-metrics"
+          >
+            <div
+              v-for="(metric, index) in editingMetrics"
+              :key="`${metric.title}-${metric.type}-${index}`"
+              class="section-metric-row"
+            >
+              <span class="section-metric-title">{{ metric.title }} :</span>
+              <span
+                class="section-metric-value-label"
+                :style="metricValueLabelStyle(metric)"
+              >
+                {{ metric.value }}
+              </span>
+              <span class="section-metric-type">{{ metric.type }}</span>
+            </div>
+          </div>
+
+          <div class="section-edit-footer">
+            <button
+              v-if="cancelAction.visible !== false"
+              type="button"
+              class="section-edit-footer-button"
+              :style="actionButtonStyle(cancelAction)"
+              :disabled="cancelAction.disabled"
+              @click.stop="onEditControlAction(cancelAction)"
+            >
+              <FontAwesomeIcon
+                v-if="cancelAction.icon"
+                :iconName="cancelAction.icon"
+              />
+              <span>{{ cancelAction.name }}</span>
+            </button>
+
+            <button
+              v-if="concludeAction.visible !== false"
+              type="button"
+              class="section-edit-footer-button section-edit-footer-button--end"
+              :style="actionButtonStyle(concludeAction)"
+              :disabled="concludeAction.disabled"
+              @click.stop="onEditControlAction(concludeAction)"
+            >
+              <FontAwesomeIcon
+                v-if="concludeAction.icon"
+                :iconName="concludeAction.icon"
+              />
+              <span>{{ concludeAction.name }}</span>
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <template v-else>
+        <ParentMenu
+          v-for="group in section.groups"
+          :key="group.key"
+          :actionDefaults="section.actionDefaults"
+          :groupData="group"
+          :persist="persist"
+          :sectionKey="section.key"
+          :visibilityMode="visibilityMode"
+          @onChildLayerToggle="emit('onChildLayerToggle', $event)"
+          @onGroupLayerToggle="emit('onGroupLayerToggle', $event)"
+          @onLayerAction="emit('onLayerAction', $event)"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
+  import ParentMenu from './ParentMenu.vue'
+  import ChildMenu from './ChildMenu.vue'
+  import {
+    GroupLayerData,
+    LayerActionConfig,
+    LayerActionPayload,
+    LayerActionStyle,
+    LayerData,
+    LayerMetricsConfig,
+    SectionConfig
+  } from '../../types'
+  import {
+    resolveEditControlAction,
+    resolveLayerActions,
+    resolveLayerMetrics
+  } from '../../utils/layersConfigNormalizer'
+
+  const DEFAULT_ACTION_STYLE: Required<LayerActionStyle> = {
+    backgroundColor: 'var(--mapa-base-green)',
+    color: 'var(--mapa-base-white)',
+    borderColor: 'var(--mapa-base-white)'
+  }
+
+  const resolveActionStyle = (style?: LayerActionStyle): Required<LayerActionStyle> => {
+    const color = style?.color ?? DEFAULT_ACTION_STYLE.color
+    return {
+      backgroundColor: style?.backgroundColor ?? DEFAULT_ACTION_STYLE.backgroundColor,
+      color,
+      borderColor: style?.borderColor ?? color
+    }
+  }
+
+  const actionButtonStyle = (action: LayerActionConfig): Required<LayerActionStyle> =>
+    resolveActionStyle(action.style)
+
+  const firstColor = (...values: Array<string | null | undefined>): string | undefined =>
+    values.find((value) => typeof value === 'string' && value.trim() !== '')
+
+  const metricValueLabelStyle = (
+    metric: LayerMetricsConfig
+  ): Pick<Required<LayerActionStyle>, 'backgroundColor' | 'borderColor'> => {
+    const style = metric.style
+    return {
+      backgroundColor: firstColor(style?.backgroundColor) ?? '#ffffff',
+      borderColor: firstColor(style?.borderColor, style?.color) ?? 'transparent'
+    }
+  }
+
+  type SectionMenuProps = {
+    sections: SectionConfig[]
+    selectedSectionKey?: string | null
+    persist: boolean
+    editingLayerKey?: string | null
+    visibilityMode?: 'switch' | 'eye'
+  }
+
+  const props = withDefaults(defineProps<SectionMenuProps>(), {
+    visibilityMode: 'switch',
+    editingLayerKey: null,
+    selectedSectionKey: null
+  })
+
+  const emit = defineEmits<{
+    onChildLayerToggle: [LayerData]
+    onGroupLayerToggle: [GroupLayerData]
+    onLayerAction: [LayerActionPayload]
+    onSelectedSectionChange: [string]
+  }>()
+
+  const activeSectionKey = computed((): string | null => {
+    const sections = props.sections
+    if (!sections.length) return null
+
+    const selected = props.selectedSectionKey
+    if (selected && sections.some((item) => item.key === selected)) {
+      return selected
+    }
+
+    return sections[0].key
+  })
+
+  const section = computed((): SectionConfig | null => {
+    const key = activeSectionKey.value
+    if (!key) return null
+    return props.sections.find((item) => item.key === key) ?? null
+  })
+
+  const findLayerContext = (
+    layerKey: string | null | undefined
+  ): { layer: LayerData; group: GroupLayerData } | null => {
+    if (!layerKey || !section.value) return null
+    for (const group of section.value.groups) {
+      const layer = group.layers?.find((item) => item.key === layerKey)
+      if (layer) return { layer, group }
+    }
+    return null
+  }
+
+  const editingContext = computed(() => findLayerContext(props.editingLayerKey))
+  const editingLayer = computed(() => editingContext.value?.layer ?? null)
+  const editingGroup = computed(() => editingContext.value?.group ?? null)
+  const isEditing = computed(() => !!editingLayer.value)
+
+  const editingMetrics = computed((): LayerMetricsConfig[] =>
+    resolveLayerMetrics(editingLayer.value)
+  )
+
+  const editPanelActions = computed((): LayerActionConfig[] => {
+    const layer = editingLayer.value
+    const currentSection = section.value
+    if (!layer || !currentSection) return []
+
+    const sourceActions =
+      Array.isArray(layer.editActions) && layer.editActions.length > 0
+        ? layer.editActions
+        : resolveLayerActions(layer, currentSection.actionDefaults)
+
+    return sourceActions.filter((action) => action.visible !== false)
+  })
+
+  const cancelAction = computed(() =>
+    resolveEditControlAction(section.value?.actionDefaults, 'cancel')
+  )
+
+  const concludeAction = computed(() =>
+    resolveEditControlAction(section.value?.actionDefaults, 'conclude')
+  )
+
+  const onSelectSection = (sectionKey: string): void => {
+    if (sectionKey === activeSectionKey.value) return
+    emit('onSelectedSectionChange', sectionKey)
+  }
+
+  const emitEditPanelAction = (action: LayerActionConfig): void => {
+    const layer = editingLayer.value
+    const currentSection = section.value
+    if (!layer || !currentSection || action.disabled) return
+
+    emit('onLayerAction', {
+      actionKey: action.key,
+      actionType: action.type,
+      sectionKey: currentSection.key,
+      groupKey: editingGroup.value?.key,
+      layerKey: layer.key,
+      layer,
+      source: 'edit-panel'
+    })
+  }
+
+  const onEditPanelAction = (action: LayerActionConfig): void => {
+    emitEditPanelAction(action)
+  }
+
+  const onEditControlAction = (action: LayerActionConfig): void => {
+    emitEditPanelAction(action)
+  }
+</script>
+
+<style>
+  .section-menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mapa-size-base-5);
+  }
+
+  .section-menu--editing {
+    flex: 1 1 auto;
+    min-height: 100%;
+  }
+
+  .section-menu-selector {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--mapa-size-base-5) var(--mapa-size-base-10);
+    border-bottom: var(--mapa-size-base-1) solid rgba(0, 0, 0, 0.08);
+  }
+
+  .section-menu-selector-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: var(--mapa-size-base-30);
+    height: auto;
+    padding: var(--mapa-size-base-5) var(--mapa-size-base-10);
+    border: none;
+    border-bottom: var(--mapa-size-base-2) solid transparent;
+    border-radius: 0;
+    background: transparent;
+    color: var(--mapa-base-gray);
+    font-size: var(--mapa-fs-12);
+    font-weight: 600;
+    text-align: center;
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: normal;
+    line-height: 1.3;
+    cursor: pointer;
+  }
+
+  .section-menu-selector-item:hover {
+    color: var(--mapa-base-green);
+  }
+
+  .section-menu-selector-item--active {
+    color: var(--mapa-base-green);
+    border-bottom-color: var(--mapa-base-green);
+  }
+
+  .section-edit-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .section-edit-panel .child-menu {
+    padding-left: var(--mapa-size-base-20) !important;
+    padding-right: var(--mapa-size-base-20) !important;
+  }
+
+  .section-edit-metrics {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: var(--mapa-size-base-15);
+    padding: var(--mapa-size-base-10) var(--mapa-size-base-20);
+  }
+
+  .section-metric-row {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    height: var(--mapa-size-base-40);
+    padding: 0 var(--mapa-size-base-10);
+    box-sizing: border-box;
+    font-size: var(--mapa-fs-12);
+    color: #000000;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: bold;
+  }
+
+  .section-metric-title {
+    flex-shrink: 0;
+    color: #000000;
+  }
+
+  .section-metric-value-label {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: var(--mapa-size-base-20);
+    padding: 0 var(--mapa-size-base-8);
+    border: 1px solid;
+    border-radius: 100em;
+    font-size: var(--mapa-fs-12);
+    font-weight: 600;
+    line-height: 1;
+    color: #000000;
+  }
+
+  .section-metric-type {
+    flex-shrink: 0;
+    color: #000000;
+  }
+
+  .section-edit-panel-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--mapa-size-base-5);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--mapa-size-base-10) var(--mapa-size-base-20);
+}
+  .section-edit-action-button {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    height: var(--mapa-size-base-40);
+    padding: 0 var(--mapa-size-base-10);
+    border: 1px solid;
+    border-radius: 100em;
+    font-size: var(--mapa-fs-15);
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-top: var(--mapa-size-base-20);
+  }
+
+  .section-edit-action-button:not(:disabled):hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
+  }
+
+  .section-edit-action-button:not(:disabled):active {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
+  }
+
+  .section-edit-action-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .section-edit-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: auto;
+    padding: var(--mapa-size-base-10) var(--mapa-size-base-20);
+  }
+
+  .section-edit-footer-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mapa-size-base-5);
+    height: var(--mapa-size-base-40);
+    padding: 0 var(--mapa-size-base-20);
+    border: 1px solid;
+    border-radius: 100em;
+    font-size: var(--mapa-fs-15);
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .section-edit-footer-button--end {
+    margin-left: auto;
+  }
+
+  .section-edit-footer-button:not(:disabled):hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
+  }
+
+  .section-edit-footer-button:not(:disabled):active {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
+  }
+
+  .section-edit-footer-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/src/constants/coordinatePanel.ts

@@ -45,12 +45,13 @@ export const COORDINATE_PANEL_TEXTS: CoordinatePanelTexts = {
   csvColumnsInfo: 'The file must contain the columns: X, Y, AZIMUTH, DISTANCE',
   applyCsvCoordinates: 'Apply CSV Coordinates',
 
-  shapefileUpload: 'Shapefile Upload',
-  shapefileFileUpload: 'Shapefile Upload',
-  dragShapefileZip: 'Drag ZIP file or click to upload',
+  shapefileUpload: 'Shapefile, KML and Geojson Upload',
+  shapefileFileUpload: 'Shapefile, KML and Geojson Upload',
+  dragShapefileZip: 'Drag file or click to upload',
   shapefileZipInfo:
-    'Upload a .zip with .shp, .shx and .dbf containing a single Polygon or MultiPolygon geometry',
-  shapefileAppliedSuccess: 'Shapefile applied successfully',
+    'Upload a .zip (shapefile), .kml, .geojson or .json with a single Polygon or MultiPolygon geometry',
+  shapefileAppliedSuccess: 'Geometry applied successfully',
+  geometryImportUnsupportedFormat: 'Unsupported file format. Use .zip, .kml, .geojson or .json',
 
   placeholderLongitude: 'e.g., -46.6333',
   placeholderLatitude: 'e.g., -23.5505',

package/src/handlers/mapToolsHandler.ts

@@ -198,7 +198,9 @@ export default class MapToolsHandler {
 
     this._control = new MapToolsControl()
     this._map.addControl(this._control)
-    this.removeNativeZoomControl()
+    if (config.zoom?.show !== false) {
+      this.removeNativeZoomControl()
+    }
     this.alignTopRightControls()
   }
 

package/src/handlers/measureToolsHandler.ts

@@ -16,7 +16,7 @@ type MeasureToolsCallbacks = {
 type MeasureMode = 'line' | 'polygon'
 
 const LINE_ICON =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20L20 4"/><circle cx="6" cy="18" r="1.5" fill="currentColor" stroke="none"/><circle cx="18" cy="6" r="1.5" fill="currentColor" stroke="none"/></svg>'
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"/><path d="m14.5 12.5 2-2"/><path d="m11.5 9.5 2-2"/><path d="m8.5 6.5 2-2"/><path d="m17.5 15.5 2-2"/></svg>'
 
 const POLYGON_ICON =
   '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 5v10l-8 5-8-5V7z"/></svg>'
@@ -135,28 +135,34 @@ export default class MeasureToolsHandler {
           )
         }
 
-        handler._interactionPanel = L.DomUtil.create('div', 'measure-tools-interaction js-measure-interaction', container)
-        handler._interactionPanel.style.display = 'none'
-        handler._interactionPanel.innerHTML = handler.buildInteractionHtml(config)
-
-        handler._resultsEl = handler._interactionPanel.querySelector('.js-results')
-        handler._helpEl = handler._interactionPanel.querySelector('.js-measure-help')
-
-        const cancelBtn = handler._interactionPanel.querySelector('.js-cancel')
-        const finishBtn = handler._interactionPanel.querySelector('.js-finish')
-
-        if (cancelBtn instanceof HTMLElement) {
-          L.DomEvent.on(cancelBtn, 'click', (e) => {
-            L.DomEvent.stop(e)
-            handler.cancel()
-          })
-        }
-
-        if (finishBtn instanceof HTMLElement) {
-          L.DomEvent.on(finishBtn, 'click', (e) => {
-            L.DomEvent.stop(e)
-            handler.finishDrawing()
-          })
+        if (handler.isInteractionPanelEnabled()) {
+          handler._interactionPanel = L.DomUtil.create(
+            'div',
+            'measure-tools-interaction js-measure-interaction',
+            container
+          )
+          handler._interactionPanel.style.display = 'none'
+          handler._interactionPanel.innerHTML = handler.buildInteractionHtml(config)
+
+          handler._resultsEl = handler._interactionPanel.querySelector('.js-results')
+          handler._helpEl = handler._interactionPanel.querySelector('.js-measure-help')
+
+          const cancelBtn = handler._interactionPanel.querySelector('.js-cancel')
+          const finishBtn = handler._interactionPanel.querySelector('.js-finish')
+
+          if (cancelBtn instanceof HTMLElement) {
+            L.DomEvent.on(cancelBtn, 'click', (e) => {
+              L.DomEvent.stop(e)
+              handler.cancel()
+            })
+          }
+
+          if (finishBtn instanceof HTMLElement) {
+            L.DomEvent.on(finishBtn, 'click', (e) => {
+              L.DomEvent.stop(e)
+              handler.finishDrawing()
+            })
+          }
         }
 
         L.DomEvent.disableClickPropagation(container)
@@ -170,6 +176,10 @@ export default class MeasureToolsHandler {
     this._control.addTo(this._map)
   }
 
+  private isInteractionPanelEnabled(): boolean {
+    return this._config.showInteractionPanel !== false
+  }
+
   private buildInteractionHtml(config: MapToolsConfig): string {
     const title = config.texts?.measurePanelTitle ?? 'Measure distances and areas'
     const cancel = config.texts?.measureCancel ?? 'Cancel'
@@ -228,6 +238,7 @@ export default class MeasureToolsHandler {
     this.setMeasureActive(true)
     this.updateButtons()
     this.showInteractionPanel(mode)
+    document.addEventListener('keydown', this._boundEscapeKey)
 
     if (this._map.doubleClickZoom.enabled()) {
       this._map.doubleClickZoom.disable()
@@ -271,6 +282,7 @@ export default class MeasureToolsHandler {
     this._map.options.zoomAnimation = this._restoreZoomAnimation
     this.updateButtons()
     this.hideInteractionPanel()
+    document.removeEventListener('keydown', this._boundEscapeKey)
 
     if (!this._map.doubleClickZoom.enabled()) {
       this._map.doubleClickZoom.enable()
@@ -377,7 +389,7 @@ export default class MeasureToolsHandler {
   }
 
   private showInteractionPanel(mode: MeasureMode): void {
-    if (!this._interactionPanel || !this._helpEl) return
+    if (!this.isInteractionPanelEnabled() || !this._interactionPanel || !this._helpEl) return
 
     this._interactionPanel.style.removeProperty('display')
     this._interactionPanel.closest('.leaflet-control-measure-tools')?.classList.add('measure-tools-expanded')
@@ -395,8 +407,6 @@ export default class MeasureToolsHandler {
     if (this._resultsEl) {
       this._resultsEl.innerHTML = ''
     }
-
-    document.addEventListener('keydown', this._boundEscapeKey)
   }
 
   private hideInteractionPanel(): void {
@@ -404,7 +414,6 @@ export default class MeasureToolsHandler {
 
     this._interactionPanel.style.display = 'none'
     this._interactionPanel.closest('.leaflet-control-measure-tools')?.classList.remove('measure-tools-expanded')
-    document.removeEventListener('keydown', this._boundEscapeKey)
   }
 
   private updateButtons(): void {

package/src/handlers/toolsConstants.ts

@@ -36,6 +36,7 @@ export const DEFAULT_MAP_TOOLS: MapToolsConfig = {
     show: true,
     title: 'Measure polygon'
   },
+  showInteractionPanel: true,
   texts: {
     measureResult: 'Measurement',
     measureLength: 'Distance',