@rural-environmental-registry/map_component 1.1.0 → 2.0.0

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import { MapOptions, Layer, PathOptions, ControlOptions, ControlPosition } from 'leaflet';
 import { GeoJsonObject } from 'geojson';
 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 FaIconName = 'check' | 'xmark' | 'chevron-right' | 'chevron-left' | 'terminal' | 'file-lines' | 'upload' | 'pencil' | 'trash' | 'chevron-down' | 'eye' | 'eye-slash' | 'circle-info' | 'circle-exclamation' | 'triangle-exclamation' | 'circle-check' | 'circle-xmark' | 'ban' | 'lock' | 'unlock' | 'thumbtack' | 'thumb-tack' | 'map-pin';
 export type DrawnArea = {
     m2: number;
     km2: number;
@@ -10,37 +10,135 @@ export type DrawnArea = {
 export type IncrementedLayer = Layer & {
     drawnArea: DrawnArea;
 };
-export type LayerData = {
-    baseUrl: string;
-    geojson?: GeoJsonObject | GeoJsonObject[];
-    layers: string;
-    format: string;
-    transparent: boolean;
+export type LayerActionStyle = {
+    backgroundColor: string;
+    color: string;
+    borderColor?: string;
+};
+export type LayerActionDefaultItem = {
+    key?: string;
     name: string;
-    activeDefault: boolean;
-    cqlFilter?: string;
+    icon?: FaIconName;
+    style?: LayerActionStyle;
+    disabled?: boolean;
+    visible?: boolean;
+};
+export type LayerActionDefaults = {
+    edit?: LayerActionDefaultItem;
+    import?: LayerActionDefaultItem;
+    delete?: LayerActionDefaultItem;
+    cancel?: LayerActionDefaultItem;
+    conclude?: LayerActionDefaultItem;
+};
+export type LayerActionConfig = {
+    key: string;
+    name: string;
+    icon?: FaIconName;
+    type?: 'edit' | 'import' | 'delete' | 'visibility' | 'custom' | 'cancel' | 'conclude';
+    disabled?: boolean;
+    visible?: boolean;
+    style?: LayerActionStyle;
+};
+export type LayerMetricsConfig = {
+    title: string;
+    type: string;
+    value: string | number;
+    style?: LayerActionStyle;
+};
+/** @deprecated Use LayerMetricsConfig */
+export type LayerMetrics = LayerMetricsConfig;
+export type LayerMetricsMap = Record<string, LayerMetricsConfig[]>;
+export type LayerInfoIconConfig = {
+    key?: string;
+    icon: FaIconName;
     active: boolean;
+    tooltip?: string;
+    style?: Partial<Pick<LayerActionStyle, 'color' | 'backgroundColor'>>;
+};
+export type LayerInfoIconsMap = Record<string, LayerInfoIconConfig[]>;
+export type GroupActionConfig = LayerActionConfig & {
+    active: boolean;
+};
+export type GroupActionsMap = Record<string, GroupActionConfig[]>;
+export type SectionConfig = {
+    name?: string;
     key: string;
-    toggle: {
+    groups: GroupLayerData[];
+    actionDefaults?: LayerActionDefaults;
+};
+/** @deprecated Use SectionConfig */
+export type SectionData = SectionConfig;
+export type LayerData = {
+    key: string;
+    name: string;
+    active: boolean;
+    activeDefault: boolean;
+    role?: 'layer' | 'separator';
+    tooltip?: string;
+    toggle?: {
         active: string;
         inactive: string;
     };
-    style: {
+    visibility?: {
+        labelShow?: string;
+        labelHide?: string;
+        show?: boolean;
+    };
+    style?: {
         color: string;
         fillColor: string;
+        icon?: string;
     };
-    options?: any;
+    baseUrl?: string;
+    layers?: string;
+    format?: string;
+    transparent?: boolean;
+    geojson?: GeoJsonObject | GeoJsonObject[];
+    cqlFilter?: string;
+    options?: Record<string, unknown>;
+    mapSource?: 'wms' | 'geojson' | 'none' | 'consumer';
+    actions?: LayerActionConfig[];
+    metrics?: LayerMetricsConfig[];
+    infoIcons?: LayerInfoIconConfig[];
+    required?: boolean;
+    editActions?: LayerActionConfig[];
+    meta?: Record<string, unknown>;
 };
 export type GroupLayerData = {
     name: string;
     key: string;
-    toggle: {
+    toggle?: {
         active: string;
         inactive: string;
     };
+    visibility?: {
+        show?: boolean;
+        labelShow?: string;
+        labelHide?: string;
+    };
+    collapsed?: boolean;
+    actions?: GroupActionConfig[];
     layers: LayerData[];
+    meta?: Record<string, unknown>;
+};
+export type LayersConfig = GroupLayerData[] | SectionConfig[];
+export type LayerActionPayload = {
+    actionKey: string;
+    actionType?: LayerActionConfig['type'];
+    sectionKey?: string;
+    groupKey?: string;
+    layerKey?: string;
+    layer?: LayerData;
+    source: 'child-menu' | 'edit-panel' | 'group-menu';
+};
+export type SectionEditStatePayload = {
+    sectionKey: string | null;
+    layerKey: string | null;
+    layer: LayerData | null;
+};
+export type SectionSelectPayload = {
+    sectionKey: string;
 };
-export type LayersConfig = GroupLayerData[];
 export type DrawingEvent = {
     type: 'created' | 'edited' | 'deleted';
     layer: IncrementedLayer;
@@ -66,7 +164,6 @@ 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 = {
@@ -76,6 +173,10 @@ export type LayersMenuConfig = {
     size: 'small' | 'medium' | 'large';
     removeMenu?: boolean;
     persist: boolean;
+    editingLayerKey?: string | null;
+    selectedSectionKey?: string | null;
+    visibilityMode?: 'switch' | 'eye';
+    defaultOpen?: boolean;
 };
 export type MemorialConfig = {
     show: boolean;
@@ -113,6 +214,7 @@ export type MapToolsConfig = {
         show?: boolean;
         title?: string;
     };
+    showInteractionPanel?: boolean;
     texts?: {
         measureResult?: string;
         measureLength?: string;
@@ -211,6 +313,7 @@ export type CoordinatePanelTexts = {
     dragShapefileZip?: string;
     shapefileZipInfo?: string;
     shapefileAppliedSuccess?: string;
+    geometryImportUnsupportedFormat?: string;
     placeholderLongitude?: string;
     placeholderLatitude?: string;
     placeholderAzimuth?: string;

package/dist/utils/geometryFileParseResult.d.ts

@@ -0,0 +1,8 @@
+import type { Feature } from 'geojson';
+export type GeometryFileParseResult = {
+    ok: true;
+    features: Feature[];
+} | {
+    ok: false;
+    error: string;
+};

package/dist/utils/layersConfigNormalizer.d.ts

@@ -0,0 +1,16 @@
+import { GroupActionConfig, GroupActionsMap, GroupLayerData, LayerActionConfig, LayerActionDefaults, LayerData, LayerInfoIconConfig, LayerInfoIconsMap, LayerMetricsConfig, LayerMetricsMap, LayersConfig, SectionConfig } from '../types';
+export declare const isSectionConfig: (item: unknown) => item is SectionConfig;
+export declare const isGroupConfig: (item: unknown) => item is GroupLayerData;
+export declare const normalizeLayersConfig: (config?: LayersConfig | null) => SectionConfig[];
+export declare const resolveLayerActions: (layer: LayerData, defaults?: LayerActionDefaults) => LayerActionConfig[];
+export declare const resolveEditControlAction: (defaults: LayerActionDefaults | undefined, kind: "cancel" | "conclude") => LayerActionConfig;
+export declare const isMenuSeparator: (layer: LayerData | null | undefined) => boolean;
+export declare const shouldApplyMapOverlay: (layer: LayerData) => boolean;
+export declare const collectLayerMetricsMap: (config?: LayersConfig | null) => LayerMetricsMap;
+export declare const resolveLayerMetrics: (layer: LayerData | null | undefined) => LayerMetricsConfig[];
+export declare const collectLayerInfoIconsMap: (config?: LayersConfig | null) => LayerInfoIconsMap;
+export declare const resolveActiveLayerInfoIcons: (layer: LayerData | null | undefined) => LayerInfoIconConfig[];
+export declare const collectGroupActionsMap: (config?: LayersConfig | null) => GroupActionsMap;
+export declare const resolveActiveGroupActions: (group: GroupLayerData | null | undefined) => GroupActionConfig[];
+export declare const withLayerInfoIconActive: (infoIcons: LayerInfoIconConfig[] | undefined, iconRef: string, active: boolean) => LayerInfoIconConfig[] | null;
+export declare const withGroupActionActive: (actions: GroupActionConfig[] | undefined, actionKey: string, active: boolean) => GroupActionConfig[] | null;

package/dist/utils/menuHistory.d.ts

@@ -1,8 +1,8 @@
 import { LayerData } from '../types';
 export declare const setHistory: (layer: LayerData) => void;
-/** Retorna o estado salvo da camada ou `undefined` se não houver histórico. */
 export declare const getHistory: (layerKey: string) => boolean | undefined;
-/** Resolve `active`/`activeDefault` sem mutar o objeto original (mesma regra do fluxo legado). */
+export declare const setGroupCollapsedHistory: (groupKey: string, collapsed: boolean) => void;
+export declare const getGroupCollapsedHistory: (groupKey: string) => boolean | undefined;
 export declare const resolveLayerActiveState: (layer: LayerData, persist: boolean) => LayerData;
-/** Indica se a camada deve ser aplicada ao mapa na inicialização. */
+export declare const resolveGroupCollapsedState: (groupKey: string, collapsedFromConfig: boolean | undefined, persist: boolean) => boolean;
 export declare const shouldInitLayerOnMap: (layer: LayerData, persist: boolean) => boolean;

package/dist/utils/normalizeGeoJsonToFeatures.d.ts

@@ -0,0 +1,2 @@
+import type { Feature } from 'geojson';
+export declare function normalizeGeoJsonToFeatures(geojson: unknown): Feature[];

package/dist/utils/parseGeoJsonFile.d.ts

@@ -0,0 +1,2 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export declare function parseGeoJsonFile(file: File): Promise<GeometryFileParseResult>;

package/dist/utils/parseKmlFile.d.ts

@@ -0,0 +1,2 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export declare function parseKmlFile(file: File): Promise<GeometryFileParseResult>;

package/dist/utils/parseShapefileZip.d.ts

@@ -1,9 +1,3 @@
-import type { Feature } from 'geojson';
-export type ShapefileParseResult = {
-    ok: true;
-    features: Feature[];
-} | {
-    ok: false;
-    error: string;
-};
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export type ShapefileParseResult = GeometryFileParseResult;
 export declare function parseShapefileZip(file: File): Promise<ShapefileParseResult>;

package/dist/utils/{validateShapefileGeometry.d.ts → validateImportedPolygonGeometry.d.ts}

@@ -1,9 +1,9 @@
 import type { Feature, MultiPolygon, Polygon } from 'geojson';
-export type ShapefileValidationResult = {
+export type ImportedPolygonValidationResult = {
     ok: true;
     feature: Feature<Polygon | MultiPolygon>;
 } | {
     ok: false;
     error: string;
 };
-export declare function validateShapefileGeometry(features: Feature[]): ShapefileValidationResult;
+export declare function validateImportedPolygonGeometry(features: Feature[]): ImportedPolygonValidationResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rural-environmental-registry/map_component",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -47,7 +47,8 @@
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "papaparse": "5.5.3",
-    "shpjs": "6.1.0"
+    "shpjs": "6.1.0",
+    "@tmcw/togeojson": "7.1.2"
   },
   "devDependencies": {
     "@types/geojson": "7946.0.16",

package/src/components/MapDPG.vue

@@ -25,6 +25,9 @@
       :options="options.layersMenu"
       @onChildLayerToggle="emit('onChildLayerToggle', $event)"
       @onGroupLayerToggle="emit('onGroupLayerToggle', $event)"
+      @onLayerAction="emit('onLayerAction', $event)"
+      @onSectionEditStateChange="emit('onSectionEditStateChange', $event)"
+      @onSelectedSectionChange="emit('onSelectedSectionChange', $event)"
       @startLoading="isLoading = true"
       @stopLoading="isLoading = false"
     />
@@ -46,13 +49,22 @@
   import { computed, ref } from 'vue'
   import {
     DrawingEvent,
+    GroupActionConfig,
+    GroupActionsMap,
     GroupLayerData,
     IncrementedLayer,
+    LayerActionPayload,
     LayerData,
+    LayerInfoIconConfig,
+    LayerInfoIconsMap,
+    LayerMetricsConfig,
+    LayerMetricsMap,
     MapLayers,
     MapOptionsConfig,
     DescriptiveMemorial,
-    MeasureCompleteEvent
+    MeasureCompleteEvent,
+    SectionEditStatePayload,
+    SectionSelectPayload
   } from '../types'
   import Loading from './loading/Loading.vue'
   import Map from './map/LeafletMap.vue'
@@ -61,6 +73,14 @@
   import { isMemorialLayer, MEMORIAL_KEY } from '../utils/memorialLayer'
   import { calculateLayerArea } from '../utils/geometryCalculator'
   import { resolveDrawingPathOptions } from '../utils/drawingPathOptions'
+  import {
+    collectGroupActionsMap,
+    collectLayerInfoIconsMap,
+    collectLayerMetricsMap,
+    normalizeLayersConfig,
+    withGroupActionActive,
+    withLayerInfoIconActive
+  } from '../utils/layersConfigNormalizer'
   import type { MemorialDrawShape } from '../utils/drawingPathOptions'
   import type { Feature, MultiPolygon, Polygon } from 'geojson'
 
@@ -88,6 +108,12 @@
   const emit = defineEmits<{
     (e: 'onGroupLayerToggle', data: GroupLayerData): void
     (e: 'onChildLayerToggle', data: LayerData): void
+    (e: 'onLayerAction', payload: LayerActionPayload): void
+    (e: 'onSectionEditStateChange', payload: SectionEditStatePayload): void
+    (e: 'onSelectedSectionChange', payload: SectionSelectPayload): void
+    (e: 'onLayerMetricsUpdate', payload: { layerKey: string; metrics: LayerMetricsConfig[] }): void
+    (e: 'onLayerInfoIconsUpdate', payload: { layerKey: string; infoIcons: LayerInfoIconConfig[] }): void
+    (e: 'onGroupActionsUpdate', payload: { groupKey: string; actions: GroupActionConfig[] }): void
     (e: 'onDrawing', data: DrawingEvent): void
     (e: 'onCoordinateSystemChange', system: string): void
     (e: 'onFullscreenChange', active: boolean): void
@@ -112,6 +138,60 @@
   const coordinatePanelRef = ref()
   const isLoading = ref<boolean>(false)
 
+  const metrics = computed((): LayerMetricsMap =>
+    collectLayerMetricsMap(props.layers?.customLayers)
+  )
+
+  const infoIcons = computed((): LayerInfoIconsMap =>
+    collectLayerInfoIconsMap(props.layers?.customLayers)
+  )
+
+  const groupActions = computed((): GroupActionsMap =>
+    collectGroupActionsMap(props.layers?.customLayers)
+  )
+
+  const setLayerMetrics = (layerKey: string, nextMetrics: LayerMetricsConfig[]): void => {
+    emit('onLayerMetricsUpdate', { layerKey, metrics: nextMetrics })
+  }
+
+  const findLayerInfoIcons = (layerKey: string): LayerInfoIconConfig[] | undefined => {
+    for (const section of normalizeLayersConfig(props.layers?.customLayers)) {
+      for (const group of section.groups) {
+        const layer = group.layers?.find((item) => item.key === layerKey)
+        if (layer) return layer.infoIcons
+      }
+    }
+    return undefined
+  }
+
+  const findGroupActions = (groupKey: string): GroupActionConfig[] | undefined => {
+    for (const section of normalizeLayersConfig(props.layers?.customLayers)) {
+      const group = section.groups.find((item) => item.key === groupKey)
+      if (group) return group.actions
+    }
+    return undefined
+  }
+
+  const setLayerInfoIconActive = (layerKey: string, iconRef: string, active: boolean): void => {
+    const next = withLayerInfoIconActive(findLayerInfoIcons(layerKey), iconRef, active)
+    if (!next) return
+    emit('onLayerInfoIconsUpdate', { layerKey, infoIcons: next })
+  }
+
+  const setLayerInfoIcons = (layerKey: string, nextInfoIcons: LayerInfoIconConfig[]): void => {
+    emit('onLayerInfoIconsUpdate', { layerKey, infoIcons: nextInfoIcons })
+  }
+
+  const setGroupActionActive = (groupKey: string, actionKey: string, active: boolean): void => {
+    const next = withGroupActionActive(findGroupActions(groupKey), actionKey, active)
+    if (!next) return
+    emit('onGroupActionsUpdate', { groupKey, actions: next })
+  }
+
+  const setGroupActions = (groupKey: string, nextActions: GroupActionConfig[]): void => {
+    emit('onGroupActionsUpdate', { groupKey, actions: nextActions })
+  }
+
   const getMemorialPathOptions = (shape: MemorialDrawShape): L.PathOptions =>
     mapRef.value?.getDrawingPathOptions(shape) ??
     resolveDrawingPathOptions(mapRef.value?.map, props.options.drawing, shape)
@@ -276,7 +356,15 @@
     enterFullscreen,
     exitFullscreen,
     toggleFullscreen,
-    toggleMeasureArea
+    toggleMeasureArea,
+    metrics,
+    setLayerMetrics,
+    infoIcons,
+    setLayerInfoIcons,
+    setLayerInfoIconActive,
+    groupActions,
+    setGroupActions,
+    setGroupActionActive
   })
 </script>
 

package/src/components/coordinate/CoordinatePanel.vue

@@ -320,9 +320,9 @@
     <input
       ref="shapefileInputRef"
       type="file"
-      accept=".zip"
+      accept=".zip,.kml,.geojson,.json"
       class="shapefile-input-hidden"
-      @change="handleShapefileInputChange"
+      @change="handleGeometryFileInputChange"
     />
   </div>
 </template>
@@ -353,7 +353,10 @@
   import MemorialButtonControl from '../../handlers/memorialButtonControl'
   import type { DescriptiveMemorial } from '../../types'
   import { parseShapefileZip } from '../../utils/parseShapefileZip'
-  import { validateShapefileGeometry } from '../../utils/validateShapefileGeometry'
+  import { parseGeoJsonFile } from '../../utils/parseGeoJsonFile'
+  import { parseKmlFile } from '../../utils/parseKmlFile'
+  import { validateImportedPolygonGeometry } from '../../utils/validateImportedPolygonGeometry'
+  import type { GeometryFileParseResult } from '../../utils/geometryFileParseResult'
   import type { Feature, MultiPolygon, Polygon } from 'geojson'
 
   interface CSVRow {
@@ -669,18 +672,38 @@
     shapefileInputRef.value?.click()
   }
 
-  const processShapefile = async (file: File) => {
+  const getGeometryFileExtension = (fileName: string): 'zip' | 'kml' | 'geojson' | null => {
+    const lower = fileName.toLowerCase()
+
+    if (lower.endsWith('.zip')) return 'zip'
+    if (lower.endsWith('.kml')) return 'kml'
+    if (lower.endsWith('.geojson') || lower.endsWith('.json')) return 'geojson'
+
+    return null
+  }
+
+  const parseGeometryFile = async (file: File): Promise<GeometryFileParseResult> => {
+    const extension = getGeometryFileExtension(file.name)
+
+    if (extension === 'zip') return parseShapefileZip(file)
+    if (extension === 'kml') return parseKmlFile(file)
+    if (extension === 'geojson') return parseGeoJsonFile(file)
+
+    return { ok: false, error: texts.value.geometryImportUnsupportedFormat || 'Unsupported file format' }
+  }
+
+  const processGeometryFile = async (file: File) => {
     emit('geometryRemoved')
     csvData.value = []
     shapefileLoaded.value = false
 
-    const parseResult = await parseShapefileZip(file)
+    const parseResult = await parseGeometryFile(file)
     if (!parseResult.ok) {
       ElMessage.error(parseResult.error)
       return
     }
 
-    const validationResult = validateShapefileGeometry(parseResult.features)
+    const validationResult = validateImportedPolygonGeometry(parseResult.features)
     if (!validationResult.ok) {
       ElMessage.error(validationResult.error)
       return
@@ -691,12 +714,12 @@
     ElMessage.success(texts.value.shapefileAppliedSuccess)
   }
 
-  const handleShapefileInputChange = async (event: Event) => {
+  const handleGeometryFileInputChange = async (event: Event) => {
     const input = event.target as HTMLInputElement
     const file = input.files?.[0]
     if (!file) return
 
-    await processShapefile(file)
+    await processGeometryFile(file)
     input.value = ''
   }
 

package/src/components/fa-icon/FontAwesomeIcon.vue

@@ -1,8 +1,9 @@
 <template>
-  <FontAwesomeIcon :icon="['fas', iconName]" />
+  <FontAwesomeIcon :icon="['fas', resolvedIconName]" />
 </template>
 
 <script setup lang="ts">
+  import { computed } from 'vue'
   import { library } from '@fortawesome/fontawesome-svg-core'
   import {
     faCheck,
@@ -14,16 +15,33 @@
     faUpload,
     faPencil,
     faTrash,
-    faChevronDown
+    faChevronDown,
+    faEye,
+    faEyeSlash,
+    faCircleInfo,
+    faCircleExclamation,
+    faTriangleExclamation,
+    faCircleCheck,
+    faCircleXmark,
+    faBan,
+    faLock,
+    faUnlock,
+    faThumbtack,
+    faMapPin
   } from '@fortawesome/free-solid-svg-icons'
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { FaIconName } from '../../types'
 
   type IconProps = {
-    iconName: FaIconName
+    iconName: FaIconName | string
   }
 
-  defineProps<IconProps>()
+  const props = defineProps<IconProps>()
+
+  const resolvedIconName = computed(() => {
+    const raw = props.iconName?.trim() ?? ''
+    return raw.replace(/^(fas|far|fal|fab)\s+/i, '').replace(/^fa-/i, '')
+  })
 
   library.add(
     faCheck,
@@ -35,7 +53,19 @@
     faUpload,
     faPencil,
     faTrash,
-    faChevronDown
+    faChevronDown,
+    faEye,
+    faEyeSlash,
+    faCircleInfo,
+    faCircleExclamation,
+    faTriangleExclamation,
+    faCircleCheck,
+    faCircleXmark,
+    faBan,
+    faLock,
+    faUnlock,
+    faThumbtack,
+    faMapPin
   )
 </script>
 

package/src/components/map/LeafletMap.vue

@@ -81,10 +81,12 @@
 
   const initMap = (): void => {
     const { config } = props.mapOptions
+    const toolsConfig = resolveMapToolsConfig(props.toolsOptions)
+    const useToolsZoom = !!toolsConfig && toolsConfig.zoom?.show !== false
     const mapConfig: MapConfigConfig = {
       ...DEFAULT_MAP_OPTIONS,
       ...config,
-      ...(resolveMapToolsConfig(props.toolsOptions) ? { zoomControl: false } : {})
+      ...(useToolsZoom ? { zoomControl: false } : {})
     }
 
     mapHandlerInstance = new MapHandler(mapConfig)