@m4l/components 7.2.0 → 7.2.2

package/src/components/maps/components/MapGpsTools/icons.ts

@@ -1,32 +0,0 @@
-export const MAP_GPSTOOLS_ICONS = {
-  /**
-   * GpsTools
-   */
-
-  MAP_GPS_TOOLS_TOOL: 'cmp_map_gpstools_tool.svg',
-
-  GEOFENCES: 'cmp_map_gpstools_geofences.svg',
-
-  GEOFENCE_ID: 'cmp_map_gpstools_geofence_id.svg',
-  GEOFENCE_NAME: 'cmp_map_gpstools_geofence_name.svg',
-
-  GEOFENCE_ADD: 'cmp_map_gpstools_add-geofence.svg',
-  GEOFENCE_EDIT: 'cmp_map_gpstools_edit-geofence.svg',
-  GEOFENCE_DELETE: 'cmp_map_gpstools_delete-geofence.svg',
-
-  GENERAL: 'cmp_map_gpstools_general.svg',
-
-  DATA: 'cmp_map_gpstools_data.svg',
-  STYLE: 'cmp_map_gpstools_style.svg',
-  GEOFENCE_DRAW: 'cmp_map_gpstools_draw.svg',
-  GEOFENCE_FINISH: 'cmp_map_gpstools_finish.svg',
-
-  GEOFENCE_TYPE_CIRCLE: 'cmp_map_gpstools_circle.svg',
-  GEOFENCE_TYPE_RECTANGLE: 'cmp_map_gpstools_rectangle.svg',
-  GEOFENCE_TYPE_POLYGON: 'cmp_map_gpstools_polygon.svg',
-
-  CONFIG: 'cmp_map_gpstools_config.svg',
-
-  STROKE: 'cmp_map_gpstools_stroke.svg',
-  FILL: 'cmp_map_gpstools_fill.svg',
-};

package/src/components/maps/components/MapGpsTools/index.ts

@@ -1,6 +0,0 @@
-export { MapGpsTools } from './MapGpsTools';
-export { MapGpsToolsProvider } from './contexts/MapGpsToolsContext';
-
-export { getMapGpsToolsComponentsDictionary } from './dictionary';
-
-export { useMapGpsToolsStore } from './hooks/useMapGpsToolsStore';

package/src/components/maps/components/MapGpsTools/styles.tsx

@@ -1,27 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { gpsToolsClasses } from './classes';
-
-//TODO: Posicionar correctamente el popup
-export const DivTabGpsToolsRoot = styled('div')`
-  .${gpsToolsClasses.gpsToolsTabContent}.${gpsToolsClasses.hidden} {
-    display: none;
-  }
-
-  .${gpsToolsClasses.gpsToolsGeofencesList} .M4LDataGrid-root {
-    height: unset !important;
-    flex-grow: 1;
-  }
-
-  .${gpsToolsClasses.toolGeofencesAddEditGeneral} {
-    flex-grow: 1;
-  }
-
-  ${props => props.theme.components?.M4LMapGpsTools?.styleOverrides}
-`;
-
-// position: relative;
-// display: flex;
-// flex-direction: column;
-// flex-grow: 1;
-// width: 100%;
-// height: 100%;

package/src/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/index.tsx

