@biodiv-platform/naksha-maplibre-draw 5.0.9 → 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,7 +623,8 @@ 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;
+  var _a, _b;
+  console.info("draw map");
   const mapRef = useRef(null);
   const [map, setMap] = useState2();
   const [mode, setMode] = useState2("static");
@@ -622,8 +634,8 @@ var Map = (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(
@@ -640,13 +652,13 @@ var Map = (props) => {
     [map]
   );
   useEffect2(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    if (features && features.length > 0) {
+    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,
@@ -675,7 +687,6 @@ var Map = (props) => {
         try {
           drawRef.current.stop();
         } catch (e) {
-          console.warn("terraDraw stop failed", e);
         }
         drawRef.current = void 0;
         setDraw(void 0);
@@ -707,7 +718,6 @@ var Map = (props) => {
           try {
             terraDraw.removeFeatures(toRemove);
           } catch (e) {
-            console.warn("removeFeatures failed", e);
           }
         }
         userFeatures = [lastFeature];
@@ -721,7 +731,7 @@ var Map = (props) => {
         let featuresToAdd = [];
         if (storedFeaturesRef.current.length > 0) {
           featuresToAdd = storedFeaturesRef.current;
-        } else if (features && features.length > 0) {
+        } else if (features.length > 0) {
           featuresToAdd = ensureModeProperty(features);
         }
         if (!isMultiple && featuresToAdd.length > 1) {

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,7 +642,8 @@ 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;
+  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");
@@ -641,8 +653,8 @@ var Map = (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)(
@@ -659,13 +671,13 @@ var Map = (props) => {
     [map]
   );
   (0, import_react3.useEffect)(() => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    if (features && features.length > 0) {
+    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,
@@ -694,7 +706,6 @@ var Map = (props) => {
         try {
           drawRef.current.stop();
         } catch (e) {
-          console.warn("terraDraw stop failed", e);
         }
         drawRef.current = void 0;
         setDraw(void 0);
@@ -726,7 +737,6 @@ var Map = (props) => {
           try {
             terraDraw.removeFeatures(toRemove);
           } catch (e) {
-            console.warn("removeFeatures failed", e);
           }
         }
         userFeatures = [lastFeature];
@@ -740,7 +750,7 @@ var Map = (props) => {
         let featuresToAdd = [];
         if (storedFeaturesRef.current.length > 0) {
           featuresToAdd = storedFeaturesRef.current;
-        } else if (features && features.length > 0) {
+        } else if (features.length > 0) {
           featuresToAdd = ensureModeProperty(features);
         }
         if (!isMultiple && featuresToAdd.length > 1) {

package/package.json

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