@biodiv-platform/naksha-maplibre-layers 5.0.3 → 5.0.5

package/dist/esm/index.js

@@ -149,7 +149,10 @@ var locales_default = { en: en_default, fr: fr_default, hi: hi_default };
 // src/components/map/index.tsx
 import { defaultViewState as defaultViewState2 } from "@biodiv-platform/naksha-commons";
 import { useMemo as useMemo7, useState as useState10 } from "react";
-import MapGL, { NavigationControl } from "react-map-gl/maplibre";
+import MapGL, {
+  FullscreenControl,
+  NavigationControl
+} from "react-map-gl/maplibre";
 import { tw as tw20 } from "twind";
 
 // src/hooks/use-layers.tsx
@@ -251,27 +254,27 @@ var processRectangles = function(data, level) {
   counts.forEach((count, hash) => {
     const bboxStart = GeoHash.decodeGeoHash(hash);
     const bboxEnd = GeoHash.decodeGeoHash(bins.get(hash));
-    const feature = new BoundingBox({
+    const feature2 = new BoundingBox({
       minlat: bboxStart.latitude[0],
       minlon: bboxStart.longitude[0],
       maxlat: bboxEnd.latitude[1],
       maxlon: bboxEnd.longitude[1]
     }).toGeoJSON();
-    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   });
   return features;
 };
 var processSquares = (data) => {
   const features = [];
   for (const [hash, count] of Object.entries(data)) {
-    const bbox = GeoHash.decodeGeoHash(hash);
-    const feature = new BoundingBox({
-      minlat: bbox.latitude[0],
-      minlon: bbox.longitude[0],
-      maxlat: bbox.latitude[1],
-      maxlon: bbox.longitude[1]
+    const bbox2 = GeoHash.decodeGeoHash(hash);
+    const feature2 = new BoundingBox({
+      minlat: bbox2.latitude[0],
+      minlon: bbox2.longitude[0],
+      maxlat: bbox2.latitude[1],
+      maxlon: bbox2.longitude[1]
     }).toGeoJSON();
-    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   }
   return features;
 };
@@ -488,8 +491,12 @@ var LayersProvider = ({ mp: _mp, children }) => {
   const [queryTerm, setQueryTerm] = useState("");
   const queryTermDebounced = useDebounce(queryTerm, 500);
   const styles = mp.mapStyles && mp.mapStyles.length > 0 ? mp.mapStyles : defaultMapStyles;
-  const [mapStyle, setMapStyle] = useState((_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style);
-  const [maxZoom, setMaxZoom] = useState((_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom);
+  const [mapStyle, setMapStyle] = useState(
+    (_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style
+  );
+  const [maxZoom, setMaxZoom] = useState(
+    (_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom
+  );
   const [selectionStyle, setSelectionStyle] = useState(
     SELECTION_STYLE.TOP
   );
@@ -587,7 +594,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     styleIndex = 0,
     focus = true
   }) {
-    var _a2;
+    var _a2, _b2;
     if (!add) {
       setSelectedLayerIds(
         selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
@@ -596,11 +603,26 @@ var LayersProvider = ({ mp: _mp, children }) => {
     }
     const layerIndex = getLayerIndexById(layerId);
     const sourceType = (_a2 = layers[layerIndex]) == null ? void 0 : _a2.source.type;
-    yield toggleVectorLayer(layerIndex, styleIndex, focus);
-    setSelectedLayerIds((_slIds) => [
-      layerId,
-      ..._slIds.filter((lid) => lid !== layerId)
-    ]);
+    if (sourceType === "grid") {
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+      if (focus && ((_b2 = layers[layerIndex]) == null ? void 0 : _b2.bbox)) {
+        setTimeout(() => {
+          mapl == null ? void 0 : mapl.fitBounds(layers[layerIndex].bbox, {
+            padding: 40,
+            duration: 1e3
+          });
+        }, 100);
+      }
+    } else {
+      yield toggleVectorLayer(layerIndex, styleIndex, focus);
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+    }
   });
   const clearAllLayers = () => __async(void 0, null, function* () {
     return setSelectedLayerIds([]);
@@ -1378,7 +1400,6 @@ import { tw as tw13 } from "twind";
 // src/components/sidebar/common/layer-item.tsx
 import { useT as useT6 } from "@biodiv-platform/naksha-commons";
 import { useMemo as useMemo3, useState as useState6 } from "react";
-import { SortableHandle } from "react-sortable-hoc";
 import { RWebShare } from "react-web-share";
 import { tw as tw12 } from "twind";
 
@@ -1687,13 +1708,29 @@ function LayerItemStyle({ item }) {
 
 // src/components/sidebar/common/layer-item.tsx
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-var DragHandle = SortableHandle(() => /* @__PURE__ */ jsx16("div", {
-  className: tw12`mt-1 w-6 text-center cursor-move`,
-  children: /* @__PURE__ */ jsx16(GrabberIcon, {})
-}));
-function LayerItem({ item, extended }) {
+function DragHandle({
+  dragHandleProps
+}) {
+  return /* @__PURE__ */ jsx16("div", __spreadProps(__spreadValues({
+    className: tw12`mt-1 w-6 text-center cursor-move`,
+    style: { touchAction: "none" }
+  }, dragHandleProps), {
+    children: /* @__PURE__ */ jsx16(GrabberIcon, {})
+  }));
+}
+function LayerItem({
+  item,
+  extended,
+  dragHandleProps
+}) {
   const { t } = useT6();
-  const { layer, query, mp, query: { setClickedLngLat }, setIsInfoBarOpen } = useLayers();
+  const {
+    layer,
+    query,
+    mp,
+    query: { setClickedLngLat },
+    setIsInfoBarOpen
+  } = useLayers();
   const [isAdded, setIsAdded] = useState6(layer.selectedIds.includes(item.id));
   const [isLoading, setIsLoading] = useState6(false);
   const shareData = useMemo3(
@@ -1738,7 +1775,9 @@ function LayerItem({ item, extended }) {
                 onChange: onToggleLayer,
                 isLoading
               }),
-              extended && /* @__PURE__ */ jsx16(DragHandle, {})
+              extended && /* @__PURE__ */ jsx16(DragHandle, {
+                dragHandleProps
+              })
             ]
           }),
           /* @__PURE__ */ jsx16("img", {
@@ -1902,19 +1941,63 @@ function arrayMoveImmutable(array, fromIndex, toIndex) {
 }
 
 // src/components/sidebar/selected/selected-item-list.tsx
-import { SortableContainer, SortableElement } from "react-sortable-hoc";
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var SelectedItem = SortableElement(({ item, extended }) => /* @__PURE__ */ jsx20(LayerItem, {
-  item,
-  extended
-}));
-var SelectedItemList = SortableContainer(({ layerList }) => /* @__PURE__ */ jsx20("div", {
-  children: layerList.map((item, index) => /* @__PURE__ */ jsx20(SelectedItem, {
-    index,
-    item,
-    extended: true
-  }, item.id))
-}));
+function SortableSelectedItem({ item, extended }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: item.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsx20("div", {
+    ref: setNodeRef,
+    style,
+    children: /* @__PURE__ */ jsx20(LayerItem, {
+      item,
+      extended,
+      dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners)
+    })
+  });
+}
+var SelectedItemList = ({ layerList, onSortEnd }) => {
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = layerList.findIndex((item) => item.id === active.id);
+      const newIndex = layerList.findIndex((item) => item.id === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onSortEnd({ oldIndex, newIndex });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx20(DndContext, {
+    sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd,
+    children: /* @__PURE__ */ jsx20(SortableContext, {
+      items: layerList.map((item) => item.id),
+      strategy: verticalListSortingStrategy,
+      children: /* @__PURE__ */ jsx20("div", {
+        children: layerList.map((item) => /* @__PURE__ */ jsx20(SortableSelectedItem, {
+          item,
+          extended: true
+        }, item.id))
+      })
+    })
+  });
+};
 
 // src/components/sidebar/selected/index.tsx
 import { useT as useT8 } from "@biodiv-platform/naksha-commons";
@@ -2066,6 +2149,170 @@ function Sidebar() {
 // src/components/map/layers/index.tsx
 import { useMap as useMap4 } from "react-map-gl/maplibre";
 
+// ../../node_modules/@turf/helpers/dist/es/index.js
+var earthRadius = 63710088e-1;
+var factors = {
+  centimeters: earthRadius * 100,
+  centimetres: earthRadius * 100,
+  degrees: earthRadius / 111325,
+  feet: earthRadius * 3.28084,
+  inches: earthRadius * 39.37,
+  kilometers: earthRadius / 1e3,
+  kilometres: earthRadius / 1e3,
+  meters: earthRadius,
+  metres: earthRadius,
+  miles: earthRadius / 1609.344,
+  millimeters: earthRadius * 1e3,
+  millimetres: earthRadius * 1e3,
+  nauticalmiles: earthRadius / 1852,
+  radians: 1,
+  yards: earthRadius * 1.0936
+};
+var unitsFactors = {
+  centimeters: 100,
+  centimetres: 100,
+  degrees: 1 / 111325,
+  feet: 3.28084,
+  inches: 39.37,
+  kilometers: 1 / 1e3,
+  kilometres: 1 / 1e3,
+  meters: 1,
+  metres: 1,
+  miles: 1 / 1609.344,
+  millimeters: 1e3,
+  millimetres: 1e3,
+  nauticalmiles: 1 / 1852,
+  radians: 1 / earthRadius,
+  yards: 1.0936133
+};
+
+// ../../node_modules/@turf/meta/dist/es/index.js
+function coordEach(geojson, callback, excludeWrapCoord) {
+  if (geojson === null)
+    return;
+  var j, k, l, geometry, stopG, coords, geometryMaybeCollection, wrapShrink = 0, coordIndex = 0, isGeometryCollection, type = geojson.type, isFeatureCollection = type === "FeatureCollection", isFeature = type === "Feature", stop = isFeatureCollection ? geojson.features.length : 1;
+  for (var featureIndex = 0; featureIndex < stop; featureIndex++) {
+    geometryMaybeCollection = isFeatureCollection ? geojson.features[featureIndex].geometry : isFeature ? geojson.geometry : geojson;
+    isGeometryCollection = geometryMaybeCollection ? geometryMaybeCollection.type === "GeometryCollection" : false;
+    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
+    for (var geomIndex = 0; geomIndex < stopG; geomIndex++) {
+      var multiFeatureIndex = 0;
+      var geometryIndex = 0;
+      geometry = isGeometryCollection ? geometryMaybeCollection.geometries[geomIndex] : geometryMaybeCollection;
+      if (geometry === null)
+        continue;
+      coords = geometry.coordinates;
+      var geomType = geometry.type;
+      wrapShrink = excludeWrapCoord && (geomType === "Polygon" || geomType === "MultiPolygon") ? 1 : 0;
+      switch (geomType) {
+        case null:
+          break;
+        case "Point":
+          if (callback(
+            coords,
+            coordIndex,
+            featureIndex,
+            multiFeatureIndex,
+            geometryIndex
+          ) === false)
+            return false;
+          coordIndex++;
+          multiFeatureIndex++;
+          break;
+        case "LineString":
+        case "MultiPoint":
+          for (j = 0; j < coords.length; j++) {
+            if (callback(
+              coords[j],
+              coordIndex,
+              featureIndex,
+              multiFeatureIndex,
+              geometryIndex
+            ) === false)
+              return false;
+            coordIndex++;
+            if (geomType === "MultiPoint")
+              multiFeatureIndex++;
+          }
+          if (geomType === "LineString")
+            multiFeatureIndex++;
+          break;
+        case "Polygon":
+        case "MultiLineString":
+          for (j = 0; j < coords.length; j++) {
+            for (k = 0; k < coords[j].length - wrapShrink; k++) {
+              if (callback(
+                coords[j][k],
+                coordIndex,
+                featureIndex,
+                multiFeatureIndex,
+                geometryIndex
+              ) === false)
+                return false;
+              coordIndex++;
+            }
+            if (geomType === "MultiLineString")
+              multiFeatureIndex++;
+            if (geomType === "Polygon")
+              geometryIndex++;
+          }
+          if (geomType === "Polygon")
+            multiFeatureIndex++;
+          break;
+        case "MultiPolygon":
+          for (j = 0; j < coords.length; j++) {
+            geometryIndex = 0;
+            for (k = 0; k < coords[j].length; k++) {
+              for (l = 0; l < coords[j][k].length - wrapShrink; l++) {
+                if (callback(
+                  coords[j][k][l],
+                  coordIndex,
+                  featureIndex,
+                  multiFeatureIndex,
+                  geometryIndex
+                ) === false)
+                  return false;
+                coordIndex++;
+              }
+              geometryIndex++;
+            }
+            multiFeatureIndex++;
+          }
+          break;
+        case "GeometryCollection":
+          for (j = 0; j < geometry.geometries.length; j++)
+            if (coordEach(geometry.geometries[j], callback, excludeWrapCoord) === false)
+              return false;
+          break;
+        default:
+          throw new Error("Unknown Geometry Type");
+      }
+    }
+  }
+}
+
+// ../../node_modules/@turf/bbox/dist/es/index.js
+function bbox(geojson) {
+  var result = [Infinity, Infinity, -Infinity, -Infinity];
+  coordEach(geojson, function(coord) {
+    if (result[0] > coord[0]) {
+      result[0] = coord[0];
+    }
+    if (result[1] > coord[1]) {
+      result[1] = coord[1];
+    }
+    if (result[2] < coord[0]) {
+      result[2] = coord[0];
+    }
+    if (result[3] < coord[1]) {
+      result[3] = coord[1];
+    }
+  });
+  return result;
+}
+bbox["default"] = bbox;
+var es_default = bbox;
+
 // src/components/map/layers/grid/index.tsx
 import { useEffect as useEffect4, useState as useState9 } from "react";
 import { Layer, Source, useMap as useMap3 } from "react-map-gl/maplibre";
@@ -2077,7 +2324,9 @@ function GridLayer({
   const { layer } = useLayers();
   const { mapl } = useMap3();
   const [layerData, setLayerData] = useState9({ geojson: {}, paint: {} });
-  const fetchGridData = () => __async(this, null, function* () {
+  const isSelected = layer.selectedIds.includes(data.id);
+  const isLastSelected = layer.selectedIds[0] === data.id;
+  const fetchGridData = (shouldFitBounds = false) => __async(this, null, function* () {
     const { success, geojson, paint: paint2, stops, squareSize } = yield getGridLayerData(
       data.source.fetcher,
       mapl == null ? void 0 : mapl.getBounds(),
@@ -2085,14 +2334,50 @@ function GridLayer({
     );
     if (success) {
       setLayerData({ geojson, paint: paint2 });
+      if (shouldFitBounds && isLastSelected && data.zoomToFit) {
+        try {
+          const [minLon, minLat, maxLon, maxLat] = es_default(geojson);
+          mapl == null ? void 0 : mapl.fitBounds(
+            [
+              [minLon, minLat],
+              [maxLon, maxLat]
+            ],
+            { padding: 40, animate: true }
+          );
+        } catch (e) {
+          console.warn("Failed to compute bbox", e);
+        }
+      }
       layer.setGridLegends({
         [data.id]: { stops, squareSize }
       });
     }
   });
   useEffect4(() => {
-    mapl == null ? void 0 : mapl.on("idle", fetchGridData);
-  }, []);
+    if (isSelected && isLastSelected) {
+      fetchGridData(true);
+    } else if (isSelected) {
+      fetchGridData(false);
+    }
+  }, [isSelected, isLastSelected]);
+  useEffect4(() => {
+    if (!isSelected || !mapl)
+      return;
+    const handleIdle = () => fetchGridData(false);
+    mapl.on("idle", handleIdle);
+    return () => {
+      mapl.off("idle", handleIdle);
+    };
+  }, [isSelected, mapl]);
+  useEffect4(() => {
+    return () => {
+      layer.setGridLegends((prev) => {
+        const newLegends = __spreadValues({}, prev);
+        delete newLegends[data.id];
+        return newLegends;
+      });
+    };
+  }, [data.id]);
   return /* @__PURE__ */ jsx25(Source, {
     id: data.id,
     type: "geojson",
@@ -2296,7 +2581,6 @@ function Map2() {
     setCoordinates(event.lngLat);
     hover.onHover(event);
   };
-  console.info("NakshaMaplibreLayers props");
   return /* @__PURE__ */ jsxs18("div", {
     className: tw20`h-full w-full relative bg-gray-100`,
     children: [
@@ -2317,6 +2601,9 @@ function Map2() {
             showZoom: true,
             showCompass: true
           }),
+          mp.showFullscreenControl && /* @__PURE__ */ jsx31(FullscreenControl, {
+            position: "bottom-right"
+          }),
           /* @__PURE__ */ jsx31(markers_list_default, {}),
           layer.selectedLayers.map((_l, index) => {
             const beforeId = index > 0 ? layer.selectedIds[index - 1] : void 0;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface NakshaMaplibreLayersProps {
     defaultViewState?: Partial<ViewState>;
     loadToC?: boolean;
     showToC?: boolean;
+    showFullscreenControl?: boolean;
     managePublishing?: boolean;
     nakshaEndpointToken?: string;
     nakshaApiEndpoint?: string;
@@ -60,6 +61,7 @@ interface GeoserverLayer {
     createdDate?: string;
     isDownloadable?: boolean;
     bbox?: any[];
+    zoomToFit?: boolean;
     isAdded?: boolean;
     ats?: any;
     source: {

package/dist/index.js

@@ -272,27 +272,27 @@ var processRectangles = function(data, level) {
   counts.forEach((count, hash) => {
     const bboxStart = import_geohash.GeoHash.decodeGeoHash(hash);
     const bboxEnd = import_geohash.GeoHash.decodeGeoHash(bins.get(hash));
-    const feature = new import_boundingbox.default({
+    const feature2 = new import_boundingbox.default({
       minlat: bboxStart.latitude[0],
       minlon: bboxStart.longitude[0],
       maxlat: bboxEnd.latitude[1],
       maxlon: bboxEnd.longitude[1]
     }).toGeoJSON();
-    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   });
   return features;
 };
 var processSquares = (data) => {
   const features = [];
   for (const [hash, count] of Object.entries(data)) {
-    const bbox = import_geohash.GeoHash.decodeGeoHash(hash);
-    const feature = new import_boundingbox.default({
-      minlat: bbox.latitude[0],
-      minlon: bbox.longitude[0],
-      maxlat: bbox.latitude[1],
-      maxlon: bbox.longitude[1]
+    const bbox2 = import_geohash.GeoHash.decodeGeoHash(hash);
+    const feature2 = new import_boundingbox.default({
+      minlat: bbox2.latitude[0],
+      minlon: bbox2.longitude[0],
+      maxlat: bbox2.latitude[1],
+      maxlon: bbox2.longitude[1]
     }).toGeoJSON();
-    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   }
   return features;
 };
@@ -509,8 +509,12 @@ var LayersProvider = ({ mp: _mp, children }) => {
   const [queryTerm, setQueryTerm] = (0, import_react.useState)("");
   const queryTermDebounced = (0, import_naksha_commons2.useDebounce)(queryTerm, 500);
   const styles = mp.mapStyles && mp.mapStyles.length > 0 ? mp.mapStyles : import_naksha_commons2.defaultMapStyles;
-  const [mapStyle, setMapStyle] = (0, import_react.useState)((_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style);
-  const [maxZoom, setMaxZoom] = (0, import_react.useState)((_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom);
+  const [mapStyle, setMapStyle] = (0, import_react.useState)(
+    (_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style
+  );
+  const [maxZoom, setMaxZoom] = (0, import_react.useState)(
+    (_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom
+  );
   const [selectionStyle, setSelectionStyle] = (0, import_react.useState)(
     SELECTION_STYLE.TOP
   );
@@ -608,7 +612,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     styleIndex = 0,
     focus = true
   }) {
-    var _a2;
+    var _a2, _b2;
     if (!add) {
       setSelectedLayerIds(
         selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
@@ -617,11 +621,26 @@ var LayersProvider = ({ mp: _mp, children }) => {
     }
     const layerIndex = getLayerIndexById(layerId);
     const sourceType = (_a2 = layers[layerIndex]) == null ? void 0 : _a2.source.type;
-    yield toggleVectorLayer(layerIndex, styleIndex, focus);
-    setSelectedLayerIds((_slIds) => [
-      layerId,
-      ..._slIds.filter((lid) => lid !== layerId)
-    ]);
+    if (sourceType === "grid") {
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+      if (focus && ((_b2 = layers[layerIndex]) == null ? void 0 : _b2.bbox)) {
+        setTimeout(() => {
+          mapl == null ? void 0 : mapl.fitBounds(layers[layerIndex].bbox, {
+            padding: 40,
+            duration: 1e3
+          });
+        }, 100);
+      }
+    } else {
+      yield toggleVectorLayer(layerIndex, styleIndex, focus);
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+    }
   });
   const clearAllLayers = () => __async(void 0, null, function* () {
     return setSelectedLayerIds([]);
@@ -1399,7 +1418,6 @@ var import_twind13 = require("twind");
 // src/components/sidebar/common/layer-item.tsx
 var import_naksha_commons8 = require("@biodiv-platform/naksha-commons");
 var import_react7 = require("react");
-var import_react_sortable_hoc = require("react-sortable-hoc");
 var import_react_web_share = require("react-web-share");
 var import_twind12 = require("twind");
 
@@ -1708,13 +1726,29 @@ function LayerItemStyle({ item }) {
 
 // src/components/sidebar/common/layer-item.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var DragHandle = (0, import_react_sortable_hoc.SortableHandle)(() => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
-  className: import_twind12.tw`mt-1 w-6 text-center cursor-move`,
-  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GrabberIcon, {})
-}));
-function LayerItem({ item, extended }) {
+function DragHandle({
+  dragHandleProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", __spreadProps(__spreadValues({
+    className: import_twind12.tw`mt-1 w-6 text-center cursor-move`,
+    style: { touchAction: "none" }
+  }, dragHandleProps), {
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GrabberIcon, {})
+  }));
+}
+function LayerItem({
+  item,
+  extended,
+  dragHandleProps
+}) {
   const { t } = (0, import_naksha_commons8.useT)();
-  const { layer, query, mp, query: { setClickedLngLat }, setIsInfoBarOpen } = useLayers();
+  const {
+    layer,
+    query,
+    mp,
+    query: { setClickedLngLat },
+    setIsInfoBarOpen
+  } = useLayers();
   const [isAdded, setIsAdded] = (0, import_react7.useState)(layer.selectedIds.includes(item.id));
   const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
   const shareData = (0, import_react7.useMemo)(
@@ -1759,7 +1793,9 @@ function LayerItem({ item, extended }) {
                 onChange: onToggleLayer,
                 isLoading
               }),
-              extended && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DragHandle, {})
+              extended && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DragHandle, {
+                dragHandleProps
+              })
             ]
           }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", {
@@ -1923,19 +1959,57 @@ function arrayMoveImmutable(array, fromIndex, toIndex) {
 }
 
 // src/components/sidebar/selected/selected-item-list.tsx
-var import_react_sortable_hoc2 = require("react-sortable-hoc");
+var import_core9 = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var SelectedItem = (0, import_react_sortable_hoc2.SortableElement)(({ item, extended }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LayerItem, {
-  item,
-  extended
-}));
-var SelectedItemList = (0, import_react_sortable_hoc2.SortableContainer)(({ layerList }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
-  children: layerList.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectedItem, {
-    index,
-    item,
-    extended: true
-  }, item.id))
-}));
+function SortableSelectedItem({ item, extended }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({
+    id: item.id
+  });
+  const style = {
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+    ref: setNodeRef,
+    style,
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LayerItem, {
+      item,
+      extended,
+      dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners)
+    })
+  });
+}
+var SelectedItemList = ({ layerList, onSortEnd }) => {
+  const sensors = (0, import_core9.useSensors)((0, import_core9.useSensor)(import_core9.PointerSensor, { activationConstraint: { distance: 4 } }));
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = layerList.findIndex((item) => item.id === active.id);
+      const newIndex = layerList.findIndex((item) => item.id === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onSortEnd({ oldIndex, newIndex });
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core9.DndContext, {
+    sensors,
+    collisionDetection: import_core9.closestCenter,
+    onDragEnd: handleDragEnd,
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_sortable.SortableContext, {
+      items: layerList.map((item) => item.id),
+      strategy: import_sortable.verticalListSortingStrategy,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+        children: layerList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SortableSelectedItem, {
+          item,
+          extended: true
+        }, item.id))
+      })
+    })
+  });
+};
 
 // src/components/sidebar/selected/index.tsx
 var import_naksha_commons10 = require("@biodiv-platform/naksha-commons");
@@ -2087,6 +2161,170 @@ function Sidebar() {
 // src/components/map/layers/index.tsx
 var import_maplibre6 = require("react-map-gl/maplibre");
 
+// ../../node_modules/@turf/helpers/dist/es/index.js
+var earthRadius = 63710088e-1;
+var factors = {
+  centimeters: earthRadius * 100,
+  centimetres: earthRadius * 100,
+  degrees: earthRadius / 111325,
+  feet: earthRadius * 3.28084,
+  inches: earthRadius * 39.37,
+  kilometers: earthRadius / 1e3,
+  kilometres: earthRadius / 1e3,
+  meters: earthRadius,
+  metres: earthRadius,
+  miles: earthRadius / 1609.344,
+  millimeters: earthRadius * 1e3,
+  millimetres: earthRadius * 1e3,
+  nauticalmiles: earthRadius / 1852,
+  radians: 1,
+  yards: earthRadius * 1.0936
+};
+var unitsFactors = {
+  centimeters: 100,
+  centimetres: 100,
+  degrees: 1 / 111325,
+  feet: 3.28084,
+  inches: 39.37,
+  kilometers: 1 / 1e3,
+  kilometres: 1 / 1e3,
+  meters: 1,
+  metres: 1,
+  miles: 1 / 1609.344,
+  millimeters: 1e3,
+  millimetres: 1e3,
+  nauticalmiles: 1 / 1852,
+  radians: 1 / earthRadius,
+  yards: 1.0936133
+};
+
+// ../../node_modules/@turf/meta/dist/es/index.js
+function coordEach(geojson, callback, excludeWrapCoord) {
+  if (geojson === null)
+    return;
+  var j, k, l, geometry, stopG, coords, geometryMaybeCollection, wrapShrink = 0, coordIndex = 0, isGeometryCollection, type = geojson.type, isFeatureCollection = type === "FeatureCollection", isFeature = type === "Feature", stop = isFeatureCollection ? geojson.features.length : 1;
+  for (var featureIndex = 0; featureIndex < stop; featureIndex++) {
+    geometryMaybeCollection = isFeatureCollection ? geojson.features[featureIndex].geometry : isFeature ? geojson.geometry : geojson;
+    isGeometryCollection = geometryMaybeCollection ? geometryMaybeCollection.type === "GeometryCollection" : false;
+    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
+    for (var geomIndex = 0; geomIndex < stopG; geomIndex++) {
+      var multiFeatureIndex = 0;
+      var geometryIndex = 0;
+      geometry = isGeometryCollection ? geometryMaybeCollection.geometries[geomIndex] : geometryMaybeCollection;
+      if (geometry === null)
+        continue;
+      coords = geometry.coordinates;
+      var geomType = geometry.type;
+      wrapShrink = excludeWrapCoord && (geomType === "Polygon" || geomType === "MultiPolygon") ? 1 : 0;
+      switch (geomType) {
+        case null:
+          break;
+        case "Point":
+          if (callback(
+            coords,
+            coordIndex,
+            featureIndex,
+            multiFeatureIndex,
+            geometryIndex
+          ) === false)
+            return false;
+          coordIndex++;
+          multiFeatureIndex++;
+          break;
+        case "LineString":
+        case "MultiPoint":
+          for (j = 0; j < coords.length; j++) {
+            if (callback(
+              coords[j],
+              coordIndex,
+              featureIndex,
+              multiFeatureIndex,
+              geometryIndex
+            ) === false)
+              return false;
+            coordIndex++;
+            if (geomType === "MultiPoint")
+              multiFeatureIndex++;
+          }
+          if (geomType === "LineString")
+            multiFeatureIndex++;
+          break;
+        case "Polygon":
+        case "MultiLineString":
+          for (j = 0; j < coords.length; j++) {
+            for (k = 0; k < coords[j].length - wrapShrink; k++) {
+              if (callback(
+                coords[j][k],
+                coordIndex,
+                featureIndex,
+                multiFeatureIndex,
+                geometryIndex
+              ) === false)
+                return false;
+              coordIndex++;
+            }
+            if (geomType === "MultiLineString")
+              multiFeatureIndex++;
+            if (geomType === "Polygon")
+              geometryIndex++;
+          }
+          if (geomType === "Polygon")
+            multiFeatureIndex++;
+          break;
+        case "MultiPolygon":
+          for (j = 0; j < coords.length; j++) {
+            geometryIndex = 0;
+            for (k = 0; k < coords[j].length; k++) {
+              for (l = 0; l < coords[j][k].length - wrapShrink; l++) {
+                if (callback(
+                  coords[j][k][l],
+                  coordIndex,
+                  featureIndex,
+                  multiFeatureIndex,
+                  geometryIndex
+                ) === false)
+                  return false;
+                coordIndex++;
+              }
+              geometryIndex++;
+            }
+            multiFeatureIndex++;
+          }
+          break;
+        case "GeometryCollection":
+          for (j = 0; j < geometry.geometries.length; j++)
+            if (coordEach(geometry.geometries[j], callback, excludeWrapCoord) === false)
+              return false;
+          break;
+        default:
+          throw new Error("Unknown Geometry Type");
+      }
+    }
+  }
+}
+
+// ../../node_modules/@turf/bbox/dist/es/index.js
+function bbox(geojson) {
+  var result = [Infinity, Infinity, -Infinity, -Infinity];
+  coordEach(geojson, function(coord) {
+    if (result[0] > coord[0]) {
+      result[0] = coord[0];
+    }
+    if (result[1] > coord[1]) {
+      result[1] = coord[1];
+    }
+    if (result[2] < coord[0]) {
+      result[2] = coord[0];
+    }
+    if (result[3] < coord[1]) {
+      result[3] = coord[1];
+    }
+  });
+  return result;
+}
+bbox["default"] = bbox;
+var es_default = bbox;
+
 // src/components/map/layers/grid/index.tsx
 var import_react10 = require("react");
 var import_maplibre3 = require("react-map-gl/maplibre");
@@ -2098,7 +2336,9 @@ function GridLayer({
   const { layer } = useLayers();
   const { mapl } = (0, import_maplibre3.useMap)();
   const [layerData, setLayerData] = (0, import_react10.useState)({ geojson: {}, paint: {} });
-  const fetchGridData = () => __async(this, null, function* () {
+  const isSelected = layer.selectedIds.includes(data.id);
+  const isLastSelected = layer.selectedIds[0] === data.id;
+  const fetchGridData = (shouldFitBounds = false) => __async(this, null, function* () {
     const { success, geojson, paint: paint2, stops, squareSize } = yield getGridLayerData(
       data.source.fetcher,
       mapl == null ? void 0 : mapl.getBounds(),
@@ -2106,14 +2346,50 @@ function GridLayer({
     );
     if (success) {
       setLayerData({ geojson, paint: paint2 });
+      if (shouldFitBounds && isLastSelected && data.zoomToFit) {
+        try {
+          const [minLon, minLat, maxLon, maxLat] = es_default(geojson);
+          mapl == null ? void 0 : mapl.fitBounds(
+            [
+              [minLon, minLat],
+              [maxLon, maxLat]
+            ],
+            { padding: 40, animate: true }
+          );
+        } catch (e) {
+          console.warn("Failed to compute bbox", e);
+        }
+      }
       layer.setGridLegends({
         [data.id]: { stops, squareSize }
       });
     }
   });
   (0, import_react10.useEffect)(() => {
-    mapl == null ? void 0 : mapl.on("idle", fetchGridData);
-  }, []);
+    if (isSelected && isLastSelected) {
+      fetchGridData(true);
+    } else if (isSelected) {
+      fetchGridData(false);
+    }
+  }, [isSelected, isLastSelected]);
+  (0, import_react10.useEffect)(() => {
+    if (!isSelected || !mapl)
+      return;
+    const handleIdle = () => fetchGridData(false);
+    mapl.on("idle", handleIdle);
+    return () => {
+      mapl.off("idle", handleIdle);
+    };
+  }, [isSelected, mapl]);
+  (0, import_react10.useEffect)(() => {
+    return () => {
+      layer.setGridLegends((prev) => {
+        const newLegends = __spreadValues({}, prev);
+        delete newLegends[data.id];
+        return newLegends;
+      });
+    };
+  }, [data.id]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_maplibre3.Source, {
     id: data.id,
     type: "geojson",
@@ -2317,7 +2593,6 @@ function Map2() {
     setCoordinates(event.lngLat);
     hover.onHover(event);
   };
-  console.info("NakshaMaplibreLayers props");
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
     className: import_twind20.tw`h-full w-full relative bg-gray-100`,
     children: [
@@ -2338,6 +2613,9 @@ function Map2() {
             showZoom: true,
             showCompass: true
           }),
+          mp.showFullscreenControl && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_maplibre9.FullscreenControl, {
+            position: "bottom-right"
+          }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(markers_list_default, {}),
           layer.selectedLayers.map((_l, index) => {
             const beforeId = index > 0 ? layer.selectedIds[index - 1] : void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-maplibre-layers",
-  "version": "5.0.3",
+  "version": "5.0.5",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -20,7 +20,10 @@
   "peerDependencies": {
     "react": ">=18",
     "maplibre-gl": "^5.6.2",
-    "react-map-gl": "^8.0.4"
+    "react-map-gl": "^8.0.4",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
   },
   "devDependencies": {
     "@biodiv-platform/eslint-preset": "*",
@@ -31,7 +34,10 @@
     "maplibre-gl": "^5.6.2",
     "react-map-gl": "^8.0.4",
     "tsup": "^6.1.2",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
   },
   "dependencies": {
     "@bumaga/tabs": "^0.2.0",
@@ -42,7 +48,6 @@
     "geohash": "^0.0.1",
     "highlight-search-result": "^1.0.4",
     "immer": "^9.0.15",
-    "react-sortable-hoc": "^2.0.0",
     "react-tiny-popover": "^7.0.1",
     "react-virtual": "^2.10.4",
     "react-virtualized-auto-sizer": "^1.0.6",