@m4l/gclick 0.0.2

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

@@ -0,0 +1,245 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useMap } from "react-leaflet";
+import * as L from "leaflet";
+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 { m as mapClasses } from "../../../../../../../../classes/index.js";
+function useMeasure() {
+  const { getLabel } = useModuleDictionary();
+  const map = useMap();
+  const readyToUpdate = useFormReadyForUpdate();
+  const { control, setValue } = useFormContext();
+  const fieldsWatch = useWatch({
+    control,
+    name: ["statusEdition", "value", "magnitudFactor"]
+  });
+  const statusEdition = fieldsWatch[0];
+  const value = fieldsWatch[1];
+  const magnitudFactor = fieldsWatch[2];
+  const [magnitudFactorCached, setMagnitudFactorCached] = useState(magnitudFactor);
+  const currentMeasure = useRef({
+    measurePoints: [],
+    addMarker: false,
+    magnitudFactor,
+    dragging: false
+  });
+  const clearMeasure = useCallback(() => {
+    currentMeasure.current.measurePoints.forEach((measurePoint) => {
+      measurePoint.marker.remove();
+      measurePoint.labelMarker.remove();
+    });
+    currentMeasure.current.measurePoints = [];
+    setValue("value", measureDistante());
+  }, []);
+  const getFormatFactorDistance = useCallback(
+    (distance, withSymbol = false) => {
+      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 measureDistante = useCallback(() => {
+    let totalDistance = 0;
+    const measurePoints = currentMeasure.current.measurePoints;
+    if (currentMeasure.current.layerLine) {
+      if (measurePoints.length < 2) {
+        currentMeasure.current.layerLine.remove();
+        currentMeasure.current.layerLine = void 0;
+      } else {
+        currentMeasure.current.layerLine.setLatLngs(
+          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng())
+        );
+      }
+    } else {
+      if (measurePoints.length > 1) {
+        currentMeasure.current.layerLine = L.polyline(
+          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()),
+          {
+            color: STYLE_MEASURE_OPTIONS.strokeLineColor,
+            weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
+            interactive: false
+            //No se puede editar
+          }
+        ).addTo(map);
+      }
+    }
+    for (let i = 0; i < measurePoints.length - 1; i++) {
+      totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng());
+    }
+    if (measurePoints.length > 0 && measurePoints[0].formatDistanceFromPrevious !== void 0) {
+      measurePoints[0].formatDistanceFromPrevious = void 0;
+      measurePoints[0].labelMarker.setIcon(getMarkerPointLabelMemo(void 0, getLabel));
+      addClickListenerForRemove(measurePoints[0].labelMarker);
+    }
+    for (let i = 1; i < measurePoints.length; i++) {
+      const formatDistanceFromPrevious = getFormatFactorDistance(
+        measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()),
+        true
+      );
+      if (measurePoints[i].formatDistanceFromPrevious !== formatDistanceFromPrevious) {
+        measurePoints[i].formatDistanceFromPrevious = formatDistanceFromPrevious;
+        measurePoints[i].labelMarker.setIcon(
+          getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel)
+        );
+        addClickListenerForRemove(measurePoints[i].labelMarker);
+      }
+    }
+    return getFormatFactorDistance(totalDistance);
+  }, [map, getLabel]);
+  const getMarkerPointIconMemo = useCallback(getMarkerPointIcon, []);
+  const getMarkerPointLabelMemo = useCallback(getMarkerPointLabel, [getLabel]);
+  const onClickRemovePoint = useCallback((labelMarker) => {
+    return (e) => {
+      e.stopPropagation();
+      if (!currentMeasure.current.dragging) {
+        const markIndex = currentMeasure.current.measurePoints.findIndex(
+          (searchElement) => {
+            return searchElement.labelMarker === labelMarker;
+          }
+        );
+        if (markIndex !== -1) {
+          const measurePoint = currentMeasure.current.measurePoints[markIndex];
+          measurePoint.marker.remove();
+          measurePoint.labelMarker.remove();
+          currentMeasure.current.measurePoints.splice(markIndex, 1);
+          setValue("value", measureDistante());
+          currentMeasure.current.addMarker = true;
+        }
+        currentMeasure.current.measurePoints.forEach((measurePoint, index) => {
+          measurePoint.marker.setIcon(getMarkerPointIconMemo(index + 1));
+        });
+      }
+    };
+  }, []);
+  const addClickListenerForRemove = useCallback((labelMarker) => {
+    let element = labelMarker.getElement();
+    if (element) {
+      const elements = element.getElementsByClassName(
+        mapClasses.measureLabelMarkerRemove
+      );
+      element = elements[0];
+      if (element) {
+        element.addEventListener("click", onClickRemovePoint(labelMarker));
+      }
+    }
+  }, []);
+  const onClickMap = useCallback(
+    (e) => {
+      const lat = e.latlng.lat;
+      const lng = e.latlng.lng;
+      let formatDistanceFromPrevious = void 0;
+      if (currentMeasure.current.addMarker === false) {
+        return;
+      }
+      if (currentMeasure.current.measurePoints.length > 0) {
+        formatDistanceFromPrevious = getFormatFactorDistance(
+          currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng)
+        );
+      }
+      const marker = L.marker([lat, lng], {
+        draggable: true,
+        riseOnHover: true,
+        //Se pone la marca encima de las otras cuando se hace over
+        autoPan: true,
+        //Se corre el mapa si llega al extremo, solo para las marcas
+        icon: getMarkerPointIconMemo(currentMeasure.current.measurePoints.length + 1),
+        zIndexOffset: MAP_ZINDEX_DEFAULT
+      }).addTo(map);
+      marker.on("moveend", function(_e) {
+        const latlng = marker.getLatLng();
+        labelMarker.setLatLng(latlng);
+        setValue("value", measureDistante());
+      });
+      marker.on("mouseover", function() {
+        currentMeasure.current.addMarker = false;
+      });
+      marker.on("mouseout", function() {
+        currentMeasure.current.addMarker = true;
+      });
+      var labelMarker = L.marker([lat, lng], {
+        draggable: true,
+        riseOnHover: true,
+        //Se pone la marca encima de las otras cuando se hace over
+        icon: getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel),
+        zIndexOffset: MAP_ZINDEX_DEFAULT
+      }).addTo(map);
+      labelMarker.on("moveend", function(_e) {
+        const latlng = labelMarker.getLatLng();
+        marker.setLatLng(latlng);
+        setValue("value", measureDistante());
+      });
+      labelMarker.on("mouseover", function(_e) {
+        currentMeasure.current.addMarker = false;
+      });
+      labelMarker.on("mouseout", function(_e) {
+        currentMeasure.current.addMarker = true;
+      });
+      labelMarker.on("dragstart", function(_e) {
+        currentMeasure.current.dragging = true;
+      });
+      labelMarker.on("dragend", function(_e) {
+        setTimeout(function() {
+          currentMeasure.current.dragging = false;
+        }, 10);
+      });
+      addClickListenerForRemove(labelMarker);
+      currentMeasure.current.measurePoints.push({
+        marker,
+        labelMarker,
+        formatDistanceFromPrevious
+      });
+      setValue("value", measureDistante());
+    },
+    [map, measureDistante, setValue, getLabel]
+  );
+  const onMouseMoveMap = useCallback(() => {
+    map.getContainer().style.cursor = "crosshair";
+  }, [map]);
+  const onMouseOutMap = useCallback(() => {
+    map.getContainer().style.cursor = "default";
+  }, [map]);
+  useEffect(() => {
+    if (map) {
+      if (statusEdition === "initial") {
+        map.off("click", onClickMap);
+        clearMeasure();
+        map.getContainer().style.cursor = "default";
+        return;
+      } else {
+        currentMeasure.current.addMarker = true;
+        map.getContainer().style.cursor = "crosshair";
+        map.on("click", onClickMap);
+      }
+    }
+  }, [map, statusEdition]);
+  useEffect(() => {
+    if (!readyToUpdate) {
+      return;
+    }
+    if (magnitudFactor.id !== magnitudFactorCached.id) {
+      setMagnitudFactorCached({ ...magnitudFactor });
+      currentMeasure.current.magnitudFactor = magnitudFactor;
+      setValue("value", measureDistante());
+    }
+  }, [magnitudFactor]);
+  useEffect(() => {
+    return () => {
+      map.off("mousemove", onMouseMoveMap);
+      map.off("mouseout", onMouseOutMap);
+      map.off("click", onClickMap);
+      map.getContainer().style.cursor = "default";
+      clearMeasure();
+    };
+  }, []);
+  return { statusEdition, magnitudFactor, value };
+}
+export {
+  useMeasure as u
+};

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

