@m4l/gclick 0.2.0 → 0.2.3-beta.0

package/components/maps/components/GpsMap/GpsMap.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { T as TileLayers } from "./subcomponents/TileLayers/index.js";
 import { C as Controls } from "./subcomponents/Controls/index.js";
-import { L as LayersContainer } from "./subcomponents/LayersContainer/index.js";
+import { L as LayersContainer } from "./subcomponents/Layers/index.js";
 import { m as mapClasses } from "./classes/index.js";
 import { G as GpsMapRootStyled, a as GpsMapContainerStyled } from "./slots/styled.js";
 import clsx from "clsx";
@@ -10,7 +10,7 @@ import { u as useMapStore } from "./hooks/useMapStore/index.js";
 import { M as MapEventController } from "./subcomponents/MapEventController/MapEventController.js";
 function GpsMap(props) {
   const {
-    GpsTools,
+    tools,
     center = [6.215749485905093, -75.58622905191254],
     initalZoom = 16,
     maxZoom = 22,
@@ -40,7 +40,7 @@ function GpsMap(props) {
         /* @__PURE__ */ jsx(MapEventController, { disableMapEvents }),
         /* @__PURE__ */ jsx(TileLayers, {}),
         /* @__PURE__ */ jsx(LayersContainer, {}),
-        /* @__PURE__ */ jsx(Controls, { GpsTools }),
+        /* @__PURE__ */ jsx(Controls, { tools }),
         children
       ]
     }

package/components/maps/components/GpsMap/GpsMap.styles.js

@@ -1,7 +1,7 @@
 import { l as leafletAllStyles } from "./LLeaflet.styles.js";
-import { m as mapSourcesToolStyles } from "./subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/MapSourcesTool.styles.js";
-import { m as mapLayersToolStyles } from "./subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/MapLayersTool.styles.js";
-import { m as mapMeasureToolStyles, g as getMapContainerMeasureToolStyles } from "./subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/MeasureTool.styles.js";
+import { m as mapSourcesToolStyles } from "./subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/MapSourcesTool.styles.js";
+import { m as mapLayersToolStyles } from "./subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapLayersTool/MapLayersTool.styles.js";
+import { m as mapMeasureToolStyles, g as getMapContainerMeasureToolStyles } from "./subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MeasureTool/MeasureTool.styles.js";
 const mapStyles = {
   /**
    * TODO: Documentar
@@ -9,7 +9,77 @@ const mapStyles = {
   root: () => ({
     ...leafletAllStyles,
     width: "100%",
-    height: "100%"
+    height: "100%",
+    //GEOMAN
+    "& .marker-icon": {
+      backgroundColor: "#fff",
+      border: "1px solid #3388ff",
+      borderRadius: "50%",
+      margin: "-8px 0 0 -8px !important",
+      width: "14px !important",
+      height: "14px !important",
+      outline: 0,
+      transition: "opacity ease 0.3s"
+    },
+    "& .marker-icon-middle": {
+      opacity: 0.7,
+      margin: "-6px 0 0 -6px !important",
+      width: "10px !important",
+      height: "10px !important"
+    },
+    "& .leaflet-pm-draggable": {
+      cursor: "move !important"
+    },
+    "& .cursor-marker": {
+      cursor: "crosshair",
+      pointerEvents: "none",
+      opacity: 0
+    },
+    "& .cursor-marker.visible": {
+      opacity: "1 !important"
+    },
+    "& .geoman-draw-cursor": {
+      cursor: "crosshair"
+    },
+    "& .rect-style-marker, & .rect-start-marker": {
+      opacity: 0
+    },
+    "& .rect-style-marker.visible, & .rect-start-marker.visible": {
+      opacity: "1 !important"
+    },
+    "& .vertexmarker-disabled": {
+      opacity: 0.7
+    },
+    "& .pm-text-marker": {
+      width: 0,
+      height: 0
+    },
+    "& .pm-textarea": {
+      backgroundColor: "#fff",
+      color: "#000",
+      resize: "none",
+      border: "none",
+      outline: 0,
+      cursor: "pointer",
+      borderRadius: "3px",
+      paddingLeft: "7px",
+      paddingBottom: 0,
+      paddingTop: "4px"
+    },
+    "& .leaflet-pm-draggable .pm-textarea": {
+      cursor: "move"
+    },
+    "& .pm-textarea:focus, & .pm-textarea:focus-within, & .pm-textarea:focus-visible, & .pm-textarea:active": {
+      border: "2px solid #000",
+      outline: 0
+    },
+    "& .pm-textarea.pm-disabled": {
+      border: "none",
+      userSelect: "none"
+    },
+    "& .pm-textarea.pm-hasfocus": {
+      cursor: "auto"
+    }
   }),
   /**
    * Estilos del contenedor del mapa

package/components/maps/components/GpsMap/constants.d.ts

@@ -11,8 +11,10 @@ export declare const MAP_ZINDEX_OVER_LAYERS = 1000;
 export declare const MAP_ZINDEX_OVER_MAP = 1100;
 export declare const TIME_DOUBLE_CLICK = 250;
 export declare const MARKER_COLOR_DEFAULT = "#1E96DC";
-export declare const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
+export declare const LABEL_FILLCOLOR_DEFAULT = "#1E96DC";
 export declare const LABEL_COLOR_DEFAULT = "#FFFFFF";
+export declare const LABEL_FILLOPACITY_DEFAULT = 1;
+export declare const LABEL_COLOROPACITY_DEFAULT = 1;
 export declare const GPS_TOOLS_POPUP_ID = "gpsTools";
 export declare const LAT_LON_FIXED_DIGITS = 8;
 export declare const MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION: RNDDefaultPosition;

package/components/maps/components/GpsMap/constants.js

@@ -1,11 +1,8 @@
 const MAP_COMPONET_KEY_COMPONENT = "M4LMap";
 const MAP_ZINDEX_DEFAULT = 0;
 const MAP_ZINDEX_OVER_MAP = 1100;
-const TIME_DOUBLE_CLICK = 250;
-const MARKER_COLOR_DEFAULT = "#1E96DC";
-const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
+const LABEL_FILLCOLOR_DEFAULT = "#1E96DC";
 const LABEL_COLOR_DEFAULT = "#FFFFFF";
-const GPS_TOOLS_POPUP_ID = "gpsTools";
 const LAT_LON_FIXED_DIGITS = 8;
 const MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION = {
   vertical: { top: 16, height: 430 },
@@ -15,47 +12,18 @@ const MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION = {
   vertical: { top: 16, height: 160 },
   horizontal: { right: -55, width: 280, magnetize: true }
 };
-const GPS_TOOLS_POPUP_DEFAULT_POSITION = {
-  vertical: { top: 16, bottom: 50 },
-  horizontal: { right: -55, width: 280, magnetize: true }
-};
 const MESURE_TOOL_POPUP_DEFAULT_POSITION = {
   vertical: { top: 16, height: 215 },
   horizontal: { right: -55, width: 280, magnetize: true }
 };
-const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
-<g>
-    <circle
-        cx="320"
-        cy="320"
-        r="280"
-        fill="#1E96DC"
-    />
-    <text
-        x="320"
-        y="320"
-        font-size="320"
-        font-family="sans-serif"
-        fill="#FFFFFF"
-        text-anchor="middle"
-        alignment-baseline="central"
-        dominant-baseline="central"
-    >P</text>
-</g>
-</svg>`;
 export {
-  GPS_TOOLS_POPUP_DEFAULT_POSITION as G,
-  LABEL_BK_COLOR_DEFAULT as L,
+  LABEL_FILLCOLOR_DEFAULT as L,
   MAP_COMPONET_KEY_COMPONENT as M,
-  SVG_ICON_DEFAULT as S,
-  TIME_DOUBLE_CLICK as T,
-  MARKER_COLOR_DEFAULT as a,
-  LABEL_COLOR_DEFAULT as b,
-  MAP_ZINDEX_OVER_MAP as c,
-  MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION as d,
-  MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION as e,
-  MESURE_TOOL_POPUP_DEFAULT_POSITION as f,
-  MAP_ZINDEX_DEFAULT as g,
-  GPS_TOOLS_POPUP_ID as h,
-  LAT_LON_FIXED_DIGITS as i
+  LABEL_COLOR_DEFAULT as a,
+  MAP_ZINDEX_OVER_MAP as b,
+  MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION as c,
+  MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION as d,
+  MESURE_TOOL_POPUP_DEFAULT_POSITION as e,
+  MAP_ZINDEX_DEFAULT as f,
+  LAT_LON_FIXED_DIGITS as g
 };

package/components/maps/components/GpsMap/contexts/MapContext/store.js

@@ -3,9 +3,9 @@ import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import cloneDeep from "lodash-es/cloneDeep";
 import merge from "lodash-es/merge";
-import { T as TILE_LAYER_OTHERS } from "../../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/others.js";
-import { T as TILE_SORCE_GOOGLE } from "../../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/google.js";
-import { T as TILE_LAYER_BING } from "../../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/bing.js";
+import { T as TILE_LAYER_OTHERS } from "../../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/sourceTypes/others.js";
+import { T as TILE_SORCE_GOOGLE } from "../../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/sourceTypes/google.js";
+import { T as TILE_LAYER_BING } from "../../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/sourceTypes/bing.js";
 const createDevtools = (immerMiddlewere, config) => {
   const { enabled = false } = config;
   if (enabled && process.env.NODE_ENV === "development") {
@@ -139,7 +139,7 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * TODO: Documentar
            */
-          setFeatureData: (layerId, featureId, geometry, properties, featureLabel) => {
+          setFeatureData: (layerId, featureId, geometry, properties) => {
             if (!get().hashLayers[layerId]) {
               throw new Error(`Layer with id ${layerId} not found`);
             }
@@ -150,14 +150,12 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
                 if (feature) {
                   feature.geometry = cloneDeep(geometry);
                   feature.properties = merge(feature.properties, properties);
-                  feature.label = featureLabel;
                 } else {
                   feature = {
                     type: "Feature",
                     geometry,
                     id: featureId,
-                    properties,
-                    label: featureLabel
+                    properties
                   };
                   layer.features.push(feature);
                 }

package/components/maps/components/GpsMap/contexts/MapContext/types.d.ts

@@ -128,25 +128,14 @@ export type GeoJsonBaseProperties = {
 };
 export interface FeatureIconLabel {
     label?: string;
-    labelColor?: string;
-    labelBkColor?: string;
-    iconWidth?: number;
-    iconHeight?: number;
+    color?: string;
+    opacity?: number;
+    fillColor?: string;
+    width?: number;
+    height?: number;
     offsetLeftTop?: [number, number];
-    [name: string]: any;
 }
-export type GeoJsonMarkerProperties = GeoJsonBaseProperties & {
-    subType: 'Marker';
-    [name: string]: any;
-};
-export type GeoJsonPolylineWithArrowsProperties = GeoJsonBaseProperties & {
-    subType: 'PolylineWithArrows';
-};
-export type GeoJsonCircleProperties = GeoJsonBaseProperties & {
-    subType: 'Circle';
-    radius: number;
-};
-export type GeoJsonProperties = GeoJsonMarkerProperties | GeoJsonCircleProperties | GeoJsonPolylineWithArrowsProperties;
+export type GeoJsonProperties = GeoJsonBaseProperties;
 export type LayerWithBounds = Layer;
 export type FeatureLayerData = {
     boundsNW: L.LatLng;
@@ -178,10 +167,6 @@ export interface Feature<G extends Geometry | null = Geometry, P = GeoJsonProper
      * solo funciones, se ahorra memoria.
      */
     layerData?: FeatureLayerData;
-    /**
-     * "featureLabel" Etiqueta de la geometria, undenfined si no se quiere mostrar
-     */
-    label?: FeatureIconLabel;
 }
 /**
  * A collection of feature objects.

package/components/maps/components/GpsMap/dictionary.js

@@ -4,10 +4,6 @@ function getMapComponentsDictionary() {
   return [MAP_DICTIONARY_ID].concat(getRHFAutocompleteComponentsDictionary());
 }
 const MAP_DICCTIONARY = {
-  /**
-   * Generales
-   */
-  LABEL_GPSTOOLS_NAME: `${MAP_DICTIONARY_ID}.label_gpstools_name`,
   LABEL_MEASURE: `${MAP_DICTIONARY_ID}.label_measure`,
   LABEL_MEASURE_START: `${MAP_DICTIONARY_ID}.label_measure_start`,
   LABEL_MEASURE_CANCEL: `${MAP_DICTIONARY_ID}.label_measure_cancel`,

package/components/maps/components/GpsMap/external/MapControl/types.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-type StyledComponentType = React.ComponentType<{
+export type StyledComponentType = React.ComponentType<{
     ref?: React.LegacyRef<HTMLDivElement>;
     className?: string;
     children?: React.ReactNode;
@@ -23,4 +23,3 @@ export interface ControlProps {
      */
     ControlContainer?: StyledComponentType;
 }
-export {};

package/components/maps/components/GpsMap/featureRenders/MarkerIconLabel/index.d.ts

@@ -1,5 +1,7 @@
 import { FeatureDescriptionProps } from './types';
 /**
- * TODO: Documentar
+ * Pinta un marca con un icono y una etiqueta de texto
+ * Puede o solo pintar el icono o solo la etiqueta de texto o ambos
+ * Si se le define un popupRender, se renderiza el popup asociado al marcador
  */
 export declare const MarkerIconLabel: (props: FeatureDescriptionProps) => import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/featureRenders/MarkerIconLabel/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Marker } from "react-leaflet";
-import { F as FeatureDivIconLabel } from "../FeatureDivIconLabel/index.js";
+import { F as FeatureDivIconLabel } from "./subcomponents/FeatureDivIconLabel/index.js";
 import { useState, useRef, useCallback } from "react";
 const MarkerIconLabel = (props) => {
   const {
@@ -8,14 +8,12 @@ const MarkerIconLabel = (props) => {
     draggable = true,
     iconSrc,
     iconRotate,
-    iconScale: scale,
-    className,
+    iconScale,
     label,
-    markerColor,
-    labelBkColor: bkColor,
-    labelColor: color,
-    iconWidth,
-    iconHeight,
+    fillColor,
+    color,
+    width,
+    height,
     offsetLeftTop,
     eventHandlers,
     popupRender,
@@ -25,15 +23,15 @@ const MarkerIconLabel = (props) => {
   } = props;
   const [isOpen, setIsOpen] = useState(false);
   const markerRef = useRef(null);
-  const makerIcon = FeatureDivIconLabel({
+  const makerDivIconLabel = FeatureDivIconLabel({
     iconSrc,
     iconRotate,
-    iconScale: scale,
+    iconScale,
     label,
-    iconWidth,
-    iconHeight,
-    labelBkColor: bkColor,
-    labelColor: color,
+    width,
+    height,
+    fillColor,
+    color,
     offsetLeftTop
   });
   const PopupRender = popupRender;
@@ -57,7 +55,7 @@ const MarkerIconLabel = (props) => {
       position,
       draggable,
       riseOnHover: true,
-      icon: makerIcon,
+      icon: makerDivIconLabel,
       eventHandlers: {
         ...eventHandlers,
         click: (_e) => {

package/components/maps/components/GpsMap/featureRenders/{FeatureDivIconLabel → MarkerIconLabel/subcomponents/FeatureDivIconLabel}/index.d.ts

@@ -1,6 +1,6 @@
 import { default as L } from 'leaflet';
 import { DivIconFeatureDescriptionProps } from './types';
 /**
- * TODO: Documentar
+ * Crea una etiqueta de texto con un icono, para ser usado como icono de una capa Marker de Leaflet
  */
 export declare const FeatureDivIconLabel: (props: DivIconFeatureDescriptionProps) => L.DivIcon;

package/components/maps/components/GpsMap/featureRenders/MarkerIconLabel/subcomponents/FeatureDivIconLabel/index.js

@@ -0,0 +1,33 @@
+import L__default from "leaflet";
+import { L as LABEL_FILLCOLOR_DEFAULT, a as LABEL_COLOR_DEFAULT } from "../../../../constants.js";
+import { m as mapClasses } from "../../../../classes/index.js";
+import clsx from "clsx";
+const FeatureDivIconLabel = (props) => {
+  const {
+    label,
+    iconSrc,
+    iconScale = 1,
+    iconRotate = 0,
+    fillColor = LABEL_FILLCOLOR_DEFAULT,
+    color = LABEL_COLOR_DEFAULT,
+    width = 24,
+    height = 24,
+    offsetLeftTop = [24, 0]
+  } = props;
+  let html = label ? `<div class="${mapClasses.featureLabel}" 
+                style="background-color:${fillColor}; color:${color};left:${offsetLeftTop[0]}px;top:${offsetLeftTop[1]}px; opacity:${0.85};">${label}</div>` : "";
+  if (iconSrc) {
+    html = `<div class="${mapClasses.markerLayerIcon}" style="transform: rotate(${iconRotate}deg) scale(${iconScale}); transform-origin: center center;">
+                    <img src=${iconSrc}></img>
+                </div>` + html;
+  }
+  return L__default.divIcon({
+    className: clsx(mapClasses.markerLayerRoot, ""),
+    iconSize: [width, height],
+    // iconAnchor: [-width, height/2],
+    html
+  });
+};
+export {
+  FeatureDivIconLabel as F
+};

package/components/maps/components/GpsMap/featureRenders/{FeatureDivIconLabel → MarkerIconLabel/subcomponents/FeatureDivIconLabel}/types.d.ts

@@ -1,4 +1,4 @@
-import { FeatureIconLabel } from '../../contexts/MapContext/types';
+import { FeatureIconLabel } from '../../../../contexts/MapContext/types';
 export interface DivIconFeatureDescriptionProps extends FeatureIconLabel {
     withPoint?: boolean;
     iconSrc?: string;

package/components/maps/components/GpsMap/featureRenders/MarkerIconLabel/types.d.ts

@@ -1,5 +1,5 @@
 import { MarkerProps } from 'react-leaflet';
-import { DivIconFeatureDescriptionProps } from '../FeatureDivIconLabel/types';
+import { DivIconFeatureDescriptionProps } from './subcomponents/FeatureDivIconLabel/types';
 import { MapPopupComponent } from '../../popups/types';
 import { GeoJsonProperties } from '../../contexts/MapContext/types';
 import { PopupOptions } from 'leaflet';
@@ -12,5 +12,4 @@ export interface FeatureDescriptionProps extends DivIconFeatureDescriptionProps,
     properties?: GeoJsonProperties;
     popupRender?: MapPopupComponent;
     popupOptions?: FeaturePopupOptions;
-    [name: string]: any;
 }

package/components/maps/components/GpsMap/featureRenders/index.d.ts

@@ -1,2 +1 @@
 export { MarkerFeatureRender } from './MarkerFeatureRender';
-export { CommonFeatureRender } from './CommonFeatureRender';

package/components/maps/components/GpsMap/hooks/useAutoFocus/index.js

@@ -1,13 +1,13 @@
 import { useEffect } from "react";
 import { useMap } from "react-leaflet";
 import throttle from "lodash-es/throttle";
-import { shallow } from "zustand/shallow";
 import L__default from "leaflet";
 import { u as useMapStore } from "../useMapStore/index.js";
+import { deepShallow } from "@m4l/components";
 function useAutoFocus() {
   const map = useMap();
   const layerWithAutoFocus = useMapStore((state) => {
-    return state.layersIds.filter((lId) => {
+    const result = state.layersIds.filter((lId) => {
       if (state.hashLayers[lId].autoFocus && state.hashLayers[lId].visible) {
         return true;
       }
@@ -27,7 +27,8 @@ function useAutoFocus() {
         return [];
       }()
     }));
-  }, shallow);
+    return result;
+  }, deepShallow);
   useEffect(() => {
     const proccesLayerWithAutoFocus = (layersFoucus) => {
       const layersToFitBounds = [];
@@ -65,7 +66,7 @@ function useAutoFocus() {
       }
     };
     const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
-      leading: false,
+      leading: true,
       // No enviar el primer evento de fitBounds
       trailing: true
       // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad del fitBounds

package/components/maps/components/GpsMap/icons.js

@@ -28,11 +28,6 @@ const MAP_ICONS = {
   MAP_LAYER_AUTOFOCUS: "autofocus.svg",
   MAP_LAYER_CLUSTER: "cluster.svg",
   MAP_LAYER_DELETE: "delete.svg",
-  /**
-   * Measure Tool *
-   *
-   */
-  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
   MAP_MEASURE_TOOL: "cmp_map_measure_tool.svg"
 };
 export {

package/components/maps/components/GpsMap/slots/slots.d.ts

@@ -1,5 +1,5 @@
-import { MapSlotsLayersTool } from '../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/slots';
-import { MapSlotsSourcesTool } from '../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/slots';
+import { MapSlotsLayersTool } from '../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapLayersTool/slots/slots';
+import { MapSlotsSourcesTool } from '../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/slots/slots';
 export declare enum MapBaseSlots {
     root = "root",
     mapContainer = "mapContainer",

package/components/maps/components/GpsMap/slots/slots.js

@@ -1,5 +1,5 @@
-import { M as MapSlotsLayersTool } from "../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/slots.js";
-import { M as MapSlotsSourcesTool } from "../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/slots.js";
+import { M as MapSlotsLayersTool } from "../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapLayersTool/slots/slots.js";
+import { M as MapSlotsSourcesTool } from "../subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/slots/slots.js";
 var MapBaseSlots = /* @__PURE__ */ ((MapBaseSlots2) => {
   MapBaseSlots2["root"] = "root";
   MapBaseSlots2["mapContainer"] = "mapContainer";

package/components/maps/components/GpsMap/subcomponents/Controls/hooks/useControls.d.ts

@@ -0,0 +1,23 @@
+import { ControlsProps } from '../types';
+import { MapTool } from '../../../types';
+/**
+ * Componente encargado de instanciar todos los controles del map en las diferentes posiciones.
+ *  En el efecto de Carga, desactiva los eventos de click y scroll al interior "leaflet-control-container".
+ *  Se crea el contendor de popups con un portal dentro de "leaflet-control-container", para que se benficie de los eventos desactivados.
+ *
+ *  - TopLeftTools
+ *      MapSources
+ *      MapLayers
+ *      MapMeasure
+ *     Custom Tools
+ *  - BottomRightTools
+ *      Zoom Buttons
+ *      Custom Tools
+ * @param tools - Tools to display in the controls
+ * @returns {Object} - Object with the controls
+ */
+export declare function useControls(props: ControlsProps): {
+    topRightTools: MapTool[];
+    bottomRightTools: MapTool[];
+    loggedUser: import('@m4l/core').Maybe<import('@m4l/core').UserAuth>;
+};

package/components/maps/components/GpsMap/subcomponents/Controls/hooks/useControls.js

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { useAuth } from "@m4l/core";
+import { M as MAP_SOURCES_TOOL, a as MAP_LAYERS_TOOL, b as MAP_MEASURE_TOOL } from "../subcomponents/ButtonsToolsList/constants.js";
+import { u as useZoomBottons } from "../subcomponents/ButtonsToolsList/hooks/useZoomBottons.js";
+function useControls(props) {
+  const { tools } = props;
+  const { user: loggedUser } = useAuth();
+  const zoomButtons = useZoomBottons();
+  const { topRightTools, bottomRightTools } = useMemo(() => {
+    const nativeTopRightTools = [
+      MAP_SOURCES_TOOL,
+      MAP_LAYERS_TOOL,
+      MAP_MEASURE_TOOL
+    ];
+    const customTopRightTools = tools?.filter((tool) => tool.position === "topright") || [];
+    const customBottomRightTools = tools?.filter((tool) => tool.position === "bottomright") || [];
+    const topRightTools2 = [...nativeTopRightTools, ...customTopRightTools];
+    const bottomRightTools2 = [...zoomButtons, ...customBottomRightTools];
+    return {
+      topRightTools: topRightTools2,
+      bottomRightTools: bottomRightTools2
+    };
+  }, [tools, zoomButtons]);
+  return {
+    topRightTools,
+    bottomRightTools,
+    loggedUser
+  };
+}
+export {
+  useControls as u
+};

package/components/maps/components/GpsMap/subcomponents/Controls/index.d.ts

@@ -1,17 +1,5 @@
 import { ControlsProps } from './types';
 /**
  * Componente encargado de instanciar todos los controles del map en las diferentes posiciones.
- *  En el efecto de Carga, desactiva los eventos de click y scroll al interior "leaflet-control-container".
- *  Se crea el contendor de popups con un portal dentro de "leaflet-control-container", para que se benficie de los eventos desactivados.
- *
- *  - TopLeftTools
- *      MapSources
- *      MapLayers
- *  - TopRightTools
- *      GpsTools
- *      MapTools
- *      Zoom Buttons
- * @param props
- * @returns
  */
 export declare function Controls(props: ControlsProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/subcomponents/Controls/index.js

@@ -4,17 +4,15 @@ import { createPortal } from "react-dom";
 import L__default from "leaflet";
 import { useMap } from "react-leaflet";
 import { PopupsProvider } from "@m4l/components";
-import { T as TopRightTools } from "./subcomponents/TopRigthTools/index.js";
-import { c as MAP_ZINDEX_OVER_MAP } from "../../constants.js";
-import { B as BottomRightTools } from "./subcomponents/BottomRigthTools/index.js";
-import { P as PopupsViewerStyled } from "../../slots/styled.js";
-import { useAuth } from "@m4l/core";
+import { B as ButtonsToolsList } from "./subcomponents/ButtonsToolsList/index.js";
+import { b as MAP_ZINDEX_OVER_MAP } from "../../constants.js";
+import { R as RightToolsRootStyled, P as PopupsViewerStyled } from "../../slots/styled.js";
+import { u as useControls } from "./hooks/useControls.js";
 function Controls(props) {
-  const { GpsTools } = props;
   const map = useMap();
   const [controlContainer, setControlContainer] = useState(null);
   const [mapContainer, setMapContainer] = useState(void 0);
-  const { user: loggedUser } = useAuth();
+  const { topRightTools, bottomRightTools, loggedUser } = useControls(props);
   useEffect(() => {
     const cContainer = map.getContainer().getElementsByClassName("leaflet-control-container")[0];
     if (cContainer !== null) {
@@ -25,8 +23,8 @@ function Controls(props) {
     setMapContainer(map.getContainer());
   }, [map]);
   return /* @__PURE__ */ jsxs(PopupsProvider, { baseZindex: MAP_ZINDEX_OVER_MAP, children: [
-    /* @__PURE__ */ jsx(TopRightTools, { GpsTools }),
-    /* @__PURE__ */ jsx(BottomRightTools, {}),
+    /* @__PURE__ */ jsx(ButtonsToolsList, { position: "topright", tools: topRightTools, ControlContainer: RightToolsRootStyled }),
+    /* @__PURE__ */ jsx(ButtonsToolsList, { position: "bottomright", tools: bottomRightTools, ControlContainer: RightToolsRootStyled }),
     controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewerStyled, { containerElement: mapContainer, loggedUser }), controlContainer)
   ] });
 }

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/ButtonsToolsList/constants.d.ts

@@ -0,0 +1,4 @@
+import { MapToolPopupInternal } from '../../../../types';
+export declare const MAP_SOURCES_TOOL: MapToolPopupInternal;
+export declare const MAP_LAYERS_TOOL: MapToolPopupInternal;
+export declare const MAP_MEASURE_TOOL: MapToolPopupInternal;