@m4l/components 0.2.1 → 0.2.3

package/components/maps/components/GpsTools/index.ed49dc90.js

@@ -0,0 +1,2313 @@
+import { createContext, useRef, useEffect, useState, useMemo, useCallback } from "react";
+import { createStore, useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment, useNetwork, useModulePrivileges, useHostTools, usePaginate } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { enableMapSet } from "immer";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { D as DynamicFilter } from "../../../DynamicFilter/index.69c2e381.js";
+import { S as SelectCellFormatter } from "../../../../react-data-grid.c5377916.js";
+import { e as columnDateFormatter, c as DataGrid } from "../../../DataGrid/index.71fae988.js";
+import { u as useMapToolsStore, a as useMapStore, m as mapClasses, M as MAP_ZINDEX_DEFAULT, b as MAP_ZINDEX_OVER_MAP } from "../Map/index.9fcc381d.js";
+import { u as useModal } from "../../../../hooks/useModal/index.05d1821e.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.1d1d9cd2.js";
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
+import { S as Stack } from "../../../mui_extended/Stack/index.0e53197c.js";
+import { B as Button } from "../../../mui_extended/Button/index.bd3371a3.js";
+import { useFormContext, useWatch } from "react-hook-form";
+import { H as HelperError } from "../../../hook-form/HelperError/index.66bbcac3.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.ccf731c1.js";
+import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.c7acf718.js";
+import { useMap, Polyline, Polygon, Popup, Circle } from "react-leaflet";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
+import * as L from "leaflet";
+import L__default from "leaflet";
+import { u as useTab } from "../../../../hooks/useTab/index.19c8a409.js";
+import { P as PaperForm } from "../../../PaperForm/index.637c8cb4.js";
+import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.31e92edb.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.22203742.js";
+import { P as PropertyValue } from "../../../PropertyValue/index.8fcce0c2.js";
+import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.259b6f38.js";
+import clsx from "clsx";
+import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.a85b2dab.js";
+import { T as Tooltip } from "../../../mui_extended/Tooltip/index.24a2bc3f.js";
+import * as Yup from "yup";
+import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.16083a43.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7769076a.js";
+import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index.6c5648f7.js";
+import "leaflet-polylinedecorator";
+import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
+import "@geoman-io/leaflet-geoman-free";
+import { styled } from "@mui/material/styles";
+import { createPortal } from "react-dom";
+enableMapSet();
+const createMapToolsStore = (initProps) => {
+  const startProps = {
+    currentTabTool: "measure",
+    geofenceState: {
+      currentGeofenceTool: "add_edit",
+      rows: [],
+      checkedGeofences: /* @__PURE__ */ new Set(),
+      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
+      checkedInternalFeatures: /* @__PURE__ */ new Set(),
+      hashGeofences: {}
+    },
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        mapToolsActions: {
+          init: () => {
+            set((state) => {
+              state.ownerState.status = "ready";
+            });
+          },
+          setMapToolsState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+            });
+          },
+          setCurrentTabTool: (newTabTool) => {
+            set((state) => {
+              state.currentTabTool = newTabTool;
+            });
+          }
+        },
+        geofenceActions: {
+          goToAddEdit: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.currentGeofenceTool = "add_edit";
+              state.geofenceState.geofenceId = geofenceId;
+            });
+          },
+          goToList: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.currentGeofenceTool = "list";
+              state.geofenceState.geofenceId = geofenceId;
+            });
+          },
+          addGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = geofence;
+            });
+          },
+          updatePartialGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = { ...state.geofenceState.hashGeofences[geofenceId], ...geofence };
+            });
+          },
+          updateRows: (newRows) => {
+            set((state) => {
+              state.geofenceState.rows = newRows;
+            });
+          },
+          setCheckedGeofences: (newGeofences) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences = new Set(newGeofences);
+            });
+          },
+          setCheckedCrossingFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
+            });
+          },
+          setCheckedInternalFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
+            });
+          }
+        }
+      })),
+      { name: `Map Tools Store` }
+    )
+  );
+};
+const GpsToolsContext = createContext(null);
+function GpsToolsProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createMapToolsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
+      }
+    });
+  }
+  const {
+    setHandlerGetLabel,
+    setExternalState
+  } = useStore(mapStoreRef.current, (state) => state.mapToolsActions, shallow);
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(GpsToolsContext.Provider, {
+    value: mapStoreRef.current,
+    children
+  });
+}
+const DICCTIONARY = {
+  LABEL_TAB_GEO: "label_tab_geo",
+  TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
+  PAPER_GENERAL: "paper_general",
+  LABEL_ID: "label_id",
+  LABEL_NAME: "label_name",
+  LABEL_GEOMETRY_TYPE: "label_geometry_type",
+  LABEL_GEOMETRY_CIRCLE: "label_geometry_circle",
+  LABEL_GEOMETRY_RECTANGLE: "label_geometry_rectangle",
+  LABEL_GEOMETRY_POLYGON: "label_geometry_polygon",
+  LABEL_DRAW: "label_draw",
+  LABEL_FINISH: "label_finish",
+  PAPER_CONFIG: "paper_config",
+  LABEL_ALIAS: "label_alias",
+  LABEL_CUSTOMER_ID: "label_customer_id",
+  LABEL_TIME_MIN_IN_SECONDS: "label_time_min_in_seconds",
+  LABEL_TIME_MIN_OUT_SECONDS: "label_time_min_out_seconds",
+  TAB_STYLE_CONFIG_TOOLTIP: "tab_style_tooltip",
+  PAPER_STROKE: "paper_stroke",
+  LABEL_COLOR: "label_color",
+  LABEL_OPACITY: "label_opacity",
+  LABEL_WEIGHT: "label_weight",
+  LABEL_DASH_ARRAY: "label_dash_array",
+  LABEL_DASH_OFFSET: "label_dash_offset",
+  LABEL_RADIUS: "label_radius",
+  LABEL_LAT: "label_lat",
+  LABEL_LON: "label_lon",
+  LABEL_PLACE_MARKER: "label_place_marker",
+  LABEL_FIRST_VERTEX: "label_first_vertex",
+  LABEL_CONTINUE_LINE: "label_continue_line",
+  LABEL_FINISH_LINE: "label_finish_line",
+  LABEL_FINISH_POLY: "label_finish_poly",
+  LABEL_FINISH_RECT: "label_finish_rect",
+  LABEL_START_CIRCLE: "label_start_circle",
+  LABEL_FINISH_CIRCLE: "label_finish_circle",
+  LABEL_PLACE_CIRCLE_MARKER: "label_place_circle_marker",
+  VALIDATION_GEOMETRY_REQUIRED: "validation_geometry_required",
+  VALIDATION_FIELD_REQUIRED: "validation_field_required",
+  VALIDATION_FIELD_TYPE_NUMBER_ERROR: "validation_field_type_number_error",
+  LABEL_VIEW_TRANSIT_FEATURES: "label_view_crossing_features",
+  LABEL_VIEW_INTERNAL_FEATURES: "label_view_internal_features",
+  LABEL_CREATED_AT: "label_created_at",
+  LABEL_UPDATED_AT: "label_updated_at",
+  MODAL_DELETE_GEO_TITLE: "modal_delete_geo_title",
+  MODAL_DELETE_GEO_MESSAGE: "modal_delete_geo_message",
+  MODAL_DISABLE_GEO_TITLE: "modal_disable_geo_title",
+  MODAL_DISABLE_MESSAGE: "modal_disable_geo_message",
+  ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
+  ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
+  ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
+  ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
+  LABEL_TAB_MEASURE: "label_tab_measure",
+  PAPER_MEASURE: "paper_measure",
+  LABEL_MEASURE_START: "label_measure_start",
+  LABEL_MEASURE_RESTART: "label_measure_restart",
+  LABEL_MEASURE_DISTANCE: "label_measure_distance",
+  LABEL_MEASURE_AREA: "label_measure_area",
+  LABEL_MEASURE_UNIT: "label_measure_unit",
+  LABEL_MEASURE_UNIT_BASE_KILOMETERS: "label_measure_unit_base_kilometers",
+  LABEL_MEASURE_REMOVE_POINT: "label_measure_remove_point"
+};
+const COMPONENT_CLASS_NAME = "M4LGpsTools";
+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 icons = {
+  GEOMETRY_CIRCLE: "geometry_circle.svg",
+  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
+  GEOMETRY_POLYGON: "geometry_polygon.svg",
+  ADD: "add.svg",
+  MEASURE: "measure.svg",
+  GENERAL: "general.svg",
+  CONFIG: "config.svg",
+  STROKE: "stroke.svg",
+  FILL: "fill.svg",
+  EDIT: "edit.svg",
+  DELETE: "delete.svg",
+  ACTIVE: "active.svg",
+  NAME: "name.svg"
+};
+function Filter(props) {
+  const {
+    refresh,
+    setBackendQueryParams
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const [initialFilter] = useState(() => {
+    return [];
+  });
+  const onChangeFilter = (initialFilters, rawFilters) => {
+    setBackendQueryParams({
+      f: rawFilters
+    });
+    refresh();
+  };
+  return /* @__PURE__ */ jsx(DynamicFilter, {
+    withAllField: true,
+    onChangeFilters: onChangeFilter,
+    fields: [{
+      name: "id",
+      dictionaryId: DICCTIONARY.LABEL_ID,
+      type: "number",
+      multiple: true,
+      presence: "optional",
+      urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${icons.ACTIVE}`,
+      defaultOperand1: true
+    }, {
+      name: "name",
+      dictionaryId: DICCTIONARY.LABEL_NAME,
+      type: "string",
+      multiple: true,
+      presence: "optional",
+      urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${icons.NAME}`
+    }],
+    initialApplyedFilters: initialFilter
+  });
+}
+function ColumnSetCheckFormatter(parameters) {
+  const {
+    field,
+    rowKeyGetter,
+    useHook
+  } = parameters;
+  const formatter = (props) => {
+    const {
+      row
+    } = props;
+    const [checkedRows, setCheckedRows] = useHook(field);
+    const onChange = (checked, _isShiftClick) => {
+      const newCheckedRows = new Set(checkedRows);
+      if (checked) {
+        newCheckedRows.add(rowKeyGetter(props.row));
+      } else {
+        newCheckedRows.delete(rowKeyGetter(props.row));
+      }
+      setCheckedRows(newCheckedRows);
+    };
+    return /* @__PURE__ */ jsx(SelectCellFormatter, {
+      value: checkedRows.has(rowKeyGetter(row)) || false,
+      isCellSelected: props.isCellSelected,
+      onChange,
+      "aria-label": "Select"
+    });
+  };
+  return formatter;
+}
+function useColumns(props) {
+  const {
+    rowKeyGetter
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const useHook = (field) => {
+    return useMapToolsStore((state) => {
+      return field === "CrossingFeatures" ? [state.geofenceState.checkedCrossingFeatures, state.geofenceActions.setCheckedCrossingFeatures] : [state.geofenceState.checkedInternalFeatures, state.geofenceActions.setCheckedInternalFeatures];
+    }, shallow);
+  };
+  const columns = useMemo(() => [{
+    key: "id",
+    name: getLabel(DICCTIONARY.LABEL_ID),
+    type: "number",
+    width: 40,
+    visible: false
+  }, {
+    key: "name",
+    name: getLabel(DICCTIONARY.LABEL_NAME),
+    type: "string",
+    width: 300
+  }, {
+    key: "checkedCrossingFeatures",
+    name: getLabel(DICCTIONARY.LABEL_VIEW_TRANSIT_FEATURES),
+    width: 80,
+    type: "boolean",
+    formatter: ColumnSetCheckFormatter({
+      field: "CrossingFeatures",
+      rowKeyGetter,
+      useHook
+    }),
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "checkedInternalFeatures",
+    name: getLabel(DICCTIONARY.LABEL_VIEW_INTERNAL_FEATURES),
+    width: 80,
+    type: "boolean",
+    formatter: ColumnSetCheckFormatter({
+      field: "InternalFeatures",
+      rowKeyGetter,
+      useHook
+    }),
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "created_at",
+    name: getLabel(DICCTIONARY.LABEL_CREATED_AT),
+    type: "date",
+    formatter: columnDateFormatter({
+      presentationType: "datetime",
+      fieldValue: "row.created_at"
+    })
+  }, {
+    key: "updated_at",
+    name: getLabel(DICCTIONARY.LABEL_UPDATED_AT),
+    type: "date",
+    formatter: columnDateFormatter({
+      presentationType: "datetime",
+      fieldValue: "row.updated_at"
+    })
+  }], [getLabel]);
+  return {
+    columns
+  };
+}
+const ENDPOINT_GEOFENCE_GET = "geofences";
+const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
+var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES"] = "geofences";
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES_TRANSIT_FEATURES"] = "geofencesCrossingFeatures";
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
+  return GeofencesFeaturesLayers2;
+})(GeofencesFeaturesLayers || {});
+function useRowActionsGetter(props) {
+  const {
+    fullRefresh
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    hasPrivilege
+  } = useModulePrivileges();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    goToAddEdit
+  } = useMapToolsStore((state) => state.geofenceActions, shallow);
+  const {
+    removeFeature
+  } = useMapStore((state) => state.mapActions, shallow);
+  const {
+    toast
+  } = useHostTools();
+  const isDesktop = useResponsiveDesktop();
+  const [urlIconEdit] = useState(`${host_static_assets}/${environment_assets}/frontend/components/maptools/assets/icons/${icons.EDIT}`);
+  const [urlIconDelete] = useState(`${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/maptools/assets/icons/${icons.DELETE}`);
+  const goEdit = useCallback((objectId) => {
+    goToAddEdit(objectId);
+    removeFeature(GeofencesFeaturesLayers.LAYER_GEOFENCES, objectId);
+  }, [getLabel]);
+  const onDelete = useCallback((row) => {
+    openModal({
+      window: /* @__PURE__ */ jsx(WindowConfirm, {
+        title: getLabel(DICCTIONARY.MODAL_DELETE_GEO_TITLE),
+        msg: getLabel(DICCTIONARY.MODAL_DELETE_GEO_MESSAGE),
+        onClickIntro: () => onConfirmDelete(row)
+      }),
+      variant: "delete",
+      initialWidth: 300,
+      initialHeigth: 350
+    });
+  }, [getLabel]);
+  const onConfirmDelete = useCallback((row) => {
+    networkOperation({
+      method: "DELETE",
+      endPoint: `geofences/${row.id}`
+    }).then((response) => {
+      toast(response.message, {
+        type: "success"
+      });
+      fullRefresh();
+    });
+    closeModal();
+  }, []);
+  const rowActionsGetter = useCallback((row) => {
+    const conditionalItems = [];
+    conditionalItems.push({
+      urlIcon: urlIconEdit,
+      dictionaryId: DICCTIONARY.ROW_ACTION_GEO_EDIT,
+      onClick: () => {
+        goEdit(row.id);
+      },
+      disabled: !row.authUserOptions.edit
+    });
+    return conditionalItems;
+  }, [hasPrivilege, goEdit, onDelete, urlIconDelete, urlIconEdit, isDesktop]);
+  return {
+    rowActionsGetter
+  };
+}
+function useCheckedGeofences() {
+  const [checkedGeofences, hashGeofences] = useMapToolsStore((state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences], shallow);
+  const {
+    setCheckedGeofences,
+    updatePartialGeofence
+  } = useMapToolsStore((state) => state.geofenceActions, shallow);
+  const {
+    setFeatureData,
+    removeFeature,
+    getFeatureIds
+  } = useMapStore((state) => state.mapActions, shallow);
+  const {
+    networkOperation
+  } = useNetwork();
+  useEffect(() => {
+    const mapFeatureIds = getFeatureIds(GeofencesFeaturesLayers.LAYER_GEOFENCES);
+    checkedGeofences.forEach((chkRow) => {
+      const geofence = hashGeofences[chkRow];
+      if (!geofence) {
+        return;
+      }
+      if (!mapFeatureIds.includes(chkRow) || !geofence.hasRenderizedGeofence) {
+        if (!geofence.geometry) {
+          networkOperation({
+            method: "GET",
+            endPoint: `geofences/${geofence.id}`,
+            isRemote: false,
+            responseToCamelCase: true
+          }).then((response) => {
+            console.log("onCheckedRowsChange response:", response.data);
+            const geoLoaded = {
+              geometry: response.data.geometry,
+              properties: response.data.properties,
+              countCrossingFeatures: response.data.countCrossingFeatures,
+              hasRenderizedGeofence: false
+            };
+            if (geoLoaded.geometry) {
+              if (checkedGeofences.has(geofence.id)) {
+                setFeatureData("geofences", chkRow, geoLoaded.geometry, geoLoaded.properties);
+                geoLoaded.hasRenderizedGeofence = true;
+              }
+            }
+            updatePartialGeofence(geofence.id, geoLoaded);
+          });
+        } else {
+          setFeatureData(GeofencesFeaturesLayers.LAYER_GEOFENCES, chkRow, geofence.geometry, geofence.properties);
+          updatePartialGeofence(geofence.id, {
+            hasRenderizedGeofence: true
+          });
+        }
+      }
+    });
+    mapFeatureIds.forEach((mapFeatureId) => {
+      if (!checkedGeofences.has(Number(mapFeatureId))) {
+        removeFeature(GeofencesFeaturesLayers.LAYER_GEOFENCES, mapFeatureId);
+      }
+    });
+    return () => {
+    };
+  }, [checkedGeofences]);
+  return {
+    checkedGeofences,
+    setCheckedGeofences
+  };
+}
+function useCheckedFeatures(layerId, featuresType, endpoint) {
+  const [checkedFeatures, setCheckedFeatures, hashGeofences] = useMapToolsStore((state) => {
+    return featuresType === "CrossingFeatures" ? [state.geofenceState.checkedCrossingFeatures, state.geofenceActions.setCheckedCrossingFeatures, state.geofenceState.hashGeofences] : [state.geofenceState.checkedInternalFeatures, state.geofenceActions.setCheckedInternalFeatures, state.geofenceState.hashGeofences];
+  }, shallow);
+  const {
+    setFeatureData,
+    removeFeature,
+    getFeatureIds
+  } = useMapStore((state) => state.mapActions, shallow);
+  const {
+    networkOperation
+  } = useNetwork();
+  useEffect(() => {
+    const mapFeatureIds = getFeatureIds(layerId);
+    checkedFeatures.forEach((chkRow) => {
+      const geofence = hashGeofences[chkRow];
+      if (!geofence) {
+        return;
+      }
+      if (!mapFeatureIds.find((fId) => fId.toString().includes(`geo_${geofence.id}_fid`)) || !geofence[`hasRenderized${featuresType}`]) {
+        const currentGeofenceLoadedFeatures = geofence[`loaded${featuresType}`];
+        if (!currentGeofenceLoadedFeatures) {
+          networkOperation({
+            method: "GET",
+            endPoint: `geofences/${geofence.id}/${endpoint}`,
+            isRemote: false,
+            responseToCamelCase: true
+          }).then((response) => {
+            console.log("onCheckedGeometriesChange response:", response.data);
+            geofence[`loaded${featuresType}`] = response.data;
+            const newGeofenceLoadedFeatures = geofence[`loaded${featuresType}`];
+            if (newGeofenceLoadedFeatures && Array.isArray(geofence[`loaded${featuresType}`])) {
+              if (checkedFeatures.has(geofence.id)) {
+                newGeofenceLoadedFeatures.forEach((feature) => {
+                  setFeatureData(layerId, `geo_${geofence.id}_fid_${feature.id}`, feature.geometry, feature.properties);
+                });
+                geofence[`hasRenderized${featuresType}`] = true;
+              }
+            }
+          }).catch(() => {
+          });
+        } else {
+          currentGeofenceLoadedFeatures.forEach((feature) => {
+            setFeatureData(layerId, `geo_${geofence.id}_fid_${feature.id}`, feature.geometry, feature.properties);
+          });
+          geofence[`hasRenderized${featuresType}`] = true;
+        }
+      }
+    });
+    mapFeatureIds.forEach((mapFeatureId) => {
+      const featureId = Number(mapFeatureId.toString().split("_")[1]);
+      if (!checkedFeatures.has(featureId)) {
+        removeFeature(layerId, mapFeatureId);
+      }
+    });
+    return () => {
+    };
+  }, [checkedFeatures]);
+  return [checkedFeatures, setCheckedFeatures];
+}
+function useMaster() {
+  const {
+    goToAddEdit
+  } = useMapToolsStore((state) => state.geofenceActions, shallow);
+  const [checkedGeofences, hashGeofences, initialRows] = useMapToolsStore((state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences, state.geofenceState.rows], shallow);
+  const {
+    setCheckedGeofences,
+    addGeofence,
+    updatePartialGeofence,
+    updateRows
+  } = useMapToolsStore((state) => state.geofenceActions, shallow);
+  useCheckedGeofences();
+  const [checkedCrossingFeatures, setCheckedCrossingFeatures] = useCheckedFeatures(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES, "CrossingFeatures", "crossing_features");
+  const [checkedInternalFeatures, setCheckedInternalFeatures] = useCheckedFeatures(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES, "InternalFeatures", "internal_features");
+  const rowKeyGetter = useCallback((row) => row.id, []);
+  const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
+  const [backendQueryParams, setBackendQueryParams] = useState({});
+  const {
+    columns
+  } = useColumns({
+    rowKeyGetter
+  });
+  const {
+    pagerState,
+    rows,
+    onPageChange,
+    onRowsPerPageChange,
+    Refresh,
+    setRows
+  } = usePaginate({
+    endPoint: "geofences",
+    fireOnChangeParms: false,
+    fireOnFirstLoad: false,
+    queryParams: backendQueryParams,
+    isRemote: false,
+    responseToCamelCase: true,
+    initialRows
+  });
+  const onSelectedRowsChange = (newRowsSelectSet) => {
+    setSelectedRows(newRowsSelectSet);
+  };
+  const fullRefresh = useCallback((id) => {
+    Refresh();
+  }, []);
+  useEffect(() => {
+    const newCheckedGeofences = new Set(checkedGeofences);
+    const newCheckedCrossingFeatures = new Set(checkedCrossingFeatures);
+    const newCheckedInternalFeatures = new Set(checkedInternalFeatures);
+    let updatedCheckedGeofences = false;
+    let updatedCheckedCrossingFeatures = false;
+    let updatedCheckedInternalFeatures = false;
+    newCheckedGeofences.forEach((chkRow) => {
+      if (rows.findIndex((row) => row.id === chkRow) === -1) {
+        newCheckedGeofences.delete(chkRow);
+      }
+    });
+    newCheckedCrossingFeatures.forEach((chkTF) => {
+      if (rows.findIndex((row) => row.id === chkTF) === -1) {
+        newCheckedCrossingFeatures.delete(chkTF);
+      }
+    });
+    newCheckedInternalFeatures.forEach((chkIF) => {
+      if (rows.findIndex((row) => row.id === chkIF) === -1) {
+        newCheckedInternalFeatures.delete(chkIF);
+      }
+    });
+    rows.forEach((row) => {
+      let hasGeo = hashGeofences[row.id];
+      if (!hasGeo) {
+        hasGeo = {
+          ...row,
+          hasRenderizedGeofence: false,
+          loadedCrossingFeatures: null,
+          loadedInternalFeatures: null,
+          hasRenderizedCrossingFeatures: false,
+          hasRenderizedInternalFeatures: false,
+          createdAt: row.createdAt
+        };
+        addGeofence(row.id, hasGeo);
+        return;
+      }
+      if (row.updatedAt && row.updatedAt !== hasGeo.updatedAt) {
+        updatePartialGeofence(row.id, {
+          updatedAt: row.updatedAt,
+          geometry: null,
+          hasRenderizedGeofence: false,
+          hasRenderizedCrossingFeatures: false,
+          hasRenderizedInternalFeatures: false,
+          loadedCrossingFeatures: null,
+          loadedInternalFeatures: null
+        });
+        updatedCheckedGeofences = true;
+        updatedCheckedCrossingFeatures = true;
+        updatedCheckedInternalFeatures = true;
+      }
+    });
+    if (newCheckedGeofences.size !== checkedGeofences.size || updatedCheckedGeofences) {
+      setCheckedGeofences(newCheckedGeofences);
+    }
+    if (newCheckedCrossingFeatures.size !== checkedCrossingFeatures.size || updatedCheckedCrossingFeatures) {
+      setCheckedCrossingFeatures(newCheckedCrossingFeatures);
+    }
+    if (newCheckedInternalFeatures.size !== checkedInternalFeatures.size || updatedCheckedInternalFeatures) {
+      setCheckedInternalFeatures(newCheckedInternalFeatures);
+    }
+    onSelectedRowsChange(selectedRows);
+    updateRows(rows);
+  }, [rows]);
+  const {
+    rowActionsGetter
+  } = useRowActionsGetter({
+    fullRefresh
+  });
+  return {
+    rowKeyGetter,
+    columns,
+    refresh: Refresh,
+    setBackendQueryParams,
+    pagerState,
+    rows,
+    onPageChange,
+    onRowsPerPageChange,
+    rowActionsGetter,
+    selectedRows,
+    onSelectedRowsChange,
+    checkedRows: checkedGeofences,
+    onCheckedRowsChange: setCheckedGeofences,
+    setRows,
+    goToAddEdit
+  };
+}
+const mapToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "tabToolsRoot",
+  "tabContentRoot",
+  "toolGeofences",
+  "toolGeofencesList",
+  "toolGeofencesAddEdit",
+  "toolGeofencesAddEditGeneral",
+  "toolGeofencesAddEditStyle",
+  "toolMeasureFormValue",
+  "toolMeasureFormValueDistance",
+  "toolMeasureFormValueSymbol",
+  "toolMeasure",
+  "toolMeausureLabel",
+  "toolMeausureLabelDistance",
+  "toolMeausureLabelSymbol",
+  "visible",
+  "hidden"
+]);
+function GeofencesList() {
+  const {
+    refresh,
+    setBackendQueryParams,
+    columns,
+    rows,
+    rowActionsGetter,
+    selectedRows,
+    onSelectedRowsChange,
+    pagerState,
+    onPageChange,
+    onRowsPerPageChange,
+    checkedRows,
+    onCheckedRowsChange,
+    setRows,
+    rowKeyGetter,
+    goToAddEdit
+  } = useMaster();
+  return /* @__PURE__ */ jsxs(Stack, {
+    direction: "column",
+    gap: "4px",
+    className: mapToolsClasses.toolGeofencesList,
+    children: [/* @__PURE__ */ jsx(Button, {
+      onClick: () => goToAddEdit(),
+      children: "Agregar geocerca"
+    }), /* @__PURE__ */ jsx(Filter, {
+      refresh,
+      setBackendQueryParams
+    }), /* @__PURE__ */ jsx(DataGrid, {
+      id: "geofences",
+      columns,
+      rows,
+      onRowsChange: setRows,
+      checkedRows,
+      onCheckedRowsChange,
+      rowActionsGetter,
+      rowKeyGetter,
+      selectedRows,
+      onSelectedRowsChange,
+      withActions: true,
+      actionsProps: {
+        withPager: true,
+        withLocalFilters: true,
+        pagerOptions: {
+          records: rows.length,
+          totalRecords: pagerState.totalRecords,
+          rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
+          page: pagerState.page,
+          rowsPerPage: pagerState.rowsPerPage,
+          onPageChange,
+          onRowsPerPageChange
+        }
+      }
+    }, "list")]
+  });
+}
+function MyActions$1() {
+  const {
+    control
+  } = useFormContext();
+  const inEdition = useWatch({
+    control,
+    name: "inEdition"
+  });
+  const {
+    goToList
+  } = useMapToolsStore((state) => state.geofenceActions);
+  return /* @__PURE__ */ jsxs(Actions, {
+    children: [/* @__PURE__ */ jsx(HelperError, {
+      name: "geometry"
+    }), /* @__PURE__ */ jsx(Button, {
+      onClick: () => {
+        goToList();
+      },
+      disabled: inEdition,
+      children: "Cancelar"
+    }), /* @__PURE__ */ jsx(ActionFormIntro, {
+      disabled: inEdition
+    })]
+  });
+}
+const STROKE_COLOR_DEFAULT = "#aaccaa";
+const STROKE_OPACITY_DEFAULT = { value: 1, label: "100%" };
+const STROKE_WHEIGTH_DEFAULT = { value: 1, label: "1 px" };
+const STROKE_DASH_ARRAY_DEFAULT = { value: "", label: "-----" };
+const FILL_COLOR_DEFAULT = "#aa3000";
+const FILL_OPACITY_DEFAULT = { value: 0.2, label: "20%" };
+const initialValues = {
+  name: "",
+  geofenceType: null,
+  alias: null,
+  customerId: null,
+  timeMinInSeconds: 5,
+  timeMinOutSeconds: 5,
+  inEdition: false,
+  geometry: null,
+  lat: null,
+  lng: null,
+  properties: {
+    radius: null,
+    strokeColor: STROKE_COLOR_DEFAULT,
+    strokeOpacity: STROKE_OPACITY_DEFAULT,
+    strokeWeight: STROKE_WHEIGTH_DEFAULT,
+    strokeDashArray: STROKE_DASH_ARRAY_DEFAULT,
+    fillColor: FILL_COLOR_DEFAULT,
+    fillOpacity: FILL_OPACITY_DEFAULT
+  }
+};
+const formatDataEnpoint = (response) => {
+  try {
+    const { data } = response;
+    const obRet = {
+      ...initialValues,
+      inEdition: false,
+      name: data.name,
+      geometry: data.geometry,
+      geofenceType: { id: data.type.id, name: data.type.name, url: "" },
+      properties: {
+        strokeColor: data.properties.strokeColor || STROKE_COLOR_DEFAULT,
+        strokeOpacity: data.properties.strokeOpacity || STROKE_OPACITY_DEFAULT,
+        strokeWeight: data.properties.strokeWeight || STROKE_WHEIGTH_DEFAULT,
+        strokeDashArray: data.properties.strokeDashArray || STROKE_DASH_ARRAY_DEFAULT,
+        fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
+        fillOpacity: data.properties.fillOpacity || FILL_OPACITY_DEFAULT
+      }
+    };
+    if (obRet.geofenceType?.id === "gt_circle") {
+      if (data.properties.radius) {
+        obRet.properties.radius = data.properties.radius;
+      }
+      if (data.geometry && data.geometry.type === "Point") {
+        obRet.lng = data.geometry.coordinates[0];
+        obRet.lat = data.geometry.coordinates[1];
+      }
+    }
+    return obRet;
+  } catch (error) {
+    return { ...initialValues };
+  }
+};
+const getLayerFromGeometry = (geometry, geofenceTypeId, radius) => {
+  if (geometry) {
+    if (geofenceTypeId === "gt_circle" && geometry.type === "Point") {
+      return L.circle([geometry.coordinates[1], geometry.coordinates[0]], radius || 0);
+    } else if (geofenceTypeId === "gt_polygon" && geometry.type === "Polygon") {
+      const coordinates = geometry.coordinates.map(
+        (ring) => ring.map((position) => [position[1], position[0]])
+      );
+      return L.polygon(coordinates);
+    } else if (geofenceTypeId === "gt_rectangle" && geometry.type === "Polygon") {
+      const latLngs = geometry.coordinates[0].map((coord) => [coord[1], coord[0]]);
+      const lats = latLngs.map((coord) => coord);
+      const lngs = latLngs.map((coord) => coord);
+      const southWest = [Math.min(...lats), Math.min(...lngs)];
+      const northEast = [Math.max(...lats), Math.max(...lngs)];
+      return L.rectangle([southWest, northEast]);
+    }
+  }
+  return null;
+};
+function useDrawing() {
+  const { getLabel } = useModuleDictionary();
+  const readyToUpdate = useFormReadyForUpdate();
+  const map = useMap();
+  const { control, setValue } = useFormContext();
+  const fieldsWatch = useWatch({
+    control,
+    name: [
+      "geofenceType",
+      "inEdition",
+      "properties.strokeColor",
+      "properties.strokeOpacity",
+      "properties.strokeWeight",
+      "properties.strokeDashArray",
+      "properties.fillColor",
+      "properties.fillOpacity",
+      "geometry",
+      "properties.radius"
+    ]
+  });
+  const geofenceTypeId = fieldsWatch[0]?.id;
+  const inEdition = fieldsWatch[1];
+  const strokeColor = fieldsWatch[2];
+  const strokeOpacity = fieldsWatch[3].value;
+  const strokeWeight = fieldsWatch[4].value;
+  const strokeDashArray = fieldsWatch[5].value;
+  const fillColor = fieldsWatch[6];
+  const fillOpacity = fieldsWatch[7].value;
+  const geometry = fieldsWatch[8];
+  const radius = fieldsWatch[9];
+  const [drawing, setDrawing] = useState(false);
+  const currentLayer = useRef(null);
+  const [geometrTypeIdCached, setgeofenceTypeIdCached] = useState(geofenceTypeId);
+  useEffect(() => {
+    if (geometry) {
+      currentLayer.current = getLayerFromGeometry(geometry, geofenceTypeId, radius);
+      if (currentLayer.current) {
+        map.addLayer(currentLayer.current);
+      }
+    }
+    return () => {
+      if (currentLayer.current) {
+        currentLayer.current.remove();
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    if (currentLayer.current) {
+      currentLayer.current.setStyle({
+        color: strokeColor,
+        opacity: strokeOpacity,
+        weight: strokeWeight,
+        dashArray: strokeDashArray,
+        fillColor,
+        fillOpacity
+      });
+    }
+  }, [strokeColor, strokeOpacity, strokeWeight, strokeDashArray, fillColor, fillOpacity]);
+  useEffect(() => {
+    map.pm.setLang("en", {
+      tooltips: {
+        placeMarker: void 0,
+        firstVertex: getLabel(DICCTIONARY.LABEL_FIRST_VERTEX),
+        continueLine: getLabel(DICCTIONARY.LABEL_CONTINUE_LINE),
+        finishLine: getLabel(DICCTIONARY.LABEL_FINISH_LINE),
+        finishPoly: getLabel(DICCTIONARY.LABEL_FINISH_POLY),
+        finishRect: getLabel(DICCTIONARY.LABEL_FINISH_RECT),
+        startCircle: getLabel(DICCTIONARY.LABEL_START_CIRCLE),
+        finishCircle: getLabel(DICCTIONARY.LABEL_FINISH_CIRCLE),
+        placeCircleMarker: getLabel(DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER)
+      }
+    });
+  }, [map, getLabel]);
+  useEffect(() => {
+    if (map) {
+      let shape = "Circle";
+      if (geometrTypeIdCached === "gt_polygon") {
+        shape = "Polygon";
+      } else if (geometrTypeIdCached === "gt_rectangle") {
+        shape = "Rectangle";
+      }
+      if (drawing) {
+        if (!currentLayer.current) {
+          setValue("inEdition", true);
+          if (shape === "Circle") {
+            map.on("pm:drawstart", ({ workingLayer }) => {
+              workingLayer.on("pm:centerplaced", (e) => {
+                var layer = e.workingLayer;
+                layer.setStyle(
+                  {
+                    color: strokeColor,
+                    opacity: strokeOpacity,
+                    weight: strokeWeight,
+                    dashArray: strokeDashArray,
+                    fillColor,
+                    fillOpacity
+                  }
+                );
+                setValue("lat", layer.getLatLng().lat);
+                setValue("lng", layer.getLatLng().lng);
+                layer.on("pm:change", (e2) => {
+                  setValue("properties.radius", layer.getRadius());
+                });
+              });
+            });
+            setValue("properties.subType", shape);
+          } else if (shape === "Polygon") {
+            map.on("pm:drawstart", ({ workingLayer }) => {
+              workingLayer.on("pm:vertexadded", (e) => {
+                var layer = e.workingLayer;
+                layer.setStyle(
+                  {
+                    color: strokeColor,
+                    opacity: strokeOpacity,
+                    weight: strokeWeight,
+                    dashArray: strokeDashArray,
+                    fillColor,
+                    fillOpacity
+                  }
+                );
+              });
+            });
+          }
+          map.pm.enableDraw(shape);
+          map.pm.setPathOptions(
+            {
+              color: strokeColor,
+              opacity: strokeOpacity,
+              weight: strokeWeight,
+              dashArray: strokeDashArray,
+              fillColor,
+              fillOpacity
+            }
+          );
+          map.on("pm:create", (e) => {
+            currentLayer.current = e.layer;
+            setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
+              shouldTouch: false,
+              shouldValidate: true
+            });
+            setValue("inEdition", false);
+            setDrawing(false);
+          });
+        } else {
+          currentLayer.current.pm.enable();
+          setValue("inEdition", true);
+          currentLayer.current.on("pm:disable", (e) => {
+            currentLayer.current = e.layer;
+            console.log("Geometr\xEDa editada **", currentLayer.current.toGeoJSON());
+            setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
+              shouldTouch: false,
+              shouldValidate: true
+            });
+            setValue("inEdition", false);
+            setDrawing(false);
+          });
+          if (shape === "Circle") {
+            currentLayer.current.on("pm:change", (e) => {
+              currentLayer.current = e.layer;
+              setValue("properties.radius", currentLayer.current.getRadius());
+            });
+          }
+        }
+      } else {
+        map.pm.disableDraw("Polygon");
+        map.off("pm:create");
+        map.off("pm:edit");
+        map.off("pm:drawstart");
+      }
+    }
+  }, [map, drawing]);
+  const handleDraw = useCallback(() => {
+    setDrawing(true);
+  }, []);
+  const handleFinish = useCallback(() => {
+    if (currentLayer.current) {
+      currentLayer.current.pm.disable();
+      currentLayer.current.setStyle({ color: "#ff0000", fillColor: "#ff0000" });
+    }
+  }, []);
+  useEffect(() => {
+    if (!readyToUpdate)
+      return;
+    if (geofenceTypeId) {
+      if (geofenceTypeId !== geometrTypeIdCached) {
+        setgeofenceTypeIdCached(geofenceTypeId);
+        if (geometrTypeIdCached !== "gt_circle") {
+          setValue("properties.radius", null);
+          setValue("lat", null);
+          setValue("lng", null);
+        }
+        setValue("geometry", null);
+        if (currentLayer.current) {
+          currentLayer.current.remove();
+          currentLayer.current = null;
+        }
+      }
+    }
+  }, [geofenceTypeId]);
+  return { inEdition, handleDraw, handleFinish, geometrTypeIdCached };
+}
+function useSumbitErrorsFocus() {
+  const {
+    setFocus,
+    formState: { isSubmitted, errors }
+  } = useFormContext();
+  const { handleChange } = useTab();
+  useEffect(() => {
+    if (isSubmitted) {
+      const firstError = Object.keys(errors).reduce((field, a) => {
+        const fieldKey = field;
+        return !!errors[fieldKey] ? fieldKey : a;
+      }, null);
+      if (firstError) {
+        let found = ["name", "geometry", "geofenceType", "timeMinInSeconds", "timeMinOutSeconds"].some((field) => field.includes(firstError));
+        if (found) {
+          handleChange(null, "general");
+        }
+        if (firstError) {
+          setFocus(firstError);
+        }
+      }
+    }
+  }, [isSubmitted, errors]);
+}
+function GeneralData() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    inEdition,
+    handleDraw,
+    handleFinish,
+    geometrTypeIdCached
+  } = useDrawing();
+  useSumbitErrorsFocus();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GENERAL}`;
+  const geofencesTypes = useMemo(() => {
+    return [{
+      id: "gt_circle",
+      name: getLabel(DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
+      url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_CIRCLE}`
+    }, {
+      id: "gt_polygon",
+      name: getLabel(DICCTIONARY.LABEL_GEOMETRY_POLYGON),
+      url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_POLYGON}`
+    }, {
+      id: "gt_rectangle",
+      name: getLabel(DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
+      url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_RECTANGLE}`
+    }];
+  }, [getLabel]);
+  return /* @__PURE__ */ jsxs(PaperForm, {
+    urlIcon,
+    title: getLabel(DICCTIONARY.PAPER_GENERAL),
+    children: [/* @__PURE__ */ jsx(RHFTextField, {
+      name: "name",
+      disabled: false,
+      type: "text",
+      label: getLabel(`${DICCTIONARY.LABEL_NAME}`)
+    }), /* @__PURE__ */ jsxs(Stack, {
+      direction: "column",
+      spacing: 1,
+      alignItems: "center",
+      children: [/* @__PURE__ */ jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        alignItems: "center",
+        children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "geofenceType",
+          autoComplete: "off",
+          options: geofencesTypes,
+          getOptionLabel: (option) => option.name,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          getOptionUrlImage: (option) => option.url,
+          imageHeight: "12px",
+          imageWidth: "12px",
+          label: getLabel(DICCTIONARY.LABEL_GEOMETRY_TYPE)
+        }), /* @__PURE__ */ jsx(Button, {
+          onClick: handleDraw,
+          disabled: inEdition || !geometrTypeIdCached,
+          children: getLabel(DICCTIONARY.LABEL_DRAW)
+        }), /* @__PURE__ */ jsx(Button, {
+          onClick: handleFinish,
+          disabled: !inEdition,
+          children: getLabel(DICCTIONARY.LABEL_FINISH)
+        })]
+      }), geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && /* @__PURE__ */ jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        alignItems: "center",
+        children: [/* @__PURE__ */ jsx(RHFTextField, {
+          name: "properties.radius",
+          label: getLabel(DICCTIONARY.LABEL_RADIUS),
+          autoComplete: "on",
+          skeletonWidth: "70%",
+          skeletonHeight: "18px",
+          disabled: true,
+          size: "medium"
+        }), /* @__PURE__ */ jsx(RHFTextField, {
+          name: "lat",
+          label: getLabel(DICCTIONARY.LABEL_LAT),
+          autoComplete: "on",
+          skeletonWidth: "70%",
+          skeletonHeight: "18px",
+          disabled: true,
+          size: "medium"
+        }), /* @__PURE__ */ jsx(RHFTextField, {
+          name: "lng",
+          label: getLabel(DICCTIONARY.LABEL_LON),
+          autoComplete: "on",
+          skeletonWidth: "70%",
+          skeletonHeight: "18px",
+          disabled: true,
+          size: "medium"
+        })]
+      })]
+    })]
+  });
+}
+function ConfigData() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.CONFIG}`;
+  return /* @__PURE__ */ jsxs(PaperForm, {
+    urlIcon,
+    title: getLabel(DICCTIONARY.PAPER_CONFIG),
+    children: [/* @__PURE__ */ jsx(RHFTextField, {
+      name: "alias",
+      disabled: false,
+      type: "text",
+      label: getLabel(`${DICCTIONARY.LABEL_ALIAS}`)
+    }), /* @__PURE__ */ jsx(RHFTextField, {
+      name: "customerId",
+      disabled: false,
+      type: "text",
+      label: getLabel(`${DICCTIONARY.LABEL_CUSTOMER_ID}`)
+    }), /* @__PURE__ */ jsx(RHFTextField, {
+      name: "timeMinInSeconds",
+      disabled: false,
+      type: "number",
+      label: getLabel(`${DICCTIONARY.LABEL_TIME_MIN_IN_SECONDS}`)
+    }), /* @__PURE__ */ jsx(RHFTextField, {
+      name: "timeMinOutSeconds",
+      disabled: false,
+      type: "number",
+      label: getLabel(`${DICCTIONARY.LABEL_TIME_MIN_OUT_SECONDS}`)
+    })]
+  });
+}
+function FillData() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.FILL}`;
+  return /* @__PURE__ */ jsxs(PaperForm, {
+    urlIcon,
+    title: getLabel(DICCTIONARY.PAPER_STROKE),
+    children: [/* @__PURE__ */ jsx(PropertyValue, {
+      property: getLabel(`${DICCTIONARY.LABEL_COLOR}`),
+      isForm: true,
+      propertyWidth: 150,
+      value: /* @__PURE__ */ jsx(RHFColorPicker, {
+        name: "properties.fillColor"
+      })
+    }, "properties.fillColor"), /* @__PURE__ */ jsx(PropertyValue, {
+      property: getLabel(`${DICCTIONARY.LABEL_OPACITY}`),
+      isForm: true,
+      propertyWidth: 150,
+      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
+        name: "properties.fillOpacity",
+        autoComplete: "off",
+        options: STYLE_OPACITIES,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        label: "ssss"
+      })
+    }, "properties.fillOpacity")]
+  });
+}
+function StrokeData() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.STROKE}`;
+  return /* @__PURE__ */ jsxs(PaperForm, {
+    urlIcon,
+    title: getLabel(DICCTIONARY.PAPER_STROKE),
+    children: [/* @__PURE__ */ jsx(PropertyValue, {
+      property: getLabel(`${DICCTIONARY.LABEL_COLOR}`),
+      isForm: true,
+      propertyWidth: 150,
+      value: /* @__PURE__ */ jsx(RHFColorPicker, {
+        name: "properties.strokeColor"
+      })
+    }, "properties.strokeColor"), /* @__PURE__ */ jsx(PropertyValue, {
+      property: getLabel(`${DICCTIONARY.LABEL_OPACITY}`),
+      isForm: true,
+      propertyWidth: 150,
+      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
+        name: "properties.strokeOpacity",
+        autoComplete: "off",
+        options: STYLE_OPACITIES,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        label: "ssss"
+      })
+    }, "properties.strokeOpacity"), /* @__PURE__ */ jsx(PropertyValue, {
+      property: getLabel(`${DICCTIONARY.LABEL_WEIGHT}`),
+      isForm: true,
+      propertyWidth: 150,
+      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
+        name: "properties.strokeWeight",
+        autoComplete: "off",
+        options: STYLE_WHEIGHTS,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        label: "ssss"
+      })
+    }, "properties.strokeWeight"), /* @__PURE__ */ jsx(PropertyValue, {
+      property: getLabel(`${DICCTIONARY.LABEL_DASH_ARRAY}`),
+      isForm: true,
+      propertyWidth: 150,
+      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
+        name: "properties.strokeDashArray",
+        autoComplete: "off",
+        options: STYLE_PATTERNS,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        label: "ssss"
+      })
+    }, "properties.strokeDashArray")]
+  });
+}
+function StyleData() {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(StrokeData, {}), /* @__PURE__ */ jsx(FillData, {})]
+  });
+}
+function MyTabs() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    currentTab,
+    handleChange
+  } = useTab();
+  const geofenceAddEditTabs = useMemo(() => {
+    return [{
+      value: "general",
+      icon: void 0,
+      components: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(GeneralData, {}), /* @__PURE__ */ jsx(ConfigData, {})]
+      }),
+      toolTip: getLabel(DICCTIONARY.TAB_GENERAL_CONFIG_TOOLTIP),
+      className: mapToolsClasses.toolGeofencesAddEditGeneral
+    }, {
+      value: "style",
+      icon: void 0,
+      components: /* @__PURE__ */ jsx(StyleData, {}),
+      toolTip: getLabel(DICCTIONARY.TAB_STYLE_CONFIG_TOOLTIP),
+      className: mapToolsClasses.toolGeofencesAddEditStyle
+    }];
+  }, [getLabel]);
+  console.log("MyTabs", currentTab);
+  return /* @__PURE__ */ jsxs(Stack, {
+    direction: "column",
+    children: [/* @__PURE__ */ jsx(Tabs, {
+      value: currentTab,
+      scrollButtons: "auto",
+      variant: "scrollable",
+      allowScrollButtonsMobile: true,
+      onChange: (_e, newValue) => handleChange(_e, newValue),
+      children: geofenceAddEditTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
+        value: tab.value,
+        icon: tab.icon,
+        label: /* @__PURE__ */ jsx(Tooltip, {
+          title: tab.toolTip,
+          children: /* @__PURE__ */ jsx("span", {
+            children: tab.toolTip
+          })
+        }),
+        SKTWidth: "100px",
+        SKTHeight: "14px"
+      }, tab.value))
+    }), geofenceAddEditTabs.map((tab) => {
+      const isMatched = tab.value === currentTab;
+      return /* @__PURE__ */ jsx(TabContent, {
+        className: clsx(mapToolsClasses.tabContentRoot, tab.className, isMatched ? mapToolsClasses.visible : mapToolsClasses.hidden),
+        children: tab.components
+      }, tab.value);
+    })]
+  });
+}
+function GeneralDataValidation(getLabel) {
+  return {
+    name: Yup.string().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
+    geometry: Yup.object().nullable().required(getLabel(DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
+    geofenceType: Yup.object().nullable().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED))
+  };
+}
+function ConfigDataValidation(getLabel) {
+  return {
+    timeMinInSeconds: Yup.number().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)),
+    timeMinOutSeconds: Yup.number().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR))
+  };
+}
+function useValidation$1() {
+  const { getLabel } = useModuleDictionary();
+  const validationSchema = useMemo(
+    () => Yup.object().shape({
+      ...GeneralDataValidation(getLabel),
+      ...ConfigDataValidation(getLabel)
+    }),
+    [getLabel]
+  );
+  return { validationSchema };
+}
+const getSummitData = (values, geofenceId) => {
+  const newEditObj = {
+    name: values.name,
+    typeId: values.geofenceType.id,
+    geometry: values.geometry,
+    properties: {
+      strokeColor: values.properties.fillColor,
+      strokeOpacity: values.properties.strokeOpacity.value,
+      strokeWeight: values.properties.strokeWeight.value,
+      strokeDashArray: values.properties.strokeDashArray.value,
+      fillColor: values.properties.fillColor,
+      fillOpacity: values.properties.fillOpacity.value
+    },
+    timeMinInSeconds: values.timeMinInSeconds,
+    timeMinOutSeconds: values.timeMinOutSeconds,
+    alias: values.alias,
+    customerId: values.customerId,
+    ...geofenceId ? { geofenceId } : {}
+  };
+  if (values.geofenceType.id === "gt_circle") {
+    newEditObj.properties.radius = values.properties.radius;
+  }
+  return newEditObj;
+};
+function useSubmit(props) {
+  const { objectId } = props;
+  const { toast } = useHostTools();
+  const { goToList } = useMapToolsStore((state) => state.geofenceActions);
+  const { networkOperation } = useNetwork();
+  const onSubmit = async (data) => {
+    await networkOperation({
+      method: objectId ? "PUT" : "POST",
+      endPoint: `${ENDPOINT_GEOFENCE_NEW_EDIT}${objectId ? `/${objectId}` : ""}`,
+      data: getSummitData(data, objectId),
+      toastError: true,
+      toastSuccess: false,
+      bodyToSnakeCase: true,
+      isRemote: false
+    }).then((response) => {
+      toast(
+        response.message,
+        { type: "success" }
+      );
+      goToList();
+    }).catch((error) => {
+    });
+  };
+  return { onSubmit };
+}
+function GeofenceAddEdit() {
+  const [geofenceId, finalInitalValues, omitCallEnpoint] = useMapToolsStore((state) => {
+    if (state.geofenceState.geofenceId === void 0) {
+      return [void 0, initialValues, false];
+    }
+    const geofence = state.geofenceState.hashGeofences[state.geofenceState.geofenceId];
+    if (geofence?.geometry) {
+      const emulateResponse = {
+        data: {
+          type: geofence.type,
+          name: geofence.name,
+          id: geofence.id,
+          active: false,
+          geometry: geofence.geometry,
+          properties: geofence.properties,
+          countCrossingFeatures: geofence.countCrossingFeatures,
+          countInternalFeatures: geofence.countInternalFeatures,
+          createdAt: geofence.createdAt,
+          updatedAt: geofence.updatedAt,
+          timeMinInSeconds: geofence.timeMinInSeconds,
+          timeMinOutSeconds: geofence.timeMinOutSeconds,
+          alias: geofence.alias,
+          customerId: geofence.customerId
+        }
+      };
+      return [state.geofenceState.geofenceId, formatDataEnpoint(emulateResponse), true];
+    } else {
+      return [state.geofenceState.geofenceId, initialValues, false];
+    }
+  });
+  const {
+    formValues,
+    statusLoad
+  } = useFormAddEdit({
+    objectId: geofenceId,
+    formatDataEnpoint,
+    initialValues: finalInitalValues,
+    endPoint: ENDPOINT_GEOFENCE_GET,
+    isRemote: false,
+    omitCallEnpoint
+  });
+  const {
+    validationSchema
+  } = useValidation$1();
+  const {
+    onSubmit
+  } = useSubmit({
+    objectId: geofenceId
+  });
+  return /* @__PURE__ */ jsxs(RHFormProvider, {
+    statusLoad,
+    onSubmit,
+    values: formValues,
+    validationSchema,
+    className: mapToolsClasses.toolGeofencesAddEditGeneral,
+    children: [/* @__PURE__ */ jsx(Stack, {
+      direction: "column",
+      children: /* @__PURE__ */ jsx(TabProvider, {
+        initialValue: "general",
+        children: /* @__PURE__ */ jsx(MyTabs, {})
+      })
+    }), /* @__PURE__ */ jsx(MyActions$1, {})]
+  });
+}
+function GeofencesTool() {
+  const currentGeofenceTool = useMapToolsStore((state) => state.geofenceState.currentGeofenceTool, shallow);
+  return /* @__PURE__ */ jsxs(Stack, {
+    direction: "column",
+    gap: "4px",
+    className: mapToolsClasses.toolGeofences,
+    children: [currentGeofenceTool === "list" && /* @__PURE__ */ jsx(GeofencesList, {}), currentGeofenceTool === "add_edit" && /* @__PURE__ */ jsx(GeofenceAddEdit, {})]
+  });
+}
+function MyActions() {
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const fieldsWatch = useWatch({
+    control,
+    name: ["statusEdition", "reInits"]
+  });
+  const statusEdition = fieldsWatch[0];
+  const reInits = fieldsWatch[1];
+  const initDraw = () => {
+    if (statusEdition === "initial") {
+      setValue("statusEdition", "draw");
+    } else if (statusEdition === "draw") {
+      setValue("reInits", reInits + 1);
+    }
+  };
+  return /* @__PURE__ */ jsx(Actions, {
+    children: /* @__PURE__ */ jsx(Button, {
+      onClick: initDraw,
+      children: statusEdition === "initial" ? getLabel(DICCTIONARY.LABEL_MEASURE_START) : getLabel(DICCTIONARY.LABEL_MEASURE_RESTART)
+    })
+  });
+}
+function MeasureDataValidation(getLabel) {
+  return {};
+}
+function useValidation() {
+  const { getLabel } = useModuleDictionary();
+  const validationSchema = useMemo(
+    () => Yup.object().shape({
+      ...MeasureDataValidation()
+    }),
+    [getLabel]
+  );
+  return { validationSchema };
+}
+const INITIAL_FORM_VALUES = {
+  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,
+  statusEdition: "initial"
+};
+const STYLE_MEASURE_OPTIONS = {
+  strokeLineColor: "#1E96DC",
+  strokeLineWeight: 5,
+  markerHeight: 37,
+  markerWidth: 26,
+  labelMarkerHeight: 0,
+  labelMarkerWidth: 0,
+  labelMarkerAnchorY: 0,
+  labelMarkerAnchorX: 0
+};
+function useMeasure() {
+  const { getLabel } = useModuleDictionary();
+  const readyToUpdate = useFormReadyForUpdate();
+  const map = useMap();
+  const { control, setValue } = useFormContext();
+  const fieldsWatch = useWatch({
+    control,
+    name: [
+      "statusEdition",
+      "value",
+      "magnitudFactor",
+      "reInits"
+    ]
+  });
+  const statusEdition = fieldsWatch[0];
+  const value = fieldsWatch[1];
+  const magnitudFactor = fieldsWatch[2];
+  const reInits = fieldsWatch[3];
+  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(() => {
+    var 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
+          }
+        ).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;
+    }
+    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(getLabelMarkerPointIcon(formatDistanceFromPrevious));
+        addClickListenerForRemove(measurePoints[i].labelMarker);
+      }
+    }
+    return getFormatFactorDistance(totalDistance);
+  }, [map]);
+  const getMarkerPointIcon = useCallback((position) => {
+    return L.divIcon({
+      className: mapClasses.measureMarkerRoot,
+      html: `<div  class="${mapClasses.measureMarkerContainer}">
+                <div  class="${mapClasses.measureMarkerContainerRhomb}">
+                </div>
+                <div  class="${mapClasses.measureMarkerContainerSlot}">
+                    <div  class="${mapClasses.measureMarkerContainerSlotNumber}">
+                        ${position}
+                    </div>
+                </div>
+            </div>
+            `,
+      iconSize: [STYLE_MEASURE_OPTIONS.markerWidth, STYLE_MEASURE_OPTIONS.markerHeight],
+      iconAnchor: [STYLE_MEASURE_OPTIONS.markerWidth / 2, STYLE_MEASURE_OPTIONS.markerHeight]
+    });
+  }, []);
+  const getLabelMarkerPointIcon = useCallback((distance) => {
+    return L.divIcon({
+      className: mapClasses.measureLabelMarkerRoot,
+      html: `<div  class="${mapClasses.measureLabelMarkerContainer}">
+            ${distance ? `<span class="${mapClasses.measureLabelMarkerDistance}">${distance}</span>` : ""}
+            <div class="${mapClasses.measureLabelMarkerRemove}">${getLabel(DICCTIONARY.LABEL_MEASURE_REMOVE_POINT)}</div>
+            </div>`,
+      iconSize: [STYLE_MEASURE_OPTIONS.labelMarkerWidth, STYLE_MEASURE_OPTIONS.labelMarkerHeight],
+      iconAnchor: [STYLE_MEASURE_OPTIONS.labelMarkerAnchorX, STYLE_MEASURE_OPTIONS.labelMarkerAnchorY]
+    });
+  }, [getLabel]);
+  const onClickRemovePoint = useCallback((labelMarker) => {
+    return (e) => {
+      e.stopPropagation();
+      if (!currentMeasure.current.dragging) {
+        var markIndex = currentMeasure.current.measurePoints.findIndex((searchElement) => {
+          return searchElement.labelMarker === labelMarker;
+        });
+        if (markIndex !== -1) {
+          var 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((measurePoint2, index) => {
+          measurePoint2.marker.setIcon(getMarkerPointIcon(index + 1));
+        });
+      }
+    };
+  }, []);
+  const addClickListenerForRemove = useCallback((labelMarker) => {
+    var element = labelMarker.getElement();
+    if (element) {
+      var elements = element.getElementsByClassName("M4L-MapTool-MeasureToolTip-Remove");
+      element = elements[0];
+      if (element) {
+        element.addEventListener("click", onClickRemovePoint(labelMarker));
+      }
+    }
+  }, []);
+  const onClickMap = useCallback((e) => {
+    var lat = e.latlng.lat;
+    var lng = e.latlng.lng;
+    var 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));
+    }
+    var marker = L.marker([lat, lng], {
+      draggable: true,
+      riseOnHover: true,
+      autoPan: true,
+      icon: getMarkerPointIcon(currentMeasure.current.measurePoints.length + 1),
+      zIndexOffset: MAP_ZINDEX_DEFAULT
+    }).addTo(map);
+    marker.on("moveend", function(e2) {
+      var latlng = marker.getLatLng();
+      labelMarker.setLatLng(latlng);
+      setValue("value", measureDistante());
+    });
+    marker.on("mouseover", function(e2) {
+      currentMeasure.current.addMarker = false;
+    });
+    marker.on("mouseout", function(e2) {
+      currentMeasure.current.addMarker = true;
+    });
+    var labelMarker = L.marker([lat, lng], {
+      draggable: true,
+      riseOnHover: true,
+      icon: getLabelMarkerPointIcon(formatDistanceFromPrevious),
+      zIndexOffset: MAP_ZINDEX_DEFAULT
+    }).addTo(map);
+    labelMarker.on("moveend", function(e2) {
+      var latlng = labelMarker.getLatLng();
+      marker.setLatLng(latlng);
+      setValue("value", measureDistante());
+    });
+    labelMarker.on("mouseover", function(e2) {
+      currentMeasure.current.addMarker = false;
+    });
+    labelMarker.on("mouseout", function(e2) {
+      currentMeasure.current.addMarker = true;
+    });
+    labelMarker.on("dragstart", function(e2) {
+      currentMeasure.current.dragging = true;
+    });
+    labelMarker.on("dragend", function(e2) {
+      setTimeout(function() {
+        currentMeasure.current.dragging = false;
+      }, 10);
+    });
+    addClickListenerForRemove(labelMarker);
+    currentMeasure.current.measurePoints.push({
+      marker,
+      labelMarker,
+      formatDistanceFromPrevious
+    });
+    setValue("value", measureDistante());
+  }, [map, measureDistante, setValue]);
+  const onMouseMoveMap = useCallback(() => {
+    map.getContainer().style.cursor = "crosshair";
+  }, [map]);
+  const onMouseOutMap = useCallback(() => {
+    map.getContainer().style.cursor = "default";
+  }, [map]);
+  useEffect(() => {
+    if (map) {
+      if (statusEdition === "initial") {
+        return;
+      } else {
+        currentMeasure.current.addMarker = true;
+        map.on("mousemove", onMouseMoveMap);
+        map.on("mouseout", onMouseOutMap);
+        map.on("click", onClickMap);
+      }
+    }
+  }, [map, statusEdition]);
+  useEffect(() => {
+    console.log("useEffect magnitudFactor", readyToUpdate, magnitudFactor);
+    if (!readyToUpdate)
+      return;
+    if (magnitudFactor.id !== magnitudFactorCached.id) {
+      console.log("useEffect magnitudFactor CAMBIO");
+      setMagnitudFactorCached({ ...magnitudFactor });
+      currentMeasure.current.magnitudFactor = magnitudFactor;
+      setValue("value", measureDistante());
+    }
+  }, [magnitudFactor]);
+  useEffect(() => {
+    console.log("useEffect reInits", readyToUpdate, reInits);
+    if (!readyToUpdate)
+      return;
+    clearMeasure();
+  }, [reInits]);
+  useEffect(() => {
+    return () => {
+      map.off("mousemove", onMouseMoveMap);
+      map.off("mouseout", onMouseOutMap);
+      map.off("click", onClickMap);
+      map.getContainer().style.cursor = "default";
+      clearMeasure();
+      console.debug("DESMONTAJES MARCAS Y EVENTOS");
+    };
+  }, []);
+  return { statusEdition, magnitudFactor, value };
+}
+const DevTool = process.env.NODE_ENV === "development" ? require("@hookform/devtools").DevTool : () => null;
+function MeasureData() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    control
+  } = useFormContext();
+  const {
+    value,
+    magnitudFactor
+  } = useMeasure();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.MEASURE}`;
+  return /* @__PURE__ */ jsxs(PaperForm, {
+    urlIcon,
+    title: getLabel(DICCTIONARY.PAPER_MEASURE),
+    children: [/* @__PURE__ */ jsx(RHFAutocompleteAsync, {
+      endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
+      name: "magnitudFactor",
+      autoComplete: "off",
+      getOptionLabel: (option) => option.name,
+      isOptionEqualToValue: (option, value2) => option.id === value2.id,
+      label: getLabel(DICCTIONARY.LABEL_MEASURE_UNIT),
+      isRemote: false
+    }), /* @__PURE__ */ jsxs(Stack, {
+      direction: "row",
+      spacing: 2,
+      className: mapToolsClasses.toolMeasureFormValue,
+      children: [/* @__PURE__ */ jsx("span", {
+        className: mapToolsClasses.toolMeasureFormValueDistance,
+        children: value
+      }), /* @__PURE__ */ jsx("span", {
+        className: mapToolsClasses.toolMeasureFormValueSymbol,
+        children: magnitudFactor.symbol
+      })]
+    }), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx(DevTool, {
+      control
+    })]
+  });
+}
+function MeasureTool() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const finalInitalValues = {
+    ...INITIAL_FORM_VALUES
+  };
+  if (finalInitalValues?.magnitudFactor?.name) {
+    finalInitalValues.magnitudFactor.name = getLabel(DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS);
+  }
+  const {
+    validationSchema
+  } = useValidation();
+  const onSubmit = () => {
+  };
+  return /* @__PURE__ */ jsxs(RHFormProvider, {
+    statusLoad: INITIAL_FORM_VALUES.statusLoad,
+    onSubmit,
+    values: finalInitalValues,
+    validationSchema,
+    children: [/* @__PURE__ */ jsx(Stack, {
+      direction: "column",
+      children: /* @__PURE__ */ jsx(MeasureData, {})
+    }), /* @__PURE__ */ jsx(MyActions, {})]
+  });
+}
+const PolylineWithArrows = ({
+  positions,
+  enableEdit,
+  ...other
+}) => {
+  const map = useMap();
+  const polylineRef = useRef(null);
+  const decoratorRef = useRef(null);
+  useEffect(() => {
+    if (polylineRef.current) {
+      const decorator = L__default.polylineDecorator(polylineRef.current, {
+        patterns: [{
+          repeat: 50,
+          symbol: L__default.Symbol.arrowHead({
+            pixelSize: 4,
+            polygon: false,
+            pathOptions: {
+              stroke: true,
+              color: "#ffffff",
+              weight: 2
+            }
+          })
+        }]
+      }).addTo(map);
+      decoratorRef.current = decorator;
+      if (enableEdit) {
+        polylineRef.current.pm.enable();
+      } else {
+        polylineRef.current.pm.disable();
+      }
+      polylineRef.current.on("pm:change", () => {
+        if (decoratorRef.current) {
+          map.removeLayer(decoratorRef.current);
+        }
+        if (polylineRef.current) {
+          decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
+            patterns: [{
+              repeat: 40,
+              symbol: L__default.Symbol.arrowHead({
+                pixelSize: 4,
+                polygon: false,
+                pathOptions: {
+                  stroke: true,
+                  color: "#cc0000",
+                  weight: 2
+                }
+              })
+            }]
+          }).addTo(map);
+        }
+      });
+      return () => {
+        if (decoratorRef.current) {
+          map.removeLayer(decoratorRef.current);
+        }
+      };
+    }
+  }, [map, enableEdit]);
+  return /* @__PURE__ */ jsx(Polyline, {
+    positions,
+    ref: polylineRef,
+    ...other
+  });
+};
+const PolylineWithArrows$1 = PolylineWithArrows;
+function useLayers() {
+  const {
+    addLayer,
+    removeLayer
+  } = useMapStore((state) => state.mapActions, shallow);
+  const {
+    init
+  } = useMapToolsStore((state) => state.mapToolsActions, shallow);
+  const renderByEachFeature = useCallback((props) => {
+    const {
+      id,
+      layerId
+    } = props;
+    const feature = useMapStore((state) => {
+      const gObject = state.hashLayers[layerId].geoJsonObject;
+      if (!gObject) {
+        return null;
+      }
+      if (gObject.object.type === "Feature") {
+        return {
+          geometry: gObject.object.geometry,
+          properties: gObject.object.properties
+        };
+      } else {
+        const feat = gObject.object.features.find((f) => f.id === id);
+        if (feat) {
+          return {
+            geometry: feat.geometry,
+            properties: feat.properties
+          };
+        }
+        return null;
+      }
+    }, shallow);
+    const refFeature = useRef(null);
+    if (!feature) {
+      return null;
+    }
+    useEffect(() => {
+      if (refFeature.current)
+        ;
+    }, [refFeature.current]);
+    console.log(`renderByEachFeature *** ${feature.geometry?.type}: ${id}`);
+    if (feature.geometry?.type === "LineString") {
+      const polylinePositions = feature.geometry.coordinates.map((coord) => [coord[1], coord[0]]);
+      return /* @__PURE__ */ jsx(
+        PolylineWithArrows$1,
+        {
+          positions: polylinePositions,
+          stroke: true,
+          weight: 10,
+          ...feature.properties,
+          dashArray: "20 30"
+        },
+        Math.random()
+      );
+    }
+    if (feature.geometry?.type === "Polygon") {
+      const polygonPositions = feature.geometry.coordinates.map((ring) => ring.map(([lng, lat]) => [lat, lng]));
+      return /* @__PURE__ */ jsx(
+        Polygon,
+        {
+          ref: refFeature,
+          positions: polygonPositions,
+          opacity: 1,
+          ...feature.properties,
+          children: /* @__PURE__ */ jsx(Popup, {})
+        },
+        Math.random()
+      );
+    }
+    if (feature.geometry?.type === "Point") {
+      if (feature.properties?.subType === "Circle" && feature.properties?.radius) {
+        const {
+          subType,
+          radius,
+          ...styleProperties
+        } = feature.properties;
+        const [lng, lat] = feature.geometry.coordinates;
+        return /* @__PURE__ */ jsx(Circle, {
+          center: {
+            lat,
+            lng
+          },
+          radius: feature.properties?.radius,
+          ...styleProperties
+        }, Math.random());
+      }
+    }
+    return null;
+  }, []);
+  useEffect(() => {
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
+      description: "Geocercas",
+      renderFeature: renderByEachFeature,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      }
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
+      description: "Geometr\xEDas de tr\xE1nsito",
+      renderFeature: renderByEachFeature,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      }
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
+      description: "Geometr\xEDas internas",
+      renderFeature: renderByEachFeature,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      }
+    });
+    init();
+    return () => {
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
+    };
+  }, []);
+}
+const TabToolsRoot = styled("div")`
+    display:flex;
+    flex-direction:column;
+    right:10px;
+    width:600px;
+    top:10px;
+    bottom:10px;
+    position:absolute;
+    height:unset;
+    z-index:${MAP_ZINDEX_OVER_MAP};
+
+
+    .${mapToolsClasses.tabContentRoot}.${mapToolsClasses.hidden} {
+        height:0px;
+        width:0px;
+        overflow:hidden;
+        opacity:0;
+        visibility:hidden;
+    }
+
+
+    .${mapToolsClasses.toolMeasureFormValue} {
+        justify-content: center;
+    }
+
+    .${mapToolsClasses.toolMeasureFormValueDistance} {
+        border: 1px solid white;
+        
+        margin: 0 5px;
+    }
+    .${mapToolsClasses.toolMeasureFormValueSymbol} {
+        border: 1px solid white;
+        
+        margin: 0 5px;
+    }
+
+    ${(props) => props.theme.components?.M4LGpsTools?.styleOverrides}
+`;
+function TabTools() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const status = useMapToolsStore((state) => state.ownerState.status, shallow);
+  const currentTabTool = useMapToolsStore((state) => state.currentTabTool, shallow);
+  const {
+    setCurrentTabTool
+  } = useMapToolsStore((state) => state.mapToolsActions, shallow);
+  const toolTabs = useMemo(() => {
+    return [
+      {
+        id: "geofences",
+        icon: void 0,
+        component: /* @__PURE__ */ jsx(GeofencesTool, {}),
+        label: getLabel(DICCTIONARY.LABEL_TAB_GEO),
+        className: mapToolsClasses.toolGeofences
+      },
+      {
+        id: "measure",
+        icon: void 0,
+        component: /* @__PURE__ */ jsx(MeasureTool, {}),
+        label: getLabel(DICCTIONARY.LABEL_TAB_MEASURE),
+        className: mapToolsClasses.toolMeasure
+      }
+    ];
+  }, [getLabel]);
+  useLayers();
+  if (status !== "ready") {
+    return null;
+  }
+  return createPortal(/* @__PURE__ */ jsxs(
+    TabToolsRoot,
+    {
+      children: [/* @__PURE__ */ jsx(Tabs, {
+        value: currentTabTool,
+        scrollButtons: "auto",
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        onChange: (_e, value) => setCurrentTabTool(value),
+        children: toolTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
+          value: tab.id,
+          icon: tab.icon,
+          label: tab.label,
+          SKTWidth: "100px",
+          SKTHeight: "14px"
+        }, tab.id))
+      }), toolTabs.map((tab) => {
+        const isMatched = tab.id === currentTabTool;
+        if (!isMatched && tab.id === "measure") {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(TabContent, {
+          className: clsx(mapToolsClasses.tabContentRoot, tab.className, isMatched ? mapToolsClasses.visible : mapToolsClasses.hidden),
+          children: tab.component
+        }, tab.id);
+      })]
+    }
+  ), document.body);
+}
+function GpsTools() {
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(GpsToolsProvider, {
+    children: !isSkeleton && /* @__PURE__ */ jsx(TabTools, {})
+  });
+}
+export {
+  GpsToolsContext as G,
+  GpsTools as a
+};