1 |
56018f1c
|
Vaclav Honzik
|
import { LeafletMouseEvent } from 'leaflet'
|
2 |
|
|
import { Fragment, useState } from 'react'
|
3 |
|
|
import { Popup, useMap, useMapEvents } from 'react-leaflet'
|
4 |
|
|
|
5 |
|
|
import * as React from 'react'
|
6 |
|
|
import Divider from '@mui/material/Divider'
|
7 |
|
|
import Paper from '@mui/material/Paper'
|
8 |
|
|
import MenuList from '@mui/material/MenuList'
|
9 |
|
|
import MenuItem from '@mui/material/MenuItem'
|
10 |
|
|
import ListItemText from '@mui/material/ListItemText'
|
11 |
|
|
import ListItemIcon from '@mui/material/ListItemIcon'
|
12 |
|
|
import Typography from '@mui/material/Typography'
|
13 |
|
|
import ContentCut from '@mui/icons-material/ContentCut'
|
14 |
|
|
import ContentCopy from '@mui/icons-material/ContentCopy'
|
15 |
|
|
import ContentPaste from '@mui/icons-material/ContentPaste'
|
16 |
|
|
import Cloud from '@mui/icons-material/Cloud'
|
17 |
|
|
|
18 |
|
|
export function IconMenu() {
|
19 |
|
|
return (
|
20 |
|
|
// <Paper sx={{ width: 320, maxWidth: '100%' }}>
|
21 |
|
|
<MenuList>
|
22 |
|
|
<MenuItem>
|
23 |
|
|
<ListItemIcon>
|
24 |
|
|
<ContentCut fontSize="small" />
|
25 |
|
|
</ListItemIcon>
|
26 |
|
|
<ListItemText>Cut</ListItemText>
|
27 |
|
|
<Typography variant="body2" color="text.secondary">
|
28 |
|
|
⌘X
|
29 |
|
|
</Typography>
|
30 |
|
|
</MenuItem>
|
31 |
|
|
<MenuItem>
|
32 |
|
|
<ListItemIcon>
|
33 |
|
|
<ContentCopy fontSize="small" />
|
34 |
|
|
</ListItemIcon>
|
35 |
|
|
<ListItemText>Copy</ListItemText>
|
36 |
|
|
<Typography variant="body2" color="text.secondary">
|
37 |
|
|
⌘C
|
38 |
|
|
</Typography>
|
39 |
|
|
</MenuItem>
|
40 |
|
|
<MenuItem>
|
41 |
|
|
<ListItemIcon>
|
42 |
|
|
<ContentPaste fontSize="small" />
|
43 |
|
|
</ListItemIcon>
|
44 |
|
|
<ListItemText>Paste</ListItemText>
|
45 |
|
|
<Typography variant="body2" color="text.secondary">
|
46 |
|
|
⌘V
|
47 |
|
|
</Typography>
|
48 |
|
|
</MenuItem>
|
49 |
|
|
<Divider />
|
50 |
|
|
<MenuItem>
|
51 |
|
|
<ListItemIcon>
|
52 |
|
|
<Cloud fontSize="small" />
|
53 |
|
|
</ListItemIcon>
|
54 |
|
|
<ListItemText>Web Clipboard</ListItemText>
|
55 |
|
|
</MenuItem>
|
56 |
|
|
</MenuList>
|
57 |
|
|
// </Paper>
|
58 |
|
|
)
|
59 |
|
|
}
|
60 |
|
|
|
61 |
|
|
const RightClickPopupMenu = () => {
|
62 |
|
|
const [open, setOpen] = useState(false)
|
63 |
|
|
const [latLng, setLatLng] = useState<[number, number]>([0, 0])
|
64 |
|
|
const mapEvents = useMapEvents({
|
65 |
|
|
contextmenu: (e: LeafletMouseEvent) => {
|
66 |
|
|
setLatLng([e.latlng.lat, e.latlng.lng])
|
67 |
|
|
setOpen(true)
|
68 |
|
|
},
|
69 |
|
|
})
|
70 |
|
|
|
71 |
|
|
return (
|
72 |
|
|
<Fragment>
|
73 |
|
|
{open && <Popup onClose={() => setOpen(false)} position={latLng}>
|
74 |
|
|
<IconMenu />
|
75 |
|
|
</Popup>}
|
76 |
|
|
</Fragment>
|
77 |
|
|
)
|
78 |
|
|
}
|
79 |
|
|
|
80 |
|
|
export default RightClickPopupMenu
|