@m4l/components 7.0.0 → 7.1.2

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useMaster.d.ts

@@ -1,13 +1,16 @@
-import type { LayersListModel } from '../model';
+import { LayersListModel } from '../model';
 /**
- *
- * @returns
+ * Hook que contiene la logica de la tabla de capas
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-07 16:10:36 - automatic
+ * @updatedAt 2024-10-07 16:10:37 - automatic
+ * @updatedUser Juan Escobar - automatic
  */
 export declare function useMaster(): {
     rowKeyGetter: (row: LayersListModel) => string;
-    columns: import("react-data-grid").Column<LayersListModel, unknown>[];
+    columns: import('react-data-grid').Column<LayersListModel, unknown>[];
     rows: LayersListModel[];
     checkedRows: ReadonlySet<string>;
     onCheckedRowsChange: (newFeatures: ReadonlySet<string>) => void;
-    rowActionsGetter: (row: LayersListModel) => [] | import("../../../../../../../../../../../..").MenuAction[];
+    rowActionsGetter: (row: LayersListModel) => import('../../../../../../../../../../../..').MenuAction[] | [];
 };

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useMaster.js

@@ -0,0 +1,52 @@
+import { useCallback, useMemo } from "react";
+import { shallow } from "zustand/shallow";
+import { u as useColumns } from "./useColumns.js";
+import { u as useMapStore } from "../../../../../../../../../hooks/useMapStore/index.js";
+import { u as useCheckedLayers } from "./useCheckedLayers.js";
+import { u as useRowActionsGetter } from "./useRowActionsGetter.js";
+function useMaster() {
+  const [hashLayers, layersIds] = useMapStore(
+    (state) => [state.hashLayers, state.layersIds],
+    shallow
+  );
+  const rowKeyGetter = useCallback((row) => row.id, []);
+  const [visibleLayers, setVisibleLayers] = useCheckedLayers("visible");
+  const [autoFocusLayers, setAutoFocusLayers] = useCheckedLayers("autoFocus");
+  const [clusterLayers, setClusterLayers] = useCheckedLayers("cluster");
+  const rows = useMemo(() => {
+    const filteredRows = [];
+    layersIds.forEach((layerId) => {
+      if (hashLayers[layerId]) {
+        filteredRows.push({
+          id: layerId,
+          name: hashLayers[layerId].name || `*${layerId}`,
+          active: hashLayers[layerId].visible,
+          clusterAble: hashLayers[layerId].clusterAble || false,
+          deleteAble: hashLayers[layerId].deleteAble || false
+        });
+      }
+    });
+    return filteredRows;
+  }, [hashLayers, layersIds]);
+  const { rowActionsGetter } = useRowActionsGetter();
+  const { columns } = useColumns({
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  });
+  return {
+    rowKeyGetter,
+    columns,
+    rows,
+    checkedRows: visibleLayers,
+    onCheckedRowsChange: setVisibleLayers,
+    rowActionsGetter
+  };
+}
+export {
+  useMaster as u
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useRowActionsGetter.d.ts

@@ -1,5 +1,8 @@
 import { LayersListModel } from '../model';
-import type { MenuAction } from '../../../../../../../../../../../../mui_extended/MenuActions/types';
+import { MenuAction } from '../../../../../../../../../../../../mui_extended/MenuActions/types';
+/**
+ * TODO: Documentar
+ */
 export declare function useRowActionsGetter(): {
     rowActionsGetter: (row: LayersListModel) => MenuAction[] | [];
 };

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useRowActionsGetter.js

@@ -0,0 +1,42 @@
+import { useState, useCallback } from "react";
+import { useModuleDictionary, useModulePrivileges, useEnvironment } from "@m4l/core";
+import { shallow } from "zustand/shallow";
+import { u as useMapStore } from "../../../../../../../../../hooks/useMapStore/index.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+function useRowActionsGetter() {
+  const { getLabel } = useModuleDictionary();
+  const { hasPrivilege } = useModulePrivileges();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { removeLayer } = useMapStore((state) => state.mapActions, shallow);
+  const [urlIconDelete] = useState(
+    `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_DELETE}`
+  );
+  const onDelete = useCallback(
+    (row) => {
+      removeLayer(row.id);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getLabel]
+  );
+  const rowActionsGetter = useCallback(
+    (row) => {
+      const conditionalItems = [];
+      conditionalItems.push({
+        urlIcon: urlIconDelete,
+        dictionaryId: MAP_DICCTIONARY.ROW_ACTION_LAYER_DELETE,
+        onClick: () => {
+          onDelete(row);
+        },
+        disabled: !row.deleteAble
+      });
+      return conditionalItems;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasPrivilege, onDelete, urlIconDelete]
+  );
+  return { rowActionsGetter };
+}
+export {
+  useRowActionsGetter as u
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/index.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare function LayersTool(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/index.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { D as DataGrid } from "../../../../../../../../../../../DataGrid/index.js";
+import { u as useMaster } from "./hooks/useMaster.js";
+import { u as useDisableZoomEvents } from "../../../../../../../../hooks/useDisableZoomEvents/index.js";
+import { u as useStateRef } from "../../../../../../../../../../../../hooks/useStateRef/index.js";
+function LayersTool() {
+  const { columns, rows, rowKeyGetter, rowActionsGetter } = useMaster();
+  const [divRef, setDivRef] = useStateRef(null);
+  useDisableZoomEvents(divRef);
+  return /* @__PURE__ */ jsx("div", { ref: setDivRef, style: { position: "relative", height: "100%" }, children: /* @__PURE__ */ jsx(
+    DataGrid,
+    {
+      id: "layers",
+      columns,
+      rows,
+      rowActionsGetter,
+      rowKeyGetter,
+      withActions: true,
+      actionsProps: {
+        withRowsCount: false,
+        withSettings: false,
+        withPager: false,
+        withLocalFilters: false
+      }
+    }
+  ) });
+}
+export {
+  LayersTool as L
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/model.d.ts

@@ -1,7 +1,6 @@
-export declare type LayerId = string;
+export type LayerId = string;
 /**
- * @description Modelo de datos proveniente del endpoint get de geocercas
- * @interface GeofenceGetModel
+ * Modelo de datos proveniente del endpoint get de geocercas
  */
 export interface LayersListModel {
     /**

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/index.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare function MapSourcesTool(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/index.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
+import { shallow } from "zustand/shallow";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { u as useDisableZoomEvents } from "../../../../../../../../hooks/useDisableZoomEvents/index.js";
+import { u as useStateRef } from "../../../../../../../../../../../../hooks/useStateRef/index.js";
+import { m as mapClasses } from "../../../../../../../../classes/index.js";
+import clsx from "clsx";
+import { M as MAP_ICONS } from "../../../../../../../../icons.js";
+import { C as CheckBox } from "../../../../../../../../../../../mui_extended/CheckBox/CheckBox.js";
+import { u as useMapStore } from "../../../../../../../../hooks/useMapStore/index.js";
+import { I as Icon } from "../../../../../../../../../../../Icon/Icon.js";
+function MapSourcesTool() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const currentMapSourceId = useMapStore((state) => state.currentMapSourceId, shallow);
+  const mapSources = useMapStore((state) => {
+    return state.mapSourcesIds.map((id) => ({
+      id,
+      dictionaryId: state.hashMapSources[id].dictionaryId,
+      iconUrl: state.hashMapSources[id].iconUrl,
+      hasBicyclingLayer: state.hashMapSources[id].hasBicyclingLayer,
+      hasTrafficLayer: state.hashMapSources[id].hasTrafficLayer,
+      hasTransitLayer: state.hashMapSources[id].hasTransitLayer,
+      roadSeletedOptions: state.hashMapSources[id].roadSelectedOptions
+    }));
+  }, shallow);
+  const { setCurrentMapSource, setMapSourceRoadOptions: setMapSourceRoadMapOptions } = useMapStore(
+    (state) => state.mapActions,
+    shallow
+  );
+  const [divRef, setDivRef] = useStateRef(null);
+  useDisableZoomEvents(divRef);
+  const handleChange = (event) => {
+    setCurrentMapSource(event.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: mapClasses.mapSourcesRoot, ref: setDivRef, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "aria-labelledby": "demo-controlled-radio-buttons-group",
+      name: "controlled-radio-buttons-group",
+      value: currentMapSourceId,
+      onChange: handleChange,
+      children: mapSources.map((mapSourceOption) => /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOption, children: [
+        /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            className: "",
+            value: mapSourceOption.id,
+            control: /* @__PURE__ */ jsx(Radio, {}),
+            label: /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionIconLabel, children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${mapSourceOption.iconUrl}`
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: getLabel(mapSourceOption.dictionaryId) })
+            ] })
+          }
+        ),
+        (mapSourceOption.hasBicyclingLayer || mapSourceOption.hasTrafficLayer || mapSourceOption.hasTransitLayer) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              mapClasses.mapSourcesOptionRoadOptions,
+              currentMapSourceId !== mapSourceOption.id ? mapClasses.disabled : mapClasses.active
+            ),
+            children: [
+              mapSourceOption.hasTrafficLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
+                /* @__PURE__ */ jsx(
+                  CheckBox,
+                  {
+                    disabled: currentMapSourceId !== mapSourceOption.id,
+                    checked: mapSourceOption.roadSeletedOptions?.trafficLayer || false,
+                    onChange: (_e, checked) => {
+                      setMapSourceRoadMapOptions({ trafficLayer: checked });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRAFFIC}`
+                  }
+                )
+              ] }),
+              mapSourceOption.hasTransitLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
+                /* @__PURE__ */ jsx(
+                  CheckBox,
+                  {
+                    disabled: currentMapSourceId !== mapSourceOption.id,
+                    checked: mapSourceOption.roadSeletedOptions?.transitLayer || false,
+                    onChange: (_e, checked) => {
+                      setMapSourceRoadMapOptions({ transitLayer: checked });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRANSIT}`
+                  }
+                )
+              ] }),
+              mapSourceOption.hasBicyclingLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
+                /* @__PURE__ */ jsx(
+                  CheckBox,
+                  {
+                    disabled: currentMapSourceId !== mapSourceOption.id,
+                    checked: mapSourceOption.roadSeletedOptions?.bicyclingLayer || false,
+                    label: "Bycicle",
+                    onChange: (_e, checked) => {
+                      setMapSourceRoadMapOptions({ bicyclingLayer: checked });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_BICYCLING}`
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }, mapSourceOption.dictionaryId))
+    }
+  ) }) });
+}
+export {
+  MapSourcesTool as M
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/bing.js

@@ -0,0 +1,39 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+import { t as toQuadKey } from "./utils.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+const BING_URL_TEMPLATE = "https://{s}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/|QK|?mkt=en-us&it=G,VE,BX,L,LA&shading=hill&og=22&n=z";
+const BING_SUB_DOMAINS = ["t2", "t3"];
+const TILE_LAYER_BING = {
+  id: "bing_rodmap",
+  sourceType: "Bing",
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_BING,
+  iconUrl: MAP_ICONS.MAP_SOURCE_BING,
+  urlTemplate: BING_URL_TEMPLATE,
+  options: {
+    minZoom: 0,
+    maxZoom: 21,
+    subdomains: BING_SUB_DOMAINS,
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
+    tms: true
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  },
+  /**
+   * TODO: Documentar
+   */
+  getTileUrl: (tileCoord) => {
+    const i = Math.abs(tileCoord.x + tileCoord.y) % BING_SUB_DOMAINS.length;
+    const z = tileCoord.z;
+    const x = tileCoord.x;
+    const y = tileCoord.y;
+    const gk = toQuadKey(x, y, z);
+    return BING_URL_TEMPLATE.replace("|QK|", gk).replace("{s}", BING_SUB_DOMAINS[i]);
+  }
+};
+export {
+  TILE_LAYER_BING as T
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/google.js

@@ -0,0 +1,73 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+const TILE_LAYER_GOOGLE = {
+  id: "google_rodmap",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_ROADS,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_ROADS,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  hasBicyclingLayer: true,
+  hasTrafficLayer: true,
+  hasTransitLayer: true,
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data © Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE_SATELLITE = {
+  id: "google_satellite",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_SATELLITE,
+  mapTypeTile: "satellite",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_SATELLITE,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data © Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE_HYBRID = {
+  id: "google_hybrid",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_HYBRID,
+  mapTypeTile: "hybrid",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_HYBRID,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  hasBicyclingLayer: true,
+  hasTrafficLayer: true,
+  hasTransitLayer: true,
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data © Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+export {
+  TILE_LAYER_GOOGLE as T,
+  TILE_LAYER_GOOGLE_SATELLITE as a,
+  TILE_LAYER_GOOGLE_HYBRID as b
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/osm.js

@@ -0,0 +1,25 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+const TILE_LAYER_OSM = {
+  id: "osm_roadmap",
+  sourceType: "OSM",
+  iconUrl: MAP_ICONS.MAP_SOURCE_OSM,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_OSM,
+  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+  options: {
+    minZoom: 0,
+    maxZoom: 19,
+    subdomains: ["a", "b", "c"],
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+export {
+  TILE_LAYER_OSM as T
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/utils.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare function toQuadKey(x: number, y: number, z: number): string;

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/utils.js

@@ -0,0 +1,19 @@
+function toQuadKey(x, y, z) {
+  let quadKey = "";
+  for (let i = z; i > 0; i--) {
+    let digit = 0;
+    const mask = 1 << i - 1;
+    if ((x & mask) !== 0) {
+      digit++;
+    }
+    if ((y & mask) !== 0) {
+      digit++;
+      digit++;
+    }
+    quadKey += digit.toString();
+  }
+  return quadKey;
+}
+export {
+  toQuadKey as t
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/types.d.ts

@@ -1,4 +1,4 @@
-export declare type ToolType = 'Layers' | 'MapSources';
-export declare type PopoverToolButtonProps = {
+export type ToolType = 'Layers' | 'MapSources';
+export type PopoverToolButtonProps = {
     type: ToolType;
 };

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface MainToolsProps {
+    aditionalMainTools?: ReactNode;
+    gpsTools?: ReactNode;
+}

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/index.d.ts

@@ -1,6 +1,6 @@
-import type { TopRigthToolsProps } from './types';
+import { TopRigthToolsProps } from './types';
 /**
- * @descriptionn Componente que contiene los botones de herramientas de la parte superior derecha del mapa
+ * Componente que contiene los botones de herramientas de la parte superior derecha del mapa
  *  - Boton de herramientas de GPS (Opcional)
  *  - Boton de herramientas de medición
  *  - Botones de zoom In

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/index.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useMap } from "react-leaflet";
+import { shallow } from "zustand/shallow";
+import { C as Control } from "../../../../external/Control/index.js";
+import { M as MeasureTool } from "./subcomponents/MeasureTool/index.js";
+import { Z as ZoomButtons } from "./subcomponents/ZoomButtons/index.js";
+import { M as MAP_ICONS } from "../../../../icons.js";
+import { M as MAP_DICCTIONARY } from "../../../../dictionary.js";
+import { m as mapClasses } from "../../../../classes/index.js";
+import { G as GPS_TOOLS_POPUP_ID, c as GPS_TOOLS_POPUP_DEFAULT_POSITION, d as MESURE_POPUP_DEFAULT_POSITION } from "../../../../constants.js";
+import { u as usePopupsStore } from "../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore/index.js";
+import { T as ToggleIconButton } from "../../../../../../../mui_extended/ToggleIconButton/ToggleIconButton.js";
+function TopRightTools(props) {
+  const { gpsTools } = props;
+  const { addPopup, closePopup } = usePopupsStore((state) => state.popupsActions);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const openPopupsIds = usePopupsStore(
+    (state) => state.popupsIds.filter((pId) => {
+      return state.hashPopups[pId].status === "init";
+    }),
+    shallow
+  );
+  const popupsIds = usePopupsStore((state) => state.popupsIds, shallow);
+  const map = useMap();
+  const isToggledGpsTools = openPopupsIds.indexOf("gpsTools") > -1;
+  const isDisabledGpsTools = popupsIds.indexOf("gpsTools") > -1 && openPopupsIds.indexOf("gpsTools") === -1;
+  const isToggledMeasureTool = openPopupsIds.indexOf("measureTool") > -1;
+  const isDisabledMeasureTool = popupsIds.indexOf("measureTool") > -1 && openPopupsIds.indexOf("measureTool") === -1;
+  const onMouseDown = (e) => {
+    map.dragging.disable();
+    e.stopPropagation();
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseUp = (e) => {
+    map.dragging.enable();
+    e.stopPropagation();
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onGpsToolsClick = (e) => {
+    if (!isToggledGpsTools) {
+      addPopup(
+        {
+          popupId: GPS_TOOLS_POPUP_ID,
+          title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
+          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
+          functionComponent: gpsTools,
+          onMouseDown,
+          defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
+        },
+        { closeOthers: true }
+      );
+    } else {
+      closePopup(GPS_TOOLS_POPUP_ID);
+    }
+    e.stopPropagation();
+  };
+  const onMeasureToolClick = (e) => {
+    if (!isToggledMeasureTool) {
+      addPopup(
+        {
+          popupId: "measureTool",
+          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`,
+          title: getLabel(MAP_DICCTIONARY.LABEL_POPUP_MEASURE),
+          functionComponent: MeasureTool,
+          onMouseDown,
+          defaultPosition: MESURE_POPUP_DEFAULT_POSITION
+        },
+        { closeOthers: true }
+      );
+    } else {
+      closePopup("measureTool");
+    }
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(Control, { position: "topright", prepend: true, className: mapClasses.topRigthToolsRoot, children: [
+    gpsTools && /* @__PURE__ */ jsx(
+      ToggleIconButton,
+      {
+        isToggled: isToggledGpsTools,
+        disabled: isDisabledGpsTools,
+        onToggle: onGpsToolsClick,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToggleIconButton,
+      {
+        isToggled: isToggledMeasureTool,
+        disabled: isDisabledMeasureTool,
+        onToggle: onMeasureToolClick,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`
+      }
+    ),
+    /* @__PURE__ */ jsx(ZoomButtons, {})
+  ] });
+}
+export {
+  TopRightTools as T
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/constants.js

@@ -0,0 +1,34 @@
+const INITIAL_FORM_VALUES = {
+  /** General Data */
+  statusLoad: "ready",
+  reInits: 0,
+  value: "0",
+  measureTypeId: "distance",
+  magnitudFactor: {
+    id: "m_kilometers",
+    name: "Kilometers",
+    symbol: "k",
+    factor_x0: 0,
+    factor_x1: 1,
+    factor_x2: 0
+  },
+  unitArea: null,
+  /** Config Data */
+  /** de Apoyo */
+  statusEdition: "initial"
+  // geometry: null ,
+};
+const STYLE_MEASURE_OPTIONS = {
+  strokeLineColor: "#1E96DC",
+  strokeLineWeight: 5,
+  markerHeight: 37,
+  markerWidth: 26,
+  labelMarkerHeight: 0,
+  labelMarkerWidth: 0,
+  labelMarkerAnchorY: 0,
+  labelMarkerAnchorX: 0
+};
+export {
+  INITIAL_FORM_VALUES as I,
+  STYLE_MEASURE_OPTIONS as S
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/helpers.d.ts

@@ -1,4 +1,4 @@
-import L from 'leaflet';
+import { default as L } from 'leaflet';
 import { GetLabelType } from '@m4l/core';
 /**
  * getMarkerPointIcon: Función que retorna el icono/div que representa un punto de medición