@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.0

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/helpers.js

@@ -1,13 +1,17 @@
-import { S as STYLE_MEASURE_OPTIONS } from "../../constants.js";
+import { M as MAGNITUDE_FACTOR_ITEMS, S as STYLE_MEASURE_OPTIONS } from "../../constants.js";
 import { m as mapClasses } from "../../../../../../../../classes/index.js";
 import { M as MAP_DICCTIONARY } from "../../../../../../../../dictionary.js";
 import L__default from "leaflet";
-const getMarkerPointIcon = (position) => {
+const getMarkerPointIcon2 = (position) => {
   return L__default.divIcon({
     className: mapClasses.measureMarkerRoot,
     html: `<div  class="${mapClasses.measureMarkerContainer}">
-            <div  class="${mapClasses.measureMarkerContainerRhomb}">
-            </div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg" viewBox="-3982 1178 40 46.658" class="${mapClasses.measureMarkerSvgRoot}">
+              <g fill="#fff">
+                <path d="M -3962 1223.328857421875 L -3962.658447265625 1222.752685546875 L -3969.23291015625 1217 L -3975.999755859375 1217 C -3978.757080078125 1217 -3981.000244140625 1214.7568359375 -3981.000244140625 1211.999633789063 L -3981.000244140625 1183.999877929688 C -3981.000244140625 1181.24267578125 -3978.757080078125 1178.99951171875 -3975.999755859375 1178.99951171875 L -3948.000244140625 1178.99951171875 C -3945.242919921875 1178.99951171875 -3942.999755859375 1181.24267578125 -3942.999755859375 1183.999877929688 L -3942.999755859375 1211.999633789063 C -3942.999755859375 1214.7568359375 -3945.242919921875 1217 -3948.000244140625 1217 L -3954.76708984375 1217 L -3961.341552734375 1222.752685546875 L -3962 1223.328857421875 Z" fill="#FFF"></path>
+              </g>
+            </svg>    
             <div  class="${mapClasses.measureMarkerContainerSlot}">
                 <div  class="${mapClasses.measureMarkerContainerSlotNumber}">
                     ${position}
@@ -39,7 +43,11 @@ const getMarkerPointLabel = (distance, getLabel) => {
     //
   });
 };
+const getMagnitudeFactor = (magnitude) => {
+  return MAGNITUDE_FACTOR_ITEMS.find((item) => item.id === magnitude) || MAGNITUDE_FACTOR_ITEMS[0];
+};
 export {
-  getMarkerPointLabel as a,
-  getMarkerPointIcon as g
+  getMarkerPointIcon2 as a,
+  getMarkerPointLabel as b,
+  getMagnitudeFactor as g
 };

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/index.d.ts

@@ -1,4 +1,3 @@
-import { MagnitudeFactorItem } from '../../../../../../../../../GpsMapTools/types';
 import { StatusEdition } from '../../types';
 /**
  * useMeasure hook se encarga de pintar las marcas y una línea que las une, para calcular la distancia o el area (NextMVP)
@@ -8,6 +7,7 @@ import { StatusEdition } from '../../types';
  */
 export declare function useMeasure(): {
     statusEdition: StatusEdition;
-    magnitudFactor: MagnitudeFactorItem;
+    magnitude: string;
+    symbol: string;
     value: number;
 };

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/index.js

@@ -5,26 +5,29 @@ 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 { e as MAP_ZINDEX_DEFAULT } from "../../../../../../../../constants.js";
-import { g as getMarkerPointIcon, a as getMarkerPointLabel } from "./helpers.js";
+import { g 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";
 function useMeasure() {
   const { getLabel } = useModuleDictionary();
   const map = useMap();
   const readyToUpdate = useFormReadyForUpdate();
   const { control, setValue } = useFormContext();
+  const theme = useTheme();
   const fieldsWatch = useWatch({
     control,
-    name: ["statusEdition", "value", "magnitudFactor"]
+    name: ["statusEdition", "value", "magnitude"]
   });
   const statusEdition = fieldsWatch[0];
   const value = fieldsWatch[1];
-  const magnitudFactor = fieldsWatch[2];
-  const [magnitudFactorCached, setMagnitudFactorCached] = useState(magnitudFactor);
+  const magnitude = fieldsWatch[2];
+  const symbol = getLabel(getMagnitudeFactor(magnitude).dictionarySymbolId);
+  const [magnitudeCached, setMagnitudeCached] = useState(magnitude);
   const currentMeasure = useRef({
     measurePoints: [],
     addMarker: false,
-    magnitudFactor,
+    magnitude,
     dragging: false
   });
   const clearMeasure = useCallback(() => {
@@ -40,10 +43,11 @@ function useMeasure() {
       if (distance === void 0) {
         return void 0;
       }
-      const cMagnitudeFactor = currentMeasure.current.magnitudFactor;
-      return (cMagnitudeFactor.factor_x0 + distance * cMagnitudeFactor.factor_x1 + (distance ^ 2 * cMagnitudeFactor.factor_x2)).toFixed(2) + (withSymbol ? ` ${cMagnitudeFactor.symbol}` : "");
+      const cMagnitudeFactor = getMagnitudeFactor(currentMeasure.current.magnitude);
+      const result = cMagnitudeFactor.factor_x0 + distance * cMagnitudeFactor.factor_x1 + cMagnitudeFactor.factor_x2 * (distance ^ 2);
+      return result.toFixed(cMagnitudeFactor.decimalDigits) + (withSymbol ? ` ${getLabel(cMagnitudeFactor.dictionarySymbolId)}` : "");
     },
-    []
+    [getLabel]
   );
   const measureDistante = useCallback(() => {
     let totalDistance = 0;
@@ -62,7 +66,8 @@ function useMeasure() {
         currentMeasure.current.layerLine = L.polyline(
           measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()),
           {
-            color: STYLE_MEASURE_OPTIONS.strokeLineColor,
+            color: theme.palette.primary.enabled,
+            //STYLE_MEASURE_OPTIONS.strokeLineColor,
             weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
             interactive: false
             //No se puede editar
@@ -71,7 +76,7 @@ function useMeasure() {
       }
     }
     for (let i = 0; i < measurePoints.length - 1; i++) {
-      totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng());
+      totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng()) / 1e3;
     }
     if (measurePoints.length > 0 && measurePoints[0].formatDistanceFromPrevious !== void 0) {
       measurePoints[0].formatDistanceFromPrevious = void 0;
@@ -80,7 +85,7 @@ function useMeasure() {
     }
     for (let i = 1; i < measurePoints.length; i++) {
       const formatDistanceFromPrevious = getFormatFactorDistance(
-        measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()),
+        measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()) / 1e3,
         true
       );
       if (measurePoints[i].formatDistanceFromPrevious !== formatDistanceFromPrevious) {
@@ -93,7 +98,7 @@ function useMeasure() {
     }
     return getFormatFactorDistance(totalDistance);
   }, [map, getLabel]);
-  const getMarkerPointIconMemo = useCallback(getMarkerPointIcon, []);
+  const getMarkerPointIconMemo = useCallback(getMarkerPointIcon2, []);
   const getMarkerPointLabelMemo = useCallback(getMarkerPointLabel, [getLabel]);
   const onClickRemovePoint = useCallback((labelMarker) => {
     return (e) => {
@@ -140,7 +145,7 @@ function useMeasure() {
       }
       if (currentMeasure.current.measurePoints.length > 0) {
         formatDistanceFromPrevious = getFormatFactorDistance(
-          currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng)
+          currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng) / 1e3
         );
       }
       const marker = L.marker([lat, lng], {
@@ -223,12 +228,13 @@ function useMeasure() {
     if (!readyToUpdate) {
       return;
     }
-    if (magnitudFactor.id !== magnitudFactorCached.id) {
-      setMagnitudFactorCached({ ...magnitudFactor });
-      currentMeasure.current.magnitudFactor = magnitudFactor;
-      setValue("value", measureDistante());
+    if (magnitude !== magnitudeCached) {
+      setMagnitudeCached(magnitude);
+      currentMeasure.current.magnitude = magnitude;
+      const valueNew = measureDistante();
+      setValue("value", valueNew);
     }
-  }, [magnitudFactor]);
+  }, [magnitude]);
   useEffect(() => {
     return () => {
       map.off("mousemove", onMouseMoveMap);
@@ -238,7 +244,7 @@ function useMeasure() {
       clearMeasure();
     };
   }, []);
-  return { statusEdition, magnitudFactor, value };
+  return { statusEdition, magnitude, symbol, value };
 }
 export {
   useMeasure as u

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/types.d.ts

@@ -1,4 +1,3 @@
-import { MagnitudeFactorItem } from '../../../../../../../../../GpsMapTools/types';
 export type MeasurePoint = {
     marker: L.Marker;
     labelMarker: L.Marker;
@@ -9,5 +8,5 @@ export interface RefCurrentMeasure {
     addMarker: boolean;
     measurePoints: Array<MeasurePoint>;
     layerLine?: L.Polyline;
-    magnitudFactor: MagnitudeFactorItem;
+    magnitude: string;
 }

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/slots/slots.d.ts

@@ -0,0 +1,8 @@
+export declare enum MapSlotsMeasureTool {
+    mapMeasureToolRoot = "mapMeasureToolRoot",
+    mapMeasureToolDataContainer = "mapMeasureToolDataContainer",
+    mapMeasureToolRHFAutocompleteAsync = "mapMeasureToolRHFAutocompleteAsync",
+    mapMeasureToolValueContainer = "mapMeasureToolValueContainer",
+    mapMeasureToolValue = "mapMeasureToolValue",
+    mapMeasureToolValueUnit = "mapMeasureToolValueUnit"
+}

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/slots/slots.js

@@ -0,0 +1,12 @@
+var MapSlotsMeasureTool = /* @__PURE__ */ ((MapSlotsMeasureTool2) => {
+  MapSlotsMeasureTool2["mapMeasureToolRoot"] = "mapMeasureToolRoot";
+  MapSlotsMeasureTool2["mapMeasureToolDataContainer"] = "mapMeasureToolDataContainer";
+  MapSlotsMeasureTool2["mapMeasureToolRHFAutocompleteAsync"] = "mapMeasureToolRHFAutocompleteAsync";
+  MapSlotsMeasureTool2["mapMeasureToolValueContainer"] = "mapMeasureToolValueContainer";
+  MapSlotsMeasureTool2["mapMeasureToolValue"] = "mapMeasureToolValue";
+  MapSlotsMeasureTool2["mapMeasureToolValueUnit"] = "mapMeasureToolValueUnit";
+  return MapSlotsMeasureTool2;
+})(MapSlotsMeasureTool || {});
+export {
+  MapSlotsMeasureTool as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/slots/styled.d.ts

@@ -0,0 +1,18 @@
+export declare const GpsMapMeasureToolRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GpsMapMeasureToolDataContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GpsMapMeasureToolRHFSelectStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/hook-form/RHFSelect').RHFSelectProps<string | number, boolean | undefined>, keyof import('@m4l/components/src/components/hook-form/RHFSelect').RHFSelectProps<string | number, boolean | undefined>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const GpsMapMeasureToolValueContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GpsMapMeasureToolValueStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const GpsMapMeasureToolValueUnitStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/slots/styled.js

@@ -0,0 +1,37 @@
+import { styled } from "@mui/material/styles";
+import { M as MAP_COMPONET_KEY_COMPONENT } from "../../../../../../../constants.js";
+import { m as mapMeasureToolStyles } from "../MeasureTool.styles.js";
+import { M as MapSlotsMeasureTool } from "./slots.js";
+import { RHFSelect, Typography } from "@m4l/components";
+const GpsMapMeasureToolRootStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsMeasureTool.mapMeasureToolRoot
+})(mapMeasureToolStyles?.mapMeasureToolRoot);
+const GpsMapMeasureToolDataContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsMeasureTool.mapMeasureToolDataContainer
+})(mapMeasureToolStyles?.mapMeasureToolDataContainer);
+const GpsMapMeasureToolRHFSelectStyled = styled(RHFSelect, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsMeasureTool.mapMeasureToolRHFAutocompleteAsync
+})(mapMeasureToolStyles?.mapMeasureToolRHFAutocompleteAsync);
+const GpsMapMeasureToolValueContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsMeasureTool.mapMeasureToolValueContainer
+})(mapMeasureToolStyles?.mapMeasureToolValueContainer);
+const GpsMapMeasureToolValueStyled = styled(Typography, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsMeasureTool.mapMeasureToolValue
+})(mapMeasureToolStyles?.mapMeasureToolValue);
+const GpsMapMeasureToolValueUnitStyled = styled(Typography, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsMeasureTool.mapMeasureToolValueUnit
+})(mapMeasureToolStyles?.mapMeasureToolValueUnit);
+export {
+  GpsMapMeasureToolRootStyled as G,
+  GpsMapMeasureToolDataContainerStyled as a,
+  GpsMapMeasureToolRHFSelectStyled as b,
+  GpsMapMeasureToolValueContainerStyled as c,
+  GpsMapMeasureToolValueStyled as d,
+  GpsMapMeasureToolValueUnitStyled as e
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MeasureData/index.js

@@ -1,29 +1,31 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { RHFAutocompleteAsync, Stack } from "@m4l/components";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MAP_DICCTIONARY } from "../../../../../../../../dictionary.js";
 import { u as useMeasure } from "../../hooks/useMeasure/index.js";
-import { m as mapClasses } from "../../../../../../../../classes/index.js";
+import { a as GpsMapMeasureToolDataContainerStyled, b as GpsMapMeasureToolRHFSelectStyled, c as GpsMapMeasureToolValueContainerStyled, d as GpsMapMeasureToolValueStyled, e as GpsMapMeasureToolValueUnitStyled } from "../../slots/styled.js";
+import { useMemo } from "react";
+import { M as MAGNITUDE_FACTOR_ITEMS } from "../../constants.js";
 function MeasureData() {
   const { getLabel } = useModuleDictionary();
-  const { value, magnitudFactor } = useMeasure();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const units = useMemo(() => {
+    return MAGNITUDE_FACTOR_ITEMS.map((item) => ({
+      id: item.id,
+      label: getLabel(item.dictionaryLabelId)
+    }));
+  }, [getLabel]);
+  const { value, symbol } = useMeasure();
+  return /* @__PURE__ */ jsxs(GpsMapMeasureToolDataContainerStyled, { children: [
     /* @__PURE__ */ jsx(
-      RHFAutocompleteAsync,
+      GpsMapMeasureToolRHFSelectStyled,
       {
-        type: "text",
-        endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
-        name: "magnitudFactor",
-        autoComplete: "off",
-        getOptionLabel: (option) => option.name,
-        isOptionEqualToValue: (option, measureItemValue) => option.id === measureItemValue.id,
-        label: getLabel(MAP_DICCTIONARY.LABEL_MEASURE_UNIT),
-        isRemote: false
+        name: "magnitude",
+        options: units,
+        label: getLabel(MAP_DICCTIONARY.LABEL_MEASURE_UNIT)
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, className: mapClasses.measureToolFormValue, children: [
-      /* @__PURE__ */ jsx("span", { className: mapClasses.measureToolFormValueDistance, children: value }),
-      /* @__PURE__ */ jsx("span", { className: mapClasses.measureToolFormValueSymbol, children: magnitudFactor.symbol })
+    /* @__PURE__ */ jsxs(GpsMapMeasureToolValueContainerStyled, { children: [
+      /* @__PURE__ */ jsx(GpsMapMeasureToolValueStyled, { fontFamily: "Jura", variant: "h5", color: "primary.semanticText", children: value }),
+      /* @__PURE__ */ jsx(GpsMapMeasureToolValueUnitStyled, { fontFamily: "Jura", variant: "paragraph", children: symbol })
     ] })
   ] });
 }

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MeasureData/types.d.ts

@@ -1,6 +1,22 @@
-import { MagnitudeFactorItem, MeasureTypeId } from '../../../../../../../../../GpsMapTools/types';
+/**
+ * Por ahora solo distancia.
+ */
+export type MeasureTypeId = 'distance';
+export interface MagnitudeFactorOption {
+    id: string;
+    label: string;
+}
+export interface MagnitudeFactorItem {
+    id: string;
+    dictionaryLabelId: string;
+    dictionarySymbolId: string;
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+}
 export interface FormGeneralDataValues {
     measureTypeId: MeasureTypeId;
-    magnitudFactor?: MagnitudeFactorItem | null;
+    magnitude?: string | null;
     unitArea?: MagnitudeFactorItem | null;
 }

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

@@ -1,5 +1,8 @@
-import { FormStatusLoad } from '@m4l/components';
+import { MAP_COMPONET_KEY_COMPONENT } from '../../../../../../constants';
+import { FormStatusLoad, M4LOverridesStyleRules } from '@m4l/components';
 import { FormGeneralDataValues } from './subcomponents/MeasureData/types';
+import { MapSlotsMeasureTool } from './slots/slots';
+import { Theme } from '@mui/material/styles';
 export type StatusEdition = 'initial' | 'draw';
 export type FormMeasureValues = FormGeneralDataValues & {
     statusLoad: FormStatusLoad;
@@ -7,3 +10,8 @@ export type FormMeasureValues = FormGeneralDataValues & {
     statusEdition: StatusEdition;
     value: string | null;
 };
+export type MapMeasureToolOwnerState = {
+    visible: boolean;
+};
+export type MapMeasureToolSlotsType = keyof typeof MapSlotsMeasureTool;
+export type MapMeasureToolStyles = M4LOverridesStyleRules<MapMeasureToolSlotsType, typeof MAP_COMPONET_KEY_COMPONENT, Theme>;

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

@@ -1,7 +1,4 @@
-import { ReactNode } from 'react';
-/**
- * Propiedades para el componente TopRigthTools.
- */
+import { JSX_REACT_NODE } from '@m4l/components';
 export interface TopRigthToolsProps {
-    tools?: ((props?: any) => JSX.Element) | ReactNode;
+    GpsTools?: JSX_REACT_NODE;
 }

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

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

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

@@ -5,10 +5,11 @@ import L__default from "leaflet";
 import React, { useEffect } from "react";
 import { useMap } from "react-leaflet";
 import { u as useAutoFocus } from "../../hooks/useAutoFocus/index.js";
+import { useModuleSkeleton } from "@m4l/core";
 import { u as useMapStore } from "../../hooks/useMapStore/index.js";
 const LayersContainer = () => {
   const layersId = useMapStore((state) => state.layersIds, shallow);
-  const isSkeleton = useMapStore((state) => state.ownerState.isSkeleton, shallow);
+  const isSkeleton = useModuleSkeleton();
   const map = useMap();
   useAutoFocus();
   useEffect(() => {

package/components/maps/components/GpsMap/subcomponents/LayersContainer/subcomponents/MyLayer/index.js

@@ -6,6 +6,7 @@ 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 { layerId } = props;
@@ -23,7 +24,7 @@ const MyLayer = (props) => {
     } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
       return geoJsonObject && geoJsonObject.object.features.map((feature) => feature.id);
     }
-  }, shallow);
+  }, deepShallow);
   const renderFeature = useMapStore((state) => state.hashLayers[layerId]?.renderFeature, shallow);
   const [visible, cluster = false] = useMapStore(
     (state) => [state.hashLayers[layerId]?.visible, state.hashLayers[layerId]?.cluster],

package/components/maps/components/GpsMap/subcomponents/MapEventController/MapEventController.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Componente interno que maneja la desactivación de eventos del mapa
+ */
+export declare function MapEventController({ disableMapEvents }: {
+    disableMapEvents: boolean;
+}): null;

package/components/maps/components/GpsMap/subcomponents/MapEventController/MapEventController.js

@@ -0,0 +1,8 @@
+import { u as useDisableMapEventsOnFlag } from "../../hooks/useDisableMapEventsOnFlag/index.js";
+function MapEventController({ disableMapEvents }) {
+  useDisableMapEventsOnFlag(disableMapEvents);
+  return null;
+}
+export {
+  MapEventController as M
+};

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/darkStyles.d.ts

@@ -0,0 +1,13 @@
+export declare const DARK_STYLES: ({
+    elementType: string;
+    stylers: {
+        color: string;
+    }[];
+    featureType?: undefined;
+} | {
+    featureType: string;
+    elementType: string;
+    stylers: {
+        color: string;
+    }[];
+})[];

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/index.js

@@ -1,53 +1,83 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useMap } from "react-leaflet";
 import L__default from "leaflet";
 import { u as useMapStore } from "../../../../hooks/useMapStore/index.js";
-import { shallow } from "zustand/shallow";
 import { Loader } from "@googlemaps/js-api-loader";
+import { deepShallow } from "@m4l/components";
 function TileLayerGoogle() {
   const map = useMap();
   const mutantRefLayer = React.useRef(null);
-  const { options, sourceType, mapTypeTile } = useMapStore(
-    (state) => state.hashMapSources[state.currentMapSourceId],
-    shallow
+  const loaderRef = React.useRef(null);
+  const { sourceId, layer, trafficLayer, transitLayer, bicyclingLayer, googleApiKey, googleMapVersion } = useMapStore(
+    (state) => {
+      const source = state.mapSources.find((source2) => source2.id === state.currentMapSourceLayer.mapSourceId) || state.mapSources[0];
+      const layer2 = source.layers.find((layer3) => layer3.id === state.currentMapSourceLayer.mapSourceLayerId) || source.layers[0];
+      return {
+        sourceId: source.id,
+        layer: layer2,
+        trafficLayer: layer2?.roadSelectedOptions?.trafficLayer || false,
+        transitLayer: layer2?.roadSelectedOptions?.transitLayer || false,
+        bicyclingLayer: layer2?.roadSelectedOptions?.bicyclingLayer || false,
+        googleApiKey: state.googleMapsApiKey,
+        googleMapVersion: state.googleMapVersion
+      };
+    },
+    deepShallow
   );
-  const roadOptions = useMapStore(
-    (state) => state.hashMapSources[state.currentMapSourceId].roadSelectedOptions,
-    shallow
-  );
-  const [googleApiKey, googleMapVersion] = useMapStore(
-    (state) => [state.googleMapsApiKey, state.googleMapVersion],
-    shallow
-  );
-  React.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    let googleMutantLayer;
-    const loader = new Loader({
+  const someActiveLayers = trafficLayer || transitLayer || bicyclingLayer;
+  const lastLayersStatus = React.useRef({ trafficLayer, transitLayer, bicyclingLayer });
+  const layersStatus = React.useRef({ trafficLayer, transitLayer, bicyclingLayer });
+  layersStatus.current = { trafficLayer, transitLayer, bicyclingLayer };
+  useEffect(() => {
+    loaderRef.current = new Loader({
       apiKey: googleApiKey,
       version: googleMapVersion
     });
-    loader.importLibrary("maps").then(() => {
+  }, [googleApiKey, googleMapVersion]);
+  useEffect(() => {
+    let leafletLayerGoogle;
+    if (sourceId !== "google") {
+      return;
+    }
+    if (!(trafficLayer || transitLayer || bicyclingLayer)) {
+      leafletLayerGoogle = L__default.tileLayer(layer.urlTemplate, layer.options);
+      if (layer.getTileUrl) {
+        leafletLayerGoogle.getTileUrl = layer.getTileUrl;
+      }
+      map.addLayer(leafletLayerGoogle);
+      if (layer.options && layer.options.maxZoom) {
+        map.setMaxZoom(layer.options.maxZoom);
+      }
+    }
+    return () => {
+      if (leafletLayerGoogle) {
+        map.removeLayer(leafletLayerGoogle);
+      }
+    };
+  }, [sourceId, layer.urlTemplate, layer.options, layer.getTileUrl, map, trafficLayer, transitLayer, bicyclingLayer]);
+  useEffect(() => {
+    if (sourceId !== "google" || !someActiveLayers || !loaderRef.current) {
+      return;
+    }
+    let googleMutantLayer;
+    loaderRef.current.importLibrary("maps").then(() => {
       googleMutantLayer = L__default.gridLayer.googleMutant({
-        type: mapTypeTile,
-        // map type, can be 'roadmap', 'satellite', etc.
         maxZoom: 20,
-        // styles: [
-        //   // Google Maps styles array, can be generated here: https://mapstyle.withgoogle.coxm/
-        // ],
-        ...options
+        type: layer.type
+        // styles: [],
+        // ...layer.options,
       });
       mutantRefLayer.current = googleMutantLayer;
-      if (roadOptions.trafficLayer) {
+      if (layersStatus.current.trafficLayer) {
         googleMutantLayer.addGoogleLayer("TrafficLayer");
       }
-      if (roadOptions.transitLayer) {
+      if (layersStatus.current.transitLayer) {
         googleMutantLayer.addGoogleLayer("TransitLayer");
       }
-      if (roadOptions.bicyclingLayer) {
+      if (layersStatus.current.bicyclingLayer) {
         googleMutantLayer.addGoogleLayer("BicyclingLayer");
       }
+      lastLayersStatus.current = { ...layersStatus.current };
       map.addLayer(googleMutantLayer);
     });
     return () => {
@@ -56,43 +86,36 @@ function TileLayerGoogle() {
         mutantRefLayer.current = null;
       }
     };
-  }, [map, sourceType, mapTypeTile]);
+  }, [map, layer.type, sourceId, googleApiKey, googleMapVersion, someActiveLayers]);
   React.useEffect(() => {
-    if (sourceType !== "Google") {
+    if (sourceId !== "google") {
       return;
     }
-    if (mutantRefLayer.current && roadOptions) {
-      if (roadOptions.trafficLayer) {
-        mutantRefLayer.current.addGoogleLayer("TrafficLayer");
-      } else if (roadOptions.trafficLayer === false) {
-        mutantRefLayer.current.removeGoogleLayer("TrafficLayer");
+    if (mutantRefLayer.current) {
+      if (trafficLayer !== lastLayersStatus.current.trafficLayer) {
+        if (trafficLayer) {
+          mutantRefLayer.current.addGoogleLayer("TrafficLayer");
+        } else if (trafficLayer === false) {
+          mutantRefLayer.current.removeGoogleLayer("TrafficLayer");
+        }
       }
-    }
-  }, [roadOptions.trafficLayer]);
-  React.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    if (mutantRefLayer.current && roadOptions) {
-      if (roadOptions.transitLayer) {
-        mutantRefLayer.current.addGoogleLayer("TransitLayer");
-      } else if (roadOptions.transitLayer === false) {
-        mutantRefLayer.current.removeGoogleLayer("TransitLayer");
+      if (transitLayer !== lastLayersStatus.current.transitLayer) {
+        if (transitLayer) {
+          mutantRefLayer.current.addGoogleLayer("TransitLayer");
+        } else if (transitLayer === false) {
+          mutantRefLayer.current.removeGoogleLayer("TransitLayer");
+        }
       }
-    }
-  }, [roadOptions.transitLayer]);
-  React.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    if (mutantRefLayer.current && roadOptions) {
-      if (roadOptions.bicyclingLayer) {
-        mutantRefLayer.current.addGoogleLayer("BicyclingLayer");
-      } else if (roadOptions.bicyclingLayer === false) {
-        mutantRefLayer.current.removeGoogleLayer("BicyclingLayer");
+      if (bicyclingLayer !== lastLayersStatus.current.bicyclingLayer) {
+        if (bicyclingLayer) {
+          mutantRefLayer.current.addGoogleLayer("BicyclingLayer");
+        } else if (bicyclingLayer === false) {
+          mutantRefLayer.current.removeGoogleLayer("BicyclingLayer");
+        }
       }
+      lastLayersStatus.current = { ...layersStatus.current };
     }
-  }, [roadOptions.bicyclingLayer]);
+  }, [trafficLayer, transitLayer, bicyclingLayer]);
   return null;
 }
 export {