From fc045abe2430530bd91cd557d669bc14887c685f Mon Sep 17 00:00:00 2001
From: popovspiridon99 <popovspiridon0799@mail.ru>
Date: Thu, 25 Sep 2025 11:09:10 +0900
Subject: [PATCH] put overlays over the map

---
 client/src/components/map/MapComponent.tsx | 320 ++++++++++-----------
 1 file changed, 160 insertions(+), 160 deletions(-)

diff --git a/client/src/components/map/MapComponent.tsx b/client/src/components/map/MapComponent.tsx
index 40d1d68..b602eb4 100644
--- a/client/src/components/map/MapComponent.tsx
+++ b/client/src/components/map/MapComponent.tsx
@@ -705,43 +705,69 @@ const MapComponent = ({
                 </Portal >
             }
 
-            <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' }}>
+
+
+            <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%' }}>
+                    {!selectedRegion &&
+                        <Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!selectedRegion} type='inline'>
+                            {/* <DrawerHeader style={{ flexDirection: 'row' }}>
                             <Text weight='bold' size={500}></Text>
                         </DrawerHeader> */}
 
-                        <DrawerBody>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                                {regionsData && regionsData.map((region: IRegion) => (
-                                    <Link key={region.id} onClick={() => setSelectedRegion(id, region.id)}
-                                        onMouseEnter={() => {
-                                            const feature = getFeatureByEntityId(region.id, regionsLayer)
+                            <DrawerBody>
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                                    {regionsData && regionsData.map((region: IRegion) => (
+                                        <Link key={region.id} onClick={() => setSelectedRegion(id, region.id)}
+                                            onMouseEnter={() => {
+                                                const feature = getFeatureByEntityId(region.id, regionsLayer)
 
-                                            if (feature) {
-                                                regionSelect.getFeatures().push(feature)
-                                            }
-                                        }}
-                                        onMouseLeave={() => {
-                                            regionSelect.getFeatures().clear()
-                                        }}
-                                    >{region.name}</Link>
-                                ))}
-                            </div>
-                        </DrawerBody>
-                    </Drawer>}
+                                                if (feature) {
+                                                    regionSelect.getFeatures().push(feature)
+                                                }
+                                            }}
+                                            onMouseLeave={() => {
+                                                regionSelect.getFeatures().clear()
+                                            }}
+                                        >{region.name}</Link>
+                                    ))}
+                                </div>
+                            </DrawerBody>
+                        </Drawer>}
 
-                <Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!!selectedRegion && !selectedYear} type='inline'>
-                    <DrawerHeader style={{ flexDirection: 'row' }}>
-                        <Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
-                            if (selectedDistrict) {
+                    <Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!!selectedRegion && !selectedYear} type='inline'>
+                        <DrawerHeader style={{ flexDirection: 'row' }}>
+                            <Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
+                                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)
-                                districtSelect.getFeatures().clear()
-                                regionsLayer.setOpacity(1)
-                            } else {
                                 setSelectedRegion(id, null)
-                                regionSelect.getFeatures().clear()
 
                                 if (map) {
                                     const extent = regionsLayer.getSource()?.getExtent()
@@ -751,157 +777,131 @@ const MapComponent = ({
                                         regionsLayer.setOpacity(1)
                                     }
                                 }
-                            }
-                        }} />
+                            }} />
+                        </DrawerHeader>
 
-                        {selectedDistrict ?
-                            <Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
-                            :
-                            <Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
+                        <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>
 
-                        <Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
-                            setSelectedYear(id, null)
-                            setSelectedDistrict(id, null)
-                            setSelectedRegion(id, null)
+                                        {districtsData && districtsData.map((district: IDistrict) => (
+                                            <Link key={district.id} onClick={() => setSelectedDistrict(id, district.id)}
+                                                onMouseEnter={() => {
+                                                    const feature = getFeatureByEntityId(district.id, districtsLayer)
 
-                            if (map) {
-                                const extent = regionsLayer.getSource()?.getExtent()
-
-                                if (extent) {
-                                    map.getView().fit(fromExtent(extent), { duration: 100 })
-                                    regionsLayer.setOpacity(1)
-                                }
-                            }
-                        }} />
-                    </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>
+                                                    if (feature) {
+                                                        districtSelect.getFeatures().push(feature)
+                                                    }
+                                                }}
+                                                onMouseLeave={() => {
+                                                    districtSelect.getFeatures().clear()
+                                                }}
+                                            >{district.name}</Link>
                                         ))}
                                     </div>
+                                }
 
-                                    {districtsData && districtsData.map((district: IDistrict) => (
-                                        <Link key={district.id} onClick={() => setSelectedDistrict(id, district.id)}
-                                            onMouseEnter={() => {
-                                                const feature = getFeatureByEntityId(district.id, districtsLayer)
-
-                                                if (feature) {
-                                                    districtSelect.getFeatures().push(feature)
-                                                }
-                                            }}
-                                            onMouseLeave={() => {
-                                                districtSelect.getFeatures().clear()
-                                            }}
-                                        >{district.name}</Link>
+                                {selectedDistrict && <Combobox
+                                    placeholder="Схема"
+                                    clearable
+                                    style={{ minWidth: 'auto' }}
+                                    value={selectedYear ? selectedYear.toString() : ""}
+                                    onOptionSelect={(_ev, data) => {
+                                        if (data.optionValue) {
+                                            setSelectedYear(id, Number(data.optionValue));
+                                        } else {
+                                            setSelectedYear(id, null);
+                                        }
+                                    }}
+                                >
+                                    {schemas.map((el) => (
+                                        <Option key={el} value={el}>
+                                            {el}
+                                        </Option>
                                     ))}
-                                </div>
-                            }
+                                </Combobox>}
+                            </div>
+                        </DrawerBody>
+                    </Drawer>
 
-                            {selectedDistrict && <Combobox
-                                placeholder="Схема"
-                                clearable
-                                style={{ minWidth: 'auto' }}
-                                value={selectedYear ? selectedYear.toString() : ""}
-                                onOptionSelect={(_ev, data) => {
-                                    if (data.optionValue) {
-                                        setSelectedYear(id, Number(data.optionValue));
-                                    } else {
-                                        setSelectedYear(id, null);
+
+                    <div style={{ 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>
                                     }
-                                }}
-                            >
-                                {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%' }}>
-                    <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>
+                                            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 &&
-                                    <Button
-                                        icon={<IconChevronLeft size={16}
-                                            style={{
-                                                transform: `${leftPaneHidden ? 'rotate(180deg)' : ''}`,
-                                            }} />}
-
-                                        style={{
-                                            zIndex: '1',
-                                            display: 'flex',
-                                            height: 'min-content'
-                                        }}
-                                        appearance='subtle'
-                                        onClick={() => setLeftPaneHidden(!leftPaneHidden)}
-                                    />
+                                    <MapLegend selectedDistrict={selectedDistrict} selectedYear={selectedYear} />
                                 }
                             </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 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) && (
                 <div
                     style={{