MapComponent interaction fixes;

client/src/components/map/MapComponent.tsx

@@ -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({
+                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(() => {
         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()
+                        zoomToFeature(id, feature)
-                        
-                        if (geometry) {
-                            map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
-                        }
-
                     } 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()
+                        zoomToFeature(id, feature)
-                        if (geometry) {
-                            map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
-                        }
                     } 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 = [
+                    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
                     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)
-        }
+        } else if (selectedDistrict) {
-    }, [selectedRegion, 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='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 &&
-                        <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>
-                                <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
+                                {selectedDistrict &&
-                                    placeholder="Схема"
+                                    <Field label="Схема" >
-                                    clearable
+                                        <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 &&
+                                <Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 1 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
-                                        // <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}>
                                     <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' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '340px', alignItems: 'flex-end', justifyContent: 'space-between', gap: '1rem' }}>
-                                {selectedRegion && selectedDistrict && selectedYear && mode === 'edit' &&
                             <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>