Revize 56018f1c

right click popup menu

re #9741

frontend/src/features/Theme/ThemeWrapper.tsx

@@ -8 +8 @@
     children: ReactNode
 }
 
-const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
-    const lightThemePalette = {
-        primary: {
-            main: '#A28253',
-        },
-        secondary: {
-            main: '#E3DBCF',
-        },
-        selected: {
-            main: '#C0C0C0'
-        }
-    }
+export const lightThemePalette = {
+    primary: {
+        main: '#A28253',
+    },
+    secondary: {
+        main: '#E3DBCF',
+    },
+    selected: {
+        main: '#C0C0C0',
+    },
+}
 
-    const darkThemePalette = {
-        primary: {
-            main: '#e0bb84',
-        },
-        secondary: {
-            main: '#E3DBCF',
-        },
-    }
+export const darkThemePalette = {
+    primary: {
+        main: '#e0bb84',
+    },
+    secondary: {
+        main: '#E3DBCF',
+    },
+}
 
-    const getPalette = (paletteMode: PaletteMode) => {
-        switch (paletteMode) {
-            case 'light':
-                return lightThemePalette
-            case 'dark':
-                return darkThemePalette
-            default:
-                return lightThemePalette
-        }
+export const getPalette = (paletteMode: PaletteMode) => {
+    switch (paletteMode) {
+        case 'light':
+            return lightThemePalette
+        case 'dark':
+            return darkThemePalette
+        default:
+            return lightThemePalette
     }
+}
 
-    const buildTheme = (paletteMode: PaletteMode) =>
+export const buildTheme = (paletteMode: PaletteMode) =>
         createTheme({
             palette: {
                 mode: paletteMode,
@@ -66 +65 @@
             },
         })
 
+const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
+    
+
     const paletteMode = useSelector(
         (state: RootState) => state.theme.paletteMode
     )

frontend/src/features/TrackingTool/DraggableList/DraggableListItem.tsx

@@ -50 +50 @@
                     {...provided.draggableProps}
                     {...provided.dragHandleProps}
                     sx={{
-                        background: snapshot.isDragging ? 'rgb(235,235,235)' : 'inherit',
+                        background: snapshot.isDragging
+                            ? 'rgb(235,235,235)'
+                            : 'inherit',
                     }}
                 >
                     <ListItemAvatar>

frontend/src/features/TrackingTool/Map/RightClickPopupMenu.tsx

@@ +1 @@
+import { LeafletMouseEvent } from 'leaflet'
+import { Fragment, useState } from 'react'
+import { Popup, useMap, useMapEvents } from 'react-leaflet'
+
+import * as React from 'react'
+import Divider from '@mui/material/Divider'
+import Paper from '@mui/material/Paper'
+import MenuList from '@mui/material/MenuList'
+import MenuItem from '@mui/material/MenuItem'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import Typography from '@mui/material/Typography'
+import ContentCut from '@mui/icons-material/ContentCut'
+import ContentCopy from '@mui/icons-material/ContentCopy'
+import ContentPaste from '@mui/icons-material/ContentPaste'
+import Cloud from '@mui/icons-material/Cloud'
+
+export function IconMenu() {
+    return (
+        // <Paper sx={{ width: 320, maxWidth: '100%' }}>
+            <MenuList>
+                <MenuItem>
+                    <ListItemIcon>
+                        <ContentCut fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText>Cut</ListItemText>
+                    <Typography variant="body2" color="text.secondary">
+                        ⌘X
+                    </Typography>
+                </MenuItem>
+                <MenuItem>
+                    <ListItemIcon>
+                        <ContentCopy fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText>Copy</ListItemText>
+                    <Typography variant="body2" color="text.secondary">
+                        ⌘C
+                    </Typography>
+                </MenuItem>
+                <MenuItem>
+                    <ListItemIcon>
+                        <ContentPaste fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText>Paste</ListItemText>
+                    <Typography variant="body2" color="text.secondary">
+                        ⌘V
+                    </Typography>
+                </MenuItem>
+                <Divider />
+                <MenuItem>
+                    <ListItemIcon>
+                        <Cloud fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText>Web Clipboard</ListItemText>
+                </MenuItem>
+            </MenuList>
+        // </Paper>
+    )
+}
+
+const RightClickPopupMenu = () => {
+    const [open, setOpen] = useState(false)
+    const [latLng, setLatLng] = useState<[number, number]>([0, 0])
+    const mapEvents = useMapEvents({
+        contextmenu: (e: LeafletMouseEvent) => {
+            setLatLng([e.latlng.lat, e.latlng.lng])
+            setOpen(true)
+        },
+    })
+
+    return (
+        <Fragment>
+            {open && <Popup onClose={() => setOpen(false)} position={latLng}>
+                <IconMenu />
+                </Popup>}
+        </Fragment>
+    )
+}
+
+export default RightClickPopupMenu

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -4 +4 @@
     CardContent,
     Grid,
     Stack,
+    ThemeProvider,
     Typography,
 } from '@mui/material'
 import { Fragment, useEffect, useRef } from 'react'
@@ -23 +24 @@
 import GeoJsonImportDialog from './Upload/GeoJsonImportDialog'
 import ProcessedTextDisplay from './ProcessedText/ProcessedTextDisplay'
 import DraggableMarkerList from './DraggableList/DraggableMarkerList'
+import RightClickPopupMenu from './Map/RightClickPopupMenu'
+import { buildTheme, getPalette } from '../Theme/ThemeWrapper'
+
+const mapTheme = buildTheme('light')
 
 // Page with tracking tool
 const TrackingTool = () => {
@@ -136 +141 @@
                         width: '100%',
                     }}
                 >
-                    <MapContainer
-                        center={[mapCenter[0], mapCenter[1]]}
-                        zoom={mapConfig.defaultZoom}
-                        style={{ height: '100%', minHeight: '100%' }}
-                        whenCreated={(map) => {
-                            mapRef.current = map
-                        }}
-                    >
-                        <TileLayer
-                            attribution={mapConfig.attribution}
-                            url={mapConfig.url}
-                        />
-                        {pathVariants?.map((pathVariant, idx) => (
-                            <MapPath idx={idx} />
-                        ))}
-                    </MapContainer>
+                    <ThemeProvider theme={mapTheme}>
+                        <MapContainer
+                            center={[mapCenter[0], mapCenter[1]]}
+                            zoom={mapConfig.defaultZoom}
+                            style={{ height: '100%', minHeight: '100%' }}
+                            whenCreated={(map) => {
+                                mapRef.current = map
+                            }}
+                        >
+                            <TileLayer
+                                attribution={mapConfig.attribution}
+                                url={mapConfig.url}
+                            />
+                            {pathVariants?.map((pathVariant, idx) => (
+                                <MapPath idx={idx} />
+                            ))}
+                            <RightClickPopupMenu />
+                        </MapContainer>
+                    </ThemeProvider>
                 </Grid>
                 <Grid container sx={{ mt: 1, mb: 20 }} spacing={1}>
                     <Grid item xs={12} md={6}>