Añadir eventos y funciones de dibujo en useLeafletEditable.js

Author: AlejandroRM-DEV

leaflet-editable-hook/src/hooks/useLeafletEditable.js

@@ -2,8 +2,40 @@ import React from 'react';
 import { useMap } from 'react-leaflet';
 
 const eventHandlers = Object.freeze({
+  onCreated: 'editable:created',
+  onEnable: 'editable:enable',
+  onDisable: 'editable:disable',
+  onEditing: 'editable:editing',
+  onDragstart: 'editable:dragstart',
+  onDrag: 'editable:drag',
+  onDragend: 'editable:dragend',
+  onDrawingStart: 'editable:drawing:start',
+  onDrawingEnd: 'editable:drawing:end',
+  onDrawingCancel: 'editable:drawing:cancel',
+  onDrawingCommit: 'editable:drawing:commit',
+  onDrawingMousedown: 'editable:drawing:mousedown',
+  onDrawingMouseup: 'editable:drawing:mouseup',
+  onDrawingClick: 'editable:drawing:click',
+  onDrawingMove: 'editable:drawing:move',
   onDrawingClicked: 'editable:drawing:clicked',
+  onVertexNew: 'editable:vertex:new',
+  onVertexClick: 'editable:vertex:click',
+  onVertexClicked: 'editable:vertex:clicked',
+  onVertexRawclick: 'editable:vertex:rawclick',
+  onVertexDeleted: 'editable:vertex:deleted',
+  onVertexCtrlclick: 'editable:vertex:ctrlclick',
+  onVertexShiftclick: 'editable:vertex:shiftclick',
+  onVertexMetakeyclick: 'editable:vertex:metakeyclick',
+  onVertexAltclick: 'editable:vertex:altclick',
+  onVertexContextmenu: 'editable:vertex:contextmenu',
+  onVertexMousedown: 'editable:vertex:mousedown',
   onVertexDrag: 'editable:vertex:drag',
+  onVertexDragstart: 'editable:vertex:dragstart',
+  onVertexDragend: 'editable:vertex:dragend',
+  onMiddlemarkerMousedown: 'editable:middlemarker:mousedown',
+  onShapeNew: 'editable:shape:new',
+  onShapeDelete: 'editable:shape:delete',
+  onShapeDeleted: 'editable:shape:deleted',
 });
 
 function useLeafletEditable({ events }) {
@@ -24,29 +56,49 @@ function useLeafletEditable({ events }) {
     };
   }, [map, events]);
 
-  const startPolyline = React.useCallback(() => {
-    return map.editTools.startPolyline();
+  const drawing = React.useMemo(() => {
+    return map.editTools.drawing();
   }, [map]);
 
-  const startPolygon = React.useCallback(() => {
-    return map.editTools.startPolygon();
+  const stopDrawing = React.useCallback(() => {
+    map.editTools.stopDrawing();
   }, [map]);
 
-  const startMarker = React.useCallback(() => {
-    return map.editTools.startMarker();
+  const commitDrawing = React.useCallback(() => {
+    map.editTools.commitDrawing();
   }, [map]);
 
-  const startRectangle = React.useCallback(() => {
-    return map.editTools.startRectangle();
-  }, [map]);
+  const startPolyline = React.useCallback(
+    (latlng, options) => {
+      return map.editTools.startPolyline(latlng, options);
+    },
+    [map]
+  );
 
-  const startCircle = React.useCallback(() => {
-    return map.editTools.startCircle();
-  }, [map]);
+  const startPolygon = React.useCallback(
+    (latlng, options) => {
+      return map.editTools.startPolygon(latlng, options);
+    },
+    [map]
+  );
+
+  const startMarker = React.useCallback(
+    (latlng, options) => {
+      return map.editTools.startMarker(latlng, options);
+    },
+    [map]
+  );
+
+  const startRectangle = React.useCallback(
+    (latlng, options) => {
+      return map.editTools.startRectangle(latlng, options);
+    },
+    [map]
+  );
 
-  const startHole = React.useCallback(
-    (editor, latlng) => {
-      return map.editTools.startHole(editor, latlng);
+  const startCircle = React.useCallback(
+    (latlng, options) => {
+      return map.editTools.startCircle(latlng, options);
     },
     [map]
   );
@@ -56,12 +108,14 @@ function useLeafletEditable({ events }) {
   }, [map]);
 
   return {
+    drawing,
+    stopDrawing,
+    commitDrawing,
     startPolyline,
     startPolygon,
     startMarker,
     startRectangle,
     startCircle,
-    startHole,
     clearAll,
   };
 }