diff options
| -rw-r--r-- | package-lock.json | 3 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | packages/components/src/components/IconButton/IconButton.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 38 | ||||
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 48 |
5 files changed, 37 insertions, 57 deletions
diff --git a/package-lock.json b/package-lock.json index 7f00b412d..e772b9a8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -131,6 +131,7 @@ "function-plot": "^1.23.3", "fuse.js": "^7.0.0", "fuzzy-search": "^3.2.1", + "gl-matrix": "^3.4.3", "golden-layout": "^2.6.0", "google-auth-library": "^9.4.1", "googleapis": "^146.0.0", @@ -218,7 +219,7 @@ "react-jsx-parser": "^2.0.0", "react-latex-next": "^3.0.0", "react-loading": "^2.0.3", - "react-map-gl": "^7.1.6", + "react-map-gl": "^7.1.9", "react-markdown": "^10.0.0", "react-measure": "^2.5.2", "react-resizable": "^3.0.5", diff --git a/package.json b/package.json index 2aafdd132..7a3b64d9d 100644 --- a/package.json +++ b/package.json @@ -214,6 +214,7 @@ "function-plot": "^1.23.3", "fuse.js": "^7.0.0", "fuzzy-search": "^3.2.1", + "gl-matrix": "^3.4.3", "golden-layout": "^2.6.0", "google-auth-library": "^9.4.1", "googleapis": "^146.0.0", @@ -301,7 +302,7 @@ "react-jsx-parser": "^2.0.0", "react-latex-next": "^3.0.0", "react-loading": "^2.0.3", - "react-map-gl": "^7.1.6", + "react-map-gl": "^7.1.9", "react-markdown": "^10.0.0", "react-measure": "^2.5.2", "react-resizable": "^3.0.5", diff --git a/packages/components/src/components/IconButton/IconButton.tsx b/packages/components/src/components/IconButton/IconButton.tsx index 954a0ae44..2c0ac2fe7 100644 --- a/packages/components/src/components/IconButton/IconButton.tsx +++ b/packages/components/src/components/IconButton/IconButton.tsx @@ -4,8 +4,6 @@ import { Colors, Size, Type, getFontSize, getHeight, isDark, getFormLabelSize } import { IButtonProps } from '../Button'; import './IconButton.scss'; -export interface IIconButtonProps extends IButtonProps {} - export const IconButton = (props: IButtonProps) => { const { active, diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index 8079d96ea..3630d6ea3 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -46,7 +46,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { public IsTargetToggler: () => boolean = returnFalse; public DisplayRoute: (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => void = unimplementedFunction; public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => void = unimplementedFunction; - public CreatePin: (feature: { place_name: string; center: LngLatLike; properties: { wikiData: unknown } }) => void = unimplementedFunction; + public CreatePin: (feature: { place_name: string; center: LngLatLike; properties?: { wikiData: string } }) => void = unimplementedFunction; public UpdateMarkerColor: (color: string) => void = unimplementedFunction; public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction; @@ -293,7 +293,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { return undefined; }; - getDirectionsButton: JSX.Element = (<IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />); + getDirectionsButton = () => <IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />; getAddToCalendarButton = (docType: string): JSX.Element => ( <IconButton @@ -305,9 +305,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { color={SettingsManager.userColor} /> ); - addToCalendarButton: JSX.Element = ( - <IconButton tooltip="Add to calendar" onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} /> - ); + addToCalendarButton = () => <IconButton tooltip="Add to calendar" onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />; getLinkNoteToDocButton = (docType: string): JSX.Element => ( <div ref={this._commentRef}> @@ -320,7 +318,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { </div> ); - linkNoteToPinOrRoutenButton: JSX.Element = ( + linkNoteToPinOrRoutenButton = () => ( <div ref={this._commentRef}> <IconButton tooltip="Link Note to Pin" // @@ -331,9 +329,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { </div> ); - customizePinButton: JSX.Element = (<IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />); + customizePinButton = () => <IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />; - centerOnPinButton: JSX.Element = ( + centerOnPinButton = () => ( <IconButton tooltip="Center on pin" // onPointerDown={this.Center} @@ -342,7 +340,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { /> ); - backButton: JSX.Element = ( + backButton = () => ( <IconButton tooltip="Go back" // onPointerDown={this.BackClick} @@ -351,7 +349,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { /> ); - addRouteButton: JSX.Element = ( + addRouteButton = () => ( <IconButton tooltip="Add route" // onPointerDown={this.HandleAddRouteClick} @@ -369,9 +367,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { /> ); - animateRouteButton: JSX.Element = (<IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />); + animateRouteButton = () => <IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />; - revertToOriginalMarkerButton = ( + revertToOriginalMarkerButton = () => ( <IconButton tooltip="Revert to original" // onPointerDown={() => this.revertToOriginalMarker()} @@ -386,31 +384,31 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { {this.menuType === 'standard' && ( <> {this.getDeleteButton('pin')} - {this.getDirectionsButton} + {this.getDirectionsButton()} {this.getAddToCalendarButton('pin')} {this.getLinkNoteToDocButton('pin')} - {this.customizePinButton} - {this.centerOnPinButton} + {this.customizePinButton()} + {this.centerOnPinButton()} </> )} {this.menuType === 'routeCreation' && ( <> - {this.backButton} - {this.addRouteButton} + {this.backButton()} + {this.addRouteButton()} </> )} {this.menuType === 'route' && ( <> {this.getDeleteButton('route')} - {this.animateRouteButton} + {this.animateRouteButton()} {this.getAddToCalendarButton('route')} {this.getLinkNoteToDocButton('route')} </> )} {this.menuType === 'customize' && ( <> - {this.backButton} - {this.revertToOriginalMarkerButton} + {this.backButton()} + {this.revertToOriginalMarkerButton()} </> )} diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 792cb6b46..2c9c185af 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -76,7 +76,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { makeObservable(this); } - @observable _featuresFromGeocodeResults: { place_name: string; center: LngLatLike | undefined }[] = []; + @observable _featuresFromGeocodeResults: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: string } }[] = []; @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @observable _selectedPinOrRoute: Doc | undefined = undefined; // The pin that is selected @observable _mapReady = false; @@ -123,7 +123,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const originalCoordinates: Position[] = JSON.parse(StrCast(this._routeToAnimate.routeCoordinates)); // const index = Math.floor(this.animationPhase * originalCoordinates.length); const index = this._animationPhase * (originalCoordinates.length - 1); // Calculate the fractional index - console.log('Animation phase', this._animationPhase); const startIndex = Math.floor(index); const endIndex = Math.ceil(index); let feature: Feature<Geometry, GeoJsonProperties>; @@ -183,7 +182,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }); return feature; } - console.log('ERROR'); return { type: 'Feature', properties: {}, @@ -199,7 +197,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @computed get allRoutesGeoJson(): FeatureCollection { const features: Feature<Geometry, GeoJsonProperties>[] = this.allRoutes.map((routeDoc: Doc) => { - console.log('Route coords: ', routeDoc.routeCoordinates); const geometry: LineString = { type: 'LineString', coordinates: JSON.parse(StrCast(routeDoc.routeCoordinates)), @@ -215,7 +212,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return { type: 'FeatureCollection', - features: features, + features, }; } @@ -241,7 +238,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { toList(docs).forEach(doc => { let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this._selectedPinOrRoute; if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) { - existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map)); + existingPin = this.createPushpin({ lng: NumCast(doc.longitude), lat: NumCast(doc.latitude) }, StrCast(doc.map)); } if (existingPin) { setTimeout(() => { @@ -477,7 +474,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @action deleteSelectedPinOrRoute = undoable(() => { - console.log('deleting'); if (this._selectedPinOrRoute) { // Removes filter Doc.setDocFilter(this.Document, 'latitude', NumCast(this._selectedPinOrRoute.latitude), 'remove'); @@ -542,17 +538,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { * Creates Pushpin doc and adds it to the list of annotations */ @action - createPushpin = undoable((center: LngLatLike, location?: string, wikiData?: string) => { - const lat = 'lat' in center ? center.lat : center[0]; - const lon = 'lng' in center ? center.lng : 'lon' in center ? center.lon : center[1]; + createPushpin = (center: LngLatLike, location?: string, wikiData?: string) => { + const [lng, lat] = center instanceof Array ? center : ['lng' in center ? center.lng : center.lon, center.lat]; // Stores the pushpin as a MapMarkerDocument const pushpin = Docs.Create.PushpinDocument( lat, - lon, + lng, false, [], { - title: location ?? `lat=${lat},lng=${lon}`, + title: location ?? `lat=${lat},lng=${lng}`, map: location, description: '', wikiData: wikiData, @@ -563,11 +558,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // ,'pushpinIDamongus'+ this.incrementer++ ); this.addDocument(pushpin, this.annotationKey); - console.log(pushpin); return pushpin; // mapMarker.infoWindowOpen = true; - }, 'createpin'); + }; @action createMapRoute = undoable((coordinates: Position[], originName: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => { @@ -575,7 +569,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const mapRoute = Docs.Create.MapRouteDocument(false, [], { title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates) }); this.addDocument(mapRoute, this.annotationKey); if (createPinForDestination) { - this.createPushpin(destination.center[1], destination.center[0], destination.place_name); + this.createPushpin({ lng: destination.center[0], lat: destination.center[1] }, destination.place_name); } this._temporaryRouteSource = { type: 'FeatureCollection', @@ -598,18 +592,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; @action - addMarkerForFeature = (feature: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: unknown } }) => { - const location = feature.place_name; + addMarkerForFeature = (feature: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: string } }) => { if (feature.center) { - const wikiData = feature.properties?.wikiData; - - this.createPushpin(feature.center, location, wikiData); - - if (this._mapRef.current) { - this._mapRef.current.flyTo({ - center: feature.center, - }); - } + this.createPushpin(feature.center, feature.place_name, feature.properties?.wikiData); + this._mapRef.current?.flyTo({ + center: feature.center, + }); this._featuresFromGeocodeResults = []; } else { // TODO: handle error @@ -653,7 +641,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { layers: ['map-routes-layer'], }); - console.error(features); if (features && features.length > 0 && features[0].properties && features[0].geometry) { const { routeTitle } = features[0].properties; const routeDoc: Doc | undefined = this.allRoutes.find(rtDoc => rtDoc.title === routeTitle); @@ -936,7 +923,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const updateAnimationPhase = (newAnimationPhase: number) => this.setAnimationPhase(newAnimationPhase); if (status !== AnimationStatus.RESUME) { - const result = await animationUtil.flyInAndRotate({ + await animationUtil.flyInAndRotate({ map: this._mapRef.current!, // targetLngLat, // duration 3000 @@ -948,9 +935,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // endPitch: this.isStreetViewAnimation ? 80 : 50, updateFrameId, }); - - console.log('Bearing: ', result.bearing); - console.log('Altitude: ', result.altitude); } runInAction(() => { @@ -1085,7 +1069,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { onBearingChange = (e: React.ChangeEvent<HTMLInputElement>) => { const bearing = parseInt(e.target.value); if (!isNaN(bearing) && this._mapRef.current) { - console.log('bearing change'); const fixedBearing = Math.max(0, Math.min(360, bearing)); this._mapRef.current.setBearing(fixedBearing); this.dataDoc.map_bearing = fixedBearing; @@ -1096,7 +1079,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { onPitchChange = (e: React.ChangeEvent<HTMLInputElement>) => { const pitch = parseInt(e.target.value); if (!isNaN(pitch) && this._mapRef.current) { - console.log('pitch change'); const fixedPitch = Math.max(0, Math.min(85, pitch)); this._mapRef.current.setPitch(fixedPitch); this.dataDoc.map_pitch = fixedPitch; |