@m4l/gclick 0.2.0 → 0.2.3-beta.1

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/ButtonsToolsList/constants.js

@@ -0,0 +1,41 @@
+import { c as MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION, d as MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION, e as MESURE_TOOL_POPUP_DEFAULT_POSITION } from "../../../../constants.js";
+import { M as MAP_DICCTIONARY } from "../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../icons.js";
+import { M as MapSourcesTool } from "./subcomponents/MapSourcesTool/MapSourcesTool.js";
+import { M as MapLayersTool } from "./subcomponents/MapLayersTool/MapLayersTool.js";
+import { M as MeasureTool } from "./subcomponents/MeasureTool/MeasureTool.js";
+const MAP_SOURCES_TOOL = {
+  isInternal: true,
+  id: "sourcesTools",
+  type: "popup",
+  componentPathId: "map",
+  iconId: MAP_ICONS.MAP_SOURCES_TOOL,
+  dictionaryId: MAP_DICCTIONARY.LABEL_MAP_SOURCES,
+  popupDefaultPosition: MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION,
+  PopupContentComponent: MapSourcesTool
+};
+const MAP_LAYERS_TOOL = {
+  isInternal: true,
+  id: "layersTools",
+  type: "popup",
+  componentPathId: "map",
+  iconId: MAP_ICONS.MAP_LAYERS_TOOL,
+  dictionaryId: MAP_DICCTIONARY.LABEL_LAYERS,
+  popupDefaultPosition: MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION,
+  PopupContentComponent: MapLayersTool
+};
+const MAP_MEASURE_TOOL = {
+  isInternal: true,
+  id: "measureTools",
+  type: "popup",
+  componentPathId: "map",
+  iconId: MAP_ICONS.MAP_MEASURE_TOOL,
+  dictionaryId: MAP_DICCTIONARY.LABEL_MEASURE,
+  popupDefaultPosition: MESURE_TOOL_POPUP_DEFAULT_POSITION,
+  PopupContentComponent: MeasureTool
+};
+export {
+  MAP_SOURCES_TOOL as M,
+  MAP_LAYERS_TOOL as a,
+  MAP_MEASURE_TOOL as b
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/{TopRigthTools → ButtonsToolsList}/hooks/types.d.ts

@@ -2,7 +2,7 @@ import { JSX_REACT_NODE, RNDDefaultPosition } from '@m4l/components';
 export type useToolProps = {
     popupId: string;
     ToolComponent?: JSX_REACT_NODE;
-    iconId: string;
-    dictionaryId: string;
+    iconUrl: string;
+    title: string;
     defaultPosition: RNDDefaultPosition;
 };

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/{TopRigthTools → ButtonsToolsList}/hooks/useTool.js

@@ -1,13 +1,10 @@
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useMap } from "react-leaflet";
 import { usePopupsStore, deepShallow } from "@m4l/components";
 import { useCallback } from "react";
 function useTool(props) {
-  const { ToolComponent, popupId, iconId, dictionaryId, defaultPosition } = props;
+  const { ToolComponent, popupId, iconUrl, title, defaultPosition } = props;
   const { addPopup } = usePopupsStore((state) => state.popupsActions);
   const { close } = usePopupsStore((state) => state.popupActions);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
   const { isToggled, isDisabled } = usePopupsStore(
     (state) => {
       const openPopupsIds = state.popupsIds.filter((pId) => {
@@ -40,19 +37,22 @@ function useTool(props) {
         {
           winType: "component",
           popupId,
-          title: getLabel(dictionaryId),
-          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${iconId}`,
+          title,
+          iconUrl,
           component: ToolComponent,
           onMouseDown,
-          defaultPosition
+          defaultPosition,
+          dynamicParams: {
+            mytool: "juan"
+          }
         },
-        { closeOthers: true }
+        { closeOthers: false }
       );
     } else {
       close(popupId);
     }
     e.stopPropagation();
-  }, [ToolComponent, isToggled, addPopup, popupId, getLabel, dictionaryId, host_static_assets, environment_assets, iconId, onMouseDown, defaultPosition, close]);
+  }, [ToolComponent, isToggled, addPopup, popupId, title, iconUrl, onMouseDown, defaultPosition, close]);
   return {
     onToolClick,
     isToggled,

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/ButtonsToolsList/hooks/useZoomBottons.d.ts

@@ -0,0 +1,5 @@
+import { MapToolButton } from '../../../../../types';
+/**
+ * TODO: Documentar
+ */
+export declare function useZoomBottons(): MapToolButton[];

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/ButtonsToolsList/hooks/useZoomBottons.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useMap } from "react-leaflet";
+import { M as MAP_ICONS } from "../../../../../icons.js";
+import { useEnvironment } from "@m4l/core";
+import { Z as ZoomButtonStyled } from "../../../../../slots/styled.js";
+function useZoomBottons() {
+  const map = useMap();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [zoomInDisabled, setZoomInDisabled] = useState(false);
+  const [zoomOutDisabled, setZoomOutDisabled] = useState(false);
+  useEffect(() => {
+    const updateButtonState = () => {
+      const currentZoom = map.getZoom();
+      const maxZoom = map.getMaxZoom();
+      const minZoom = map.getMinZoom();
+      setZoomInDisabled(currentZoom === maxZoom);
+      setZoomOutDisabled(currentZoom === minZoom);
+    };
+    map.on("zoomend", updateButtonState);
+    updateButtonState();
+    return () => {
+      map.off("zoomend", updateButtonState);
+    };
+  }, [map]);
+  const handleZoomIn = useCallback(() => {
+    map.zoomIn();
+  }, [map]);
+  const handleZoomOut = useCallback(() => {
+    map.zoomOut();
+  }, [map]);
+  return useMemo(() => [
+    {
+      id: "zoom-in",
+      type: "button",
+      ButtonComponent: /* @__PURE__ */ jsx(
+        ZoomButtonStyled,
+        {
+          onClick: handleZoomIn,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`,
+          disabled: zoomInDisabled
+        }
+      )
+    },
+    {
+      id: "zoom-out",
+      type: "button",
+      ButtonComponent: /* @__PURE__ */ jsx(
+        ZoomButtonStyled,
+        {
+          onClick: handleZoomOut,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`,
+          disabled: zoomOutDisabled
+        }
+      )
+    }
+  ], [handleZoomIn, host_static_assets, environment_assets, zoomInDisabled, handleZoomOut, zoomOutDisabled]);
+}
+export {
+  useZoomBottons as u
+};

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

@@ -0,0 +1,7 @@
+import { ButtonsToolsListProps } from './types';
+/**
+ * Inserta los botones de herramientas en los controles del mapa
+ * @param props
+ * @returns
+ */
+export declare function ButtonsToolsList(props: ButtonsToolsListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { M as MapControl } from "../../../../external/MapControl/index.js";
+import { B as ButtonPopupTool } from "./subcomponents/ButtonPopupTool/index.js";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+function ButtonsToolsList(props) {
+  const { tools, ControlContainer, position } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const toolsList = useMemo(() => {
+    return tools.map((tool) => {
+      if (tool.type === "popup") {
+        const isInternal = "isInternal" in tool && tool.isInternal;
+        const iconUrl = isInternal ? `${host_static_assets}/${environment_assets}/frontend/components/${tool.componentPathId}/assets/icons/${tool.iconId}` : tool.iconUrl;
+        const title = isInternal ? getLabel(tool.dictionaryId) : tool.PopupTitle;
+        return /* @__PURE__ */ jsx(
+          ButtonPopupTool,
+          {
+            ToolComponent: tool.PopupContentComponent,
+            iconUrl,
+            popupId: tool.id,
+            title,
+            defaultPosition: tool.popupDefaultPosition
+          },
+          tool.id
+        );
+      } else if (tool.type === "button") {
+        const ButtonComponent = tool.ButtonComponent;
+        return typeof ButtonComponent === "function" ? /* @__PURE__ */ jsx(ButtonComponent, {}, tool.id) : ButtonComponent;
+      }
+      return null;
+    });
+  }, [tools, host_static_assets, environment_assets, getLabel]);
+  return /* @__PURE__ */ jsx(MapControl, { position, prepend: true, ControlContainer, children: toolsList });
+}
+export {
+  ButtonsToolsList as B
+};

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

@@ -0,0 +1,5 @@
+import { ButtonToolProps } from './types';
+/**
+ * Boton de herramienta, se encarga de renderizar el boton de herramienta y gestionar el popup asociado.
+ */
+export declare function ButtonPopupTool(props: ButtonToolProps): import("react/jsx-runtime").JSX.Element | null;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/{TopRigthTools/subcomponents/ButtonTool → ButtonsToolsList/subcomponents/ButtonPopupTool}/index.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
 import { ToggleIconButton } from "@m4l/components";
 import { u as useTool } from "../../hooks/useTool.js";
-function ButtonTool(props) {
-  const { ToolComponent, iconId } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
+function ButtonPopupTool(props) {
+  const { ToolComponent, iconUrl } = props;
   const { onToolClick, isDisabled, isToggled } = useTool(props);
   if (!ToolComponent) {
     return null;
@@ -15,10 +13,10 @@ function ButtonTool(props) {
       isToggled,
       disabled: isDisabled,
       onToggle: onToolClick,
-      icon: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${iconId}`
+      icon: iconUrl
     }
   );
 }
 export {
-  ButtonTool as B
+  ButtonPopupTool as B
 };

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/{TopRigthTools → ButtonsToolsList}/subcomponents/MeasureTool/hooks/useMeasure/index.js

@@ -5,7 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import { useFormReadyForUpdate } from "@m4l/components";
 import { useModuleDictionary } from "@m4l/core";
 import { S as STYLE_MEASURE_OPTIONS } from "../../constants.js";
-import { g as MAP_ZINDEX_DEFAULT } from "../../../../../../../../constants.js";
+import { f as MAP_ZINDEX_DEFAULT } from "../../../../../../../../constants.js";
 import { g as getMagnitudeFactor, a as getMarkerPointIcon2, b as getMarkerPointLabel } from "./helpers.js";
 import { m as mapClasses } from "../../../../../../../../classes/index.js";
 import { useTheme } from "@mui/material";

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

@@ -0,0 +1,7 @@
+import { StyledComponentType } from '../../../../external/MapControl/types';
+import { MapTool, MapToolPosition } from '../../../../types';
+export interface ButtonsToolsListProps {
+    position: MapToolPosition;
+    ControlContainer: StyledComponentType;
+    tools: MapTool[];
+}

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

@@ -19,4 +19,4 @@ export type Point = {
      */
     y: number;
 };
-export type ControlsProps = Pick<MapProps, 'GpsTools'>;
+export type ControlsProps = Pick<MapProps, 'tools'>;

package/components/maps/components/GpsMap/subcomponents/{LayersContainer → Layers}/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { shallow } from "zustand/shallow";
-import { M as MyLayer } from "./subcomponents/MyLayer/index.js";
+import { L as Layer } from "./subcomponents/Layer/index.js";
 import L__default from "leaflet";
 import React, { useEffect } from "react";
 import { useMap } from "react-leaflet";
@@ -27,7 +27,7 @@ const LayersContainer = () => {
   if (!map) {
     return null;
   }
-  return /* @__PURE__ */ jsx(React.Fragment, { children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, { layerId: l }, l)) });
+  return /* @__PURE__ */ jsx(React.Fragment, { children: layersId.map((l) => /* @__PURE__ */ jsx(Layer, { layerId: l }, l)) });
 };
 export {
   LayersContainer as L

package/components/maps/components/GpsMap/subcomponents/Layers/subcomponents/Layer/hooks/useClusterMarkers.d.ts

@@ -0,0 +1,13 @@
+import { MarkerClusterGroupProps } from '../subcomponents/MarkerClusterGroup/types';
+export type LefaletLayerRef = {
+    clickTimeout: NodeJS.Timeout | null;
+    clickCount: number;
+    handleClickSetted: boolean;
+};
+/**
+ * "MyLayer" Este compoente es el encargado de renderizar todos los features de una capa.
+ * Utilizando la propiedad renderFeature, que tiene cada capa.
+ * @param props
+ * @returns
+ */
+export declare const useClusterMarkers: () => import('react').RefObject<MarkerClusterGroupProps>;

package/components/maps/components/GpsMap/subcomponents/{LayersContainer/subcomponents/MyLayer → Layers/subcomponents/Layer}/index.d.ts

@@ -11,4 +11,4 @@ export type LefaletLayerRef = {
  * @param props
  * @returns
  */
-export declare const MyLayer: React.FC<LayerProps>;
+export declare const Layer: React.FC<LayerProps>;

package/components/maps/components/GpsMap/subcomponents/{LayersContainer/subcomponents/MyLayer → Layers/subcomponents/Layer}/index.js

@@ -1,22 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import { useMap, LayerGroup } from "react-leaflet";
+import { LayerGroup } from "react-leaflet";
 import L__default from "leaflet";
 import { shallow } from "zustand/shallow";
 import { M as MarkerClusterGroup } from "./subcomponents/MarkerClusterGroup/index.js";
 import { R as RenderByEachFeatureComponent, M as MemonizedRenderByEachFeatureComponent } from "./subcomponents/RenderByEachFeatureComponent/index.js";
-import { T as TIME_DOUBLE_CLICK } from "../../../../constants.js";
 import { deepShallow } from "@m4l/components";
 import { u as useMapStore } from "../../../../hooks/useMapStore/index.js";
-const MyLayer = (props) => {
+const Layer = (props) => {
   const { layerId } = props;
-  const map = useMap();
-  const popupRef = useRef(null);
-  const lefaletLayerRef = useRef({
-    clickTimeout: null,
-    clickCount: 0,
-    handleClickSetted: false
-  });
   const featureIdOrCollection = useMapStore((state) => {
     const geoJsonObject = state.hashLayers[layerId]?.geoJsonObject;
     if (geoJsonObject && geoJsonObject.object.type === "Feature") {
@@ -30,33 +21,6 @@ const MyLayer = (props) => {
     (state) => [state.hashLayers[layerId]?.visible, state.hashLayers[layerId]?.cluster],
     shallow
   );
-  const markerClusterGroupRef = useRef(null);
-  const handleClick = (a) => {
-    lefaletLayerRef.current.clickCount++;
-    if (lefaletLayerRef.current.clickCount === 1) {
-      lefaletLayerRef.current.clickTimeout = setTimeout(() => {
-        const clusterMarker = a.propagatedFrom;
-        if (clusterMarker && clusterMarker instanceof L__default.MarkerCluster) ;
-        if (!popupRef.current) {
-          popupRef.current = L__default.popup().setLatLng(a.sourceTarget._cLatLng).setContent("Hello, World!");
-          map.addLayer(popupRef.current);
-        } else {
-          popupRef.current.openOn(map);
-        }
-        lefaletLayerRef.current.clickCount = 0;
-      }, TIME_DOUBLE_CLICK);
-    } else if (lefaletLayerRef.current.clickCount === 2) {
-      if (lefaletLayerRef.current?.clickTimeout) {
-        clearTimeout(lefaletLayerRef.current.clickTimeout);
-      }
-      lefaletLayerRef.current.clickCount = 0;
-    }
-  };
-  useEffect(() => {
-    if (markerClusterGroupRef.current) {
-      markerClusterGroupRef.current.on("clusterclick", handleClick);
-    }
-  }, [markerClusterGroupRef.current]);
   if (!featureIdOrCollection || !renderFeature) {
     return null;
   }
@@ -129,5 +93,5 @@ const MyLayer = (props) => {
   }
 };
 export {
-  MyLayer as M
+  Layer as L
 };

package/components/maps/components/GpsMap/subcomponents/{LayersContainer/subcomponents/MyLayer → Layers/subcomponents/Layer}/subcomponents/RenderByEachFeatureComponent/index.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { RenderByEachFeatureProps } from './types';
 /**
- * "RenderByEachFeatureComponent": Es un wrapper de renderFeature,
+ * "RenderByEachFeatureComponent": Basicamente  lo que este componente es crear el renderFeature en un envoltorio JSX en una nuevo Fiber ya que JSX crea un elemento con React.createElement y React.createElement crea un nuevo Fiber.
  * Se realizó con el fin de que no haya re-renderizado de los features,
  * Sin este wrapper cada vez que se actualiza LeafletLayer, se re-renderiza todos lo features.
  * @param param0

package/components/maps/components/GpsMap/subcomponents/{LayersContainer/subcomponents/MyLayer → Layers/subcomponents/Layer}/subcomponents/RenderByEachFeatureComponent/index.js

@@ -4,7 +4,7 @@ const RenderByEachFeatureComponent = ({
   ...props
 }) => {
   const feature = renderFeature(props);
-  return feature ?? null;
+  return feature;
 };
 const MemonizedRenderByEachFeatureComponent = React.memo(RenderByEachFeatureComponent);
 export {

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

@@ -3,10 +3,10 @@ import { Theme } from '@mui/material/styles';
 import { MapSlots } from './slots/slots';
 import { MAP_COMPONET_KEY_COMPONENT } from './constants';
 import { ReactNode } from 'react';
-import { JSX_REACT_NODE, M4LOverridesStyleRules } from '@m4l/components';
-import { MapSourcesToolOwnerState } from './subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/types';
-import { MapLayersToolOwnerState } from './subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/types';
-import { MapMeasureToolOwnerState } from './subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/types';
+import { JSX_REACT_NODE, M4LOverridesStyleRules, RNDDefaultPosition } from '@m4l/components';
+import { MapSourcesToolOwnerState } from './subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapSourcesTool/types';
+import { MapLayersToolOwnerState } from './subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MapLayersTool/types';
+import { MapMeasureToolOwnerState } from './subcomponents/Controls/subcomponents/ButtonsToolsList/subcomponents/MeasureTool/types';
 export type Localization = {
     /**
      *  "lat" Posición en del eje "Y" en grados.
@@ -27,6 +27,93 @@ export type Point = {
      */
     y: number;
 };
+export type MapToolPosition = Extract<L.ControlPosition, 'topright' | 'bottomright'>;
+export type MapToolType = 'popup' | 'button';
+export interface BaseMapTool {
+    /**
+     * "id" id de la herramienta, tambien sirve como id del popup cuando es de tipo popup
+     */
+    id: string;
+    /**
+     * "type" tipo de herramienta
+     */
+    type: MapToolType;
+    /**
+     * "disabled" si la herramienta está deshabilitada
+     */
+    disabled?: boolean;
+}
+/**
+ * "MapToolPopup" tipo de herramienta popup que ingresa como props al componente Map
+ */
+export interface BaseMapToolPopup extends BaseMapTool {
+    /**
+     * "type" tipo de herramienta
+     */
+    type: 'popup';
+    /**
+     * "popupDefaultPosition" posición por defecto del arranque de el popup de la herramienta
+     */
+    popupDefaultPosition: RNDDefaultPosition;
+    /**
+     * "PopupContentComponent" componente que se renderiza dentro del popup de la herramienta
+     */
+    PopupContentComponent: JSX_REACT_NODE;
+}
+/**
+ * "MapToolPopup" tipo de herramienta popup que ingresa como props al componente Map
+ * Que es agregado por el sistema y hace parte de las herramientas internas del mapa.
+ */
+export interface MapToolPopupInternal extends BaseMapToolPopup {
+    /**
+     * "isInternal" si la herramienta es interna del mapa
+     */
+    isInternal: true;
+    /**
+     * Id componente donde se encuentran los iconos en s3
+     */
+    componentPathId: string;
+    /**
+     * "iconUrl" url del icono de la herramienta
+     */
+    iconId: string;
+    /**
+     * "popupTitle" titulo del popup de la herramienta
+     */
+    dictionaryId: string;
+}
+/**
+ * "MapToolPopupExternal" tipo de herramienta popup que ingresa como props al componente Map
+ * Que es agregado por el usuario y no hace parte de las herramientas internas del mapa.
+ */
+export interface MapToolPopupExternal extends BaseMapToolPopup {
+    /**
+     * "iconUrl" url del icono de la herramienta
+     */
+    iconUrl: string;
+    /**
+     * "popupTitle" titulo del popup de la herramienta
+     */
+    PopupTitle: string;
+}
+export type MapToolPopup = MapToolPopupInternal | MapToolPopupExternal;
+export interface MapToolButton extends BaseMapTool {
+    /**
+     * "type" tipo de herramienta
+     */
+    type: 'button';
+    /**
+     * "Button"
+     */
+    ButtonComponent: JSX_REACT_NODE;
+}
+export type MapTool = MapToolPopup | MapToolButton;
+export type PositionMapTool = MapTool & {
+    /**
+     * "position" posición de la herramienta
+     */
+    position: MapToolPosition;
+};
 export interface MapProps {
     /**
      * "className" className del mapa
@@ -44,10 +131,6 @@ export interface MapProps {
      * "maxZoom" Max Zoom global, por defecto es 22, sin embargo cada TileLayer coloca su propio maxZoom.
      */
     maxZoom?: number;
-    /**
-     * "GpsTools" Componente que gestiona la herramienta de guardian GPS, geocercas, puntos de interes, etc.
-     */
-    GpsTools?: JSX_REACT_NODE;
     children?: ReactNode;
     /**
      * "disableMapEvents" permite deshabilitar los eventos del mapa, cuando se requiera
@@ -57,6 +140,10 @@ export interface MapProps {
      * "style" permite definir el estilo del mapa
      */
     style?: React.CSSProperties;
+    /**
+     * "tools" Herramientas del mapa, se pueden agregar herramientas como geocercas, puntos de interes, etc.
+     */
+    tools?: PositionMapTool[];
 }
 export type MapSlotsType = keyof typeof MapSlots;
 export type MapOwnerState = {

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

@@ -1,8 +1,4 @@
-import { StyleOpacity, StyleDashArray, StyleWheight } from './types';
 export declare const COMPONENT_TEST_ID = "M4LGpsMapTools";
 export declare const COMPONENT_CLASS_NAME = "M4LGpsMapTools";
+export declare const GPS_TOOLS_COMPONENT_PATH_ID = "map_gps_tools";
 export declare const COOKIE_MAP_GEO_FILTER = "filter_map_geo";
-export declare const COMPONENT_MAP_TOOLS_ID = "gps_tools";
-export declare const STYLE_OPACITIES: StyleOpacity[];
-export declare const STYLE_WHEIGHTS: StyleWheight[];
-export declare const STYLE_PATTERNS: StyleDashArray[];

package/components/maps/components/GpsMapTools/constants.js

@@ -1,71 +1,4 @@
-const COMPONENT_CLASS_NAME = "M4LGpsMapTools";
-const COMPONENT_MAP_TOOLS_ID = "gps_tools";
-const STYLE_OPACITIES = [
-  {
-    value: 0,
-    label: "0%"
-  },
-  {
-    value: 0.1,
-    label: "10%"
-  },
-  {
-    value: 0.2,
-    label: "20%"
-  },
-  {
-    value: 0.3,
-    label: "30%"
-  },
-  {
-    value: 0.4,
-    label: "40%"
-  },
-  {
-    value: 0.5,
-    label: "50%"
-  },
-  {
-    value: 1,
-    label: "100%"
-  }
-];
-const STYLE_WHEIGHTS = [
-  {
-    value: 0,
-    label: "0px"
-  },
-  {
-    value: 1,
-    label: "1px"
-  },
-  {
-    value: 2,
-    label: "2px"
-  },
-  {
-    value: 3,
-    label: "3px"
-  },
-  {
-    value: 4,
-    label: "4px"
-  }
-];
-const STYLE_PATTERNS = [
-  {
-    value: "",
-    label: "------"
-  },
-  {
-    value: "4 1 2",
-    label: "-- - - --"
-  }
-];
+const GPS_TOOLS_COMPONENT_PATH_ID = "map_gps_tools";
 export {
-  COMPONENT_CLASS_NAME as C,
-  STYLE_OPACITIES as S,
-  STYLE_WHEIGHTS as a,
-  STYLE_PATTERNS as b,
-  COMPONENT_MAP_TOOLS_ID as c
+  GPS_TOOLS_COMPONENT_PATH_ID as G
 };

package/components/maps/components/GpsMapTools/contexts/GpsMapToolsContext/GpsMapToolsContext.d.ts

@@ -0,0 +1,21 @@
+import { GpsMapToolsProviderProps } from './types';
+declare const GpsMapToolsContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').GpsMapToolsStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import('./types').GpsMapToolsStateWithActions | Partial<import('./types').GpsMapToolsStateWithActions> | ((state: import('./types').GpsMapToolsStateWithActions) => import('./types').GpsMapToolsStateWithActions | Partial<import('./types').GpsMapToolsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import('./types').GpsMapToolsStateWithActions | Partial<import('./types').GpsMapToolsStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').GpsMapToolsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+/**
+ * Provedor del contexto de los mapas
+ * Expone el store (MapStore) encargado de gestionar la creación, modificación y borrado de capas.
+ * @param props
+ * @returns
+ */
+/**
+ * TODO: Documentar
+ */
+declare function GpsMapToolsProvider(props: GpsMapToolsProviderProps): import("react/jsx-runtime").JSX.Element;
+export { GpsMapToolsProvider, GpsMapToolsContext };

package/components/maps/components/GpsMapTools/contexts/GpsMapToolsContext/GpsMapToolsContext.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useRef } from "react";
+import { c as createGpsMapToolsStore } from "./store.js";
+const GpsMapToolsContext = createContext(null);
+function GpsMapToolsProvider(props) {
+  const { children } = props;
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createGpsMapToolsStore({
+      ownerState: {
+        status: "init"
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(GpsMapToolsContext.Provider, { value: mapStoreRef.current, children });
+}
+export {
+  GpsMapToolsContext as G,
+  GpsMapToolsProvider as a
+};