@@ -1,129 +0,0 @@
-// react
-import { useEffect, useMemo } from 'react';
-// m4l
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-// mui
-// external libraries
-import 'leaflet';
-import { shallow } from 'zustand/shallow';
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
-import '@geoman-io/leaflet-geoman-free';
-import clsx from 'clsx';
-// componentes estilados
-import { DivTabGpsToolsRoot } from '../../styles';
-// internal components
-import { Tab } from '../../../../../mui_extended/Tab';
-import { TabContent } from '../../../../../mui_extended/TabContent';
-import { Tabs } from '../../../../../mui_extended/Tabs';
-import { Icon } from '../../../../../Icon';
-// sub components
-import { GeofencesList } from './subcomponents/GeofencesList';
-// hooks
-import { usePopupsStore } from '../../../../../popups';
-import { useLayers } from '../../hooks/useLayers';
-import { useMapGpsToolsStore } from '../../../..';
-// types
-// network
-// constansts
-import { MAP_GPSTOOLS_DICCTIONARY } from '../../dictionary';
-import { gpsToolsClasses } from '../../classes';
-import { MAP_GPSTOOLS_ICONS } from '../../icons';
-
-import { GPS_TOOLS_POPUP_ID } from '../../../Map/constants';
-import { TabAction } from './types';
-/**
- * Componente que renderiza las herramientas de GPS a traves de los tabs
- * Funcionalidad:
- *  - Cuando se cambia el tab, se actualiza el subtitulo del popup
- *  - Los tabs no visible se ocultan a traves de css, para que no destruyan los componentes evitando
- *    la recargar de los mismos entre cambio de pestañas.
- * @returns Tabs con las herramientas de GPS
- */
-export function TabsGpsTools() {
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  // const [divRef,setDivRef] = useStateRef<HTMLDivElement|null>(null);
-
-  const status = useMapGpsToolsStore(state => state.ownerState.status, shallow);
-
-  const currentTabTool = useMapGpsToolsStore(state => state.currentTabGpsTool, shallow);
-
-  const { setCurrentTabTool } = useMapGpsToolsStore(state => state.gpsToolsActions, shallow);
-
-  const { updatePopup } = usePopupsStore(state => state.popupsActions, shallow);
-
-  const toolTabs: TabAction[] = useMemo(() => {
-    return [
-      {
-        id: 'geofences',
-        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES}`,
-        component: <GeofencesList />,
-        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_TAB_GEO),
-        className: gpsToolsClasses.gpsToolsGeofencesList,
-      },
-    ];
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getLabel]); // Solo cuando cambie generalData se actualizan los tabs
-
-  /**
-   * Actualizar el subtitulo de la ventana dependiendo de la herramienta seleccionada
-   */
-  useEffect(() => {
-    updatePopup(GPS_TOOLS_POPUP_ID, {
-      subTitle:
-        currentTabTool === 'geofences' ? getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_TAB_GEO) : '',
-    });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentTabTool]);
-
-  /**
-   * Hook de manejo de capas y renderizado de geometrias de las herramientas
-   */
-  useLayers();
-
-  if (status !== 'ready') {
-    //Si no se han cargada las capas, no se renderiza nada
-    return null;
-  }
-
-  return (
-    <DivTabGpsToolsRoot className={gpsToolsClasses.gpsToolsRoot}>
-      <Tabs
-        value={currentTabTool}
-        scrollButtons="auto"
-        variant="scrollable"
-        allowScrollButtonsMobile
-        onChange={(_e, value) => setCurrentTabTool(value)}
-      >
-        {toolTabs.map(tab => (
-          <Tab
-            key={tab.id}
-            value={tab.id}
-            icon={<Icon src={tab.iconUrl} />}
-            // label={tab.label}
-            className={clsx(gpsToolsClasses.gpsToolsTab, tab.className)}
-            SKTWidth="100px"
-            SKTHeight="14px"
-          />
-        ))}
-      </Tabs>
-
-      {toolTabs.map(tab => {
-        const isMatched = tab.id === currentTabTool;
-
-        return (
-          <TabContent
-            className={clsx(
-              gpsToolsClasses.gpsToolsTabContent,
-              tab.className,
-              isMatched ? gpsToolsClasses.visible : gpsToolsClasses.hidden,
-            )}
-            key={tab.id}
-          >
-            {tab.component}
-          </TabContent>
-        );
-      })}
-    </DivTabGpsToolsRoot>
-  );
-}

package/src/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/constants.ts

@@ -1,40 +0,0 @@
-import { FormAddEditValues } from './types';
-
-export const STROKE_COLOR_DEFAULT = '#aaccaa';
-export const STROKE_OPACITY_DEFAULT = { value: 1, label: '100%' };
-export const STROKE_WHEIGTH_DEFAULT = { value: 1, label: '1 px' };
-export const STROKE_DASH_ARRAY_DEFAULT = { value: '', label: '-----' };
-
-export const FILL_COLOR_DEFAULT = '#aa3000';
-export const FILL_OPACITY_DEFAULT = { value: 0.2, label: '20%' };
-
-export const initialValues: FormAddEditValues = {
-  /** General Data */
-  name: '',
-  geofenceType: null,
-  /** Config Data */
-
-  alias: null,
-  customerId: null,
-  timeMinInSeconds: 5,
-  timeMinOutSeconds: 5,
-
-  /** de Apoyo */
-  inEdition: false,
-  geometry: null,
-
-  lat: null,
-  lng: null,
-
-  properties: {
-    radius: null,
-    /** Style Data */
-    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,
-  },
-};

package/src/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/helpers.ts

@@ -1,134 +0,0 @@
-import {
-  FILL_COLOR_DEFAULT,
-  FILL_OPACITY_DEFAULT,
-  STROKE_COLOR_DEFAULT,
-  STROKE_DASH_ARRAY_DEFAULT,
-  STROKE_OPACITY_DEFAULT,
-  STROKE_WHEIGTH_DEFAULT,
-  initialValues,
-} from './constants';
-import { GeofenceGeometry, GeofenceGetModel, GeofenceTypeId } from '../model';
-import { FormAddEditValues } from './types';
-import * as L from 'leaflet';
-
-/**
- * TODO: Documentar
- */
-export const getFormStrokeOpacityFromData = (strokeOpacity?: number) => {
-  if (strokeOpacity === undefined) {
-    return STROKE_OPACITY_DEFAULT;
-  }
-  return { value: strokeOpacity, label: `${strokeOpacity * 100}%` };
-};
-
-/**
- * TODO: Documentar
- */
-export const getFormStrokeWeightFromData = (strokeWeight?: number) => {
-  if (strokeWeight === undefined) {
-    return STROKE_WHEIGTH_DEFAULT;
-  }
-  return { value: strokeWeight, label: `${strokeWeight} px` };
-};
-
-/**
- * TODO: Documentar
- */
-export const getFormstrokeDashArrayFromData = (strokeDashArray?: string) => {
-  if (strokeDashArray === undefined) {
-    return STROKE_DASH_ARRAY_DEFAULT;
-  }
-  return { value: strokeDashArray, label: `----` };
-};
-
-/**
- * TODO: Documentar
- */
-export const formatDataEnpoint = (response: { data: GeofenceGetModel }): FormAddEditValues => {
-  try {
-    const { data } = response;
-    // ('formatDataEnpoint DATa**', data);
-
-    const obRet: FormAddEditValues = {
-      ...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: STROKE_OPACITY_DEFAULT, //getFormStrokeOpacityFromData(data.properties.strokeOpacity),
-        strokeWeight: STROKE_WHEIGTH_DEFAULT, //,getFormStrokeWeightFromData(data.properties.strokeWeight) ,
-        strokeDashArray: STROKE_DASH_ARRAY_DEFAULT, // getFormstrokeDashArrayFromData(data.properties.strokeDashArray) ,
-        fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
-        fillOpacity: FILL_OPACITY_DEFAULT, //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 (_e) {
-    return { ...initialValues };
-  }
-};
-
-/**
- * TODO: Documentar
- */
-export const getLayerFromGeometry = (
-  geometry: GeofenceGeometry | null,
-  geofenceTypeId: GeofenceTypeId | null,
-  radius: number | null,
-  options?: L.PolylineOptions | L.CircleOptions,
-) => {
-  if (geometry) {
-    if (geofenceTypeId === 'gt_circle' && geometry.type === 'Point') {
-      return L.circle([geometry.coordinates[1], geometry.coordinates[0]], {
-        ...(options as L.CircleOptions),
-        radius: radius || 0,
-      });
-    } else if (geofenceTypeId === 'gt_polygon' && geometry.type === 'Polygon') {
-      //Poligono
-      const coordinates: L.LatLngExpression[][] = geometry.coordinates.map((ring: number[][]) =>
-        ring.map((position: number[]) => [position[1], position[0]] as L.LatLngExpression),
-      );
-
-      return L.polygon(coordinates, options);
-    } else if (geofenceTypeId === 'gt_rectangle' && geometry.type === 'Polygon') {
-      //Rectangulo externo.
-      const latLngs: L.LatLngExpression[] = geometry.coordinates[0].map(
-        (coord: number[]) => [coord[1], coord[0]] as L.LatLngExpression,
-      );
-
-      const lats = latLngs.map(coord => {
-        if (Array.isArray(coord)) {
-          return coord[0] as number;
-        }
-        //TODO: Revisar si se puede mejorar
-        return 0;
-      });
-
-      const lngs = latLngs.map(coord => {
-        if (Array.isArray(coord)) {
-          return coord[1] as number;
-        }
-        return 0;
-      });
-
-      const southWest: L.LatLngExpression = [Math.min(...lats), Math.min(...lngs)];
-      const northEast: L.LatLngExpression = [Math.max(...lats), Math.max(...lngs)];
-
-      return L.rectangle([southWest, northEast], options);
-    }
-  }
-  return null;
-};

package/src/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useDrawing.ts

@@ -1,303 +0,0 @@
-// react
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-// m4l
-import { useModuleDictionary } from '@m4l/core';
-// external libraries
-import { useMap } from 'react-leaflet';
-import * as L from 'leaflet';
-// componentes estilados
-// internal components
-// sub components
-// types
-import type { GeofenceGeometry, GeofenceTypeId } from '../../model';
-// helpers
-import { getLayerFromGeometry } from '../helpers';
-// hooks
-import { useFormReadyForUpdate } from '../../../../../../../../../hooks/useFormReadyForUpdate';
-// constants
-import { MAP_GPSTOOLS_DICCTIONARY } from '../../../../../dictionary';
-
-/**
- * hook Encargado manejar los eventos de dibujo y setear en hook forms values,
- * los datos asociados a una geocerca
- * @returns
- */
-
-/**
- * TODO: Documentar
- */
-export function useDrawing() {
-  const { getLabel } = useModuleDictionary();
-
-  //Hook para saber si el formulario esta listo para usar
-  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: GeofenceTypeId | null = fieldsWatch[0]?.id;
-  const inEdition: boolean = fieldsWatch[1];
-
-  const strokeColor: string = fieldsWatch[2];
-  const strokeOpacity: number = fieldsWatch[3].value;
-  const strokeWeight: number = fieldsWatch[4].value;
-  const strokeDashArray: string = fieldsWatch[5].value;
-  const fillColor: string = fieldsWatch[6];
-  const fillOpacity: number = fieldsWatch[7].value;
-  const geometry: GeofenceGeometry | null = fieldsWatch[8];
-  const radius: number | null = fieldsWatch[9];
-
-  const [drawing, setDrawing] = useState(false);
-
-  const currentLayer = useRef<L.Polygon | L.Circle | L.Rectangle | null>(null);
-  //inEdition && geometry ?  L.geoJSON(geometry) as unknown as L.Polygon | L.Circle | L.Rectangle :
-  const [geometrTypeIdCached, setgeofenceTypeIdCached] = useState(geofenceTypeId);
-
-  //Efecto de carga inicial y desmontaje de componentes
-  useEffect(() => {
-    if (geometry) {
-      currentLayer.current = getLayerFromGeometry(geometry, geofenceTypeId, radius, {
-        color: strokeColor,
-        opacity: strokeOpacity,
-        weight: strokeWeight,
-        dashArray: strokeDashArray,
-        fillColor,
-        fillOpacity,
-      });
-
-      if (currentLayer.current) {
-        map.addLayer(currentLayer.current);
-        map.fitBounds(currentLayer.current.getBounds()); // Enfocar la vista del mapa en la capa
-        // setDrawing(true);
-      }
-    }
-
-    return () => {
-      // Limpiar recursos al desmontar el componente
-      if (currentLayer.current) {
-        currentLayer.current.remove();
-      }
-    };
-  }, [map]);
-
-  //Cuando cambie alguna de las propiedades, actualizar el hook form
-  useEffect(() => {
-    if (currentLayer.current) {
-      currentLayer.current.setStyle({
-        color: strokeColor,
-        opacity: strokeOpacity,
-        weight: strokeWeight,
-        dashArray: strokeDashArray,
-        fillColor,
-        fillOpacity,
-      });
-    }
-  }, [strokeColor, strokeOpacity, strokeWeight, strokeDashArray, fillColor, fillOpacity]);
-
-  //Actualizar el idioma de los mensajes de dibujo
-  useEffect(() => {
-    //TODO:
-    map.pm.setLang('en', {
-      tooltips: {
-        placeMarker: undefined,
-        firstVertex: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FIRST_VERTEX),
-        continueLine: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_CONTINUE_LINE),
-        finishLine: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_LINE),
-        finishPoly: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_POLY),
-        finishRect: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_RECT),
-        startCircle: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_START_CIRCLE),
-        finishCircle: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_CIRCLE),
-        placeCircleMarker: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER),
-      },
-    });
-  }, [map, getLabel]);
-
-  //Efecto encargado de administrar los eventos de dibujo
-  useEffect(() => {
-    if (map) {
-      let shape = 'Circle';
-      if (geometrTypeIdCached === 'gt_polygon') {
-        shape = 'Polygon';
-      } else if (geometrTypeIdCached === 'gt_rectangle') {
-        shape = 'Rectangle';
-      }
-
-      if (drawing) {
-        //Suscribirse a los eventos de dibujo
-        if (!currentLayer.current) {
-          setValue('inEdition', true);
-
-          if (shape === 'Circle') {
-            //Suscribirse al evento de inicio de dibujo para saber el centro y suscribirse al cambio de radio
-            map.on('pm:drawstart', ({ workingLayer }) => {
-              //Cuando el centro sea ubicado, se suscribe al evento de cambio de layer
-              workingLayer.on('pm:centerplaced', e => {
-                const layer = e.workingLayer as L.Circle;
-
-                layer.setStyle({
-                  color: strokeColor,
-                  opacity: strokeOpacity,
-                  weight: strokeWeight,
-                  dashArray: strokeDashArray,
-                  fillColor,
-                  fillOpacity,
-                });
-                setValue('lat', Number(layer.getLatLng().lat.toFixed(8)));
-                setValue('lng', Number(layer.getLatLng().lng.toFixed(8)));
-
-                //Suscribirse al evento donde se actualizará el radiode radio
-                layer.on('pm:change', _e => {
-                  setValue('properties.radius', Number(layer.getRadius().toFixed(1)));
-                });
-              });
-            });
-            setValue('properties.subType', shape);
-          } else if (shape === 'Polygon') {
-            //Suscribirse al evento de inicio de dibujo para saber el centro y suscribirse al cambio de radio
-            map.on('pm:drawstart', ({ workingLayer }) => {
-              //Cuando el centro sea ubicado, se suscribe al evento de cambio de layer
-              workingLayer.on('pm:vertexadded', e => {
-                const layer = e.workingLayer as L.Circle;
-                layer.setStyle({
-                  color: strokeColor,
-                  opacity: strokeOpacity,
-                  weight: strokeWeight,
-                  dashArray: strokeDashArray,
-                  fillColor,
-                  fillOpacity,
-                });
-              });
-            });
-          }
-
-          map.pm.enableDraw(shape);
-          //Iniciar el dibujo con los valores por defe
-          map.pm.setPathOptions({
-            color: strokeColor,
-            opacity: strokeOpacity,
-            weight: strokeWeight,
-            dashArray: strokeDashArray,
-            fillColor,
-            fillOpacity,
-          });
-          // ,{pathOptions: {
-          //     color: strokeColor,
-          //     opacity: strokeOpacity,
-          //     weight: strokeWeight,
-          //     dashArray: strokeDashArray,
-          //     fillColor,
-          //     fillOpacity,
-          //     }
-          // }
-
-          //Suscribirse al evento de creación de geometría, en este punto se tiene todo para guardar en el hook form
-          map.on('pm:create', e => {
-            currentLayer.current = e.layer as L.Polygon | L.Circle | L.Rectangle;
-
-            setValue('geometry', currentLayer.current.toGeoJSON()?.geometry, {
-              shouldTouch: false,
-              shouldValidate: true,
-            });
-
-            setValue('inEdition', false);
-
-            setDrawing(false);
-          });
-        } else {
-          //Se habilitar la edición de la geometría
-          currentLayer.current.pm.enable();
-          //Se indica que este en modo de edición
-          setValue('inEdition', true);
-
-          //Se suscribe al evento que indica que ya se terminó la edición de la geometria
-          currentLayer.current.on('pm:disable', e => {
-            currentLayer.current = e.layer as L.Polygon | L.Circle | L.Rectangle;
-
-            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 as L.Circle;
-              setValue('lat', Number(currentLayer.current.getLatLng().lat.toFixed(8)));
-              setValue('lng', Number(currentLayer.current.getLatLng().lng.toFixed(8)));
-
-              setValue('properties.radius', currentLayer.current.getRadius());
-              setValue('properties.radius', Number(currentLayer.current.getRadius().toFixed(1)));
-            });
-          }
-        }
-      } else {
-        //Desuscribirse de los eventos de dibujo
-        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) {
-        // Se cachea typeId, para evitar cambiar geometry cuando cambie otro campo
-        // debido a que el useWatch genera una nueva posicion de memoria para todos incluso si solo cambia uno de todos los que se observa
-        // Y como se modifica points, que tambien es escuchado en el useWatch, se evita el bucle con el cacheo
-
-        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 };
-}