Refactor

AlejandroRM-DEV · May 22, 2024 · 324d91e · 324d91e
1 parent 3231e55
commit 324d91e
Show file tree

Hide file tree

Showing 25 changed files with 233 additions and 218 deletions.
diff --git a/leaflet-editable-hook/.eslintrc.cjs → demo/.eslintrc.cjs b/leaflet-editable-hook/.eslintrc.cjs → demo/.eslintrc.cjs
diff --git a/leaflet-editable-hook/.gitignore → demo/.gitignore b/leaflet-editable-hook/.gitignore → demo/.gitignore
diff --git a/leaflet-editable-hook/.prettierrc.json → demo/.prettierrc.json b/leaflet-editable-hook/.prettierrc.json → demo/.prettierrc.json
diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/leaflet-editable-hook/index.html → demo/index.html b/leaflet-editable-hook/index.html → demo/index.html
diff --git a/leaflet-editable-hook/package-lock.json → demo/package-lock.json b/leaflet-editable-hook/package-lock.json → demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "leaflet-editable-hook",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@turf/turf": "^6.5.0",
+    "@vercel/analytics": "^1.2.2",
+    "antd": "^5.15.0",
+    "leaflet": "^1.9.4",
+    "leaflet-editable": "^1.2.0",
+    "leaflet-editable-hook": "^1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-custom-control": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.2.5",
+    "vite": "^5.1.4"
+  }
+}
diff --git a/leaflet-editable-hook/public/vite.svg → demo/public/vite.svg b/leaflet-editable-hook/public/vite.svg → demo/public/vite.svg
diff --git a/leaflet-editable-hook/src/App.css → demo/src/App.css b/leaflet-editable-hook/src/App.css → demo/src/App.css
diff --git a/leaflet-editable-hook/src/App.jsx → demo/src/App.jsx b/leaflet-editable-hook/src/App.jsx → demo/src/App.jsx
diff --git a/leaflet-editable-hook/src/Area.jsx → demo/src/Area.jsx b/leaflet-editable-hook/src/Area.jsx → demo/src/Area.jsx
@@ -1,7 +1,7 @@
 import { useMap, Marker, Tooltip } from 'react-leaflet';
 import { useState, useEffect } from 'react';
 import * as turf from '@turf/turf';
