@biodiv-platform/naksha-maplibre-draw 5.0.4 → 5.0.7

package/dist/esm/index.js

@@ -126,7 +126,7 @@ function setupDraw(map) {
 }
 
 // src/components/map.tsx
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState as useState2, useEffect as useEffect2, useCallback } from "react";
 
 // src/components/setup-maplibre.tsx
 import maplibregl from "maplibre-gl";
@@ -316,26 +316,41 @@ var MapButtons = ({
 };
 var MapButtons_default = MapButtons;
 
-// src/components/map.tsx
-import { defaultMapStyles } from "@biodiv-platform/naksha-commons";
-
 // src/components/icon-buttons/ClearButton.tsx
+import { useState, useEffect } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ClearButton = ({
   draw,
   onFeaturesChange
 }) => {
-  if (!draw)
-    return null;
+  const [hasFeatures, setHasFeatures] = useState(false);
+  useEffect(() => {
+    if (!draw)
+      return;
+    const updateHasFeatures = () => {
+      const snapshot = draw.getSnapshot();
+      setHasFeatures(snapshot.length > 0);
+    };
+    draw.on("finish", updateHasFeatures);
+    draw.on("change", updateHasFeatures);
+    updateHasFeatures();
+    return () => {
+      draw.off("finish", updateHasFeatures);
+      draw.off("change", updateHasFeatures);
+    };
+  }, [draw]);
   const handleClear = () => {
+    if (!draw)
+      return;
     draw.clear();
-    if (onFeaturesChange) {
+    setHasFeatures(false);
+    if (onFeaturesChange)
       onFeaturesChange([]);
-    }
   };
   return /* @__PURE__ */ jsx4("button", {
     onClick: handleClear,
-    title: "Delete",
+    title: "Clear all features",
+    disabled: !hasFeatures,
     style: {
       display: "flex",
       justifyContent: "center",
@@ -344,8 +359,8 @@ var ClearButton = ({
       height: "30px",
       padding: "0",
       borderRadius: "4px",
-      backgroundColor: "#f0f0f0",
-      cursor: "pointer"
+      backgroundColor: hasFeatures ? "#f0f0f0" : "#e0e0e0",
+      cursor: hasFeatures ? "pointer" : "not-allowed"
     },
     children: /* @__PURE__ */ jsx4(DeleteIcon, {})
   });
@@ -353,67 +368,38 @@ var ClearButton = ({
 var ClearButton_default = ClearButton;
 
 // src/components/map.tsx
+import { defaultMapStyles } from "@biodiv-platform/naksha-commons";
 import bbox from "@turf/bbox";
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var ensureModeProperty = (features) => features.map((feature) => {
-  var _a, _b;
-  if ((_a = feature.properties) == null ? void 0 : _a.mode)
-    return feature;
-  let mode;
-  switch ((_b = feature.geometry) == null ? void 0 : _b.type) {
-    case "Point":
-      mode = "point";
-      break;
-    case "Polygon":
-      mode = "polygon";
-      break;
-    case "LineString":
-      mode = "linestring";
-      break;
-    default:
-      mode = "unknown";
-  }
-  return __spreadProps(__spreadValues({}, feature), {
-    properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
+var ensureModeProperty = (features) => {
+  return features.map((feature) => {
+    var _a, _b;
+    if ((_a = feature.properties) == null ? void 0 : _a.mode)
+      return feature;
+    const geometryType = (_b = feature.geometry) == null ? void 0 : _b.type;
+    const mode = geometryType === "Point" ? "point" : geometryType === "Polygon" ? "polygon" : geometryType === "LineString" ? "linestring" : "unknown";
+    return __spreadProps(__spreadValues({}, feature), {
+      properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
+    });
   });
-});
+};
 var Map = (props) => {
-  const {
-    mapStyle: mapStyleIdx = 0,
-    defaultViewState,
-    isMultiple = true,
-    isControlled = false,
-    onFeaturesChange,
-    features = []
-  } = props;
   const mapRef = useRef(null);
-  const [map, setMap] = useState(null);
-  const [mode, setMode] = useState("static");
-  const [draw, setDraw] = useState(null);
-  const handleFeaturesChange = useCallback(
-    (newFeatures) => {
-      if (onFeaturesChange) {
-        onFeaturesChange(newFeatures);
-      }
-    },
-    [onFeaturesChange]
-  );
-  const autoFocus = useCallback(() => {
-    if (!(features == null ? void 0 : features.length) || !map)
-      return;
-    const _bbox = bbox({ type: "FeatureCollection", features });
-    map.fitBounds(_bbox, { padding: 40, duration: 1e3 });
-  }, [map, features]);
-  useEffect(() => {
-    var _a, _b, _c, _d, _e;
+  const [map, setMap] = useState2();
+  const [mode, setMode] = useState2("static");
+  const [draw, setDraw] = useState2();
+  const mapStyle = defaultMapStyles[(props == null ? void 0 : props.mapStyle) || 0].style;
+  const { isMultiple = true } = props;
+  useEffect2(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const maplibreMap = setupMaplibreMap({
       containerId: "maplibre-map",
-      latitude: (_a = defaultViewState == null ? void 0 : defaultViewState.latitude) != null ? _a : 0,
-      longitude: (_b = defaultViewState == null ? void 0 : defaultViewState.longitude) != null ? _b : 0,
-      zoom: (_c = defaultViewState == null ? void 0 : defaultViewState.zoom) != null ? _c : 0,
-      pitch: (_d = defaultViewState == null ? void 0 : defaultViewState.pitch) != null ? _d : 0,
-      bearing: (_e = defaultViewState == null ? void 0 : defaultViewState.bearing) != null ? _e : 0,
-      mapstyle: defaultMapStyles[mapStyleIdx].style
+      latitude: (_b = (_a = props.defaultViewState) == null ? void 0 : _a.latitude) != null ? _b : 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,
+      bearing: (_j = (_i = props.defaultViewState) == null ? void 0 : _i.bearing) != null ? _j : 0,
+      mapstyle: mapStyle
     });
     const navControl = new maplibregl2.NavigationControl({
       showCompass: true,
@@ -423,61 +409,65 @@ var Map = (props) => {
     maplibreMap.addControl(navControl, "bottom-right");
     maplibreMap.once("style.load", () => setMap(maplibreMap));
     return () => {
-      maplibreMap.removeControl(navControl);
-      setMap(null);
+      if (navControl && maplibreMap) {
+        maplibreMap.removeControl(navControl);
+      }
     };
   }, []);
-  useEffect(() => {
+  const autoFocus = useCallback(
+    (features) => {
+      if (!(features == null ? void 0 : features.length) || !map)
+        return;
+      const _bbox = bbox({
+        type: "FeatureCollection",
+        features
+      });
+      map.fitBounds(_bbox, { padding: 40, duration: 1e3 });
+    },
+    [map]
+  );
+  useEffect2(() => {
+    var _a;
     if (!map)
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
     setDraw(terraDraw);
-    const onChange = () => {
-      let snapshot = terraDraw.getSnapshot();
+    const handleChange = () => {
+      var _a2;
+      const snapshot = terraDraw.getSnapshot();
+      let filteredFeatures = snapshot;
       if (!isMultiple && snapshot.length > 1) {
         const latestFeature = snapshot[snapshot.length - 1];
-        const toRemove = snapshot.slice(0, -1);
-        const featureIds = toRemove.map((f) => f.id).filter(Boolean);
+        filteredFeatures = [latestFeature];
+        const featuresToRemove = snapshot.slice(0, -1);
+        const featureIds = featuresToRemove.map((f) => f.id).filter((id) => id !== void 0);
         if (featureIds.length > 0) {
           terraDraw.removeFeatures(featureIds);
         }
-        snapshot = [latestFeature];
       }
-      handleFeaturesChange(snapshot);
+      (_a2 = props.onFeaturesChange) == null ? void 0 : _a2.call(props, snapshot);
+      autoFocus(filteredFeatures);
     };
-    terraDraw.on("change", onChange);
-    if (features.length) {
-      const timeoutId = setTimeout(() => {
+    terraDraw.on("finish", handleChange);
+    if ((_a = props.features) == null ? void 0 : _a.length) {
+      setTimeout(() => {
         if (terraDraw.getSnapshot().length === 0) {
-          let featuresWithMode = ensureModeProperty(features);
+          const featuresWithMode = ensureModeProperty(props.features);
+          let initialFeatures = featuresWithMode;
           if (!isMultiple && featuresWithMode.length > 1) {
-            featuresWithMode = [featuresWithMode[featuresWithMode.length - 1]];
+            initialFeatures = [featuresWithMode[featuresWithMode.length - 1]];
           }
-          terraDraw.addFeatures(featuresWithMode);
-          handleFeaturesChange(featuresWithMode);
-          autoFocus();
+          terraDraw.addFeatures(initialFeatures);
+          autoFocus(initialFeatures);
         }
-      }, 300);
-      return () => {
-        clearTimeout(timeoutId);
-        terraDraw.off("change", onChange);
-        terraDraw.stop();
-        setDraw(null);
-      };
+      });
     }
     return () => {
-      terraDraw.off("change", onChange);
+      terraDraw.off("finish", handleChange);
       terraDraw.stop();
-      setDraw(null);
     };
-  }, [map, isMultiple, features, handleFeaturesChange, autoFocus]);
-  useEffect(() => {
-    if (features && features.length > 0) {
-      onFeaturesChange == null ? void 0 : onFeaturesChange(features);
-      autoFocus();
-    }
-  }, [features, autoFocus, onFeaturesChange]);
+  }, [map, isMultiple, autoFocus]);
   const changeMode = useCallback(
     (newMode) => {
       draw == null ? void 0 : draw.setMode(newMode);
@@ -485,41 +475,37 @@ var Map = (props) => {
     },
     [draw]
   );
-  return /* @__PURE__ */ jsxs3("div", {
-    children: [
-      /* @__PURE__ */ jsx5("div", {
-        ref: mapRef,
-        id: "maplibre-map",
-        style: { width: "100%", height: "100vh" }
-      }),
-      draw && /* @__PURE__ */ jsxs3(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx5(MapButtons_default, {
-            mode,
-            changeMode
-          }),
-          /* @__PURE__ */ jsx5("div", {
-            style: {
-              position: "absolute",
-              top: "180px",
-              left: "10px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "6px",
-              zIndex: 1e3,
-              backgroundColor: "rgba(255, 255, 255, 0.9)",
-              padding: "8px",
-              borderRadius: "6px",
-              boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
-            },
-            children: /* @__PURE__ */ jsx5(ClearButton_default, {
-              draw,
-              onFeaturesChange
-            })
+  return /* @__PURE__ */ jsx5("div", {
+    ref: mapRef,
+    id: "maplibre-map",
+    style: { width: "100%", height: "100%" },
+    children: draw && /* @__PURE__ */ jsxs3(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx5(MapButtons_default, {
+          mode,
+          changeMode
+        }),
+        /* @__PURE__ */ jsx5("div", {
+          style: {
+            position: "absolute",
+            top: "180px",
+            left: "10px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            zIndex: 1e3,
+            backgroundColor: "rgba(255, 255, 255, 0.9)",
+            padding: "8px",
+            borderRadius: "6px",
+            boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
+          },
+          children: /* @__PURE__ */ jsx5(ClearButton_default, {
+            draw,
+            onFeaturesChange: props.onFeaturesChange
           })
-        ]
-      })
-    ]
+        })
+      ]
+    })
   });
 };
 var map_default = Map;

package/dist/index.js

@@ -145,7 +145,7 @@ function setupDraw(map) {
 }
 
 // src/components/map.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/components/setup-maplibre.tsx
 var import_maplibre_gl = __toESM(require("maplibre-gl"));
@@ -335,26 +335,41 @@ var MapButtons = ({
 };
 var MapButtons_default = MapButtons;
 
-// src/components/map.tsx
-var import_naksha_commons = require("@biodiv-platform/naksha-commons");
-
 // src/components/icon-buttons/ClearButton.tsx
+var import_react = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ClearButton = ({
   draw,
   onFeaturesChange
 }) => {
-  if (!draw)
-    return null;
+  const [hasFeatures, setHasFeatures] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!draw)
+      return;
+    const updateHasFeatures = () => {
+      const snapshot = draw.getSnapshot();
+      setHasFeatures(snapshot.length > 0);
+    };
+    draw.on("finish", updateHasFeatures);
+    draw.on("change", updateHasFeatures);
+    updateHasFeatures();
+    return () => {
+      draw.off("finish", updateHasFeatures);
+      draw.off("change", updateHasFeatures);
+    };
+  }, [draw]);
   const handleClear = () => {
+    if (!draw)
+      return;
     draw.clear();
-    if (onFeaturesChange) {
+    setHasFeatures(false);
+    if (onFeaturesChange)
       onFeaturesChange([]);
-    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", {
     onClick: handleClear,
-    title: "Delete",
+    title: "Clear all features",
+    disabled: !hasFeatures,
     style: {
       display: "flex",
       justifyContent: "center",
@@ -363,8 +378,8 @@ var ClearButton = ({
       height: "30px",
       padding: "0",
       borderRadius: "4px",
-      backgroundColor: "#f0f0f0",
-      cursor: "pointer"
+      backgroundColor: hasFeatures ? "#f0f0f0" : "#e0e0e0",
+      cursor: hasFeatures ? "pointer" : "not-allowed"
     },
     children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DeleteIcon, {})
   });
@@ -372,67 +387,38 @@ var ClearButton = ({
 var ClearButton_default = ClearButton;
 
 // src/components/map.tsx
+var import_naksha_commons = require("@biodiv-platform/naksha-commons");
 var import_bbox = __toESM(require("@turf/bbox"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ensureModeProperty = (features) => features.map((feature) => {
-  var _a, _b;
-  if ((_a = feature.properties) == null ? void 0 : _a.mode)
-    return feature;
-  let mode;
-  switch ((_b = feature.geometry) == null ? void 0 : _b.type) {
-    case "Point":
-      mode = "point";
-      break;
-    case "Polygon":
-      mode = "polygon";
-      break;
-    case "LineString":
-      mode = "linestring";
-      break;
-    default:
-      mode = "unknown";
-  }
-  return __spreadProps(__spreadValues({}, feature), {
-    properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
+var ensureModeProperty = (features) => {
+  return features.map((feature) => {
+    var _a, _b;
+    if ((_a = feature.properties) == null ? void 0 : _a.mode)
+      return feature;
+    const geometryType = (_b = feature.geometry) == null ? void 0 : _b.type;
+    const mode = geometryType === "Point" ? "point" : geometryType === "Polygon" ? "polygon" : geometryType === "LineString" ? "linestring" : "unknown";
+    return __spreadProps(__spreadValues({}, feature), {
+      properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
+    });
   });
-});
+};
 var Map = (props) => {
-  const {
-    mapStyle: mapStyleIdx = 0,
-    defaultViewState,
-    isMultiple = true,
-    isControlled = false,
-    onFeaturesChange,
-    features = []
-  } = props;
-  const mapRef = (0, import_react.useRef)(null);
-  const [map, setMap] = (0, import_react.useState)(null);
-  const [mode, setMode] = (0, import_react.useState)("static");
-  const [draw, setDraw] = (0, import_react.useState)(null);
-  const handleFeaturesChange = (0, import_react.useCallback)(
-    (newFeatures) => {
-      if (onFeaturesChange) {
-        onFeaturesChange(newFeatures);
-      }
-    },
-    [onFeaturesChange]
-  );
-  const autoFocus = (0, import_react.useCallback)(() => {
-    if (!(features == null ? void 0 : features.length) || !map)
-      return;
-    const _bbox = (0, import_bbox.default)({ type: "FeatureCollection", features });
-    map.fitBounds(_bbox, { padding: 40, duration: 1e3 });
-  }, [map, features]);
-  (0, import_react.useEffect)(() => {
-    var _a, _b, _c, _d, _e;
+  const mapRef = (0, import_react2.useRef)(null);
+  const [map, setMap] = (0, import_react2.useState)();
+  const [mode, setMode] = (0, import_react2.useState)("static");
+  const [draw, setDraw] = (0, import_react2.useState)();
+  const mapStyle = import_naksha_commons.defaultMapStyles[(props == null ? void 0 : props.mapStyle) || 0].style;
+  const { isMultiple = true } = props;
+  (0, import_react2.useEffect)(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const maplibreMap = setupMaplibreMap({
       containerId: "maplibre-map",
-      latitude: (_a = defaultViewState == null ? void 0 : defaultViewState.latitude) != null ? _a : 0,
-      longitude: (_b = defaultViewState == null ? void 0 : defaultViewState.longitude) != null ? _b : 0,
-      zoom: (_c = defaultViewState == null ? void 0 : defaultViewState.zoom) != null ? _c : 0,
-      pitch: (_d = defaultViewState == null ? void 0 : defaultViewState.pitch) != null ? _d : 0,
-      bearing: (_e = defaultViewState == null ? void 0 : defaultViewState.bearing) != null ? _e : 0,
-      mapstyle: import_naksha_commons.defaultMapStyles[mapStyleIdx].style
+      latitude: (_b = (_a = props.defaultViewState) == null ? void 0 : _a.latitude) != null ? _b : 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,
+      bearing: (_j = (_i = props.defaultViewState) == null ? void 0 : _i.bearing) != null ? _j : 0,
+      mapstyle: mapStyle
     });
     const navControl = new import_maplibre_gl2.default.NavigationControl({
       showCompass: true,
@@ -442,103 +428,103 @@ var Map = (props) => {
     maplibreMap.addControl(navControl, "bottom-right");
     maplibreMap.once("style.load", () => setMap(maplibreMap));
     return () => {
-      maplibreMap.removeControl(navControl);
-      setMap(null);
+      if (navControl && maplibreMap) {
+        maplibreMap.removeControl(navControl);
+      }
     };
   }, []);
-  (0, import_react.useEffect)(() => {
+  const autoFocus = (0, import_react2.useCallback)(
+    (features) => {
+      if (!(features == null ? void 0 : features.length) || !map)
+        return;
+      const _bbox = (0, import_bbox.default)({
+        type: "FeatureCollection",
+        features
+      });
+      map.fitBounds(_bbox, { padding: 40, duration: 1e3 });
+    },
+    [map]
+  );
+  (0, import_react2.useEffect)(() => {
+    var _a;
     if (!map)
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
     setDraw(terraDraw);
-    const onChange = () => {
-      let snapshot = terraDraw.getSnapshot();
+    const handleChange = () => {
+      var _a2;
+      const snapshot = terraDraw.getSnapshot();
+      let filteredFeatures = snapshot;
       if (!isMultiple && snapshot.length > 1) {
         const latestFeature = snapshot[snapshot.length - 1];
-        const toRemove = snapshot.slice(0, -1);
-        const featureIds = toRemove.map((f) => f.id).filter(Boolean);
+        filteredFeatures = [latestFeature];
+        const featuresToRemove = snapshot.slice(0, -1);
+        const featureIds = featuresToRemove.map((f) => f.id).filter((id) => id !== void 0);
         if (featureIds.length > 0) {
           terraDraw.removeFeatures(featureIds);
         }
-        snapshot = [latestFeature];
       }
-      handleFeaturesChange(snapshot);
+      (_a2 = props.onFeaturesChange) == null ? void 0 : _a2.call(props, snapshot);
+      autoFocus(filteredFeatures);
     };
-    terraDraw.on("change", onChange);
-    if (features.length) {
-      const timeoutId = setTimeout(() => {
+    terraDraw.on("finish", handleChange);
+    if ((_a = props.features) == null ? void 0 : _a.length) {
+      setTimeout(() => {
         if (terraDraw.getSnapshot().length === 0) {
-          let featuresWithMode = ensureModeProperty(features);
+          const featuresWithMode = ensureModeProperty(props.features);
+          let initialFeatures = featuresWithMode;
           if (!isMultiple && featuresWithMode.length > 1) {
-            featuresWithMode = [featuresWithMode[featuresWithMode.length - 1]];
+            initialFeatures = [featuresWithMode[featuresWithMode.length - 1]];
           }
-          terraDraw.addFeatures(featuresWithMode);
-          handleFeaturesChange(featuresWithMode);
-          autoFocus();
+          terraDraw.addFeatures(initialFeatures);
+          autoFocus(initialFeatures);
         }
-      }, 300);
-      return () => {
-        clearTimeout(timeoutId);
-        terraDraw.off("change", onChange);
-        terraDraw.stop();
-        setDraw(null);
-      };
+      });
     }
     return () => {
-      terraDraw.off("change", onChange);
+      terraDraw.off("finish", handleChange);
       terraDraw.stop();
-      setDraw(null);
     };
-  }, [map, isMultiple, features, handleFeaturesChange, autoFocus]);
-  (0, import_react.useEffect)(() => {
-    if (features && features.length > 0) {
-      onFeaturesChange == null ? void 0 : onFeaturesChange(features);
-      autoFocus();
-    }
-  }, [features, autoFocus, onFeaturesChange]);
-  const changeMode = (0, import_react.useCallback)(
+  }, [map, isMultiple, autoFocus]);
+  const changeMode = (0, import_react2.useCallback)(
     (newMode) => {
       draw == null ? void 0 : draw.setMode(newMode);
       setMode(newMode);
     },
     [draw]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-        ref: mapRef,
-        id: "maplibre-map",
-        style: { width: "100%", height: "100vh" }
-      }),
-      draw && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MapButtons_default, {
-            mode,
-            changeMode
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-            style: {
-              position: "absolute",
-              top: "180px",
-              left: "10px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "6px",
-              zIndex: 1e3,
-              backgroundColor: "rgba(255, 255, 255, 0.9)",
-              padding: "8px",
-              borderRadius: "6px",
-              boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ClearButton_default, {
-              draw,
-              onFeaturesChange
-            })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+    ref: mapRef,
+    id: "maplibre-map",
+    style: { width: "100%", height: "100%" },
+    children: draw && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MapButtons_default, {
+          mode,
+          changeMode
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+          style: {
+            position: "absolute",
+            top: "180px",
+            left: "10px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            zIndex: 1e3,
+            backgroundColor: "rgba(255, 255, 255, 0.9)",
+            padding: "8px",
+            borderRadius: "6px",
+            boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ClearButton_default, {
+            draw,
+            onFeaturesChange: props.onFeaturesChange
           })
-        ]
-      })
-    ]
+        })
+      ]
+    })
   });
 };
 var map_default = Map;

package/package.json

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