fix: improve useFeatureEditor change handler to correctly process features from events (#243)

Author: cioddi

packages/react-maplibre/src/components/MlGlobeButton/MlGlobeButton.cy.tsx

@@ -21,9 +21,20 @@ describe('MlGlobeButton', () => {
 
 	it('shows MapIcon as start state and toggles between MapIcon and PublicIcon', () => {
 		mount(<CatalogueDemo />);
-		cy.window().should((win) => expect((win as any)._map).to.exist);
+		cy.window()
+			.should((win) => expect((win as any)._map).to.exist)
+			.then((win) => {
+				const map = (win as any)._map;
+				return new Cypress.Promise((resolve) => {
+					if (map.loaded()) {
+						resolve();
+					} else {
+						map.on('load', resolve);
+					}
+				});
+			});
 
-		cy.get('[data-testid="MapIcon"]').should('exist');
+		cy.get('[data-testid="MapIcon"]', { timeout: 10000 }).should('exist');
 		cy.get('[data-testid="PublicIcon"]').should('not.exist');
 		cy.get('button').click();
 		cy.get('[data-testid="PublicIcon"]').should('exist');
@@ -35,7 +46,18 @@ describe('MlGlobeButton', () => {
 
 	it('changes the projection on the map instance attached to window', () => {
 		mount(<CatalogueDemo />);
-		cy.window().should((win) => expect((win as any)._map).to.exist);
+		cy.window()
+			.should((win) => expect((win as any)._map).to.exist)
+			.then((win) => {
+				const map = (win as any)._map;
+				return new Cypress.Promise((resolve) => {
+					if (map.loaded()) {
+						resolve();
+					} else {
+						map.on('load', resolve);
+					}
+				});
+			});
 
 		cy.window().should((win) => {
 			const map = (win as any)._map;

packages/react-maplibre/src/components/MlNavigationCompass/MlNavigationCompass.tsx

@@ -72,7 +72,7 @@ export interface MlNavigationCompassProps {
 	needleStyle?: CSSProperties;
 }
 /**
- * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
+ * Navigation component that displays a compass component which indicates the current orientation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
  *
  * All style props are applied using @mui/material/styled to allow more complex css selectors.
  *

packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx

@@ -112,14 +112,17 @@ const useFeatureEditor = (props: useFeatureEditorProps) => {
 	useEffect(() => {
 		if (!mapHook.map || !drawToolsReady) return;
 
-		const changeHandler = () => {
-			if (draw.current) {
-				// update drawnFeatures state object
-				const currentFeatureCollection = draw.current.getAll?.();
-				setFeature(currentFeatureCollection?.features);
-				if (typeof props.onChange === 'function') {
-					props.onChange(currentFeatureCollection?.features);
-				}
+		const changeHandler = (ev: unknown) => {
+			let features: Feature[] = [];
+
+			if (ev && typeof ev === 'object' && 'features' in ev && ev.features) {
+				features = ev.features as Feature[];
+			}
+
+			setFeature(features);
+
+			if (props.onChange) {
+				props.onChange(features);
 			}
 		};