popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remove dnd-kit; add draggable tabs

Browse Source
This commit is contained in:
popovspiridon99
2025-09-25 10:38:27 +09:00
parent 2b0b08ae4e
commit 06cc2f21a5
5 changed files with 120 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
client/package-lock.json generated
View File

@ -9,7 +9,6 @@
"version": "0.0.0",
"dependencies": {
"-": "^0.0.1",
"@dnd-kit/core": "^6.3.1",
"@fluentui/react-components": "^9.69.0",
"@fluentui/react-datepicker-compat": "^0.6.14",
"@fluentui/react-icons": "^2.0.309",
@ -1937,42 +1936,6 @@
"node": ">=10"
}
},
"node_modules/@dnd-kit/accessibility": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@dnd-kit/core": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
"dependencies": {
"@dnd-kit/accessibility": "^3.1.1",
"@dnd-kit/utilities": "^3.2.2",
"tslib": "^2.0.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@dnd-kit/utilities": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@emotion/hash": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",

1
client/package.json
View File

@ -12,7 +12,6 @@
},
"dependencies": {
"-": "^0.0.1",
"@dnd-kit/core": "^6.3.1",
"@fluentui/react-components": "^9.69.0",
"@fluentui/react-datepicker-compat": "^0.6.14",
"@fluentui/react-icons": "^2.0.309",

81
client/src/pages/MapTest.tsx
View File

@ -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%" }}>

68
client/src/store/app.ts
View File

@ -4,7 +4,6 @@ import { initializeObjectsState } from './objects'
import { initializeMapState } from './map'
export type Mode = 'edit' | 'view'
export type ColorScheme = 'light' | 'dark' | 'auto'
export interface MapTabState {
@ -14,15 +13,16 @@ export interface MapTabState {
}
export interface AppState {
colorScheme: ColorScheme,
mapTab: Record<string, MapTabState>,
currentTab: string | null;
colorScheme: ColorScheme
mapTab: Record<string, MapTabState>
tabOrder: string[] // 👈 defines tab order
currentTab: string | null
}
export const useAppStore = create<AppState>(() => {
const firstId = uuidv4()
initializeObjectsState(firstId, null, null, null, null);
initializeObjectsState(firstId, null, null, null, null)
initializeMapState(firstId)
return {
@ -31,15 +31,15 @@ export const useAppStore = create<AppState>(() => {
mapTab: {
[firstId]: { year: null, region: null, district: null },
},
tabOrder: [firstId],
}
})
export const getColorScheme = () => {
useAppStore.getState().colorScheme
}
// getters/setters
export const getColorScheme = () => useAppStore.getState().colorScheme
export const setColorScheme = (colorScheme: ColorScheme) => {
useAppStore.setState(() => ({ colorScheme: colorScheme }))
useAppStore.setState(() => ({ colorScheme }))
localStorage.setItem('colorScheme', colorScheme.toString())
}
@ -47,40 +47,46 @@ export const getCurrentTab = () => useAppStore.getState().currentTab
export const setCurrentTab = (id: string | null) => useAppStore.setState(() => ({ currentTab: id }))
export const setMapTabYear = (id: string, year: number | null) =>
useAppStore.setState((state) => {
return {
mapTab: {
...state.mapTab,
[id]: { ...state.mapTab[id], year: year }
}
}
})
useAppStore.setState((state) => ({
mapTab: {
...state.mapTab,
[id]: { ...state.mapTab[id], year },
},
}))
export const deleteMapTab = (id: string) =>
useAppStore.setState((state) => {
const { [id]: _, ...remainingTabs } = state.mapTab;
const keys = Object.keys(remainingTabs);
const { [id]: _, ...remainingTabs } = state.mapTab
const newOrder = state.tabOrder.filter((tid) => tid !== id)
return {
mapTab: remainingTabs,
currentTab: keys.length > 0 ? keys[keys.length - 1] : null,
};
tabOrder: newOrder,
currentTab: newOrder.length > 0 ? newOrder[newOrder.length - 1] : null,
}
})
export const addMapTab = () => {
const id = uuidv4();
const id = uuidv4()
initializeObjectsState(id, null, null, null, null)
initializeMapState(id)
useAppStore.setState((state) => ({
mapTab: {
...state.mapTab,
[id]: {
year: null,
region: null,
district: null,
},
[id]: { year: null, region: null, district: null },
},
currentTab: id, // optionally switch to this new tab
}));
tabOrder: [...state.tabOrder, id],
currentTab: id,
}))
return id; // so you can use the new id in your components
}
return id
}
export const reorderTabs = (from: number, to: number) =>
useAppStore.setState((state) => {
const newOrder = Array.from(state.tabOrder)
const [moved] = newOrder.splice(from, 1)
newOrder.splice(to, 0, moved)
return { tabOrder: newOrder }
})

29
client/yarn.lock
View File

@ -987,29 +987,6 @@
resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz"
integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
"@dnd-kit/accessibility@^3.1.1":
version "3.1.1"
resolved "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz"
integrity sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==
dependencies:
tslib "^2.0.0"
"@dnd-kit/core@^6.3.1":
version "6.3.1"
resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz"
integrity sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==
dependencies:
"@dnd-kit/accessibility" "^3.1.1"
"@dnd-kit/utilities" "^3.2.2"
tslib "^2.0.0"
"@dnd-kit/utilities@^3.2.2":
version "3.2.2"
resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz"
integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==
dependencies:
tslib "^2.0.0"
"@emotion/hash@^0.9.0":
version "0.9.2"
resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
@ -5584,7 +5561,7 @@ rc@^1.0.1, rc@^1.1.6:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>=16.14.0 <19.0.0", "react-dom@>=16.14.0 <20.0.0", react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, "react-dom@>=16.8.0 <19.0.0", "react-dom@>=16.8.0 <20.0.0", react-dom@>=18.0.0:
"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>=16.14.0 <19.0.0", "react-dom@>=16.14.0 <20.0.0", react-dom@>=16.6.0, react-dom@>=16.8, "react-dom@>=16.8.0 <19.0.0", "react-dom@>=16.8.0 <20.0.0", react-dom@>=18.0.0:
version "18.3.1"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@ -5640,7 +5617,7 @@ react-transition-group@^4.4.1:
loose-envify "^1.4.0"
prop-types "^15.6.2"
"react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18.0 || ^19", react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>=16.14.0 <19.0.0", "react@>=16.14.0 <20.0.0", react@>=16.6.0, react@>=16.8, react@>=16.8.0, "react@>=16.8.0 <19.0.0", "react@>=16.8.0 <20.0.0", react@>=18.0.0:
"react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18.0 || ^19", react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>=16.14.0 <19.0.0", "react@>=16.14.0 <20.0.0", react@>=16.6.0, react@>=16.8, "react@>=16.8.0 <19.0.0", "react@>=16.8.0 <20.0.0", react@>=18.0.0:
version "18.3.1"
resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@ -6529,7 +6506,7 @@ ts-interface-checker@^0.1.9:
resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
tslib@^2.0.0, tslib@^2.1.0, tslib@^2.8.0, tslib@^2.8.1:
tslib@^2.1.0, tslib@^2.8.0, tslib@^2.8.1:
version "2.8.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==