@biodiv-platform/naksha-maplibre-layers 5.0.4 → 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
@@ -1397,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";
 
@@ -1706,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(
@@ -1757,7 +1775,9 @@ function LayerItem({ item, extended }) {
                 onChange: onToggleLayer,
                 isLoading
               }),
-              extended && /* @__PURE__ */ jsx16(DragHandle, {})
+              extended && /* @__PURE__ */ jsx16(DragHandle, {
+                dragHandleProps
+              })
             ]
           }),
           /* @__PURE__ */ jsx16("img", {
@@ -1921,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";
@@ -2517,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: [
@@ -2538,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;

package/dist/index.js

@@ -1418,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");
 
@@ -1727,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)(
@@ -1778,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", {
@@ -1942,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");
@@ -2538,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: [
@@ -2559,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.4",
+  "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",