@rural-environmental-registry/map_component 1.2.0 → 2.0.1

package/src/types/index.ts

@@ -15,6 +15,19 @@ export type FaIconName =
   | '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
@@ -24,39 +37,158 @@ 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
+  tooltip?: string
+  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
+  tooltip?: string
+  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
+  groups: GroupLayerData[]
+  actionDefaults?: LayerActionDefaults
+}
+
+/** @deprecated Use SectionConfig */
+export type SectionData = SectionConfig
+
+export type LayerData = {
   key: string
-  toggle: {
+  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[]
+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 DrawingEvent = {
   type: 'created' | 'edited' | 'deleted'
@@ -87,7 +219,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
 }
 
@@ -99,6 +230,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 = {
@@ -131,6 +266,7 @@ export type MapToolsConfig = {
     show?: boolean
     title?: string
   }
+  showInteractionPanel?: boolean
   texts?: {
     measureResult?: string
     measureLength?: string

package/src/utils/layersConfigNormalizer.ts

@@ -0,0 +1,276 @@
+import {
+  GroupActionConfig,
+  GroupActionsMap,
+  GroupLayerData,
+  LayerActionConfig,
+  LayerActionDefaults,
+  LayerData,
+  LayerInfoIconConfig,
+  LayerInfoIconsMap,
+  LayerMetricsConfig,
+  LayerMetricsMap,
+  LayersConfig,
+  SectionConfig
+} from '../types'
+
+type GroupLike = GroupLayerData & {
+  customLayers?: LayerData[]
+}
+
+export const isSectionConfig = (item: unknown): item is SectionConfig => {
+  return (
+    typeof item === 'object' &&
+    item !== null &&
+    Array.isArray((item as SectionConfig).groups)
+  )
+}
+
+export const isGroupConfig = (item: unknown): item is GroupLayerData => {
+  if (typeof item !== 'object' || item === null) return false
+  if (Array.isArray((item as SectionConfig).groups)) return false
+
+  const group = item as GroupLike
+  return Array.isArray(group.layers) || Array.isArray(group.customLayers)
+}
+
+const normalizeGroup = (group: GroupLike): GroupLayerData => {
+  const layers = group.layers ?? group.customLayers ?? []
+  const { customLayers: _alias, ...rest } = group
+  return {
+    ...rest,
+    layers
+  }
+}
+
+export const normalizeLayersConfig = (config?: LayersConfig | null): SectionConfig[] => {
+  if (!config?.length) return []
+
+  const allSections = config.every(isSectionConfig)
+  const allGroups = config.every(isGroupConfig)
+
+  if (allSections) {
+    return (config as SectionConfig[]).map((section) => ({
+      ...section,
+      groups: section.groups.map((group) => normalizeGroup(group as GroupLike))
+    }))
+  }
+
+  if (allGroups) {
+    return [
+      {
+        key: 'default',
+        groups: (config as GroupLike[]).map(normalizeGroup)
+      }
+    ]
+  }
+
+  console.warn(
+    '[map_component] LayersConfig misto (sections e groups). Usando apenas itens reconhecidos como section ou group.'
+  )
+
+  const sections: SectionConfig[] = []
+  const orphanGroups: GroupLayerData[] = []
+  const mixedItems = config as Array<SectionConfig | GroupLayerData>
+
+  for (const item of mixedItems) {
+    if (isSectionConfig(item)) {
+      sections.push({
+        ...item,
+        groups: item.groups.map((group) => normalizeGroup(group as GroupLike))
+      })
+    } else if (isGroupConfig(item)) {
+      orphanGroups.push(normalizeGroup(item as GroupLike))
+    }
+  }
+
+  if (orphanGroups.length) {
+    sections.push({ key: 'default', groups: orphanGroups })
+  }
+
+  return sections
+}
+
+export const resolveLayerActions = (
+  layer: LayerData,
+  defaults?: LayerActionDefaults
+): LayerActionConfig[] => {
+
+  if (Array.isArray(layer.actions)) {
+    if (layer.actions.length === 0) return []
+    return layer.actions.filter((action) => action.visible !== false)
+  }
+
+  if (!defaults) return []
+
+  const actions: LayerActionConfig[] = []
+
+  if (defaults.edit) {
+    actions.push({
+      key: defaults.edit.key ?? 'edit',
+      name: defaults.edit.name,
+      icon: defaults.edit.icon ?? 'pencil',
+      type: 'edit',
+      tooltip: defaults.edit.tooltip,
+      style: defaults.edit.style,
+      disabled: defaults.edit.disabled
+    })
+  }
+
+  if (defaults.import) {
+    actions.push({
+      key: defaults.import.key ?? 'import',
+      name: defaults.import.name,
+      icon: defaults.import.icon ?? 'upload',
+      type: 'import',
+      tooltip: defaults.import.tooltip,
+      style: defaults.import.style,
+      disabled: defaults.import.disabled
+    })
+  }
+
+  if (defaults.delete) {
+    actions.push({
+      key: defaults.delete.key ?? 'delete',
+      name: defaults.delete.name,
+      icon: defaults.delete.icon ?? 'trash',
+      type: 'delete',
+      tooltip: defaults.delete.tooltip,
+      style: defaults.delete.style,
+      disabled: defaults.delete.disabled
+    })
+  }
+
+  return actions.filter((action) => action.visible !== false)
+}
+
+
+export const resolveEditControlAction = (
+  defaults: LayerActionDefaults | undefined,
+  kind: 'cancel' | 'conclude'
+): LayerActionConfig => {
+  const configured = defaults?.[kind]
+  const fallbackName = kind === 'cancel' ? 'Cancelar' : 'Concluir'
+
+  return {
+    key: configured?.key ?? kind,
+    name: configured?.name ?? fallbackName,
+    icon: configured?.icon,
+    type: kind,
+    style: configured?.style,
+    disabled: configured?.disabled,
+    visible: configured?.visible
+  }
+}
+
+export const isMenuSeparator = (layer: LayerData | null | undefined): boolean => {
+  return layer?.role === 'separator' || !!layer?.meta?.isSeparator
+}
+
+export const shouldApplyMapOverlay = (layer: LayerData): boolean => {
+  if (isMenuSeparator(layer)) return false
+  if (layer.mapSource === 'none' || layer.mapSource === 'consumer') return false
+  if (layer.mapSource === 'wms' || layer.mapSource === 'geojson') return true
+  if (layer.geojson) return true
+  if (layer.baseUrl) return true
+  return false
+}
+
+export const collectLayerMetricsMap = (config?: LayersConfig | null): LayerMetricsMap => {
+  const result: LayerMetricsMap = {}
+
+  normalizeLayersConfig(config).forEach((section) => {
+    section.groups.forEach((group) => {
+      group.layers?.forEach((layer: LayerData) => {
+        if (layer.metrics?.length) {
+          result[layer.key] = layer.metrics
+        }
+      })
+    })
+  })
+
+  return result
+}
+
+export const resolveLayerMetrics = (layer: LayerData | null | undefined): LayerMetricsConfig[] => {
+  return layer?.metrics?.length ? layer.metrics : []
+}
+
+export const collectLayerInfoIconsMap = (config?: LayersConfig | null): LayerInfoIconsMap => {
+  const result: LayerInfoIconsMap = {}
+
+  normalizeLayersConfig(config).forEach((section) => {
+    section.groups.forEach((group) => {
+      group.layers?.forEach((layer: LayerData) => {
+        if (layer.infoIcons?.length) {
+          result[layer.key] = layer.infoIcons
+        }
+      })
+    })
+  })
+
+  return result
+}
+
+export const resolveActiveLayerInfoIcons = (
+  layer: LayerData | null | undefined
+): LayerInfoIconConfig[] => {
+  return (layer?.infoIcons ?? []).filter((item) => item.active)
+}
+
+export const collectGroupActionsMap = (config?: LayersConfig | null): GroupActionsMap => {
+  const result: GroupActionsMap = {}
+
+  normalizeLayersConfig(config).forEach((section) => {
+    section.groups.forEach((group) => {
+      if (group.actions?.length) {
+        result[group.key] = group.actions
+      }
+    })
+  })
+
+  return result
+}
+
+export const resolveActiveGroupActions = (
+  group: GroupLayerData | null | undefined
+): GroupActionConfig[] => {
+  return (group?.actions ?? []).filter(
+    (action) => action.active && action.visible !== false
+  )
+}
+
+export const withLayerInfoIconActive = (
+  infoIcons: LayerInfoIconConfig[] | undefined,
+  iconRef: string,
+  active: boolean
+): LayerInfoIconConfig[] | null => {
+  if (!infoIcons?.length) return null
+
+  let targetIndex = infoIcons.findIndex((item) => item.key === iconRef)
+  if (targetIndex < 0) {
+    const parsed = Number.parseInt(iconRef, 10)
+    if (!Number.isInteger(parsed) || parsed < 0 || parsed >= infoIcons.length) {
+      return null
+    }
+    targetIndex = parsed
+  }
+
+  return infoIcons.map((item, idx) =>
+    idx === targetIndex ? { ...item, active } : item
+  )
+}
+
+export const withGroupActionActive = (
+  actions: GroupActionConfig[] | undefined,
+  actionKey: string,
+  active: boolean
+): GroupActionConfig[] | null => {
+  if (!actions?.length) return null
+
+  const exists = actions.some((action) => action.key === actionKey)
+  if (!exists) return null
+
+  return actions.map((action) =>
+    action.key === actionKey ? { ...action, active } : action
+  )
+}

package/src/utils/menuHistory.ts

@@ -1,10 +1,11 @@
 import { LayerData } from '../types'
 
 const MENU_HISTORY_KEY = 'menuHistory'
+const MENU_COLLAPSE_KEY = 'menuCollapseHistory'
 
-const readHistory = (): Record<string, boolean> => {
+const readJsonObject = (storageKey: string): Record<string, boolean> => {
   try {
-    const raw = window.sessionStorage.getItem(MENU_HISTORY_KEY)
+    const raw = window.sessionStorage.getItem(storageKey)
     if (!raw) return {}
 
     const parsed: unknown = JSON.parse(raw)
@@ -18,31 +19,35 @@ const readHistory = (): Record<string, boolean> => {
   }
 }
 
-export const setHistory = (layer: LayerData): void => {
+const writeJsonObject = (storageKey: string, value: Record<string, boolean>): void => {
   try {
-    const history = readHistory()
-    window.sessionStorage.setItem(
-      MENU_HISTORY_KEY,
-      JSON.stringify({ ...history, [layer.key]: layer.active })
-    )
+    window.sessionStorage.setItem(storageKey, JSON.stringify(value))
   } catch {
-    // sessionStorage indisponível ou JSON inválido — ignora persistência
   }
 }
 
-/** Retorna o estado salvo da camada ou `undefined` se não houver histórico. */
+export const setHistory = (layer: LayerData): void => {
+  const history = readJsonObject(MENU_HISTORY_KEY)
+  writeJsonObject(MENU_HISTORY_KEY, { ...history, [layer.key]: layer.active })
+}
+
 export const getHistory = (layerKey: string): boolean | undefined => {
-  try {
-    const history = readHistory()
-    const isActive = history[layerKey]
+  const history = readJsonObject(MENU_HISTORY_KEY)
+  const isActive = history[layerKey]
+  return isActive !== undefined ? isActive : undefined
+}
 
-    return isActive !== undefined ? isActive : undefined
-  } catch {
-    return undefined
-  }
+export const setGroupCollapsedHistory = (groupKey: string, collapsed: boolean): void => {
+  const history = readJsonObject(MENU_COLLAPSE_KEY)
+  writeJsonObject(MENU_COLLAPSE_KEY, { ...history, [groupKey]: collapsed })
+}
+
+export const getGroupCollapsedHistory = (groupKey: string): boolean | undefined => {
+  const history = readJsonObject(MENU_COLLAPSE_KEY)
+  const collapsed = history[groupKey]
+  return collapsed !== undefined ? collapsed : undefined
 }
 
-/** Resolve `active`/`activeDefault` sem mutar o objeto original (mesma regra do fluxo legado). */
 export const resolveLayerActiveState = (layer: LayerData, persist: boolean): LayerData => {
   const savedActive = persist ? getHistory(layer.key) : undefined
 
@@ -61,7 +66,18 @@ export const resolveLayerActiveState = (layer: LayerData, persist: boolean): Lay
   return { ...layer, active, activeDefault }
 }
 
-/** Indica se a camada deve ser aplicada ao mapa na inicialização. */
+export const resolveGroupCollapsedState = (
+  groupKey: string,
+  collapsedFromConfig: boolean | undefined,
+  persist: boolean
+): boolean => {
+  if (persist) {
+    const saved = getGroupCollapsedHistory(groupKey)
+    if (saved !== undefined) return saved
+  }
+  return collapsedFromConfig ?? false
+}
+
 export const shouldInitLayerOnMap = (layer: LayerData, persist: boolean): boolean => {
   const resolved = resolveLayerActiveState(layer, persist)