diff options
-rw-r--r-- | src/client/views/InkTranscription.tsx | 4 | ||||
-rw-r--r-- | src/client/views/nodes/MapBox/AnimationUtility.ts | 16 | ||||
-rw-r--r-- | src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 38 | ||||
-rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 59 |
4 files changed, 56 insertions, 61 deletions
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx index c5a9d3ba4..e800e0ae3 100644 --- a/src/client/views/InkTranscription.tsx +++ b/src/client/views/InkTranscription.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { imageUrlToBase64 } from '../../ClientUtils'; import { aggregateBounds } from '../../Utils'; import { Doc, DocListCast } from '../../fields/Doc'; -import { InkData, InkField, InkTool } from '../../fields/InkField'; +import { InkData, InkField, InkInkTool, InkTool } from '../../fields/InkField'; import { Cast, DateCast, ImageCast, NumCast } from '../../fields/Types'; import { ImageField, URLField } from '../../fields/URLField'; import { gptHandwriting } from '../apis/gpt/GPT'; @@ -297,7 +297,7 @@ export class InkTranscription extends React.Component { */ createInkGroup() { // TODO nda - if document being added to is a inkGrouping then we can just add to that group - if (Doc.ActiveTool === InkTool.Write) { + if (Doc.ActiveTool === InkTool.Ink && Doc.ActiveInk === InkInkTool.Write) { CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => { // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those const selected = ffView.unprocessedDocs; diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts index 3eac50f1f..a3ac68b99 100644 --- a/src/client/views/nodes/MapBox/AnimationUtility.ts +++ b/src/client/views/nodes/MapBox/AnimationUtility.ts @@ -1,11 +1,12 @@ import * as turf from '@turf/turf'; -import { Position } from '@turf/turf'; import * as d3 from 'd3'; -import { Feature, GeoJsonProperties, Geometry } from 'geojson'; -import mapboxgl, { MercatorCoordinate } from 'mapbox-gl'; +import { Feature, GeoJsonProperties, Geometry, LineString } from 'geojson'; +import { MercatorCoordinate } from 'mapbox-gl'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { MapRef } from 'react-map-gl'; +export type Position = [number, number]; + export enum AnimationStatus { START = 'start', RESUME = 'resume', @@ -23,7 +24,7 @@ export class AnimationUtility { private ROUTE_COORDINATES: Position[] = []; @observable - private PATH?: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = undefined; + private PATH?: Feature<LineString> = undefined; // turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = undefined; private PATH_DISTANCE: number = 0; private FLY_IN_START_PITCH = 40; @@ -165,7 +166,8 @@ export class AnimationUtility { } @action - public setPath = (path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>) => { + public setPath = (path: Feature<LineString>) => { + // turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>) => { this.PATH = path; }; @@ -178,7 +180,7 @@ export class AnimationUtility { this.ROUTE_COORDINATES = routeCoordinates; this.PATH = turf.lineString(routeCoordinates); - this.PATH_DISTANCE = turf.length(this.PATH); + this.PATH_DISTANCE = turf.length(this.PATH as Feature<LineString>); this.terrainDisplayed = terrainDisplayed; const bearing = this.calculateBearing( @@ -232,7 +234,7 @@ export class AnimationUtility { if (!this.PATH) return; // calculate the distance along the path based on the animationPhase - const alongPath = turf.along(this.PATH, this.PATH_DISTANCE * animationPhase).geometry.coordinates; + const alongPath = turf.along(this.PATH as Feature<LineString>, this.PATH_DISTANCE * animationPhase).geometry.coordinates; const lngLat = { lng: alongPath[0], diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index cef202256..8079d96ea 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -1,9 +1,7 @@ -/* eslint-disable react/button-has-type */ import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material'; import { IconButton } from '@dash/components'; -import { Position } from 'geojson'; import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -19,6 +17,8 @@ import { DocumentView } from '../DocumentView'; import './MapAnchorMenu.scss'; import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; import { MarkerIcons } from './MarkerIcons'; +import { LngLatLike } from 'mapbox-gl'; +import { Position } from './AnimationUtility'; // import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route'; @@ -44,10 +44,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { // public MakeTargetToggle: () => void = unimplementedFunction; // public ShowTargetTrail: () => void = unimplementedFunction; public IsTargetToggler: () => boolean = returnFalse; - - public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction; - public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction; - public CreatePin: (feature: any) => void = unimplementedFunction; + 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 UpdateMarkerColor: (color: string) => void = unimplementedFunction; public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction; @@ -212,19 +211,19 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { }; @observable - destinationFeatures: any[] = []; + destinationFeatures: { place_name: string; center: number[] }[] = []; @observable destinationSelected: boolean = false; @observable - selectedDestinationFeature: any = undefined; + selectedDestinationFeature?: { place_name: string; center: number[] } = undefined; @observable createPinForDestination: boolean = true; @observable - currentRouteInfoMap: Record<TransportationType, any> | undefined = undefined; + currentRouteInfoMap: Record<TransportationType, { coordinates: Position[]; duration: number; distance: number }> | undefined = undefined; @observable selectedTransportationType: TransportationType = 'driving'; @@ -238,7 +237,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { }; @action - handleSelectedDestinationFeature = (destinationFeature: any) => { + handleSelectedDestinationFeature = (destinationFeature?: { place_name: string; center: number[] }) => { this.selectedDestinationFeature = destinationFeature; }; @@ -258,7 +257,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } }; - getRoutes = async (destinationFeature: any) => { + getRoutes = async (destinationFeature: { center: number[] }) => { const currentPinLong: number = NumCast(this.pinDoc?.longitude); const currentPinLat: number = NumCast(this.pinDoc?.latitude); @@ -280,8 +279,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { HandleAddRouteClick = () => { if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature) { const { coordinates } = this.currentRouteInfoMap[this.selectedTransportationType]; - console.log(coordinates); - console.log(this.selectedDestinationFeature); this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination); } }; @@ -441,27 +438,26 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { <Autocomplete fullWidth id="route-destination-searcher" - onInputChange={(e: any, searchText: any) => this.handleDestinationSearchChange(searchText)} - onChange={(e: any, feature: any, reason: any) => { + onInputChange={(e, searchText) => this.handleDestinationSearchChange(searchText)} + onChange={(e, feature: unknown, reason: unknown) => { if (reason === 'clear') { this.handleSelectedDestinationFeature(undefined); } else if (reason === 'selectOption') { - this.handleSelectedDestinationFeature(feature); + this.handleSelectedDestinationFeature(feature as { place_name: string; center: number[] }); } }} options={this.destinationFeatures.filter(feature => feature.place_name).map(feature => feature)} - getOptionLabel={(feature: any) => feature.place_name} - // eslint-disable-next-line react/jsx-props-no-spreading - renderInput={(params: any) => <TextField {...params} placeholder="Enter a destination" />} + getOptionLabel={(feature: unknown) => (feature as { place_name: string }).place_name} + renderInput={params => <TextField {...params} placeholder="Enter a destination" />} /> {!this.selectedDestinationFeature ? null - : !this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature.place_name) && ( + : !this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature?.place_name) && ( <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px' }}> <FormControlLabel label="Create pin for destination?" control={<Checkbox color="success" checked={this.createPinForDestination} onChange={this.toggleCreatePinForDestinationCheckbox} />} /> </div> )} - <button id="get-routes-button" disabled={!this.selectedDestinationFeature} onClick={() => this.getRoutes(this.selectedDestinationFeature)}> + <button id="get-routes-button" disabled={!this.selectedDestinationFeature} onClick={() => this.selectedDestinationFeature && this.getRoutes(this.selectedDestinationFeature)}> Get routes </button> diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index c4bb7c47d..541b41bf7 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -4,14 +4,13 @@ import { Checkbox, FormControlLabel, TextField } from '@mui/material'; import * as turf from '@turf/turf'; import { IconButton, Size, Type } from '@dash/components'; import * as d3 from 'd3'; -import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson'; -import mapboxgl, { LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl'; +import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString } from 'geojson'; +import { LngLatBoundsLike, LngLatLike, MapLayerMouseEvent } from 'mapbox-gl'; import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { CirclePicker, ColorResult } from 'react-color'; import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl'; -import { MarkerEvent } from 'react-map-gl/dist/esm/types'; import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc'; @@ -30,11 +29,12 @@ import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { FocusViewOptions } from '../FocusViewOptions'; import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons'; -import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility'; +import { AnimationSpeed, AnimationStatus, AnimationUtility, Position } from './AnimationUtility'; import { MapAnchorMenu } from './MapAnchorMenu'; import './MapBox.scss'; import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; import { MarkerIcons } from './MarkerIcons'; +import { RichTextField } from '../../../../fields/RichTextField'; // import { GeocoderControl } from './GeocoderControl'; // amongus @@ -76,7 +76,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { makeObservable(this); } - @observable _featuresFromGeocodeResults: any[] = []; + @observable _featuresFromGeocodeResults: { place_name: string; center: LngLatLike | undefined }[] = []; @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @observable _selectedPinOrRoute: Doc | undefined = undefined; // The pin that is selected @observable _mapReady = false; @@ -100,7 +100,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { geometry: { type: 'LineString', coordinates: [] }, }; - @observable path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = { + @observable path: Feature<LineString> = { + // turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = { type: 'Feature', geometry: { type: 'LineString', coordinates: [] }, properties: {}, @@ -168,7 +169,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { autorun(() => { const animationUtil = this._animationUtility; const concattedCoordinates = geometry.coordinates.concat(originalCoordinates.slice(endIndex)); - const newFeature: Feature<LineString, turf.Properties> = { + const newFeature: Feature<LineString> = { type: 'Feature', properties: {}, geometry: { @@ -445,7 +446,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { /// this should use SELECTED pushpin for lat/long if there is a selection, otherwise CENTER const anchor = Docs.Create.ConfigDocument({ title: 'MapAnchor:' + this.Document.title, - text: (StrCast(this._selectedPinOrRoute?.map) || StrCast(this.Document.map) || 'map location') as any, + text: (StrCast(this._selectedPinOrRoute?.map) || StrCast(this.Document.map) || 'map location') as unknown as RichTextField, // strings are allowed for text config_latitude: NumCast((existingPin ?? this._selectedPinOrRoute)?.latitude ?? this.dataDoc.latitude), config_longitude: NumCast((existingPin ?? this._selectedPinOrRoute)?.longitude ?? this.dataDoc.longitude), config_map_zoom: NumCast(this.dataDoc.map_zoom), @@ -464,7 +465,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return this.Document; }; - map_docToPinMap = new Map<Doc, any>(); + map_docToPinMap = new Map<Doc, unknown>(); map_pinHighlighted = new Map<Doc, boolean>(); /* @@ -541,15 +542,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { * Creates Pushpin doc and adds it to the list of annotations */ @action - createPushpin = undoable((latitude: number, longitude: number, location?: string, wikiData?: string) => { + 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]; // Stores the pushpin as a MapMarkerDocument const pushpin = Docs.Create.PushpinDocument( - NumCast(latitude), - NumCast(longitude), + lat, + lon, false, [], { - title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`, + title: location ?? `lat=${lat},lng=${lon}`, map: location, description: '', wikiData: wikiData, @@ -567,7 +570,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }, 'createpin'); @action - createMapRoute = undoable((coordinates: Position[], originName: string, destination: any, createPinForDestination: boolean) => { + createMapRoute = undoable((coordinates: Position[], originName: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => { if (originName !== destination.place_name) { const mapRoute = Docs.Create.MapRouteDocument(false, [], { title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates) }); this.addDocument(mapRoute, this.annotationKey); @@ -586,23 +589,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }, 'createmaproute'); @action - searchbarKeyDown = (e: any) => { + searchbarKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && this._featuresFromGeocodeResults) { - const center = this._featuresFromGeocodeResults[0]?.center; + const center = this._featuresFromGeocodeResults[0]; this._featuresFromGeocodeResults = []; - setTimeout(() => center && this._mapRef.current?.flyTo({ center })); + setTimeout(() => center && this._mapRef.current?.flyTo(center)); } }; @action - addMarkerForFeature = (feature: any) => { + addMarkerForFeature = (feature: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: unknown } }) => { const location = feature.place_name; if (feature.center) { - const longitude = feature.center[0]; - const latitude = feature.center[1]; const wikiData = feature.properties?.wikiData; - this.createPushpin(latitude, longitude, location, wikiData); + this.createPushpin(feature.center, location, wikiData); if (this._mapRef.current) { this._mapRef.current.flyTo({ @@ -727,7 +728,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; @action - handleMarkerClick = (e: MarkerEvent<mapboxgl.Marker, MouseEvent>, pinDoc: Doc) => { + handleMarkerClick = (clientX: number, clientY: number, pinDoc: Doc) => { this._featuresFromGeocodeResults = []; this.deselectPinOrRoute(); // TODO: check this method this._selectedPinOrRoute = pinDoc; @@ -758,7 +759,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // MapAnchorMenu.Instance.jumpTo(NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3, true); - MapAnchorMenu.Instance.jumpTo(e.originalEvent.clientX, e.originalEvent.clientY, true); + MapAnchorMenu.Instance.jumpTo(clientX, clientY, true); document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true); @@ -768,7 +769,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; @action - displayRoute = (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => { + displayRoute = (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => { if (routeInfoMap) { const newTempRouteSource: FeatureCollection = { type: 'FeatureCollection', @@ -1052,7 +1053,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { <div id="divider">|</div> <div style={{ display: 'flex', alignItems: 'center' }}> <div>Select Line Color: </div> - <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color: any) => this.setAnimationLineColor(color)} /> + <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} /> </div> </div> </> @@ -1147,7 +1148,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor) ?? null; }; - _textRef = React.createRef<any>(); render() { const scale = this._props.NativeDimScaling?.() || 1; const parscale = scale === 1 ? 1 : (this.ScreenToLocalBoxXf().Scale ?? 1); @@ -1161,7 +1161,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> {!this._routeToAnimate && ( <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}> - <TextField ref={this._textRef} fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={(e: any) => this.handleSearchChange(e.target.value)} /> + <TextField fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={e => this.handleSearchChange(e.target.value)} /> <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} /> <div style={{ opacity: 0 }}> <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} /> @@ -1217,7 +1217,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { .filter(feature => feature.place_name) .map((feature, idx) => ( <div - // eslint-disable-next-line react/no-array-index-key key={idx} className="search-result-container" onClick={() => { @@ -1321,8 +1320,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._animationPhase === 0 && this.allPushpins // .filter(anno => !anno.layout_unrendered) .map((pushpin, idx) => ( - // eslint-disable-next-line react/no-array-index-key - <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}> + <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={e => this.handleMarkerClick(e.originalEvent.clientX, e.originalEvent.clientY, pushpin)}> {this.getMarkerIcon(pushpin)} </Marker> ))} @@ -1336,7 +1334,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> <SidebarAnnos ref={this._sidebarRef} - // eslint-disable-next-line react/jsx-props-no-spreading {...this._props} fieldKey={this.fieldKey} Document={this.Document} |