fixing some bugs with MapBox and MapAnchorMenu

1 files changed, 44 insertions, 139 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 44afb8e7b..562cb63d1 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -650,6 +650,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     deleteSelectedPinOrRoute = undoable(() => {
+        console.log('deleting')
         if (this.selectedPinOrRoute) {
             // Removes filter
             Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove');
@@ -672,9 +673,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         e.stopPropagation();
         e.preventDefault();
         MapAnchorMenu.Instance.fadeOut(true);
+        runInAction(() => {
+            this.temporaryRouteSource = {
+                type: 'FeatureCollection',
+                features: [],
+            }
+        })
+
+
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
     };
 
+   
+
     @action
     centerOnSelectedPin = () => {
         if (this.selectedPinOrRoute) {
@@ -869,6 +880,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             if (createPinForDestination) {
                 this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
             }
+            this.temporaryRouteSource = {
+                type: 'FeatureCollection',
+                features: []
+            }
+            MapAnchorMenu.Instance.fadeOut(true);
             return mapRoute;
         }
         // TODO: Display error that can't create route to same location
@@ -931,6 +947,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @action
     handleMapClick = (e: MapLayerMouseEvent) => {
         this.featuresFromGeocodeResults = [];
+        this.settingsOpen = false;
         if (this._mapRef.current) {
             const features = this._mapRef.current.queryRenderedFeatures(e.point, {
                 layers: ['map-routes-layer'],
@@ -953,13 +970,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
                     MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
+                    MapAnchorMenu.Instance.Reset();
+
                     MapAnchorMenu.Instance.setRouteDoc(routeDoc);
 
                     // TODO: Subject to change
                     MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
 
                     MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
-                    MapAnchorMenu.Instance.HideRoute = this.hideRoute;
                     MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute;
                     MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature;
                     MapAnchorMenu.Instance.OpenAnimationPanel = this.openAnimationPanel;
@@ -976,6 +994,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
+
+
     /**
      * Makes a reverse geocoding API call to retrieve features corresponding to a map click (based on longitude
      * and latitude). Sets the search results accordingly.
@@ -1031,12 +1051,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
         MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
+        MapAnchorMenu.Instance.Reset();
+
         // pass in the pinDoc
         MapAnchorMenu.Instance.setPinDoc(pinDoc);
         MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
 
         MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
-        MapAnchorMenu.Instance.HideRoute = this.hideRoute;
         MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute;
         MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature;
 
@@ -1367,8 +1388,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
-    @action
-    exportAnimationToVideo = () => {};
 
     getRouteAnimationOptions = (): JSX.Element => {
         return (
@@ -1406,7 +1425,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <div>|</div>
                         <FormControlLabel
                             className="first-person-label"
-                            style={{ width: '130px' }}
                             label="1st person animation:"
                             labelPlacement="start"
                             control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />}
@@ -1414,8 +1432,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <div id="divider">|</div>
                         <IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
                         <div id="divider">|</div>
-                        <div style={{ width: '230px' }}>Select Line Color: </div>
-                        <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
+                        <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 => this.setAnimationLineColor(color)} />
+                        </div>
+                        
                     </div>
                 </>
             </>
@@ -1449,7 +1470,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     changeMapStyle = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        this.dataDoc.map_style = `mapbox://styles/mapbox/${e.target.value}`;
+        this.dataDoc.map_style = e.target.value;
         // this.mapStyle = `mapbox://styles/mapbox/${e.target.value}`
     };
 
@@ -1457,6 +1478,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     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;
@@ -1467,6 +1489,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     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;
@@ -1564,29 +1587,29 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             <div className="mapbox-style-select">
                                 <div>Map Style:</div>
                                 <div>
-                                    <select onChange={this.changeMapStyle}>
-                                        <option value="streets-v11">Streets</option>
-                                        <option value="outdoors-v12">Outdoors</option>
-                                        <option value="light-v11">Light</option>
-                                        <option value="dark-v11">Dark</option>
-                                        <option value="satellite-v9">Satellite</option>
-                                        <option value="satellite-streets-v12">Satellite Streets</option>
-                                        <option value="navigation-day-v1">Navigation Day</option>
-                                        <option value="navigation-night-v1">Navigation Night</option>
+                                    <select onChange={this.changeMapStyle} value={StrCast(this.dataDoc.map_style)}>
+                                        <option value="mapbox://styles/mapbox/streets-v11">Streets</option>
+                                        <option value="mapbox://styles/mapbox/outdoors-v12">Outdoors</option>
+                                        <option value="mapbox://styles/mapbox/light-v11">Light</option>
+                                        <option value="mapbox://styles/mapbox/dark-v11">Dark</option>
+                                        <option value="mapbox://styles/mapbox/satellite-v9">Satellite</option>
+                                        <option value="mapbox://styles/mapbox/satellite-streets-v12">Satellite Streets</option>
+                                        <option value="mapbox://styles/mapbox/navigation-day-v1">Navigation Day</option>
+                                        <option value="mapbox://styles/mapbox/navigation-night-v1">Navigation Night</option>
                                     </select>
                                 </div>
                             </div>
                             <div className="mapbox-bearing-selection">
                                 <div>Bearing: </div>
-                                <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(2)} type="number" onChange={this.onBearingChange} />
+                                <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(0)} type="number" onChange={this.onBearingChange} />
                             </div>
                             <div className="mapbox-pitch-selection">
                                 <div>Pitch: </div>
-                                <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(2)} type="number" onChange={this.onPitchChange} />
+                                <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(0)} type="number" onChange={this.onPitchChange} />
                             </div>
                             <div className="mapbox-pitch-selection">
                                 <div>Zoom: </div>
-                                <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(2)} type="number" onChange={this.onZoomChange} />
+                                <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(0)} type="number" onChange={this.onZoomChange} />
                             </div>
                             <div className="mapbox-terrain-selection">
                                 <div>Show terrain: </div>
@@ -1620,26 +1643,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             </React.Fragment>
                         </div>
                     )}
-                    {/* <div className='zoom-box'>
-                        <IconButton // increment 
-                            style={{borderBottom: '1px', borderBottomColor: 'white'}}
-                            onPointerDown={() => this.onStepZoomChange(true)}
-                            icon={<FontAwesomeIcon icon={faPlus as IconLookup} color='black'/>}
-                            size={Size.SMALL}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton  // decrement
-                            onPointerDown={() => this.onStepZoomChange(false)}
-                            icon={<FontAwesomeIcon icon={faMinus as IconLookup} color='black'/>}
-                            size={Size.SMALL}
-                            color={SettingsManager.userColor}
-                        />
-                    </div>            */}
                     <MapProvider>
                         <MapboxMap
                             ref={this._mapRef}
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
-                            viewState={this.isAnimating ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
+                            viewState={(this.isAnimating || this.routeToAnimate) ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
                             style={{
                                 position: 'absolute',
@@ -1738,59 +1746,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             ))} */}
                         </MapboxMap>
                     </MapProvider>
-
-                    {/* <BingMapsReact
-                        onMapReady={this.bingMapReady} //
-                        bingMapsKey={bingApiKey}
-                        height="100%"
-                        mapOptions={this.bingMapOptions}
-                        width="100%"
-                        viewOptions={this.bingViewOptions}
-                    /> */}
-                    {/* <div>
-                        {!this._mapReady
-                            ? null
-                            : this.allAnnotations
-                                  .filter(anno => !anno.layout_unrendered)
-                                  .map((pushpin, i) => (
-                                      <DocumentView
-                                          key={i}
-                                          {...this._props}
-                                          renderDepth={this._props.renderDepth + 1}
-                                          Document={pushpin}
-                                          DataDoc={undefined}
-                                          PanelWidth={returnOne}
-                                          PanelHeight={returnOne}
-                                          NativeWidth={returnOne}
-                                          NativeHeight={returnOne}
-                                          onKey={undefined}
-                                          onDoubleClick={undefined}
-                                          onBrowseClick={undefined}
-                                          childFilters={returnEmptyFilter}
-                                          childFiltersByRanges={returnEmptyFilter}
-                                          searchFilterDocs={returnEmptyDoclist}
-                                          isDocumentActive={returnFalse}
-                                          isContentActive={returnFalse}
-                                          addDocTab={returnFalse}
-                                          ScreenToLocalTransform={Transform.Identity}
-                                          fitContentsToBox={undefined}
-                                          focus={returnOne}
-                                      />
-                                  ))}
-                    </div> */}
-                    {/* <MapBoxInfoWindow
-                                    key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
-                                    {...OmitKeys(this._props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
-                                    place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})}
-                                    markerMap={this.markerMap}
-                                    PanelWidth={this.infoWidth}
-                                    PanelHeight={this.infoHeight}
-                                    moveDocument={this.moveDocument}
-                                    isAnyChildContentActive={this.isAnyChildContentActive}
-                                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                                /> */}
                 </div>
-                {/* </LoadScript > */}
                 <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
@@ -1814,54 +1770,3 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
 }
-
-{
-    /* <Autocomplete
-                            fullWidth
-                            id="map-location-searcher"
-                            freeSolo
-                            onInputChange={(e, searchText) => this.handleSearchChange(searchText)}
-                            onChange={(e, selectedOption) => {
-                                this.handleSearchChange(""); // clear input 
-                                this.addMarkerForFeature(selectedOption);
-                            }}
-                            options={this.featuresFromGeocodeResults
-                                .filter(feature => feature.place_name)
-                                .map(feature => feature)}
-                            getOptionLabel={(feature) => feature.place_name}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    placeholder='Enter a location'
-                                />
-                            )}
-                            /> */
-}
-{
-    /* <EditableText
-                            // editing
-                            setVal={(newText: string | number) => typeof newText === 'string' && this.handleSearchChange(newText)}
-                            // onEnter={e => this.bingSearch()}
-                            onEnter={e => {}}
-                            height={32}
-                            // placeholder={this.bingSearchBarContents || 'Enter a location'}
-                            placeholder='Enter a location'
-                            textAlign="center" 
-                        /> */
-}
-{
-    /* <IconButton
-                            icon={
-                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF">
-                                    <path
-                                        fill="currentColor"
-                                        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
-                                </svg>
-                            }
-                            onClick={this.bingSearch}
-                            type={Type.TERT}
-                        />
-                        <div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}>
-                            <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} />
-                        </div> */
-}
\ No newline at end of file