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

340
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 { Modify } from 'ol/interaction'
import { ImageStatic, Vector as VectorSource } from 'ol/source'
@ -38,11 +38,14 @@ import { IRegion } from '../../interfaces/fuel'
import { useAppStore } from '../../store/app'
import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
import { ArrowLeft24Regular } from '@fluentui/react-icons'
import View from 'ol/View'
import { Style } from 'ol/style'
const swrOptions: SWRConfiguration = {
revalidateOnFocus: false
}
// City settings mockup
function getCitySettings() {
return {
city_id: 0,
@ -90,8 +93,8 @@ const MapComponent = ({
// Map
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 => {
if (Array.isArray(res)) {
setTypeRoles(id, res)
@ -99,8 +102,22 @@ const MapComponent = ({
return res
}), swrOptions)
// Bounds: region
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(() => {
if (regionsLayer && regionBoundsData) {
if (Array.isArray(regionBoundsData)) {
@ -113,20 +130,55 @@ const MapComponent = ({
regionsLayer.getSource()?.addFeature(feature)
})
if (map) {
const extent = regionsLayer.getSource()?.getExtent()
if (extent) {
map.getView().fit(fromExtent(extent))
}
}
return () => {
if (regionsLayer) {
regionsLayer.getSource()?.clear()
}
}
}, [regionBoundsData])
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({
url: `${BASE_URL.ems}/gis/bounds/city/${selectedDistrict}`,
format: new GeoJSON(),
@ -134,25 +186,22 @@ const MapComponent = ({
districtBoundLayer.setSource(bounds)
//
bounds.on('featuresloadend', function () {
// map?.setView(new View({
// extent: bounds.getExtent()
// }))
map?.setView(new View({
extent: bounds.getExtent()
}))
})
}
}, [selectedDistrict, selectedYear])
useEffect(() => {
map?.setTarget(mapElement.current as HTMLDivElement)
if (drawingLayerSource) {
const modify = new Modify({ source: drawingLayerSource })
map?.addInteraction(modify)
return () => {
if (districtBoundLayer) {
districtBoundLayer.getSource()?.clear()
}
}
}, [selectedDistrict, selectedYear, districtBoundLayer])
loadFeatures(id)
}, [])
// Edit Mode: add interaction on tool change
useEffect(() => {
if (currentTool) {
if (draw) map?.removeInteraction(draw)
@ -183,19 +232,13 @@ const MapComponent = ({
}
}, [satMapsProvider, satLayer])
// Upload map overlay
const submitOverlay = async (file: File | null, polygonExtent: Extent | undefined, rectCoords: IRectCoords | undefined) => {
await GisService.uploadOverlay(file, polygonExtent, rectCoords).then(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 })
// useEffect(() => {
@ -250,16 +293,12 @@ const MapComponent = ({
if (currentObjectId) {
if (figuresLayer) {
// Reset styles and apply highlight to matching features
console.log(currentObjectId)
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)
const geometry = feature.getGeometry()
if (geometry) {
map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
}
zoomToFeature(id, feature)
} else {
feature.setStyle(undefined) // Reset to default style
}
@ -269,20 +308,17 @@ const MapComponent = ({
if (linesLayer) {
// Reset styles and apply highlight to matching features
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)
const geometry = feature.getGeometry()
if (geometry) {
map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
}
zoomToFeature(id, feature)
} else {
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 => {
setRegionsData(res)
@ -337,13 +373,15 @@ const MapComponent = ({
useEffect(() => {
if (selectedDistrict === null) {
setSelectedYear(id, null)
map?.addInteraction(districtSelect)
}
if (selectedRegion === null) {
setSelectedYear(id, null)
setSelectedDistrict(id, null)
}
}, [selectedDistrict, selectedRegion, id])
}, [selectedDistrict, selectedRegion, id, map])
const [leftPaneHidden, setLeftPaneHidden] = useState(false)
@ -397,13 +435,6 @@ const MapComponent = ({
}, [figuresData, linesData, selectedDistrict, selectedYear, districtBoundLayer])
useEffect(() => {
if (!selectedRegion) {
setSelectedRegion(id, null)
setSelectedYear(id, null)
}
}, [selectedRegion, selectedDistrict, id])
useEffect(() => {
if (selectedDistrict && districtData) {
const settings = getCitySettings()
@ -423,12 +454,7 @@ const MapComponent = ({
const center = [settings.offset_x + (wk), settings.offset_y - (hk)]
const extent = [
center[0] - (wk),
center[1] - (hk),
center[0] + (wk),
center[1] + (hk),
]
const extent = [center[0] - (wk), center[1] - (hk), center[0] + (wk), center[1] + (hk)]
// Set up the initial image layer with the extent
const imageSource = new ImageStatic({
@ -443,34 +469,6 @@ const MapComponent = ({
}
}, [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(() => {
if (map) {
if (mode === 'print') {
@ -530,15 +528,15 @@ const MapComponent = ({
if (feature) {
regionSelect.getFeatures().push(feature)
map?.setView(new View({
extent: feature?.getGeometry()?.getExtent(),
showFullExtent: true,
}))
}
zoomToFeature(id, feature)
}
}, [selectedRegion, selectedDistrict])
} else if (selectedDistrict) {
// zoom on district select
useEffect(() => {
if (selectedDistrict) {
const feature = getFeatureByEntityId(selectedDistrict, districtsLayer)
if (feature) {
@ -547,9 +545,18 @@ const MapComponent = ({
regionsLayer.setOpacity(0)
}
map?.setView(new View({
extent: feature?.getGeometry()?.getExtent(),
showFullExtent: true,
}))
zoomToFeature(id, feature)
} else if (!selectedRegion) {
setSelectedRegion(id, null)
setSelectedYear(id, null)
}
}, [selectedDistrict])
}, [selectedRegion, selectedDistrict, id])
useEffect(() => {
if (selectedYear) {
@ -560,15 +567,6 @@ const MapComponent = ({
return (
<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} />
{active &&
@ -600,64 +598,6 @@ const MapComponent = ({
: null}
</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)} />
<Menu persistOnItemClick positioning={{ autoSize: true }}>
@ -672,9 +612,7 @@ const MapComponent = ({
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<Field label="Спутниковые снимки">
<Dropdown
defaultValue={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
value={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
defaultSelectedOptions={[satMapsProvider]}
selectedOptions={[satMapsProvider]}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
@ -706,21 +644,17 @@ const MapComponent = ({
}
<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 ref={tooltipRef}></div>
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
<div id='mapcomponent' style={{ position: 'relative', width: '100%', height: '100%', display: 'flex' }}>
<div style={{ maxWidth: '30%', maxHeight: '100%' }}>
{!selectedRegion &&
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!selectedRegion} type='inline'>
{/* <DrawerHeader style={{ flexDirection: 'row' }}>
<Text weight='bold' size={500}></Text>
</DrawerHeader> */}
<Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!selectedRegion} type='inline'>
<DrawerBody>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxHeight: '0' }}>
{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={() => {
const feature = getFeatureByEntityId(region.id, regionsLayer)
@ -737,7 +671,7 @@ const MapComponent = ({
</DrawerBody>
</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' }}>
<Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
if (selectedDistrict) {
@ -781,7 +715,7 @@ const MapComponent = ({
</DrawerHeader>
<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 ?
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
@ -801,7 +735,10 @@ const MapComponent = ({
</div>
{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={() => {
const feature = getFeatureByEntityId(district.id, districtsLayer)
@ -817,11 +754,12 @@ const MapComponent = ({
</div>
}
{selectedDistrict && <Combobox
placeholder="Схема"
clearable
{selectedDistrict &&
<Field label="Схема" >
<Dropdown
style={{ minWidth: 'auto' }}
value={selectedYear ? selectedYear.toString() : ""}
selectedOptions={[selectedYear ? selectedYear.toString() : ""]}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSelectedYear(id, Number(data.optionValue));
@ -831,39 +769,24 @@ const MapComponent = ({
}}
>
{schemas.map((el) => (
<Option key={el} value={el}>
<Option key={el} value={el} text={el}>
{el}
</Option>
))}
</Combobox>}
</Dropdown>
</Field>
}
</div>
</DrawerBody>
</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', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
{selectedRegion && selectedDistrict && selectedYear &&
// <div
// style={{
// ...mapControlsStyle,
// transition: 'width .3s ease',
// 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}>
<Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 1 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
<TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} />
@ -889,15 +812,13 @@ const MapComponent = ({
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }} >
<div style={{ ...mapControlsStyle, display: 'flex', flexDirection: 'column', width: 'fit-content' }}>
<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' }}>
{selectedRegion && selectedDistrict && selectedYear && mode === 'edit' &&
<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} />
@ -905,8 +826,20 @@ const MapComponent = ({
</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>
{(linesValidating || figuresValidating) && (
<div
@ -927,7 +860,6 @@ const MapComponent = ({
<div style={{ display: 'flex', bottom: '0', width: '100%' }}>
<MapStatusbar
map_id={id}
mapControlsStyle={mapControlsStyle}
/>
</div>
</div>