put overlays over the map
This commit is contained in:
@ -705,43 +705,69 @@ const MapComponent = ({
|
|||||||
</Portal >
|
</Portal >
|
||||||
}
|
}
|
||||||
|
|
||||||
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
|
|
||||||
{!selectedRegion &&
|
|
||||||
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!selectedRegion} type='inline'>
|
<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)}>
|
||||||
{/* <DrawerHeader style={{ flexDirection: 'row' }}>
|
<div ref={tooltipRef}></div>
|
||||||
|
|
||||||
|
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
|
||||||
|
{!selectedRegion &&
|
||||||
|
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!selectedRegion} type='inline'>
|
||||||
|
{/* <DrawerHeader style={{ flexDirection: 'row' }}>
|
||||||
<Text weight='bold' size={500}></Text>
|
<Text weight='bold' size={500}></Text>
|
||||||
</DrawerHeader> */}
|
</DrawerHeader> */}
|
||||||
|
|
||||||
<DrawerBody>
|
<DrawerBody>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
{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)}
|
||||||
onMouseEnter={() => {
|
onMouseEnter={() => {
|
||||||
const feature = getFeatureByEntityId(region.id, regionsLayer)
|
const feature = getFeatureByEntityId(region.id, regionsLayer)
|
||||||
|
|
||||||
if (feature) {
|
if (feature) {
|
||||||
regionSelect.getFeatures().push(feature)
|
regionSelect.getFeatures().push(feature)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onMouseLeave={() => {
|
onMouseLeave={() => {
|
||||||
regionSelect.getFeatures().clear()
|
regionSelect.getFeatures().clear()
|
||||||
}}
|
}}
|
||||||
>{region.name}</Link>
|
>{region.name}</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</DrawerBody>
|
</DrawerBody>
|
||||||
</Drawer>}
|
</Drawer>}
|
||||||
|
|
||||||
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!!selectedRegion && !selectedYear} type='inline'>
|
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} 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) {
|
||||||
|
setSelectedDistrict(id, null)
|
||||||
|
districtSelect.getFeatures().clear()
|
||||||
|
regionsLayer.setOpacity(1)
|
||||||
|
} else {
|
||||||
|
setSelectedRegion(id, null)
|
||||||
|
regionSelect.getFeatures().clear()
|
||||||
|
|
||||||
|
if (map) {
|
||||||
|
const extent = regionsLayer.getSource()?.getExtent()
|
||||||
|
|
||||||
|
if (extent) {
|
||||||
|
map.getView().fit(fromExtent(extent), { duration: 100 })
|
||||||
|
regionsLayer.setOpacity(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{selectedDistrict ?
|
||||||
|
<Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
|
||||||
|
:
|
||||||
|
<Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
|
||||||
|
|
||||||
|
<Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
|
||||||
|
setSelectedYear(id, null)
|
||||||
setSelectedDistrict(id, null)
|
setSelectedDistrict(id, null)
|
||||||
districtSelect.getFeatures().clear()
|
|
||||||
regionsLayer.setOpacity(1)
|
|
||||||
} else {
|
|
||||||
setSelectedRegion(id, null)
|
setSelectedRegion(id, null)
|
||||||
regionSelect.getFeatures().clear()
|
|
||||||
|
|
||||||
if (map) {
|
if (map) {
|
||||||
const extent = regionsLayer.getSource()?.getExtent()
|
const extent = regionsLayer.getSource()?.getExtent()
|
||||||
@ -751,157 +777,131 @@ const MapComponent = ({
|
|||||||
regionsLayer.setOpacity(1)
|
regionsLayer.setOpacity(1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}} />
|
||||||
}} />
|
</DrawerHeader>
|
||||||
|
|
||||||
{selectedDistrict ?
|
<DrawerBody>
|
||||||
<Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
|
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||||
:
|
{selectedDistrict ?
|
||||||
<Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
|
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
||||||
|
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
<span>{key}</span>
|
||||||
|
<span>{value}</span>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
:
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
<div>
|
||||||
|
{selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
||||||
|
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
<span>{key}</span>
|
||||||
|
<span>{value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
<Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
|
{districtsData && districtsData.map((district: IDistrict) => (
|
||||||
setSelectedYear(id, null)
|
<Link key={district.id} onClick={() => setSelectedDistrict(id, district.id)}
|
||||||
setSelectedDistrict(id, null)
|
onMouseEnter={() => {
|
||||||
setSelectedRegion(id, null)
|
const feature = getFeatureByEntityId(district.id, districtsLayer)
|
||||||
|
|
||||||
if (map) {
|
if (feature) {
|
||||||
const extent = regionsLayer.getSource()?.getExtent()
|
districtSelect.getFeatures().push(feature)
|
||||||
|
}
|
||||||
if (extent) {
|
}}
|
||||||
map.getView().fit(fromExtent(extent), { duration: 100 })
|
onMouseLeave={() => {
|
||||||
regionsLayer.setOpacity(1)
|
districtSelect.getFeatures().clear()
|
||||||
}
|
}}
|
||||||
}
|
>{district.name}</Link>
|
||||||
}} />
|
|
||||||
</DrawerHeader>
|
|
||||||
|
|
||||||
<DrawerBody>
|
|
||||||
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
||||||
{selectedDistrict ?
|
|
||||||
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
|
||||||
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<span>{key}</span>
|
|
||||||
<span>{value}</span>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
:
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
||||||
<div>
|
|
||||||
{selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
|
||||||
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<span>{key}</span>
|
|
||||||
<span>{value}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
{districtsData && districtsData.map((district: IDistrict) => (
|
{selectedDistrict && <Combobox
|
||||||
<Link key={district.id} onClick={() => setSelectedDistrict(id, district.id)}
|
placeholder="Схема"
|
||||||
onMouseEnter={() => {
|
clearable
|
||||||
const feature = getFeatureByEntityId(district.id, districtsLayer)
|
style={{ minWidth: 'auto' }}
|
||||||
|
value={selectedYear ? selectedYear.toString() : ""}
|
||||||
if (feature) {
|
onOptionSelect={(_ev, data) => {
|
||||||
districtSelect.getFeatures().push(feature)
|
if (data.optionValue) {
|
||||||
}
|
setSelectedYear(id, Number(data.optionValue));
|
||||||
}}
|
} else {
|
||||||
onMouseLeave={() => {
|
setSelectedYear(id, null);
|
||||||
districtSelect.getFeatures().clear()
|
}
|
||||||
}}
|
}}
|
||||||
>{district.name}</Link>
|
>
|
||||||
|
{schemas.map((el) => (
|
||||||
|
<Option key={el} value={el}>
|
||||||
|
{el}
|
||||||
|
</Option>
|
||||||
))}
|
))}
|
||||||
</div>
|
</Combobox>}
|
||||||
}
|
</div>
|
||||||
|
</DrawerBody>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
{selectedDistrict && <Combobox
|
|
||||||
placeholder="Схема"
|
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
|
||||||
clearable
|
<div style={{ display: 'flex', height: '94%', padding: '0.5rem', flexGrow: 1 }}>
|
||||||
style={{ minWidth: 'auto' }}
|
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
|
||||||
value={selectedYear ? selectedYear.toString() : ""}
|
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
|
||||||
onOptionSelect={(_ev, data) => {
|
{selectedRegion && selectedDistrict && selectedYear &&
|
||||||
if (data.optionValue) {
|
<div
|
||||||
setSelectedYear(id, Number(data.optionValue));
|
style={{
|
||||||
} else {
|
...mapControlsStyle,
|
||||||
setSelectedYear(id, null);
|
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>
|
||||||
}
|
}
|
||||||
}}
|
|
||||||
>
|
|
||||||
{schemas.map((el) => (
|
|
||||||
<Option key={el} value={el}>
|
|
||||||
{el}
|
|
||||||
</Option>
|
|
||||||
))}
|
|
||||||
</Combobox>}
|
|
||||||
</div>
|
|
||||||
</DrawerBody>
|
|
||||||
</Drawer>
|
|
||||||
|
|
||||||
|
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
|
||||||
|
<Button
|
||||||
|
icon={<IconChevronLeft size={16}
|
||||||
|
style={{
|
||||||
|
transform: `${leftPaneHidden ? 'rotate(180deg)' : ''}`,
|
||||||
|
}} />}
|
||||||
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
|
style={{
|
||||||
<div style={{ display: 'flex', height: '94%', padding: '0.5rem', flexGrow: 1 }}>
|
zIndex: '1',
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
|
display: 'flex',
|
||||||
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
|
height: 'min-content'
|
||||||
{selectedRegion && selectedDistrict && selectedYear &&
|
}}
|
||||||
<div
|
appearance='subtle'
|
||||||
style={{
|
onClick={() => setLeftPaneHidden(!leftPaneHidden)}
|
||||||
...mapControlsStyle,
|
/>
|
||||||
transition: 'width .3s ease',
|
}
|
||||||
display: 'flex',
|
</div>
|
||||||
flexDirection: 'column',
|
</div>
|
||||||
height: '100%',
|
|
||||||
width: leftPaneHidden ? '0px' : '100%',
|
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }} >
|
||||||
overflow: 'hidden'
|
<div style={{ ...mapControlsStyle, display: 'flex', flexDirection: 'column', width: 'fit-content' }}>
|
||||||
}}
|
{selectedDistrict && selectedYear && <MapMode map_id={id} />}
|
||||||
>
|
</div>
|
||||||
<TabsPane defaultTab='objects' tabs={objectsPane} />
|
</div>
|
||||||
<Divider />
|
|
||||||
<TabsPane defaultTab='parameters' tabs={paramsPane} />
|
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '340px', alignItems: 'flex-end', justifyContent: 'space-between' }}>
|
||||||
</div>
|
{selectedRegion && selectedDistrict && selectedYear && mode === 'edit' &&
|
||||||
|
<MapToolbar map_id={id} />
|
||||||
}
|
}
|
||||||
|
|
||||||
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
|
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
|
||||||
<Button
|
<MapLegend selectedDistrict={selectedDistrict} selectedYear={selectedYear} />
|
||||||
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={{ ...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 &&
|
|
||||||
<MapLegend selectedDistrict={selectedDistrict} selectedYear={selectedYear} />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{(linesValidating || figuresValidating) && (
|
{(linesValidating || figuresValidating) && (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
Reference in New Issue
Block a user