diff --git a/README.md b/README.md index 4f07f87..862eca8 100644 --- a/README.md +++ b/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() { diff --git a/example/App.tsx b/example/App.tsx index 1591950..fd3ce03 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -19,13 +19,9 @@ export default function App() { -
+

{geojson.features.length} Features

-
    - {geojson.features.map((feature, i) => ( -
  • {JSON.stringify(feature, null, 2)}
    • - ))} -
+ 
{JSON.stringify(geojson, null, 2)}
) diff --git a/package.json b/package.json index f34d30c..2bd5d80 100644 --- a/package.json +++ b/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" diff --git a/src/GeomanControls.ts b/src/GeomanControls.ts index 92db666..98147d2 100644 --- a/src/GeomanControls.ts +++ b/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, diff --git a/yarn.lock b/yarn.lock index db0fba4..27a5d98 100644 --- a/yarn.lock +++ b/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"