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

MapComponent interaction fixes;

Browse Source
This commit is contained in:
popovspiridon99
2025-10-07 12:21:05 +09:00
parent 4a6d314472
commit 8b8b242d3e
1 changed files with 186 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

440
client/src/components/map/MapComponent.tsx
View File

@ -1,4 +1,4 @@
import { CSSProperties, useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import 'ol/ol.css' import 'ol/ol.css'
import { Modify } from 'ol/interaction' import { Modify } from 'ol/interaction'
import { ImageStatic, Vector as VectorSource } from 'ol/source' import { ImageStatic, Vector as VectorSource } from 'ol/source'
@ -38,11 +38,14 @@ import { IRegion } from '../../interfaces/fuel'
import { useAppStore } from '../../store/app' import { useAppStore } from '../../store/app'
import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions' import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
import { ArrowLeft24Regular } from '@fluentui/react-icons' import { ArrowLeft24Regular } from '@fluentui/react-icons'
import View from 'ol/View'
import { Style } from 'ol/style'
const swrOptions: SWRConfiguration = { const swrOptions: SWRConfiguration = {
revalidateOnFocus: false revalidateOnFocus: false
} }
// City settings mockup
function getCitySettings() { function getCitySettings() {
return { return {
city_id: 0, city_id: 0,
@ -90,8 +93,8 @@ const MapComponent = ({
// Map // Map
const mapElement = useRef<HTMLDivElement | null>(null) const mapElement = useRef<HTMLDivElement | null>(null)
const tooltipRef = useRef<HTMLDivElement | null>(null)
// Get type roles
useSWR(`/gis/type-roles`, (url) => fetcher(url, BASE_URL.ems).then(res => { useSWR(`/gis/type-roles`, (url) => fetcher(url, BASE_URL.ems).then(res => {
if (Array.isArray(res)) { if (Array.isArray(res)) {
setTypeRoles(id, res) setTypeRoles(id, res)
@ -99,8 +102,22 @@ const MapComponent = ({
return res return res
}), swrOptions) }), swrOptions)
// Bounds: region
const { data: regionBoundsData } = useSWR(`/gis/bounds/region`, (url) => fetcher(url, BASE_URL.ems), swrOptions) const { data: regionBoundsData } = useSWR(`/gis/bounds/region`, (url) => fetcher(url, BASE_URL.ems), swrOptions)
// Map init
useEffect(() => {
map?.setTarget(mapElement.current as HTMLDivElement)
if (drawingLayerSource) {
const modify = new Modify({ source: drawingLayerSource })
map?.addInteraction(modify)
}
loadFeatures(id)
}, [])
// First step: On region bounds loaded
useEffect(() => { useEffect(() => {
if (regionsLayer && regionBoundsData) { if (regionsLayer && regionBoundsData) {
if (Array.isArray(regionBoundsData)) { if (Array.isArray(regionBoundsData)) {
@ -113,20 +130,55 @@ const MapComponent = ({
regionsLayer.getSource()?.addFeature(feature) regionsLayer.getSource()?.addFeature(feature)
}) })
}
}
if (map) { return () => {
const extent = regionsLayer.getSource()?.getExtent() if (regionsLayer) {
regionsLayer.getSource()?.clear()
if (extent) {
map.getView().fit(fromExtent(extent))
}
}
} }
} }
}, [regionBoundsData]) }, [regionBoundsData])
useEffect(() => { useEffect(() => {
if (selectedDistrict && selectedYear) { if (selectedRegion === null && regionBoundsData) {
if (map) {
const extent = regionsLayer.getSource()?.getExtent()
if (extent) {
map?.setView(new View({
extent: extent,
showFullExtent: true,
}))
map.getView().fit(fromExtent(extent), { padding: [100, 100, 100, 100] })
}
regionsLayer.getSource()?.forEachFeature((feature) => {
if (feature.getProperties()['entity_id'] !== selectedRegion) {
feature.setStyle()
}
})
map.addInteraction(regionSelect)
}
}
}, [regionBoundsData, selectedRegion, map, regionsLayer])
useEffect(() => {
if (selectedRegion && map) {
regionsLayer.getSource()?.forEachFeature((feature) => {
if (feature.getProperties()['entity_id'] !== selectedRegion) {
feature.setStyle(new Style())
}
})
}
}, [selectedRegion, map])
// Last step: once selected scheme
useEffect(() => {
if (selectedDistrict && selectedYear && districtBoundLayer) {
const bounds = new VectorSource({ const bounds = new VectorSource({
url: `${BASE_URL.ems}/gis/bounds/city/${selectedDistrict}`, url: `${BASE_URL.ems}/gis/bounds/city/${selectedDistrict}`,
format: new GeoJSON(), format: new GeoJSON(),
@ -134,25 +186,22 @@ const MapComponent = ({
districtBoundLayer.setSource(bounds) districtBoundLayer.setSource(bounds)
//
bounds.on('featuresloadend', function () { bounds.on('featuresloadend', function () {
// map?.setView(new View({ map?.setView(new View({
// extent: bounds.getExtent() extent: bounds.getExtent()
// })) }))
}) })
} }
}, [selectedDistrict, selectedYear])
useEffect(() => { return () => {
map?.setTarget(mapElement.current as HTMLDivElement) if (districtBoundLayer) {
districtBoundLayer.getSource()?.clear()
if (drawingLayerSource) { }
const modify = new Modify({ source: drawingLayerSource })
map?.addInteraction(modify)
} }
}, [selectedDistrict, selectedYear, districtBoundLayer])
loadFeatures(id) // Edit Mode: add interaction on tool change
}, [])
useEffect(() => { useEffect(() => {
if (currentTool) { if (currentTool) {
if (draw) map?.removeInteraction(draw) if (draw) map?.removeInteraction(draw)
@ -183,19 +232,13 @@ const MapComponent = ({
} }
}, [satMapsProvider, satLayer]) }, [satMapsProvider, satLayer])
// Upload map overlay
const submitOverlay = async (file: File | null, polygonExtent: Extent | undefined, rectCoords: IRectCoords | undefined) => { const submitOverlay = async (file: File | null, polygonExtent: Extent | undefined, rectCoords: IRectCoords | undefined) => {
await GisService.uploadOverlay(file, polygonExtent, rectCoords).then(res => { await GisService.uploadOverlay(file, polygonExtent, rectCoords).then(res => {
console.log(res) console.log(res)
}) })
} }
const mapControlsStyle: CSSProperties = {
borderRadius: '4px',
zIndex: '1',
backgroundColor: colorScheme === 'light' ? '#F0F0F0CC' : '#000000CC',
backdropFilter: 'blur(8px)',
}
// const { data: nodes } = useSWR('/nodes/all', () => fetcher('/nodes/all', BASE_URL.ems), { revalidateOnFocus: false }) // const { data: nodes } = useSWR('/nodes/all', () => fetcher('/nodes/all', BASE_URL.ems), { revalidateOnFocus: false })
// useEffect(() => { // useEffect(() => {
@ -250,16 +293,12 @@ const MapComponent = ({
if (currentObjectId) { if (currentObjectId) {
if (figuresLayer) { if (figuresLayer) {
// Reset styles and apply highlight to matching features // Reset styles and apply highlight to matching features
console.log(currentObjectId)
figuresLayer.getSource()?.getFeatures().forEach((feature: Feature) => { figuresLayer.getSource()?.getFeatures().forEach((feature: Feature) => {
if (currentObjectId == feature.get('object_id')) { if (Array.isArray(feature.get('object_id')) ? feature.get('object_id')[0] === currentObjectId : currentObjectId === feature.get('object_id')) {
feature.setStyle(highlightStyleRed) feature.setStyle(highlightStyleRed)
const geometry = feature.getGeometry() zoomToFeature(id, feature)
if (geometry) {
map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
}
} else { } else {
feature.setStyle(undefined) // Reset to default style feature.setStyle(undefined) // Reset to default style
} }
@ -269,20 +308,17 @@ const MapComponent = ({
if (linesLayer) { if (linesLayer) {
// Reset styles and apply highlight to matching features // Reset styles and apply highlight to matching features
linesLayer.getSource()?.getFeatures().forEach((feature: Feature) => { linesLayer.getSource()?.getFeatures().forEach((feature: Feature) => {
if (currentObjectId == feature.get('object_id')) { if (Array.isArray(feature.get('object_id')) ? feature.get('object_id')[0] === currentObjectId : currentObjectId === feature.get('object_id')) {
feature.setStyle(highlightStyleRed) feature.setStyle(highlightStyleRed)
const geometry = feature.getGeometry() zoomToFeature(id, feature)
if (geometry) {
map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
}
} else { } else {
feature.setStyle(undefined) // Reset to default style feature.setStyle(undefined) // Reset to default style
} }
}) })
} }
} }
}, [currentObjectId]) }, [currentObjectId, figuresLayer, linesLayer])
const { data: regionsData } = useSWR(`/general/regions`, (url) => fetcher(url, BASE_URL.ems).then(res => { const { data: regionsData } = useSWR(`/general/regions`, (url) => fetcher(url, BASE_URL.ems).then(res => {
setRegionsData(res) setRegionsData(res)
@ -337,13 +373,15 @@ const MapComponent = ({
useEffect(() => { useEffect(() => {
if (selectedDistrict === null) { if (selectedDistrict === null) {
setSelectedYear(id, null) setSelectedYear(id, null)
map?.addInteraction(districtSelect)
} }
if (selectedRegion === null) { if (selectedRegion === null) {
setSelectedYear(id, null) setSelectedYear(id, null)
setSelectedDistrict(id, null) setSelectedDistrict(id, null)
} }
}, [selectedDistrict, selectedRegion, id]) }, [selectedDistrict, selectedRegion, id, map])
const [leftPaneHidden, setLeftPaneHidden] = useState(false) const [leftPaneHidden, setLeftPaneHidden] = useState(false)
@ -397,13 +435,6 @@ const MapComponent = ({
}, [figuresData, linesData, selectedDistrict, selectedYear, districtBoundLayer]) }, [figuresData, linesData, selectedDistrict, selectedYear, districtBoundLayer])
useEffect(() => {
if (!selectedRegion) {
setSelectedRegion(id, null)
setSelectedYear(id, null)
}
}, [selectedRegion, selectedDistrict, id])
useEffect(() => { useEffect(() => {
if (selectedDistrict && districtData) { if (selectedDistrict && districtData) {
const settings = getCitySettings() const settings = getCitySettings()
@ -423,12 +454,7 @@ const MapComponent = ({
const center = [settings.offset_x + (wk), settings.offset_y - (hk)] const center = [settings.offset_x + (wk), settings.offset_y - (hk)]
const extent = [ const extent = [center[0] - (wk), center[1] - (hk), center[0] + (wk), center[1] + (hk)]
center[0] - (wk),
center[1] - (hk),
center[0] + (wk),
center[1] + (hk),
]
// Set up the initial image layer with the extent // Set up the initial image layer with the extent
const imageSource = new ImageStatic({ const imageSource = new ImageStatic({
@ -443,34 +469,6 @@ const MapComponent = ({
} }
}, [selectedDistrict, districtData, staticMapLayer]) }, [selectedDistrict, districtData, staticMapLayer])
// Light/dark theme
useEffect(() => {
if (baseLayer) {
baseLayer.on('prerender', function (e) {
if (colorScheme === 'dark') {
if (e.context) {
const context = e.context as CanvasRenderingContext2D
context.filter = 'grayscale(80%) invert(100%) hue-rotate(180deg) '
context.globalCompositeOperation = 'source-over'
}
} else {
if (e.context) {
const context = e.context as CanvasRenderingContext2D
context.filter = 'none'
}
}
})
baseLayer.on('postrender', function (e) {
if (e.context) {
const context = e.context as CanvasRenderingContext2D
context.filter = 'none'
}
})
}
}, [colorScheme])
useEffect(() => { useEffect(() => {
if (map) { if (map) {
if (mode === 'print') { if (mode === 'print') {
@ -530,15 +528,15 @@ const MapComponent = ({
if (feature) { if (feature) {
regionSelect.getFeatures().push(feature) regionSelect.getFeatures().push(feature)
map?.setView(new View({
extent: feature?.getGeometry()?.getExtent(),
showFullExtent: true,
}))
} }
zoomToFeature(id, feature) zoomToFeature(id, feature)
} } else if (selectedDistrict) {
}, [selectedRegion, selectedDistrict]) // zoom on district select
// zoom on district select
useEffect(() => {
if (selectedDistrict) {
const feature = getFeatureByEntityId(selectedDistrict, districtsLayer) const feature = getFeatureByEntityId(selectedDistrict, districtsLayer)
if (feature) { if (feature) {
@ -547,9 +545,18 @@ const MapComponent = ({
regionsLayer.setOpacity(0) regionsLayer.setOpacity(0)
} }
map?.setView(new View({
extent: feature?.getGeometry()?.getExtent(),
showFullExtent: true,
}))
zoomToFeature(id, feature) zoomToFeature(id, feature)
} else if (!selectedRegion) {
setSelectedRegion(id, null)
setSelectedYear(id, null)
} }
}, [selectedDistrict]) }, [selectedRegion, selectedDistrict, id])
useEffect(() => { useEffect(() => {
if (selectedYear) { if (selectedYear) {
@ -560,15 +567,6 @@ const MapComponent = ({
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%', height: '100%' }}> <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%', height: '100%' }}>
{statusText && active && !selectedYear &&
<Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
<div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
{/* {statusText} */}
</div>
</Tooltip>
}
<MapPrint id={id} mapElement={mapElement} /> <MapPrint id={id} mapElement={mapElement} />
{active && {active &&
@ -600,64 +598,6 @@ const MapComponent = ({
: null} : null}
</Combobox> </Combobox>
{/* <Combobox
placeholder="Регион"
clearable
// 👇 show label instead of id
value={
selectedRegion
? regionsData?.find((item: IRegion) => item.id === selectedRegion)?.name ?? ""
: ""
}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSelectedRegion(id, Number(data.optionValue));
} else {
setSelectedRegion(id, null);
}
}}
style={{ minWidth: 'auto' }}
>
{regionsData
? regionsData.map((item: { name: string; id: number }) => (
<Option key={item.id} value={item.id.toString()}>
{item.name}
</Option>
))
: null}
</Combobox> */}
{/* <Combobox
placeholder="Населённый пункт"
clearable
value={
selectedDistrict
? districtsData?.find((item: { id: number }) => item.id === selectedDistrict)?.name +
" - " +
districtsData?.find((item: { id: number }) => item.id === selectedDistrict)?.district_name
: ""
}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSelectedDistrict(id, Number(data.optionValue));
} else {
setSelectedDistrict(id, null);
}
}}
style={{ minWidth: 'auto' }}
>
{districtsData
? districtsData.map(
(item: { name: string; id: number; district_name: string }) => (
<Option text={`${item.name} - ${item.district_name}`} key={item.id} value={item.id.toString()}>
{item.name} - {item.district_name}
</Option>
)
)
: null}
</Combobox> */}
<Button icon={<IconBoxPadding />} appearance={alignMode ? 'primary' : 'transparent'} onClick={() => setAlignMode(id, !alignMode)} /> <Button icon={<IconBoxPadding />} appearance={alignMode ? 'primary' : 'transparent'} onClick={() => setAlignMode(id, !alignMode)} />
<Menu persistOnItemClick positioning={{ autoSize: true }}> <Menu persistOnItemClick positioning={{ autoSize: true }}>
@ -672,9 +612,7 @@ const MapComponent = ({
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<Field label="Спутниковые снимки"> <Field label="Спутниковые снимки">
<Dropdown <Dropdown
defaultValue={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
value={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label} value={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
defaultSelectedOptions={[satMapsProvider]}
selectedOptions={[satMapsProvider]} selectedOptions={[satMapsProvider]}
onOptionSelect={(_ev, data) => { onOptionSelect={(_ev, data) => {
if (data.optionValue) { if (data.optionValue) {
@ -706,21 +644,17 @@ const MapComponent = ({
} }
<div id='mapcomponent' style={{ position: 'relative', width: '100%', height: '100%', display: 'flex' }}>
<div id={id} key={id} style={{ position: 'relative', width: '100%', height: '100%', maxHeight: '100%' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}> <div style={{ maxWidth: '30%', maxHeight: '100%' }}>
<div ref={tooltipRef}></div>
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
{!selectedRegion && {!selectedRegion &&
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!selectedRegion} type='inline'> <Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!selectedRegion} type='inline'>
{/* <DrawerHeader style={{ flexDirection: 'row' }}>
<Text weight='bold' size={500}></Text>
</DrawerHeader> */}
<DrawerBody> <DrawerBody>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxHeight: '0' }}>
{regionsData && regionsData.map((region: IRegion) => ( {regionsData && regionsData.map((region: IRegion) => (
<Link key={region.id} onClick={() => setSelectedRegion(id, region.id)} <Link key={region.id} onClick={() => {
setSelectedRegion(id, region.id)
map?.removeInteraction(regionSelect)
}}
onMouseEnter={() => { onMouseEnter={() => {
const feature = getFeatureByEntityId(region.id, regionsLayer) const feature = getFeatureByEntityId(region.id, regionsLayer)
@ -737,7 +671,7 @@ const MapComponent = ({
</DrawerBody> </DrawerBody>
</Drawer>} </Drawer>}
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!!selectedRegion && !selectedYear} type='inline'> <Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!!selectedRegion && !selectedYear} type='inline'>
<DrawerHeader style={{ flexDirection: 'row' }}> <DrawerHeader style={{ flexDirection: 'row' }}>
<Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => { <Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
if (selectedDistrict) { if (selectedDistrict) {
@ -781,7 +715,7 @@ const MapComponent = ({
</DrawerHeader> </DrawerHeader>
<DrawerBody> <DrawerBody>
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}> <div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxHeight: '0' }}>
{selectedDistrict ? {selectedDistrict ?
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => ( selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}> <div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
@ -801,7 +735,10 @@ const MapComponent = ({
</div> </div>
{districtsData && districtsData.map((district: IDistrict) => ( {districtsData && districtsData.map((district: IDistrict) => (
<Link key={district.id} onClick={() => setSelectedDistrict(id, district.id)} <Link key={district.id} onClick={() => {
setSelectedDistrict(id, district.id)
map?.removeInteraction(districtSelect)
}}
onMouseEnter={() => { onMouseEnter={() => {
const feature = getFeatureByEntityId(district.id, districtsLayer) const feature = getFeatureByEntityId(district.id, districtsLayer)
@ -817,97 +754,93 @@ const MapComponent = ({
</div> </div>
} }
{selectedDistrict && <Combobox {selectedDistrict &&
placeholder="Схема" <Field label="Схема" >
clearable <Dropdown
style={{ minWidth: 'auto' }} style={{ minWidth: 'auto' }}
value={selectedYear ? selectedYear.toString() : ""} value={selectedYear ? selectedYear.toString() : ""}
onOptionSelect={(_ev, data) => { selectedOptions={[selectedYear ? selectedYear.toString() : ""]}
if (data.optionValue) { onOptionSelect={(_ev, data) => {
setSelectedYear(id, Number(data.optionValue)); if (data.optionValue) {
} else { setSelectedYear(id, Number(data.optionValue));
setSelectedYear(id, null); } else {
} setSelectedYear(id, null);
}} }
> }}
{schemas.map((el) => ( >
<Option key={el} value={el}> {schemas.map((el) => (
{el} <Option key={el} value={el} text={el}>
</Option> {el}
))} </Option>
</Combobox>} ))}
</Dropdown>
</Field>
}
</div> </div>
</DrawerBody> </DrawerBody>
</Drawer> </Drawer>
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}> <div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
<div style={{ display: 'flex', height: '94%', padding: '0.5rem', flexGrow: 1 }}> <div style={{ display: 'flex', height: '94%', padding: '0.5rem', flexGrow: 1 }}>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}> <div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}> <div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
{selectedRegion && selectedDistrict && selectedYear && <Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 1 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
// <div <TabsPane defaultTab='objects' tabs={objectsPane} />
// style={{ <Divider />
// ...mapControlsStyle, <TabsPane defaultTab='parameters' tabs={paramsPane} />
// transition: 'width .3s ease', </Drawer>
// display: 'flex',
// flexDirection: 'column',
// height: '100%',
// width: leftPaneHidden ? '0px' : '100%',
// overflow: 'hidden'
// }}
// >
// <TabsPane defaultTab='objects' tabs={objectsPane} />
// <Divider />
// <TabsPane defaultTab='parameters' tabs={paramsPane} />
// </div>
""
}
<Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 9999 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
<TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} />
</Drawer>
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<Button
icon={<IconChevronLeft size={16}
style={{
transform: `${leftPaneHidden ? 'rotate(180deg)' : ''}`,
}} />}
style={{
zIndex: '1',
display: 'flex',
height: 'min-content'
}}
appearance='subtle'
onClick={() => setLeftPaneHidden(!leftPaneHidden)}
/>
}
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }} >
<div style={{ ...mapControlsStyle, display: 'flex', flexDirection: 'column', width: 'fit-content' }}>
{selectedDistrict && selectedYear && <MapMode map_id={id} />}
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '340px', alignItems: 'flex-end', justifyContent: 'space-between' }}>
{selectedRegion && selectedDistrict && selectedYear && mode === 'edit' &&
<MapToolbar map_id={id} />
}
{!!selectedRegion && !!selectedDistrict && !!selectedYear && {!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<MapLegend selectedDistrict={selectedDistrict} selectedYear={selectedYear} /> <Button
icon={<IconChevronLeft size={16}
style={{
transform: `${leftPaneHidden ? 'rotate(180deg)' : ''}`,
}} />}
style={{
zIndex: '1',
display: 'flex',
height: 'min-content'
}}
appearance='subtle'
onClick={() => setLeftPaneHidden(!leftPaneHidden)}
/>
} }
</div> </div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }} >
<div style={{ display: 'flex', flexDirection: 'column', width: 'fit-content' }}>
{selectedDistrict && selectedYear && <MapMode map_id={id} />}
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '340px', alignItems: 'flex-end', justifyContent: 'space-between', gap: '1rem' }}>
<MapToolbar map_id={id} />
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<MapLegend selectedDistrict={selectedDistrict} selectedYear={selectedYear} />
}
</div>
</div>
</div>
<div id={id} key={id} style={{ position: 'relative', width: '100%', height: '100%', maxHeight: '100%', filter: colorScheme === 'dark' ? 'invert(100%) hue-rotate(180deg)' : 'unset' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
<div>
{statusText && active && !selectedYear &&
<Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
<div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
{/* {statusText} */}
</div>
</Tooltip>
}
</div> </div>
</div> </div>
</div> </div>
{(linesValidating || figuresValidating) && ( {(linesValidating || figuresValidating) && (
<div <div
style={{ style={{
@ -927,7 +860,6 @@ const MapComponent = ({
<div style={{ display: 'flex', bottom: '0', width: '100%' }}> <div style={{ display: 'flex', bottom: '0', width: '100%' }}>
<MapStatusbar <MapStatusbar
map_id={id} map_id={id}
mapControlsStyle={mapControlsStyle}
/> />
</div> </div>
</div> </div>