@biodiv-platform/naksha-maplibre-draw 5.0.8 → 5.0.9

package/dist/esm/index.js

@@ -613,17 +613,19 @@ import { defaultMapStyles } from "@biodiv-platform/naksha-commons";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var Map = (props) => {
   var _a;
-  console.info("Rendering Naksha Maplibre Draw Map Component");
   const mapRef = useRef(null);
   const [map, setMap] = useState2();
   const [mode, setMode] = useState2("static");
   const [draw, setDraw] = useState2();
-  const { isMultiple = true, features = [], onFeaturesChange } = props;
+  const drawRef = useRef();
+  const { isMultiple, features = [], onFeaturesChange } = props;
   const [selectedMapStyleIdx, setSelectedMapStyleIdx] = useState2(
     (props == null ? void 0 : props.mapStyle) || 0
   );
   const mapTile = props.mapStyles ? props.mapStyles : defaultMapStyles;
   const mapStyle = (_a = mapTile[selectedMapStyleIdx]) == null ? void 0 : _a.style;
+  const mapStyleConfig = mapTile[selectedMapStyleIdx];
+  const storedFeaturesRef = useRef([]);
   const autoFocus = useCallback2(
     (features2) => {
       if (!(features2 == null ? void 0 : features2.length) || !map)
@@ -637,9 +639,11 @@ var Map = (props) => {
     },
     [map]
   );
-  const mapStyleConfig = mapTile[selectedMapStyleIdx];
   useEffect2(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (features && features.length > 0) {
+      storedFeaturesRef.current = ensureModeProperty(features);
+    }
     const maplibreMap = setupMaplibreMap({
       containerId: "maplibre-map",
       latitude: (_b = (_a2 = props.defaultViewState) == null ? void 0 : _a2.latitude) != null ? _b : 0,
@@ -660,11 +664,29 @@ var Map = (props) => {
     const fullscreen = new maplibregl2.FullscreenControl({});
     maplibreMap.addControl(navControl, "bottom-right");
     maplibreMap.addControl(fullscreen, "bottom-right");
-    maplibreMap.once("style.load", () => setMap(maplibreMap));
+    maplibreMap.once("style.load", () => {
+      setMap(maplibreMap);
+    });
     return () => {
-      maplibreMap.removeControl(navControl);
+      if (drawRef.current) {
+        storedFeaturesRef.current = drawRef.current.getSnapshot();
+      }
+      if (drawRef.current) {
+        try {
+          drawRef.current.stop();
+        } catch (e) {
+          console.warn("terraDraw stop failed", e);
+        }
+        drawRef.current = void 0;
+        setDraw(void 0);
+      }
+      if (maplibreMap) {
+        maplibreMap.removeControl(navControl);
+        maplibreMap.removeControl(fullscreen);
+        maplibreMap.remove();
+      }
     };
-  }, [mapStyle, props.defaultViewState]);
+  }, [mapStyle]);
   const filterUserFeatures = (features2) => features2.filter(
     (f) => f.geometry.type !== "Point" || f.properties.mode !== "static" && f.properties.mode !== "select"
   );
@@ -673,6 +695,7 @@ var Map = (props) => {
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
+    drawRef.current = terraDraw;
     setDraw(terraDraw);
     const handleChange = () => {
       let snapshot = terraDraw.getSnapshot();
@@ -691,24 +714,29 @@ var Map = (props) => {
       }
       onFeaturesChange == null ? void 0 : onFeaturesChange(userFeatures);
       autoFocus(userFeatures);
-      setMode("static");
     };
     terraDraw.on("finish", handleChange);
-    if (features.length) {
-      setTimeout(() => {
-        if (terraDraw.getSnapshot().length === 0) {
-          let withMode = ensureModeProperty(features);
-          let initial = !isMultiple && withMode.length > 1 ? [withMode.at(-1)] : withMode;
-          terraDraw.addFeatures(initial);
-          autoFocus(initial);
+    setTimeout(() => {
+      if (terraDraw.getSnapshot().length === 0) {
+        let featuresToAdd = [];
+        if (storedFeaturesRef.current.length > 0) {
+          featuresToAdd = storedFeaturesRef.current;
+        } else if (features && features.length > 0) {
+          featuresToAdd = ensureModeProperty(features);
         }
-      });
-    }
+        if (!isMultiple && featuresToAdd.length > 1) {
+          featuresToAdd = [featuresToAdd.at(-1)];
+        }
+        if (featuresToAdd.length > 0) {
+          terraDraw.addFeatures(featuresToAdd);
+          autoFocus(featuresToAdd);
+        }
+      }
+    }, 100);
     return () => {
       terraDraw.off("finish", handleChange);
-      terraDraw.stop();
     };
-  }, [map, isMultiple, autoFocus, features, onFeaturesChange]);
+  }, [map]);
   const changeMode = useCallback2(
     (newMode) => {
       draw == null ? void 0 : draw.setMode(newMode);
@@ -717,7 +745,11 @@ var Map = (props) => {
     [draw]
   );
   const handleStyleChange = (idx) => {
+    if (drawRef.current) {
+      storedFeaturesRef.current = drawRef.current.getSnapshot();
+    }
     setSelectedMapStyleIdx(idx);
+    setMode("static");
   };
   return /* @__PURE__ */ jsxs3("div", {
     ref: mapRef,

package/dist/index.js

@@ -632,17 +632,19 @@ var import_naksha_commons = require("@biodiv-platform/naksha-commons");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Map = (props) => {
   var _a;
-  console.info("Rendering Naksha Maplibre Draw Map Component");
   const mapRef = (0, import_react3.useRef)(null);
   const [map, setMap] = (0, import_react3.useState)();
   const [mode, setMode] = (0, import_react3.useState)("static");
   const [draw, setDraw] = (0, import_react3.useState)();
-  const { isMultiple = true, features = [], onFeaturesChange } = props;
+  const drawRef = (0, import_react3.useRef)();
+  const { isMultiple, features = [], onFeaturesChange } = props;
   const [selectedMapStyleIdx, setSelectedMapStyleIdx] = (0, import_react3.useState)(
     (props == null ? void 0 : props.mapStyle) || 0
   );
   const mapTile = props.mapStyles ? props.mapStyles : import_naksha_commons.defaultMapStyles;
   const mapStyle = (_a = mapTile[selectedMapStyleIdx]) == null ? void 0 : _a.style;
+  const mapStyleConfig = mapTile[selectedMapStyleIdx];
+  const storedFeaturesRef = (0, import_react3.useRef)([]);
   const autoFocus = (0, import_react3.useCallback)(
     (features2) => {
       if (!(features2 == null ? void 0 : features2.length) || !map)
@@ -656,9 +658,11 @@ var Map = (props) => {
     },
     [map]
   );
-  const mapStyleConfig = mapTile[selectedMapStyleIdx];
   (0, import_react3.useEffect)(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (features && features.length > 0) {
+      storedFeaturesRef.current = ensureModeProperty(features);
+    }
     const maplibreMap = setupMaplibreMap({
       containerId: "maplibre-map",
       latitude: (_b = (_a2 = props.defaultViewState) == null ? void 0 : _a2.latitude) != null ? _b : 0,
@@ -679,11 +683,29 @@ var Map = (props) => {
     const fullscreen = new import_maplibre_gl2.default.FullscreenControl({});
     maplibreMap.addControl(navControl, "bottom-right");
     maplibreMap.addControl(fullscreen, "bottom-right");
-    maplibreMap.once("style.load", () => setMap(maplibreMap));
+    maplibreMap.once("style.load", () => {
+      setMap(maplibreMap);
+    });
     return () => {
-      maplibreMap.removeControl(navControl);
+      if (drawRef.current) {
+        storedFeaturesRef.current = drawRef.current.getSnapshot();
+      }
+      if (drawRef.current) {
+        try {
+          drawRef.current.stop();
+        } catch (e) {
+          console.warn("terraDraw stop failed", e);
+        }
+        drawRef.current = void 0;
+        setDraw(void 0);
+      }
+      if (maplibreMap) {
+        maplibreMap.removeControl(navControl);
+        maplibreMap.removeControl(fullscreen);
+        maplibreMap.remove();
+      }
     };
-  }, [mapStyle, props.defaultViewState]);
+  }, [mapStyle]);
   const filterUserFeatures = (features2) => features2.filter(
     (f) => f.geometry.type !== "Point" || f.properties.mode !== "static" && f.properties.mode !== "select"
   );
@@ -692,6 +714,7 @@ var Map = (props) => {
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
+    drawRef.current = terraDraw;
     setDraw(terraDraw);
     const handleChange = () => {
       let snapshot = terraDraw.getSnapshot();
@@ -710,24 +733,29 @@ var Map = (props) => {
       }
       onFeaturesChange == null ? void 0 : onFeaturesChange(userFeatures);
       autoFocus(userFeatures);
-      setMode("static");
     };
     terraDraw.on("finish", handleChange);
-    if (features.length) {
-      setTimeout(() => {
-        if (terraDraw.getSnapshot().length === 0) {
-          let withMode = ensureModeProperty(features);
-          let initial = !isMultiple && withMode.length > 1 ? [withMode.at(-1)] : withMode;
-          terraDraw.addFeatures(initial);
-          autoFocus(initial);
+    setTimeout(() => {
+      if (terraDraw.getSnapshot().length === 0) {
+        let featuresToAdd = [];
+        if (storedFeaturesRef.current.length > 0) {
+          featuresToAdd = storedFeaturesRef.current;
+        } else if (features && features.length > 0) {
+          featuresToAdd = ensureModeProperty(features);
         }
-      });
-    }
+        if (!isMultiple && featuresToAdd.length > 1) {
+          featuresToAdd = [featuresToAdd.at(-1)];
+        }
+        if (featuresToAdd.length > 0) {
+          terraDraw.addFeatures(featuresToAdd);
+          autoFocus(featuresToAdd);
+        }
+      }
+    }, 100);
     return () => {
       terraDraw.off("finish", handleChange);
-      terraDraw.stop();
     };
-  }, [map, isMultiple, autoFocus, features, onFeaturesChange]);
+  }, [map]);
   const changeMode = (0, import_react3.useCallback)(
     (newMode) => {
       draw == null ? void 0 : draw.setMode(newMode);
@@ -736,7 +764,11 @@ var Map = (props) => {
     [draw]
   );
   const handleStyleChange = (idx) => {
+    if (drawRef.current) {
+      storedFeaturesRef.current = drawRef.current.getSnapshot();
+    }
     setSelectedMapStyleIdx(idx);
+    setMode("static");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
     ref: mapRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-maplibre-draw",
-  "version": "5.0.8",
+  "version": "5.0.9",
   "author": "arun",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",