@@ -0,0 +1,13 @@
+import { MagnitudeFactorItem } from '../../../../../../../../../GpsMapTools/types';
+export type MeasurePoint = {
+    marker: L.Marker;
+    labelMarker: L.Marker;
+    formatDistanceFromPrevious: string | undefined;
+};
+export interface RefCurrentMeasure {
+    dragging: boolean;
+    addMarker: boolean;
+    measurePoints: Array<MeasurePoint>;
+    layerLine?: L.Polyline;
+    magnitudFactor: MagnitudeFactorItem;
+}

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

@@ -0,0 +1,13 @@
+import * as Yup from 'yup';
+/**
+ * TODO: Documentar
+ */
+export declare function useValidation(): {
+    validationSchema: Yup.ObjectSchema<{
+        [x: string]: Yup.AnySchema | import('yup/lib/Reference').default<unknown> | import('yup/lib/Lazy').default<any, any>;
+    }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
+        [x: string]: Yup.AnySchema | import('yup/lib/Reference').default<unknown> | import('yup/lib/Lazy').default<any, any>;
+    }>, import('yup/lib/object').AssertsShape<{
+        [x: string]: Yup.AnySchema | import('yup/lib/Reference').default<unknown> | import('yup/lib/Lazy').default<any, any>;
+    }>>;
+};

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

