remove dnd-kit; add draggable tabs

client/src/pages/MapTest.tsx

@@ -1,11 +1,13 @@
 import { Tab, TabList } from "@fluentui/react-tabs";
 import MapComponent from "../components/map/MapComponent";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 
 import {
     useAppStore,
     setCurrentTab,
     deleteMapTab,
     addMapTab,
+    reorderTabs,
 } from "../store/app";
 import { initializeMapState, useMapStore } from "../store/map";
 import { initializeObjectsState } from "../store/objects";
@@ -13,9 +15,86 @@ import { Button } from "@fluentui/react-components";
 import { Add12Filled, Dismiss12Filled, Map16Regular } from "@fluentui/react-icons";
 
 function MapTest() {
-    const { mapTab, currentTab } = useAppStore()
+    const { mapTab, currentTab, tabOrder } = useAppStore()
     const { id } = useMapStore()
 
+    const handleDragEnd = (result: any) => {
+        if (!result.destination) return
+        reorderTabs(result.source.index, result.destination.index)
+    }
+
+    return (
+        <div style={{ height: "100%", width: "100%", position: "relative" }}>
+            <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+                <DragDropContext onDragEnd={handleDragEnd}>
+                    <Droppable droppableId="tabs" direction="horizontal">
+                        {(provided) => (
+                            <TabList
+                                ref={provided.innerRef}
+                                {...provided.droppableProps}
+                                size="small"
+                                selectedValue={currentTab}
+                                onTabSelect={(_, data) => setCurrentTab(data.value as string)}
+                                style={{ borderBottom: '1px solid var(--colorNeutralShadowKey)' }}
+                                onDragStart={(e) => {
+                                    e.stopPropagation();   // stop TabList from also handling it
+                                }}
+                                onDrag={(e) => e.stopPropagation()}
+                            >
+                                {tabOrder.map((key, index) => (
+                                    <Draggable disableInteractiveElementBlocking draggableId={key} index={index} key={key}>
+                                        {(dragProvided) => (
+                                            <div
+                                                ref={dragProvided.innerRef}
+                                                {...dragProvided.draggableProps}
+                                                {...dragProvided.dragHandleProps}
+                                            >
+                                                <Tab value={key} icon={<Map16Regular />}>
+                                                    {id[key]?.mapLabel ?? `Tab ${key}`}
+                                                    <Button
+                                                        style={{ marginLeft: '0.5rem' }}
+                                                        size="small"
+                                                        icon={<Dismiss12Filled />}
+                                                        appearance="subtle"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation()
+                                                            deleteMapTab(key)
+                                                        }}
+                                                    />
+                                                </Tab>
+                                            </div>
+                                        )}
+                                    </Draggable>
+                                ))}
+
+                                {provided.placeholder}
+
+                                <Button
+                                    icon={<Add12Filled />}
+                                    title="Открыть новую вкладку"
+                                    appearance="subtle"
+                                    onClick={() => {
+                                        const newId = addMapTab();
+                                        initializeObjectsState(newId, null, null, null, null);
+                                        initializeMapState(newId);
+                                    }}
+                                />
+                            </TabList>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+
+                <div style={{ flexGrow: 1, position: "relative" }}>
+                    {tabOrder.map((key) => (
+                        <div key={key} style={{ height: "100%", position: "relative", display: currentTab === key ? 'unset' : 'none' }}>
+                            <MapComponent id={key} active={currentTab === key} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+
     return (
         <div style={{ height: "100%", width: "100%", position: "relative" }}>
             <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>