Merge pull request #7 from TurtIeSocks/v1

v1 release

Author: TurtIeSocks

README.md

@@ -30,8 +30,13 @@ Add React Leaflet Geoman
 
 Since this package modifies the DOM directly, it can be imported either as hook or a component. At a minimum, it must be initiated inside of a `MapContainer` component. You can either draw shapes directly to the map container or wrap it in a `FeatureGroup` component. See the [Example](/example) code for a more detailed usage example.
 
+## V2 Breaking Changes
+
+This component wrapper no longer imports the Leaflet Geoman CSS file. You must import it yourself, this is for compatibility reasons for different frameworks.
+
 ```tsx
 // as a React component
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
 import { GeomanControls } from 'react-leaflet-geoman-v2'
 
 export default function Drawing() {
@@ -57,6 +62,7 @@ export default function Drawing() {
 }
 
 // as a hook
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
 import { useGeomanControls } from 'react-leaflet-geoman-v2'
 
 export default function Drawing() {

example/App.tsx

@@ -19,13 +19,9 @@ export default function App() {
           <GeomanWrapper geojson={geojson} setGeojson={setGeojson} />
         </MapContainer>
       </div>
-      <div style={{ width: '33%', textAlign: 'center', overflow: 'auto' }}>
+      <div style={{ width: '33%', overflow: 'auto', padding: '0 20px' }}>
         <h3>{geojson.features.length} Features</h3>
-        <ul>
-          {geojson.features.map((feature, i) => (
-            <li key={i}>{JSON.stringify(feature, null, 2)}</li>
-          ))}
-        </ul>
+        <pre>{JSON.stringify(geojson, null, 2)}</pre>
       </div>
     </div>
   )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet-geoman-v2",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "description": "React wrapper for the leaflet-geoman plugin",
   "repository": "https://github.com/TurtIeSocks/react-leaflet-geoman",
   "author": "TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>",
@@ -20,7 +20,7 @@
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {
-    "@geoman-io/leaflet-geoman-free": "^2.13.1",
+    "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "@rollup/plugin-typescript": "^8.4.0",
     "@types/leaflet": "^1.7.11",
     "@types/node": "^18.7.13",
@@ -37,7 +37,7 @@
     "vite-plugin-checker": "^0.4.9"
   },
   "peerDependencies": {
-    "@geoman-io/leaflet-geoman-free": "^2.13.1",
+    "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-leaflet": "^4.0.2"

src/GeomanControls.ts

@@ -1,6 +1,5 @@
 import '@geoman-io/leaflet-geoman-free'
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
-import { useEffect, useState } from 'react'
+import { useLayoutEffect, useEffect, useState } from 'react'
 import { useLeafletContext } from '@react-leaflet/core'
 import type { LayerGroup } from 'leaflet'
 import useDeepCompareEffect from 'use-deep-compare-effect'
@@ -30,42 +29,64 @@ export default function GeomanControls({
     return null
   }
 
-  useDeepCompareEffect(() => {
+  useLayoutEffect(() => {
+    // add controls
     if (!map.pm.controlsVisible()) {
       map.pm.addControls(options)
-      map.pm.setPathOptions(pathOptions)
-      map.pm.setGlobalOptions({
-        layerGroup: container,
-        ...globalOptions,
-      })
-      map.pm.setLang(lang)
       if (onMount) onMount()
       setMounted(true)
     }
     return () => {
-      map.pm.removeControls()
+      map.pm.disableDraw()
+      map.pm.disableGlobalEditMode()
+      map.pm.disableGlobalRemovalMode()
+      map.pm.disableGlobalDragMode()
+      map.pm.disableGlobalCutMode()
+      map.pm.disableGlobalRotateMode()
+      map.pm.disableGlobalDragMode()
+      map.pm.disableGlobalCutMode()
       if (onUnmount) onUnmount()
+      map.pm.removeControls()
       setMounted(false)
     }
-  }, [options, globalOptions, pathOptions, lang, !map])
+  }, [])
+
+  useEffect(() => {
+    // set path options
+    if (mounted) map.pm.setPathOptions(pathOptions)
+  }, [pathOptions, mounted])
+
+  useDeepCompareEffect(() => {
+    // set global options
+    if (mounted)
+      map.pm.setGlobalOptions({ layerGroup: container, ...globalOptions })
+  }, [globalOptions, mounted])
 
   useEffect(() => {
-    const withDebug = Object.fromEntries(
-      reference.map((handler) => [handler, handlers[handler] ?? eventDebugFn])
-    )
-    const layers = layerContainer
-      ? container.getLayers()
-      : map.pm.getGeomanLayers()
+    // set language
+    if (mounted) map.pm.setLang(lang)
+  }, [lang, mounted])
+
+  useEffect(() => {
+    // attach and remove event handlers
     if (mounted) {
+      const withDebug = Object.fromEntries(
+        reference.map((handler) => [handler, handlers[handler] ?? eventDebugFn])
+      )
+      const layers = layerContainer
+        ? container.getLayers()
+        : map.pm.getGeomanLayers()
+      layers.forEach((layer) => layerEvents(layer, withDebug, 'on'))
+
       globalEvents(map, withDebug, 'on')
       mapEvents(map, withDebug, 'on')
-      layers.forEach((layer) => layerEvents(layer, withDebug, 'on'))
-    }
-    return () => {
-      globalEvents(map, withDebug, 'off')
-      mapEvents(map, withDebug, 'off')
-      layers.forEach((layer) => layerEvents(layer, withDebug, 'off'))
-      if (process.env.NODE_ENV === 'development') setHandlersRef(handlers)
+
+      return () => {
+        globalEvents(map, withDebug, 'off')
+        mapEvents(map, withDebug, 'off')
+        layers.forEach((layer) => layerEvents(layer, withDebug, 'off'))
+        setHandlersRef(handlers)
+      }
     }
   }, [
     mounted,

yarn.lock

@@ -252,10 +252,10 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
   integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
 
-"@geoman-io/leaflet-geoman-free@^2.13.1":
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.13.1.tgz#a968810bc1b7c4fae9fe6f7a99e0015c9aeaaeef"
-  integrity sha512-csTmg0JJegXRfwGpNXQ9wy1Y1wha8AcrxhvaVFGm3xrhpPG8l3wouMZvO91PN8ZthG3xpZtfDnUQF+7Pm4mwXQ==
+"@geoman-io/leaflet-geoman-free@^2.14.2":
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.14.2.tgz#c84c2115c263f34d11dc0b43859551639fe3d56b"
+  integrity sha512-6lIyG8RvSVdFjVjiQgBPyNASjymSyqzsiUeBW0pA+q41lB5fAg4SDC6SfJvWdEyDHa81Jb5FWjUkCc9O+u0gbg==
   dependencies:
     "@turf/boolean-contains" "^6.5.0"
     "@turf/kinks" "^6.5.0"