@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import * as Yup from "yup";
+import { M as MeasureDataValidation } from "../subcomponents/MeasureData/validations.js";
+function useValidation() {
+  const { getLabel } = useModuleDictionary();
+  const validationSchema = useMemo(
+    () => Yup.object().shape({
+      ...MeasureDataValidation()
+    }),
+    [getLabel]
+  );
+  return { validationSchema };
+}
+export {
+  useValidation as u
+};

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

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

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

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { RHFormProvider, Stack } from "@m4l/components";
+import { M as MyActions } from "./subcomponents/MyActions/index.js";
+import { u as useValidation } from "./hooks/useValidation.js";
+import { I as INITIAL_FORM_VALUES } from "./constants.js";
+import { M as MeasureData } from "./subcomponents/MeasureData/index.js";
+import { useModuleDictionary } from "@m4l/core";
+import { M as MAP_DICCTIONARY } from "../../../../../../dictionary.js";
+import { m as mapClasses } from "../../../../../../classes/index.js";
+function MeasureTool() {
+  const { getLabel } = useModuleDictionary();
+  const finalInitalValues = {
+    ...INITIAL_FORM_VALUES
+  };
+  if (finalInitalValues?.magnitudFactor?.name) {
+    finalInitalValues.magnitudFactor.name = getLabel(
+      MAP_DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS
+    );
+  }
+  const { validationSchema } = useValidation();
+  const onSubmit = () => {
+  };
+  return /* @__PURE__ */ jsxs(
+    RHFormProvider,
+    {
+      className: mapClasses.meaureToolRoot,
+      statusLoad: INITIAL_FORM_VALUES.statusLoad,
+      onSubmit,
+      values: finalInitalValues,
+      validationSchema,
+      children: [
+        /* @__PURE__ */ jsx(Stack, { direction: "column", children: /* @__PURE__ */ jsx(MeasureData, {}) }),
+        /* @__PURE__ */ jsx(MyActions, {})
+      ]
+    }
+  );
+}
+export {
+  MeasureTool as M
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Modelo de datos proveniente del endpoint list de magnitudes/factors
+ */
+export interface MagnitudesFactorsListModel {
+    /**
+     * id de la magnitude
+     */
+    id: string;
+    /**
+     * "name" nombre dado por el cliente a la geocerca
+     */
+    name: string;
+    /**
+     * "symbol" simbolo que sirve como unidad de medida
+     */
+    symbol: string;
+}

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

@@ -0,0 +1,5 @@
+/**
+ * subComponente que visualizar la medida que actualmente se haciendo sobre el mapa
+ * @returns
+ */
+export declare function MeasureData(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { RHFAutocompleteAsync, Stack } from "@m4l/components";
+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";
+function MeasureData() {
+  const { getLabel } = useModuleDictionary();
+  const { value, magnitudFactor } = useMeasure();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocompleteAsync,
+      {
+        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
+      }
+    ),
+    /* @__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 })
+    ] })
+  ] });
+}
+export {
+  MeasureData as M
+};

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

@@ -0,0 +1,6 @@
+import { MagnitudeFactorItem, MeasureTypeId } from '../../../../../../../../../GpsMapTools/types';
+export interface FormGeneralDataValues {
+    measureTypeId: MeasureTypeId;
+    magnitudFactor?: MagnitudeFactorItem | null;
+    unitArea?: MagnitudeFactorItem | null;
+}

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

@@ -0,0 +1,2 @@
+import { GetLabelType } from '@m4l/core';
+export declare function MeasureDataValidation(_getLabel: GetLabelType): {};

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

@@ -0,0 +1,6 @@
+function MeasureDataValidation(_getLabel) {
+  return {};
+}
+export {
+  MeasureDataValidation as M
+};

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

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

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useWatch } from "react-hook-form";
+import { ActionsContainer, Button } from "@m4l/components";
+import { useModuleDictionary } from "@m4l/core";
+import { M as MAP_DICCTIONARY } from "../../../../../../../../dictionary.js";
+function MyActions() {
+  const { control, setValue } = useFormContext();
+  const { getLabel } = useModuleDictionary();
+  const fieldsWatch = useWatch({
+    control,
+    name: ["statusEdition", "reInits"]
+  });
+  const statusEdition = fieldsWatch[0];
+  const initCancelDraw = () => {
+    if (statusEdition === "initial") {
+      setValue("statusEdition", "draw");
+    } else if (statusEdition === "draw") {
+      setValue("statusEdition", "initial");
+    }
+  };
+  return /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: initCancelDraw,
+      label: statusEdition === "initial" ? getLabel(MAP_DICCTIONARY.LABEL_MEASURE_START) : getLabel(MAP_DICCTIONARY.LABEL_MEASURE_CANCEL)
+    }
+  ) });
+}
+export {
+  MyActions as M
+};

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

@@ -0,0 +1,9 @@
+import { FormStatusLoad } from '@m4l/components';
+import { FormGeneralDataValues } from './subcomponents/MeasureData/types';
+export type StatusEdition = 'initial' | 'draw';
+export type FormMeasureValues = FormGeneralDataValues & {
+    statusLoad: FormStatusLoad;
+    reInits: number;
+    statusEdition: StatusEdition;
+    value: string | null;
+};

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

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

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

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useMap } from "react-leaflet";
+import { IconButton } from "@m4l/components";
+import { M as MAP_ICONS } from "../../../../../../icons.js";
+import { useEnvironment } from "@m4l/core";
+import { m as mapClasses } from "../../../../../../classes/index.js";
+function ZoomButtons() {
+  const map = useMap();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [, setZoomInDisabled] = useState(false);
+  const [, 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 = () => {
+    map.zoomIn();
+  };
+  const handleZoomOut = () => {
+    map.zoomOut();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: mapClasses.zoomButtons, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: handleZoomIn,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: handleZoomOut,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`
+      }
+    )
+  ] });
+}
+export {
+  ZoomButtons as Z
+};

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

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

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

@@ -0,0 +1,22 @@
+import { MapProps } from '../../types';
+export type Localization = {
+    /**
+     *  "lat" Posición en del eje "Y" en grados.
+     */
+    lat: number;
+    /**
+     *  "lng" Posición en del eje "X" en grados.
+     */
+    lng: number;
+};
+export type Point = {
+    /**
+     *  "x" Posición en del eje "X" en pixeles.
+     */
+    x: number;
+    /**
+     *  "y" Posición en del eje "Y" en pixeles.
+     */
+    y: number;
+};
+export type ControlsProps = Pick<MapProps, 'tools'>;

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+/**
+ * TODO: Documentar
+ */
+export declare const LayersContainer: React.FC;

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

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { shallow } from "zustand/shallow";
+import { M as MyLayer } from "./subcomponents/MyLayer/index.js";
+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 { 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 map = useMap();
+  useAutoFocus();
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    L__default.control.scale().addTo(map);
+    return () => {
+      L__default.control.scale().remove();
+    };
+  }, [map]);
+  if (isSkeleton) {
+    return null;
+  }
+  if (!map) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(React.Fragment, { children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, { layerId: l }, l)) });
+};
+export {
+  LayersContainer as L
+};

package/components/maps/components/GpsMap/subcomponents/LayersContainer/subcomponents/MyLayer/index.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { LayerProps } from './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 MyLayer: React.FC<LayerProps>;