1
- import { Map , Overlay } from 'ol'
2
- import { ContextMenuContent } from '@/map/ContextMenuContent'
3
- import { useCallback , useContext , useEffect , useRef , useState } from 'react'
4
- import { QueryPoint } from '@/stores/QueryStore'
5
- import { fromLonLat , toLonLat } from 'ol/proj'
1
+ import { Map , Overlay } from 'ol'
2
+ import { ContextMenuContent } from '@/map/ContextMenuContent'
3
+ import { useCallback , useContext , useEffect , useRef , useState } from 'react'
4
+ import { QueryPoint } from '@/stores/QueryStore'
5
+ import { fromLonLat , toLonLat } from 'ol/proj'
6
6
import styles from '@/layers/ContextMenu.module.css'
7
- import { RouteStoreState } from '@/stores/RouteStore'
8
- import { Coordinate } from '@/utils'
9
- import Dispatcher from " @/stores/Dispatcher" ;
10
- import { AddPoint , SetPoint } from " @/actions/Actions" ;
11
- import { coordinateToText } from " @/Converters" ;
12
- import { SettingsContext } from " @/contexts/SettingsContext" ;
7
+ import { RouteStoreState } from '@/stores/RouteStore'
8
+ import { Coordinate } from '@/utils'
9
+ import Dispatcher from ' @/stores/Dispatcher'
10
+ import { AddPoint , SetPoint } from ' @/actions/Actions'
11
+ import { coordinateToText } from ' @/Converters'
12
+ import { SettingsContext } from ' @/contexts/SettingsContext'
13
13
14
14
interface ContextMenuProps {
15
15
map : Map
@@ -21,56 +21,64 @@ const overlay = new Overlay({
21
21
autoPan : true ,
22
22
} )
23
23
24
- export default function ContextMenu ( { map, route, queryPoints} : ContextMenuProps ) {
24
+ export default function ContextMenu ( { map, route, queryPoints } : ContextMenuProps ) {
25
25
const [ menuCoordinate , setMenuCoordinate ] = useState < Coordinate | null > ( null )
26
26
const container = useRef < HTMLDivElement | null > ( null )
27
27
const settings = useContext ( SettingsContext )
28
28
29
- const openContextMenu = useCallback ( ( e : any ) => {
30
- e . preventDefault ( )
31
- const coordinate = map . getEventCoordinate ( e )
32
- const lonLat = toLonLat ( coordinate )
33
- setMenuCoordinate ( { lng : lonLat [ 0 ] , lat : lonLat [ 1 ] } )
34
- } , [ map ] )
29
+ const openContextMenu = useCallback (
30
+ ( e : any ) => {
31
+ e . preventDefault ( )
32
+ const coordinate = map . getEventCoordinate ( e )
33
+ const lonLat = toLonLat ( coordinate )
34
+ setMenuCoordinate ( { lng : lonLat [ 0 ] , lat : lonLat [ 1 ] } )
35
+ } ,
36
+ [ map ]
37
+ )
35
38
36
- const handleClick = useCallback ( ( e : any ) => {
37
- if ( e . dragging ) return
39
+ const handleClick = useCallback (
40
+ ( e : any ) => {
41
+ if ( e . dragging ) return
38
42
39
- // If click is inside the context menu, do nothing
40
- const clickedElement = document . elementFromPoint ( e . pixel [ 0 ] , e . pixel [ 1 ] )
41
- if ( container . current ?. contains ( clickedElement ) ) {
42
- return
43
- }
43
+ // If click is inside the context menu, do nothing
44
+ const clickedElement = document . elementFromPoint ( e . pixel [ 0 ] , e . pixel [ 1 ] )
45
+ if ( container . current ?. contains ( clickedElement ) ) {
46
+ return
47
+ }
44
48
45
- if ( menuCoordinate ) {
46
- // Context menu is open -> close it and skip adding a point
47
- setMenuCoordinate ( null )
48
- return
49
- }
49
+ if ( menuCoordinate ) {
50
+ // Context menu is open -> close it and skip adding a point
51
+ setMenuCoordinate ( null )
52
+ return
53
+ }
50
54
51
- if ( ! settings . addPointOnClick ) return
55
+ if ( ! settings . addPointOnClick ) return
52
56
53
- const lonLat = toLonLat ( e . coordinate )
54
- const myCoord = { lng : lonLat [ 0 ] , lat : lonLat [ 1 ] }
57
+ const lonLat = toLonLat ( e . coordinate )
58
+ const myCoord = { lng : lonLat [ 0 ] , lat : lonLat [ 1 ] }
55
59
56
- let idx = queryPoints . length
57
- if ( idx == 2 ) {
58
- if ( ! queryPoints [ 1 ] . isInitialized ) idx -- ;
59
- }
60
- if ( idx == 1 ) {
61
- if ( ! queryPoints [ 0 ] . isInitialized ) idx -- ;
62
- }
63
- if ( idx < 2 ) {
64
- const setPoint = new SetPoint ( {
65
- ...queryPoints [ idx ] ,
66
- coordinate : myCoord ,
67
- queryText : coordinateToText ( myCoord ) ,
68
- isInitialized : true
69
- } , false ) ;
70
- Dispatcher . dispatch ( setPoint )
71
- } else
72
- Dispatcher . dispatch ( new AddPoint ( idx , myCoord , true , false ) )
73
- } , [ menuCoordinate , settings . addPointOnClick , queryPoints ] )
60
+ let idx = queryPoints . length
61
+ if ( idx == 2 ) {
62
+ if ( ! queryPoints [ 1 ] . isInitialized ) idx --
63
+ }
64
+ if ( idx == 1 ) {
65
+ if ( ! queryPoints [ 0 ] . isInitialized ) idx --
66
+ }
67
+ if ( idx < 2 ) {
68
+ const setPoint = new SetPoint (
69
+ {
70
+ ...queryPoints [ idx ] ,
71
+ coordinate : myCoord ,
72
+ queryText : coordinateToText ( myCoord ) ,
73
+ isInitialized : true ,
74
+ } ,
75
+ false
76
+ )
77
+ Dispatcher . dispatch ( setPoint )
78
+ } else Dispatcher . dispatch ( new AddPoint ( idx , myCoord , true , false ) )
79
+ } ,
80
+ [ menuCoordinate , settings . addPointOnClick , queryPoints ]
81
+ )
74
82
75
83
useEffect ( ( ) => {
76
84
overlay . setElement ( container . current ! )
@@ -81,8 +89,8 @@ export default function ContextMenu({map, route, queryPoints}: ContextMenuProps)
81
89
function onMapTargetChange ( ) {
82
90
const targetElement = map . getTargetElement ( )
83
91
if ( ! targetElement ) {
84
- console . warn ( 'Map target element is null. Delaying event listeners setup.' ) ;
85
- return ;
92
+ console . warn ( 'Map target element is null. Delaying event listeners setup.' )
93
+ return
86
94
}
87
95
88
96
targetElement . addEventListener ( 'contextmenu' , openContextMenu )
0 commit comments