subcrip
/
nanomap
mirror of https://github.com/arielherself/nanomap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: clear map button

This commit is contained in:
arielherself 2023-12-30 11:14:49 +08:00
parent f43fdb52f3
commit 74f481135c
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/SimulateClick.js
View File

@ -1,13 +1,13 @@
import {Button, IconButton, ButtonGroup, Menu, MenuItem, Stack} from "@mui/joy"; import {Button, IconButton, ButtonGroup, Menu, MenuItem, Stack} from "@mui/joy";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import React from "react"; import React from "react";
import {Add, LocationOn} from "@mui/icons-material"; import {Delete, LocationOn} from "@mui/icons-material";
export default function SimulateClick({isLocated,isCandEmpty,relocator}) { export default function SimulateClick({isLocated,isMarkersEmpty,relocator,clearMarkers}) {
return ( return (
<ButtonGroup buttonFlex={1} aria-label="flex button group" sx={{zIndex: 'modal'}}> <ButtonGroup buttonFlex={1} aria-label="flex button group" sx={{zIndex: 'modal'}}>
<Button disabled={isLocated} variant={'solid'} color={'warning'} startDecorator={<LocationOn />} onClick={relocator}>Relocate</Button> <Button disabled={isLocated} variant={'solid'} color={'warning'} startDecorator={<LocationOn />} onClick={relocator}>Relocate</Button>
<Button disabled={isCandEmpty} variant={'solid'} color={'primary'} startDecorator={<Add />}>Add</Button> <Button disabled={isMarkersEmpty} variant={'solid'} color={'danger'} startDecorator={<Delete />} onClick={clearMarkers}>Clear</Button>
</ButtonGroup> </ButtonGroup>
); );
} }

13
src/UMap.js
View File

@ -16,7 +16,9 @@ class Markers extends Component {
// A location is a [lat,lon] pair. // A location is a [lat,lon] pair.
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []}; this.state = {markers: [], candMarkers: [], mksEmpty: true, candEmpty: true, polylines: []};
this.clearMarkers = this.clearMarkers.bind(this);
this.clearCandMarkers = this.clearCandMarkers.bind(this);
} }
render() { render() {
@ -38,6 +40,7 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
markers: [...prev.markers, [lat, lng]], markers: [...prev.markers, [lat, lng]],
candMarkers: prev.candMarkers, candMarkers: prev.candMarkers,
mksEmpty: false,
candEmpty: prev.candEmpty, candEmpty: prev.candEmpty,
polylines: prev.polylines, polylines: prev.polylines,
})); }));
@ -48,6 +51,7 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
candMarkers: [...prev.candMarkers, [lat, lng]], candMarkers: [...prev.candMarkers, [lat, lng]],
markers: prev.markers, markers: prev.markers,
mksEmpty: prev.mksEmpty,
candEmpty: false, candEmpty: false,
polylines: prev.polylines, polylines: prev.polylines,
})); }));
@ -58,6 +62,7 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
markers: [], markers: [],
candMarkers: prev.candMarkers, candMarkers: prev.candMarkers,
mksEmpty: true,
candEmpty: prev.candEmpty, candEmpty: prev.candEmpty,
polylines: [], polylines: [],
})); }));
@ -68,6 +73,7 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
markers: prev.markers, markers: prev.markers,
candMarkers: [], candMarkers: [],
mksEmpty: prev.mksEmpty,
candEmpty: true, candEmpty: true,
polylines: prev.polylines, polylines: prev.polylines,
})); }));
@ -93,6 +99,7 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
markers: prev.markers, markers: prev.markers,
candMarkers: prev.candMarkers, candMarkers: prev.candMarkers,
mksEmpty: prev.mksEmpty,
candEmpty: prev.candEmpty, candEmpty: prev.candEmpty,
polylines: clear ? pl : [...pl, ...prev.polylines], // mind the ordering polylines: clear ? pl : [...pl, ...prev.polylines], // mind the ordering
})); }));
@ -105,7 +112,7 @@ function MapClickHandler({mks,focusUpdater,locator,locker}) {
click: (e) => { click: (e) => {
map.locate(); map.locate();
const {lat,lng}=e.latlng; const {lat,lng}=e.latlng;
console.info(`Clicking on ${lat} ${lng}`); sill(`Clicking on ${lat} ${lng}`);
mks.current.addMarker(lat, lng); mks.current.addMarker(lat, lng);
post('POST', 'click', mks.current.state.markers.slice(-2)).then((response) => { post('POST', 'click', mks.current.state.markers.slice(-2)).then((response) => {
// TODO: real functionality // TODO: real functionality
@ -252,7 +259,7 @@ export default function UMap() {
<ViewportChange/> <ViewportChange/>
</MapContainer> </MapContainer>
<Sheet sx={{position: 'absolute', top: '20px', right: '10vw', zIndex: 'modal'}}> <Sheet sx={{position: 'absolute', top: '20px', right: '10vw', zIndex: 'modal'}}>
<SimulateClick isLocated={located} relocator={relo} isCandEmpty={markersRef.current ? markersRef.current.state.candEmpty : true}/> <SimulateClick isLocated={located} relocator={relo} isMarkersEmpty={markersRef.current ? markersRef.current.state.mksEmpty : true} clearMarkers={markersRef.current ? markersRef.current.clearMarkers : null}/>
<LocationSearch nb={nearbyName} mks={markersRef} focus={focus}/> <LocationSearch nb={nearbyName} mks={markersRef} focus={focus}/>
</Sheet> </Sheet>
</Sheet> </Sheet>