101 lines
4.9 KiB
TypeScript
101 lines
4.9 KiB
TypeScript
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";
|
|
import { Button } from "@fluentui/react-components";
|
|
import { Add12Filled, Dismiss12Filled, Map16Regular } from "@fluentui/react-icons";
|
|
|
|
function MapTest() {
|
|
const { 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
|
|
as='a'
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default MapTest;
|