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

package/dist/esm/index.js

@@ -432,7 +432,9 @@ var MapButton = ({
   style: __spreadProps(__spreadValues({}, BUTTON_STYLE), {
     backgroundColor: disabled ? "#d3d3d3" : currentMode === mode ? "#02cf87" : "#f0f0f0",
     cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1
+    opacity: disabled ? 0.6 : 1,
+    width: 40,
+    height: 40
   }),
   children: icon
 });
@@ -573,7 +575,8 @@ function MapButtons({
       backgroundColor: "rgba(255,255,255,0.9)",
       padding: 8,
       borderRadius: 6,
-      boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
+      boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
+      maxWidth: "90vw"
     },
     children: [
       /* @__PURE__ */ jsx4(IconButton, {
@@ -582,8 +585,8 @@ function MapButtons({
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          width: 30,
-          height: 30,
+          width: 40,
+          height: 40,
           padding: 0,
           borderRadius: 4,
           backgroundColor: "#d3d3d3"
@@ -592,7 +595,15 @@ function MapButtons({
         children: expanded ? /* @__PURE__ */ jsx4(PencilCloseIcon, {}) : /* @__PURE__ */ jsx4(PencilOpenIcon, {})
       }),
       expanded && /* @__PURE__ */ jsx4("div", {
-        style: { display: "flex", flexDirection: "column", gap: 6 },
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(40px, 1fr))",
+          gap: 6,
+          maxHeight: "200px",
+          overflowY: "auto",
+          paddingRight: 1
+        },
+        className: "custom-scrollbar",
         children: buttons.map((btn, i) => /* @__PURE__ */ jsx4(map_button_default, {
           icon: btn.icon,
           mode: btn.mode,
@@ -612,18 +623,21 @@ import bbox from "@turf/bbox";
 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");
+  var _a, _b;
+  console.info("draw map");
   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 mapTile = (_a = props.mapStyles) != null ? _a : defaultMapStyles;
+  const mapStyle = (_b = mapTile[selectedMapStyleIdx]) == null ? void 0 : _b.style;
+  const mapStyleConfig = mapTile[selectedMapStyleIdx];
+  const storedFeaturesRef = useRef([]);
   const autoFocus = useCallback2(
     (features2) => {
       if (!(features2 == null ? void 0 : features2.length) || !map)
@@ -637,12 +651,14 @@ var Map = (props) => {
     },
     [map]
   );
-  const mapStyleConfig = mapTile[selectedMapStyleIdx];
   useEffect2(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (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,
+      latitude: (_b2 = (_a2 = props.defaultViewState) == null ? void 0 : _a2.latitude) != null ? _b2 : 0,
       longitude: (_d = (_c = props.defaultViewState) == null ? void 0 : _c.longitude) != null ? _d : 0,
       zoom: (_f = (_e = props.defaultViewState) == null ? void 0 : _e.zoom) != null ? _f : 0,
       pitch: (_h = (_g = props.defaultViewState) == null ? void 0 : _g.pitch) != null ? _h : 0,
@@ -660,11 +676,28 @@ 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) {
+        }
+        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 +706,7 @@ var Map = (props) => {
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
+    drawRef.current = terraDraw;
     setDraw(terraDraw);
     const handleChange = () => {
       let snapshot = terraDraw.getSnapshot();
@@ -684,31 +718,35 @@ var Map = (props) => {
           try {
             terraDraw.removeFeatures(toRemove);
           } catch (e) {
-            console.warn("removeFeatures failed", e);
           }
         }
         userFeatures = [lastFeature];
       }
       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.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 +755,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

@@ -451,7 +451,9 @@ var MapButton = ({
   style: __spreadProps(__spreadValues({}, BUTTON_STYLE), {
     backgroundColor: disabled ? "#d3d3d3" : currentMode === mode ? "#02cf87" : "#f0f0f0",
     cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1
+    opacity: disabled ? 0.6 : 1,
+    width: 40,
+    height: 40
   }),
   children: icon
 });
@@ -592,7 +594,8 @@ function MapButtons({
       backgroundColor: "rgba(255,255,255,0.9)",
       padding: 8,
       borderRadius: 6,
-      boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
+      boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
+      maxWidth: "90vw"
     },
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton, {
@@ -601,8 +604,8 @@ function MapButtons({
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          width: 30,
-          height: 30,
+          width: 40,
+          height: 40,
           padding: 0,
           borderRadius: 4,
           backgroundColor: "#d3d3d3"
@@ -611,7 +614,15 @@ function MapButtons({
         children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PencilCloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PencilOpenIcon, {})
       }),
       expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {
-        style: { display: "flex", flexDirection: "column", gap: 6 },
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(40px, 1fr))",
+          gap: 6,
+          maxHeight: "200px",
+          overflowY: "auto",
+          paddingRight: 1
+        },
+        className: "custom-scrollbar",
         children: buttons.map((btn, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(map_button_default, {
           icon: btn.icon,
           mode: btn.mode,
@@ -631,18 +642,21 @@ var import_bbox = __toESM(require("@turf/bbox"));
 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");
+  var _a, _b;
+  console.info("draw map");
   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 mapTile = (_a = props.mapStyles) != null ? _a : import_naksha_commons.defaultMapStyles;
+  const mapStyle = (_b = mapTile[selectedMapStyleIdx]) == null ? void 0 : _b.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,12 +670,14 @@ var Map = (props) => {
     },
     [map]
   );
-  const mapStyleConfig = mapTile[selectedMapStyleIdx];
   (0, import_react3.useEffect)(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (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,
+      latitude: (_b2 = (_a2 = props.defaultViewState) == null ? void 0 : _a2.latitude) != null ? _b2 : 0,
       longitude: (_d = (_c = props.defaultViewState) == null ? void 0 : _c.longitude) != null ? _d : 0,
       zoom: (_f = (_e = props.defaultViewState) == null ? void 0 : _e.zoom) != null ? _f : 0,
       pitch: (_h = (_g = props.defaultViewState) == null ? void 0 : _g.pitch) != null ? _h : 0,
@@ -679,11 +695,28 @@ 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) {
+        }
+        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 +725,7 @@ var Map = (props) => {
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
+    drawRef.current = terraDraw;
     setDraw(terraDraw);
     const handleChange = () => {
       let snapshot = terraDraw.getSnapshot();
@@ -703,31 +737,35 @@ var Map = (props) => {
           try {
             terraDraw.removeFeatures(toRemove);
           } catch (e) {
-            console.warn("removeFeatures failed", e);
           }
         }
         userFeatures = [lastFeature];
       }
       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.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 +774,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.10",
   "author": "arun",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",