-import { useLeafletEditable } from './hooks';
+import useLeafletEditable from 'leaflet-editable-hook';
 
 function Area() {
   const map = useMap();

diff --git a/leaflet-editable-hook/src/ControlBar.jsx → demo/src/ControlBar.jsx b/leaflet-editable-hook/src/ControlBar.jsx → demo/src/ControlBar.jsx
diff --git a/leaflet-editable-hook/src/Ruler.jsx → demo/src/Ruler.jsx b/leaflet-editable-hook/src/Ruler.jsx → demo/src/Ruler.jsx
@@ -1,7 +1,7 @@
 import { useMap, Marker, Tooltip } from 'react-leaflet';
 import { useState, useEffect } from 'react';
 import * as turf from '@turf/turf';
-import { useLeafletEditable } from './hooks';
+import { useLeafletEditable } from 'leaflet-editable-hook';
 
 function Ruler() {
   const map = useMap();

diff --git a/leaflet-editable-hook/src/assets/react.svg → demo/src/assets/react.svg b/leaflet-editable-hook/src/assets/react.svg → demo/src/assets/react.svg
diff --git a/leaflet-editable-hook/src/index.css → demo/src/index.css b/leaflet-editable-hook/src/index.css → demo/src/index.css
diff --git a/leaflet-editable-hook/src/main.jsx → demo/src/main.jsx b/leaflet-editable-hook/src/main.jsx → demo/src/main.jsx
diff --git a/leaflet-editable-hook/vite.config.js → demo/vite.config.js b/leaflet-editable-hook/vite.config.js → demo/vite.config.js
diff --git a/leaflet-editable-hook/README.md b/leaflet-editable-hook/README.md
@@ -1,8 +1,156 @@
-# React + Vite
+# Leaflet Editable Hook
+The purpose of this hook is to provide functionality for editing features on the map, such as drawing polylines, polygons, markers, rectangles, circles, and more.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Demo 
+https://leaflet-editable-hook.vercel.app/ 
 
-Currently, two official plugins are available:
+## Prerequisites
+- leaflet: "^1.9.4"
+- leaflet-editable: "^1.2.0"
+- react-leaflet: "^4.2.1"
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Installation
+
+Install with npm
+
+```bash
+  npm i leaflet-editable-hook
+```
+
+## Documentation
+
+[See full documentation about Leaflet.Editable](https://leaflet.github.io/Leaflet.Editable/doc/api.html)
+
+| Hook returned methods                               | Returns     | Description                                                                                                                                                           |
+|---------------------------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| drawing()                             | boolean     | Return true if any drawing action is ongoing.                                                                                                                         |
+| stopDrawing()                         |             | When you need to stop any ongoing drawing, without needing to know which editor is active.                                                                           |
+| commitDrawing()                       |             | When you need to commit any ongoing drawing, without needing to know which editor is active.                                                                         |
+| startPolyline(<L.LatLng> latlng, <hash> options) | L.Polyline  | Start drawing a Polyline. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the Polyline class constructor. |
+| startPolygon(<L.LatLng> latlng, <hash> options)  | L.Polygon   | Start drawing a Polygon. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the Polygon class constructor.  |
+| startMarker(<L.LatLng> latlng, <hash> options)  | L.Marker    | Start adding a Marker. If latlng is given, the Marker will be shown first at this point. In any case, it will follow the user mouse, and will have a final latlng on next click (or touch). If options is given, it will be passed to the Marker class constructor. |
+| startRectangle(<L.LatLng> latlng, <hash> options) | L.Rectangle | Start drawing a Rectangle. If latlng is given, the Rectangle anchor will be added. In any case, continuing on user drag. If options is given, it will be passed to the Rectangle class constructor. |
+| startCircle(<L.LatLng> latlng, <hash> options)    | L.Circle    | Start drawing a Circle. If latlng is given, the Circle anchor will be added. In any case, continuing on user drag. If options is given, it will be passed to the Circle class constructor.    |
+
+
+| Events                 |
+|------------------------|
+| onCreated              |
+| onEnable               |
+| onDisable              |
+| onEditing              |
+| onDragstart            |
+| onDrag                 |
+| onDragend              |
+| onDrawingStart         |
+| onDrawingEnd           |
+| onDrawingCancel        |
+| onDrawingCommit        |
+| onDrawingMousedown     |
+| onDrawingMouseup       |
+| onDrawingClick         |
+| onDrawingMove          |
+| onDrawingClicked       |
+| onVertexNew            |
+| onVertexClick          |
+| onVertexClicked        |
+| onVertexRawclick       |
+| onVertexDeleted        |
+| onVertexCtrlclick      |
+| onVertexShiftclick     |
+| onVertexMetakeyclick   |
+| onVertexAltclick       |
+| onVertexContextmenu    |
+| onVertexMousedown      |
+| onVertexDrag           |
+| onVertexDragstart      |
+| onVertexDragend        |
+| onMiddlemarkerMousedown|
+| onShapeNew             |
+| onShapeDelete          |
+| onShapeDeleted         |
+
+
+## Usage/Examples
+
+```javascript
+import { useMap, Marker, Tooltip } from 'react-leaflet';
+import { useState, useEffect } from 'react';
+import * as turf from '@turf/turf';
+import { useLeafletEditable } from 'leaflet-editable-hook';
+
+function Ruler() {
+  const map = useMap();
+  const [ruler, setRuler] = useState(null);
+
+  const onDrawingClicked = (e) => {
+    const position = e.latlng;
+    const latlngs = e.layer._latlngs;
+    let length = 0;
+    if (latlngs.length > 1) {
+      const line = turf.lineString([...latlngs.map((item) => [item.lng, item.lat])]);
+      length = turf.length(line, { units: 'kilometers' });
+    }
+    setRuler(<RulerMarker position={[position.lat, position.lng]} length={length} />);
+  };
+
+  const onVertexDrag = (e) => {
+    const latlngs = e.layer._latlngs;
+    let length = 0;
+    if (latlngs.length > 1) {
+      const line = turf.lineString([...latlngs.map((item) => [item.lng, item.lat])]);
+      length = turf.length(line, { units: 'kilometers' });
+    }
+    setRuler(
+      <RulerMarker
+        position={[latlngs[latlngs.length - 1].lat, latlngs[latlngs.length - 1].lng]}
+        length={length}
+      />
+    );
+  };
+
+  const { startPolyline } = useLeafletEditable({
+    events: {
+      onDrawingClicked,
+      onVertexDrag,
+    },
+  });
+
+  useEffect(() => {
+    const polyline = startPolyline();
+    return () => {
+      map.removeLayer(polyline);
+    };
+  }, []);
+
+  return ruler;
+}
+
+function RulerMarker({ position, length }) {
+  return (
+    <Marker
+      position={position}
+      icon={L.divIcon({
+        html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="0%">
+            <title>circle-small</title>
+            <path d="M12,10A2,2 0 0,0 10,12C10,13.11 10.9,14 12,14C13.11,14 14,13.11 14,12A2,2 0 0,0 12,10Z" />
+            </svg>`,
+        className: 'marker-icon',
+        iconSize: [24, 24],
+        popupAnchor: [0, -12],
+      })}
+    >
+      <Tooltip permanent offset={[10, 0]} direction="right">
+        {length.toFixed(3)} KM
+      </Tooltip>
+    </Marker>
+  );
+}
+
+export default Ruler;
+```
+
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/leaflet-editable-hook/src/hooks/index.d.ts → leaflet-editable-hook/index.d.ts b/leaflet-editable-hook/src/hooks/index.d.ts → leaflet-editable-hook/index.d.ts
diff --git a/leaflet-editable-hook/index.js b/leaflet-editable-hook/index.js
@@ -0,0 +1,2 @@
+export { default } from "./useLeafletEditable";
+export { default as useLeafletEditable } from "./useLeafletEditable";
diff --git a/leaflet-editable-hook/package.json b/leaflet-editable-hook/package.json
@@ -1,35 +1,29 @@
 {
   "name": "leaflet-editable-hook",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
+  "version": "1.2.0",
+  "description": "The purpose of this hook is to provide functionality for editing features on the map, such as drawing polylines, polygons, markers, rectangles, circles, and more.",
+  "main": "index.js",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "dependencies": {
-    "@turf/turf": "^6.5.0",
-    "@vercel/analytics": "^1.2.2",
-    "antd": "^5.15.0",
+  "peerDependencies": {
     "leaflet": "^1.9.4",
     "leaflet-editable": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-custom-control": "^1.4.0"
+    "react-leaflet": "^4.2.1"
   },
-  "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "prettier": "^3.2.5",
-    "vite": "^5.1.4"
-  }
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlejandroRM-DEV/leaflet-editable-hook.git"
+  },
+  "keywords": [
+    "leaflet"
+  ],
+  "author": "Alejandro Ramírez Muñoz",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AlejandroRM-DEV/leaflet-editable-hook/issues"
+  },
+  "homepage": "https://github.com/AlejandroRM-DEV/leaflet-editable-hook#readme"
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from "./useLeafletEditable";
		export { default as useLeafletEditable } from "./useLeafletEditable";