lines/figures: hitTolerance for hover/click

client/src/store/map.ts

@@ -15,7 +15,7 @@ import { googleMapsSatelliteSource } from '../components/map/MapSources';
 import VectorLayer from 'ol/layer/Vector';
 import { ImageStatic, OSM } from 'ol/source';
 import ImageLayer from 'ol/layer/Image';
-import { drawingLayerStyle, figureStyle, highlightStyleRed, lineStyle, overlayStyle, regionsLayerStyle, selectStyle } from '../components/map/MapStyles';
+import { drawingLayerStyle, figureStyle, highlightStyleRed, highlightStyleYellow, lineStyle, overlayStyle, regionsLayerStyle, selectStyle } from '../components/map/MapStyles';
 import { Fill, Stroke, Style } from 'ol/style';
 import { VectorImage } from 'ol/layer';
 import { click, pointerMove } from 'ol/events/condition';
@@ -93,6 +93,8 @@ export const initializeMapState = (
     id: string
 ) => {
     useMapStore.setState((state) => {
+        const hitTolerance = 10
+
         const baseLayer = new TileLayer({ source: new OSM(), properties: { id: uuidv4(), name: 'OpenStreetMap' } })
 
         const satLayer = new TileLayer({ source: googleMapsSatelliteSource, visible: false, properties: { id: uuidv4(), name: 'Спутник' } })
@@ -103,20 +105,23 @@ export const initializeMapState = (
         const regionSelect = new Select({ condition: pointerMove, style: selectStyle, layers: (layer) => layer.get('type') === 'region' })
 
         // Line select
-        const lineSelect = new Select({ condition: click, style: highlightStyleRed, layers: (layer) => layer.get('type') === 'line', })
+        const lineSelect = new Select({ condition: click, style: highlightStyleRed, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'line', })
         lineSelect.on('select', (e) => {
             if (e.selected[0]) {
                 setCurrentObjectId(id, e.selected[0].get('object_id'))
             }
         })
 
+        const lineHover = new Select({ condition: pointerMove, style: highlightStyleYellow, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'line', })
+
         // Figure select
-        const figureSelect = new Select({ condition: click, style: highlightStyleRed, layers: (layer) => layer.get('type') === 'figure' })
+        const figureSelect = new Select({ condition: click, style: highlightStyleRed, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'figure' })
         figureSelect.on('select', (e) => {
             if (e.selected[0]) {
                 setCurrentObjectId(id, e.selected[0].get('object_id'))
             }
         })
+        const figureHover = new Select({ condition: pointerMove, style: highlightStyleYellow, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'figure', })
 
         const measureSource = new VectorSource()
         const measureLayer = new VectorLayer({
@@ -252,7 +257,9 @@ export const initializeMapState = (
 
         map.addInteraction(regionSelect)
         map.addInteraction(lineSelect)
+        map.addInteraction(lineHover)
         map.addInteraction(figureSelect)
+        map.addInteraction(figureHover)
 
         // map.on('pointermove', function (e: MapBrowserEvent<UIEvent>) {
         //     setCurrentCoordinate(id, e.coordinate)