aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/MapBox
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/MapBox')
-rw-r--r--src/client/views/nodes/MapBox/AnimationUtility.ts18
-rw-r--r--src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx2
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.tsx52
-rw-r--r--src/client/views/nodes/MapBox/MapBox.scss16
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx65
-rw-r--r--src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx4
6 files changed, 73 insertions, 84 deletions
diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts
index f4bae66bb..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;
@@ -65,7 +66,7 @@ export class AnimationUtility {
const coords: mapboxgl.LngLatLike = [this.previousLngLat.lng, this.previousLngLat.lat];
// console.log('MAP REF: ', this.MAP_REF)
// console.log("current elevation: ", this.MAP_REF?.queryTerrainElevation(coords));
- let altitude = this.MAP_REF ? this.MAP_REF.queryTerrainElevation(coords) ?? 0 : 0;
+ let altitude = this.MAP_REF ? (this.MAP_REF.queryTerrainElevation(coords) ?? 0) : 0;
if (altitude === 0) {
altitude += 50;
}
@@ -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.lineDistance(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/DirectionsAnchorMenu.tsx b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
index b8fd8ac6a..8784a709a 100644
--- a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
@@ -1,6 +1,6 @@
import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconButton } from 'browndash-components';
+import { IconButton } from '@dash/components';
import { IReactionDisposer, ObservableMap, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index 103a35434..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 'browndash-components';
-import { Position } from 'geojson';
+import { IconButton } from '@dash/components';
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;
@@ -109,7 +108,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
return this._left > 0;
}
- constructor(props: any) {
+ constructor(props: AntimodeMenuProps) {
super(props);
makeObservable(this);
MapAnchorMenu.Instance = this;
@@ -117,10 +116,12 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
}
componentWillUnmount() {
- this.destinationFeatures = [];
- this.destinationSelected = false;
- this.selectedDestinationFeature = undefined;
- this.currentRouteInfoMap = undefined;
+ runInAction(() => {
+ this.destinationFeatures = [];
+ this.destinationSelected = false;
+ this.selectedDestinationFeature = undefined;
+ this.currentRouteInfoMap = undefined;
+ });
this._disposer?.();
}
@@ -210,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';
@@ -236,7 +237,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
};
@action
- handleSelectedDestinationFeature = (destinationFeature: any) => {
+ handleSelectedDestinationFeature = (destinationFeature?: { place_name: string; center: number[] }) => {
this.selectedDestinationFeature = destinationFeature;
};
@@ -256,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);
@@ -278,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);
}
};
@@ -439,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.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 25b4587a5..fdd8a29d7 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,4 +1,6 @@
-@import '../../global/globalCssVariables.module.scss';
+@use 'sass:color';
+@use '../../global/globalCssVariables.module.scss' as global;
+
.mapBox {
width: 100%;
height: 100%;
@@ -25,14 +27,6 @@
gap: 5px;
align-items: center;
width: calc(100% - 40px);
-
- // .editableText-container {
- // width: 100%;
- // font-size: 16px !important;
- // }
- // input {
- // width: 100%;
- // }
}
.mapbox-settings-panel {
@@ -83,7 +77,7 @@
width: 100%;
padding: 10px;
&:hover {
- background-color: lighten(rgb(187, 187, 187), 10%);
+ background-color: color.adjust(rgb(187, 187, 187), $lightness: 10%);
}
}
}
@@ -167,7 +161,7 @@
pointer-events: all;
z-index: 1; // so it appears on top of the document's title, if shown
- box-shadow: $standard-box-shadow;
+ box-shadow: global.$standard-box-shadow;
transition: 0.2s;
&:hover {
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index c66f7c726..792cb6b46 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -2,16 +2,15 @@ import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@f
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Checkbox, FormControlLabel, TextField } from '@mui/material';
import * as turf from '@turf/turf';
-import { IconButton, Size, Type } from 'browndash-components';
+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: {
@@ -352,7 +353,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
const targetCreator = (annotationOn: Doc | undefined) => {
const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
- Doc.SetSelectOnLoad(target);
+ DocumentView.SetSelectOnLoad(target);
return target;
};
const docView = this.DocumentView?.();
@@ -428,7 +429,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
};
- getView = async (doc: Doc, options: FocusViewOptions) => {
+ getView = (doc: Doc, options: FocusViewOptions) => {
if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) {
this.toggleSidebar();
options.didMove = true;
@@ -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}
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
index c69cd8e89..a27a8bda1 100644
--- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -32,7 +32,7 @@
// addNoteClick = (e: React.PointerEvent) => {
// setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => {
// const newDoc = Docs.Create.TextDocument('Note', { _layout_autoHeight: true });
-// Doc.SetSelectOnLoad(newDoc); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
+// DocumentView.SetSelectOnLoad(newDoc); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
// Doc.AddDocToList(this.props.place, 'data', newDoc);
// this._stack?.scrollToBottom();
// e.stopPropagation();
@@ -41,7 +41,6 @@
// };
// _stack: CollectionStackingView | CollectionNoteTakingView | null | undefined;
-// childLayoutFitWidth = (doc: Doc) => doc.type === DocumentType.RTF;
// addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, 'data', d), true as boolean);
// removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean);
// render() {
@@ -69,7 +68,6 @@
// chromeHidden={true}
// childHideResizeHandles={true}
// childHideDecorationTitle={true}
-// childLayoutFitWidth={this.childLayoutFitWidth}
// // childDocumentsActive={returnFalse}
// removeDocument={this.removeDoc}
// addDocument={this.addDoc}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-22 00:04:13 +0000