@djangocfg/ui-tools 2.1.109 → 2.1.111

package/src/tools/Map/components/LayerSwitcher.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import { useState, useCallback, useMemo, memo } from 'react'
+import { useMapLayers } from '../hooks/useMapLayers'
+
+import type { LayerSwitcherProps, LayerConfig } from '../types'
+
+const positionStyles: Record<string, React.CSSProperties> = {
+  'top-left': { top: 10, left: 10 },
+  'top-right': { top: 10, right: 10 },
+  'bottom-left': { bottom: 10, left: 10 },
+  'bottom-right': { bottom: 10, right: 10 },
+}
+
+function LayerSwitcherComponent({
+  layers,
+  position = 'top-right',
+  title = 'Layers',
+  collapsible = true,
+  defaultCollapsed = false,
+  showToggleAll = false,
+  className = '',
+  style,
+  onChange,
+}: LayerSwitcherProps) {
+  const { setLayerVisibility } = useMapLayers()
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+
+  const initialVisibility = useMemo(() => {
+    const initial: Record<string, boolean> = {}
+    layers.forEach((layer) => {
+      initial[layer.id] = layer.defaultVisible !== false
+    })
+    return initial
+  }, [layers])
+
+  const [visibility, setVisibility] = useState<Record<string, boolean>>(initialVisibility)
+
+  const handleToggle = useCallback(
+    (layerId: string) => {
+      const newVisible = !visibility[layerId]
+      setVisibility((prev) => ({ ...prev, [layerId]: newVisible }))
+      setLayerVisibility(layerId, newVisible)
+      onChange?.(layerId, newVisible)
+    },
+    [visibility, setLayerVisibility, onChange]
+  )
+
+  const handleToggleAll = useCallback(
+    (visible: boolean) => {
+      const newVisibility: Record<string, boolean> = {}
+      layers.forEach((layer) => {
+        newVisibility[layer.id] = visible
+        setLayerVisibility(layer.id, visible)
+        onChange?.(layer.id, visible)
+      })
+      setVisibility(newVisibility)
+    },
+    [layers, setLayerVisibility, onChange]
+  )
+
+  const allVisible = useMemo(() => Object.values(visibility).every(Boolean), [visibility])
+  const noneVisible = useMemo(() => Object.values(visibility).every((v) => !v), [visibility])
+
+  const containerStyle = useMemo<React.CSSProperties>(
+    () => ({
+      position: 'absolute',
+      ...positionStyles[position],
+      backgroundColor: 'white',
+      borderRadius: 8,
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      padding: collapsed ? 8 : 12,
+      minWidth: collapsed ? 'auto' : 150,
+      zIndex: 1,
+      ...style,
+    }),
+    [position, collapsed, style]
+  )
+
+  const headerStyle = useMemo<React.CSSProperties>(
+    () => ({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      cursor: collapsible ? 'pointer' : 'default',
+      fontWeight: 600,
+      fontSize: 12,
+      color: '#333',
+      marginBottom: collapsed ? 0 : 8,
+    }),
+    [collapsible, collapsed]
+  )
+
+  const itemStyle = useMemo<React.CSSProperties>(
+    () => ({
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '4px 0',
+      fontSize: 12,
+      color: '#666',
+      cursor: 'pointer',
+    }),
+    []
+  )
+
+  const checkboxStyle = useMemo<React.CSSProperties>(
+    () => ({
+      width: 14,
+      height: 14,
+      cursor: 'pointer',
+    }),
+    []
+  )
+
+  const groups = useMemo(() => {
+    return layers.reduce(
+      (acc, layer) => {
+        const group = layer.group || ''
+        if (!acc[group]) acc[group] = []
+        acc[group].push(layer)
+        return acc
+      },
+      {} as Record<string, LayerConfig[]>
+    )
+  }, [layers])
+
+  const handleHeaderClick = collapsible ? () => setCollapsed(!collapsed) : undefined
+
+  return (
+    <div className={className} style={containerStyle}>
+      <div style={headerStyle} onClick={handleHeaderClick}>
+        <span>{title}</span>
+        {collapsible && (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            style={{
+              transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s',
+            }}
+          >
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="#666" fill="none" />
+          </svg>
+        )}
+      </div>
+      {!collapsed && (
+        <div>
+          {showToggleAll && (
+            <div
+              style={{
+                ...itemStyle,
+                borderBottom: '1px solid #eee',
+                marginBottom: 4,
+                paddingBottom: 8,
+              }}
+            >
+              <button
+                onClick={() => handleToggleAll(true)}
+                disabled={allVisible}
+                style={{
+                  fontSize: 10,
+                  padding: '2px 6px',
+                  cursor: allVisible ? 'default' : 'pointer',
+                  opacity: allVisible ? 0.5 : 1,
+                }}
+              >
+                All
+              </button>
+              <button
+                onClick={() => handleToggleAll(false)}
+                disabled={noneVisible}
+                style={{
+                  fontSize: 10,
+                  padding: '2px 6px',
+                  cursor: noneVisible ? 'default' : 'pointer',
+                  opacity: noneVisible ? 0.5 : 1,
+                }}
+              >
+                None
+              </button>
+            </div>
+          )}
+          {Object.entries(groups).map(([group, groupLayers]) => (
+            <div key={group || 'default'}>
+              {group && (
+                <div
+                  style={{
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: '#999',
+                    marginTop: 8,
+                    marginBottom: 4,
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  {group}
+                </div>
+              )}
+              {groupLayers.map((layer) => (
+                <div
+                  key={layer.id}
+                  style={itemStyle}
+                  onClick={() => handleToggle(layer.id)}
+                >
+                  <input
+                    type="checkbox"
+                    checked={visibility[layer.id]}
+                    onChange={() => handleToggle(layer.id)}
+                    style={checkboxStyle}
+                  />
+                  <span>{layer.label}</span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const LayerSwitcher = memo(LayerSwitcherComponent)

package/src/tools/Map/components/MapCluster.tsx

@@ -0,0 +1,273 @@
+'use client'
+
+import { useCallback, useState, useEffect, memo, type ReactNode } from 'react'
+import { Source, Layer, useMap, Popup } from 'react-map-gl/maplibre'
+import type { GeoJSONSource, MapMouseEvent } from 'maplibre-gl'
+import { createClusterLayers } from '../layers'
+import type { ClusterLayerOptions } from '../types'
+
+// Inject popup styles once
+const POPUP_STYLE_ID = 'map-cluster-popup-styles'
+function injectPopupStyles() {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(POPUP_STYLE_ID)) return
+
+  const style = document.createElement('style')
+  style.id = POPUP_STYLE_ID
+  style.textContent = `
+    .maplibregl-popup.map-popup-clean .maplibregl-popup-content {
+      padding: 0 !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      border-radius: 0 !important;
+    }
+    .maplibregl-popup.map-popup-clean .maplibregl-popup-tip {
+      display: none !important;
+    }
+  `
+  document.head.appendChild(style)
+}
+
+export interface MapClusterProps {
+  sourceId: string
+  data: GeoJSON.FeatureCollection
+  clusterRadius?: number
+  clusterMaxZoom?: number
+  onClusterClick?: (clusterId: number, coordinates: [number, number]) => void
+  onPointClick?: (feature: GeoJSON.Feature) => void
+  /** Render prop for popup content - handles popup state automatically */
+  renderPopup?: (feature: GeoJSON.Feature, onClose: () => void) => ReactNode
+  /** Popup anchor position */
+  popupAnchor?: 'top' | 'bottom' | 'left' | 'right'
+  /** Popup offset */
+  popupOffset?: number | [number, number]
+  /** Pan offset X when clicking point (pixels). Positive = point shifts right. */
+  panOffsetX?: number
+  /** Pan offset Y when clicking point (pixels). Positive = point shifts down. */
+  panOffsetY?: number
+  colors?: [string, string, string]
+  radii?: [number, number, number]
+  thresholds?: [number, number]
+  /** Color when marker/cluster is hovered */
+  hoverColor?: string
+}
+
+export const MapCluster = memo(function MapCluster({
+  sourceId,
+  data,
+  clusterRadius = 50,
+  clusterMaxZoom = 14,
+  onClusterClick,
+  onPointClick,
+  renderPopup,
+  popupAnchor = 'bottom',
+  popupOffset = 15,
+  panOffsetX = 0,
+  panOffsetY = 150,
+  colors,
+  radii,
+  thresholds,
+  hoverColor,
+}: MapClusterProps) {
+  const { current: map } = useMap()
+  const [selectedFeature, setSelectedFeature] = useState<GeoJSON.Feature | null>(null)
+  const [popupCoords, setPopupCoords] = useState<[number, number] | null>(null)
+  const [hoveredFeatureId, setHoveredFeatureId] = useState<number | string | null>(null)
+
+  // Inject popup styles on mount
+  useEffect(() => {
+    injectPopupStyles()
+  }, [])
+
+  const layerOptions: ClusterLayerOptions = {
+    sourceId,
+    colors,
+    radii,
+    thresholds,
+    hoverColor,
+  }
+
+  const { cluster, clusterCount, unclusteredPoint } = createClusterLayers(layerOptions)
+
+  const handleClosePopup = useCallback(() => {
+    setSelectedFeature(null)
+    setPopupCoords(null)
+  }, [])
+
+  const handleClick = useCallback(
+    async (event: MapMouseEvent) => {
+      if (!map) return
+
+      const features = map.queryRenderedFeatures(event.point, {
+        layers: [cluster.id!, unclusteredPoint.id!],
+      })
+
+      if (!features || features.length === 0) return
+
+      const feature = features[0]
+      const geometry = feature.geometry
+
+      if (geometry.type !== 'Point') return
+
+      const coordinates = geometry.coordinates as [number, number]
+      const clusterId = feature.properties?.cluster_id
+
+      if (clusterId) {
+        const source = map.getSource(sourceId) as GeoJSONSource
+        if (!source) return
+
+        try {
+          const zoom = await source.getClusterExpansionZoom(clusterId)
+          map.easeTo({
+            center: coordinates,
+            zoom,
+            duration: 500,
+          })
+          onClusterClick?.(clusterId, coordinates)
+        } catch (error) {
+          console.error('Error expanding cluster:', error)
+        }
+      } else {
+        // Handle point click
+        onPointClick?.(feature)
+
+        // If renderPopup is provided, show popup and pan to point
+        if (renderPopup) {
+          // Pan map to center on point with offset for popup visibility
+          map.easeTo({
+            center: coordinates,
+            duration: 300,
+            offset: [panOffsetX, panOffsetY],
+          })
+          setSelectedFeature(feature)
+          setPopupCoords(coordinates)
+        }
+      }
+    },
+    [map, sourceId, cluster.id, unclusteredPoint.id, onClusterClick, onPointClick, renderPopup, panOffsetX, panOffsetY]
+  )
+
+  // Close popup when clicking empty area
+  const handleMapClick = useCallback(
+    (event: MapMouseEvent) => {
+      if (!map) return
+
+      const features = map.queryRenderedFeatures(event.point, {
+        layers: [cluster.id!, unclusteredPoint.id!],
+      })
+
+      // Close popup if clicked on empty area (no features)
+      if (!features || features.length === 0) {
+        handleClosePopup()
+      }
+    },
+    [map, cluster.id, unclusteredPoint.id, handleClosePopup]
+  )
+
+  // Register click and hover handlers with proper cleanup
+  useEffect(() => {
+    if (!map) return
+
+    const clusterLayerId = cluster.id!
+    const pointLayerId = unclusteredPoint.id!
+    let currentHoveredId: number | string | null = null
+
+    // Helper to clear hover state
+    const clearHoverState = () => {
+      if (currentHoveredId !== null) {
+        map.setFeatureState(
+          { source: sourceId, id: currentHoveredId },
+          { hover: false }
+        )
+        currentHoveredId = null
+        setHoveredFeatureId(null)
+      }
+    }
+
+    // Hover handler for both clusters and points
+    const handleMouseMove = (e: MapMouseEvent) => {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: [clusterLayerId, pointLayerId],
+      })
+
+      if (features.length > 0) {
+        map.getCanvas().style.cursor = 'pointer'
+        const feature = features[0]
+        const featureId = feature.id
+
+        if (featureId !== undefined && featureId !== currentHoveredId) {
+          clearHoverState()
+          currentHoveredId = featureId
+          setHoveredFeatureId(featureId)
+          map.setFeatureState(
+            { source: sourceId, id: featureId },
+            { hover: true }
+          )
+        }
+      } else {
+        map.getCanvas().style.cursor = ''
+        clearHoverState()
+      }
+    }
+
+    const handleMouseLeave = () => {
+      map.getCanvas().style.cursor = ''
+      clearHoverState()
+    }
+
+    map.on('click', clusterLayerId, handleClick)
+    map.on('click', pointLayerId, handleClick)
+    map.on('click', handleMapClick)
+    map.on('mousemove', clusterLayerId, handleMouseMove)
+    map.on('mousemove', pointLayerId, handleMouseMove)
+    map.on('mouseleave', clusterLayerId, handleMouseLeave)
+    map.on('mouseleave', pointLayerId, handleMouseLeave)
+
+    // Cleanup on unmount
+    return () => {
+      clearHoverState()
+      map.off('click', clusterLayerId, handleClick)
+      map.off('click', pointLayerId, handleClick)
+      map.off('click', handleMapClick)
+      map.off('mousemove', clusterLayerId, handleMouseMove)
+      map.off('mousemove', pointLayerId, handleMouseMove)
+      map.off('mouseleave', clusterLayerId, handleMouseLeave)
+      map.off('mouseleave', pointLayerId, handleMouseLeave)
+    }
+  }, [map, sourceId, cluster.id, unclusteredPoint.id, handleClick, handleMapClick])
+
+  return (
+    <>
+      <Source
+        id={sourceId}
+        type="geojson"
+        data={data}
+        cluster={true}
+        clusterMaxZoom={clusterMaxZoom}
+        clusterRadius={clusterRadius}
+        generateId={true}
+      >
+        <Layer {...cluster} />
+        <Layer {...clusterCount} />
+        <Layer {...unclusteredPoint} />
+      </Source>
+
+      {/* Popup rendered via render prop */}
+      {renderPopup && selectedFeature && popupCoords && (
+        <Popup
+          longitude={popupCoords[0]}
+          latitude={popupCoords[1]}
+          anchor={popupAnchor}
+          onClose={handleClosePopup}
+          closeOnClick={false}
+          closeButton={false}
+          offset={popupOffset}
+          maxWidth="none"
+          className="map-popup-clean"
+        >
+          {renderPopup(selectedFeature, handleClosePopup)}
+        </Popup>
+      )}
+    </>
+  )
+})

package/src/tools/Map/components/MapContainer.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import { useCallback, useEffect, useRef, type ReactNode } from 'react'
+import Map, { type ViewStateChangeEvent } from 'react-map-gl/maplibre'
+import { ExternalLink, RotateCcw } from 'lucide-react'
+import { cn } from '@djangocfg/ui-core/lib'
+import 'maplibre-gl/dist/maplibre-gl.css'
+
+import { MapProvider, useMapContext } from '../context'
+import { MAP_STYLES } from '../styles'
+import type { MapViewport, MapStyleKey } from '../types'
+
+export interface MapContainerProps {
+  children?: ReactNode
+  initialViewport?: Partial<MapViewport>
+  mapStyle?: MapStyleKey | string
+  interactiveLayerIds?: string[]
+  className?: string
+  style?: React.CSSProperties
+  cursor?: string
+  attributionControl?: boolean
+  reuseMaps?: boolean
+  /** URL to open in external maps app (shows "Open in Maps" button if provided) */
+  openInMapsUrl?: string
+  /** Label for the open in maps button */
+  openInMapsLabel?: string
+  /** Auto-reset to initial viewport after N ms of inactivity (0 = disabled) */
+  autoResetDelay?: number
+  /** Show reset button */
+  showResetButton?: boolean
+}
+
+interface MapInnerProps extends Omit<MapContainerProps, 'initialViewport'> {}
+
+function MapInner({
+  children,
+  mapStyle = 'light',
+  interactiveLayerIds,
+  style,
+  cursor,
+  attributionControl = true,
+  reuseMaps = true,
+  openInMapsUrl,
+  openInMapsLabel = 'Open in Maps',
+  autoResetDelay = 0,
+  showResetButton = false,
+}: MapInnerProps) {
+  const { mapRef, viewport, setViewport, setIsLoaded, resetToInitial, initialViewport } = useMapContext()
+  const resetTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const isInteractingRef = useRef(false)
+
+  // Check if viewport has changed from initial
+  const hasViewportChanged =
+    Math.abs(viewport.longitude - initialViewport.longitude) > 0.0001 ||
+    Math.abs(viewport.latitude - initialViewport.latitude) > 0.0001 ||
+    Math.abs(viewport.zoom - initialViewport.zoom) > 0.1
+
+  const handleMove = useCallback(
+    (evt: ViewStateChangeEvent) => {
+      setViewport({
+        longitude: evt.viewState.longitude,
+        latitude: evt.viewState.latitude,
+        zoom: evt.viewState.zoom,
+        bearing: evt.viewState.bearing,
+        pitch: evt.viewState.pitch,
+      })
+    },
+    [setViewport]
+  )
+
+  const handleMoveStart = useCallback(() => {
+    isInteractingRef.current = true
+    // Clear any pending reset timer
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current)
+      resetTimerRef.current = null
+    }
+  }, [])
+
+  const handleMoveEnd = useCallback(() => {
+    isInteractingRef.current = false
+    // Start auto-reset timer if enabled
+    if (autoResetDelay > 0) {
+      resetTimerRef.current = setTimeout(() => {
+        if (!isInteractingRef.current) {
+          resetToInitial()
+        }
+      }, autoResetDelay)
+    }
+  }, [autoResetDelay, resetToInitial])
+
+  const handleLoad = useCallback(() => {
+    setIsLoaded(true)
+  }, [setIsLoaded])
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current)
+      }
+    }
+  }, [])
+
+  const resolvedStyle = mapStyle in MAP_STYLES
+    ? MAP_STYLES[mapStyle as MapStyleKey]
+    : mapStyle
+
+  return (
+    <>
+      <Map
+        ref={mapRef}
+        {...viewport}
+        onMove={handleMove}
+        onMoveStart={handleMoveStart}
+        onMoveEnd={handleMoveEnd}
+        onLoad={handleLoad}
+        mapStyle={resolvedStyle}
+        interactiveLayerIds={interactiveLayerIds}
+        attributionControl={attributionControl ? {} : false}
+        reuseMaps={reuseMaps}
+        style={{
+          width: '100%',
+          height: '100%',
+          ...style,
+        }}
+        cursor={cursor}
+      >
+        {children}
+      </Map>
+
+      {/* Map overlay buttons */}
+      <div className="absolute bottom-3 right-3 flex items-center gap-2">
+        {/* Reset button */}
+        {showResetButton && hasViewportChanged && (
+          <button
+            type="button"
+            onClick={resetToInitial}
+            className={cn(
+              'inline-flex items-center gap-2 px-3 py-2 rounded-lg',
+              'bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium',
+              'hover:bg-background transition-colors shadow-sm border border-border'
+            )}
+          >
+            <RotateCcw className="w-4 h-4" />
+            Reset
+          </button>
+        )}
+
+        {/* Open in Maps button */}
+        {openInMapsUrl && (
+          <a
+            href={openInMapsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              'inline-flex items-center gap-2 px-4 py-2 rounded-lg',
+              'bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium',
+              'hover:bg-background transition-colors shadow-sm border border-border'
+            )}
+          >
+            <ExternalLink className="w-4 h-4" />
+            {openInMapsLabel}
+          </a>
+        )}
+      </div>
+    </>
+  )
+}
+
+export function MapContainer({
+  children,
+  initialViewport,
+  className,
+  ...props
+}: MapContainerProps) {
+  return (
+    <div className={className} style={{ width: '100%', height: '100%', position: 'relative' }}>
+      <MapProvider initialViewport={initialViewport}>
+        <MapInner {...props}>{children}</MapInner>
+      </MapProvider>
+    </div>
+  )
+}
+
+/**
+ * Use this when you need the map inside an existing MapProvider
+ */
+export function MapView(props: Omit<MapContainerProps, 'initialViewport'>) {
+  return <MapInner {...props} />
+}