diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 118 |
1 files changed, 85 insertions, 33 deletions
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index 2c2879900..f4e24d9c1 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -32,11 +32,11 @@ import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/materi import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; import { MapBox } from './MapBox'; import { List } from '../../../../fields/List'; -import { MapboxColor, MarkerIcons } from './MarkerIcons'; -import { CirclePicker } from 'react-color'; +import { MarkerIcons } from './MarkerIcons'; +import { CirclePicker, ColorState } from 'react-color'; import { Position } from 'geojson'; -type MapAnchorMenuType = 'standard' | 'route' | 'calendar' | 'customize'; +type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route'; @observer export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -61,17 +61,28 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction; public HideRoute: () => void = unimplementedFunction; - public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: string) => void = unimplementedFunction; + public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction; public CreatePin: (feature: any) => void = unimplementedFunction; public UpdateMarkerColor: (color: string) => void = unimplementedFunction; public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction; + public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction; + + @observable + menuType: MapAnchorMenuType = 'standard'; + + @action + public setMenuType = (menuType: MapAnchorMenuType) => { + this.menuType = menuType; + } private allMapPinDocs: Doc[] = []; - private pinDoc: Doc | undefined = undefined + private pinDoc: Doc | undefined = undefined; + + private routeDoc: Doc | undefined = undefined; private title: string | undefined = undefined; @@ -81,6 +92,11 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`) ; } + public setRouteDoc(routeDoc: Doc){ + this.routeDoc = routeDoc; + this.title = StrCast(routeDoc.title ?? 'Map route') + } + public setAllMapboxPins(pinDocs: Doc[]) { this.allMapPinDocs = pinDocs; pinDocs.forEach((p, idx) => { @@ -148,12 +164,11 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { // return this.top // } - @observable - menuType: MapAnchorMenuType = 'standard'; + @action DirectionsClick = () => { - this.menuType = 'route'; + this.menuType = 'routeCreation'; } @action @@ -175,6 +190,26 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } } + @action + onMarkerColorChange = (color: ColorState) => { + if (this.pinDoc){ + this.pinDoc.markerColor = color.hex; + } + } + + revertToOriginalMarker = () => { + if (this.pinDoc) { + this.pinDoc.markerType = "MAP_PIN"; + this.pinDoc.markerColor = "#ff5722"; + } + } + + onMarkerIconChange = (iconKey: string) => { + if (this.pinDoc) { + this.pinDoc.markerType = iconKey; + } + } + @observable destinationFeatures: any[] = [] @@ -248,7 +283,8 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature){ const coordinates = this.currentRouteInfoMap[this.selectedTransportationType].coordinates; console.log(coordinates); - this.AddNewRouteToMap(coordinates, this.title ?? "", this.selectedDestinationFeature.place_name); + console.log(this.selectedDestinationFeature); + this.AddNewRouteToMap(coordinates, this.title ?? "", this.selectedDestinationFeature, this.createPinForDestination); this.HideRoute(); } } @@ -258,11 +294,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { const markerType = StrCast(this.pinDoc.markerType); const markerColor = StrCast(this.pinDoc.markerColor); - if (markerType.startsWith("MAPBOX")){ - return MarkerIcons.getMapboxIcon(markerColor as MapboxColor); - } else { // font awesome icon - return MarkerIcons.getFontAwesomeIcon(markerType, markerColor); - } + return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor); } return undefined; } @@ -313,7 +345,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { /> </> } - {this.menuType === 'route' && + {this.menuType === 'routeCreation' && <> <IconButton tooltip="Go back" // @@ -327,19 +359,39 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { icon={<FontAwesomeIcon icon={faAdd as IconLookup} />} color={SettingsManager.userColor} /> + </> + } + {this.menuType === 'route' && + <> + <IconButton + tooltip="Delete Route" // + onPointerDown={this.Delete} + icon={<FontAwesomeIcon icon="trash-alt" />} + color={SettingsManager.userColor} + /> <IconButton tooltip='Animate route' - onPointerDown={this.Delete} /**TODO: fix */ + onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} /**TODO: fix */ icon={<FontAwesomeIcon icon={faRoute as IconLookup}/>} color={SettingsManager.userColor} /> + <div ref={this._commentRef}> + <IconButton + tooltip="Link Note to Pin" // + onPointerDown={this.notePointerDown} + icon={<FontAwesomeIcon icon="sticky-note" />} + color={SettingsManager.userColor} + /> + </div> <IconButton tooltip='Add to calendar' onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup}/>} color={SettingsManager.userColor} /> + </> + } {this.menuType === 'customize' && <> @@ -351,7 +403,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { /> <IconButton tooltip="Revert to original" // - onPointerDown={this.BackClick} + onPointerDown={() => this.revertToOriginalMarker()} icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />} color={SettingsManager.userColor} /> @@ -386,7 +438,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { {this.menuType === 'standard' && <div>{this.title}</div> } - {this.menuType === 'route' && + {this.menuType === 'routeCreation' && <div className='direction-inputs' style={{display: 'flex', flexDirection: 'column'}}> <TextField fullWidth @@ -493,28 +545,28 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { circleSize={15} circleSpacing={7} width='100%' - onChange={(color) => console.log(color.hex)} + onChange={(color) => this.onMarkerColorChange(color)} /> </div> <div className='all-markers-container'> - {Object.keys(MarkerIcons.FAMarkerIconsMap).map((iconKey) => { - const icon = MarkerIcons.getFontAwesomeIcon(iconKey); - if (icon){ - return ( - <div key={iconKey} className='marker-icon'> - <IconButton - onPointerDown={() => {}} - icon={MarkerIcons.getFontAwesomeIcon(iconKey, 'white')} - /> - </div> - ) - } - return null; - })} + {Object.keys(MarkerIcons.FAMarkerIconsMap).map((iconKey) => ( + <div key={iconKey} className='marker-icon'> + <IconButton + onPointerDown={() => this.onMarkerIconChange(iconKey)} + icon={MarkerIcons.getFontAwesomeIcon(iconKey, '1x', 'white')} + /> + </div> + ))} </div> <div style={{width: '100%', height:'3px', color: 'white'}}></div> </div> } + {this.menuType === 'route' && this.routeDoc && + <div> + {StrCast(this.routeDoc.title)} + </div> + + } {buttons} </div> , true); |