Merge branch 'master' into UI_Update_Eric_Ma

1 files changed, 91 insertions, 136 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index fed4535cb..c44f5765a 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,16 +1,15 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api';
+import { GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
 import { EditableText } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
 import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, OmitKeys, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SnappingManager } from '../../../util/SnappingManager';
@@ -26,7 +25,6 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { PinProps } from '../trails';
 import './MapBox.scss';
 import { MapBoxInfoWindow } from './MapBoxInfoWindow';
-import { ReactDOMServer } from "react";
 // amongus
 /**
  * MapBox architecture:
@@ -203,7 +201,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         markerIcon.style.position = 'absolute';
         markerIcon.innerHTML = 'Add';
         controlUI.appendChild(markerIcon);
-        
 
         // Setup the click event listeners
         controlUI.addEventListener('click', () => {
@@ -368,7 +365,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     };
 
-
     /**
      * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
      * @param doc
@@ -584,7 +580,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     res(this.bingGeocode(map, query));
                 });
             } else {
-                this._bingSearchManager.geocode({   
+                this._bingSearchManager.geocode({
                     where: query,
                     callback: action((r: any) => {
                         res(r.results[0].location);
@@ -595,46 +591,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         });
     };
 
-
-
-
     /**
      *
-     * 
+     *
      *  ERIC'S BING MAP CODE BELOW
-     * 
-     * 
-     * 
-    **/
-   
+     *
+     *
+     *
+     **/
 
-    bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
+    bingSearchBarContents: any = 'Boston, MA'; // For Bing Maps: The contents of the Bing search bar (string)
 
     geoDataRequestOptions = {
-        entityType: 'PopulatedPlace'
+        entityType: 'PopulatedPlace',
     };
 
     @action
-    updateView = ()=> {
+    updateView = () => {
         this._bingMap.current.setView({
             center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude),
-             // zoom: location
-         });
-    }
-
+            // zoom: location
+        });
+    };
 
-    
     @action
-    createPushpin = (latitude:number, longitude:number) =>{
+    createPushpin = (latitude: number, longitude: number) => {
         // Stores the pushpin as a MapMarkerDocument
         const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {});
         this.addDocument(mapMarker, this.annotationKey);
         mapMarker.infoWindowOpen = true;
-    }
-
+    };
 
-    infobox:any; 
-    pushpinClicked = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }) => {
+    infobox: any;
+    pushpinClicked = (e: { target: { metadata: { title: any; description: any }; getLocation: () => any } }) => {
         //Make sure the infobox has metadata to display.
         if (e.target.metadata) {
             //Set the infobox options with the metadata of the pushpin. // HOW DO I GET THE CORRECT INFOBOX FOR THIS PIN? CAN I use this e?
@@ -642,18 +631,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 location: e.target.getLocation(),
                 title: e.target.metadata.title,
                 description: e.target.metadata.description,
-                visible: true
+                visible: true,
             });
         }
-    }
+    };
 
     //PushpinClicked using MapBoxInfoWindow
-    private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }, pin: Doc) => {
+    private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any }; getLocation: () => any } }, pin: Doc) => {
         // // set which place was clicked
         // this.selectedPlace = place;
         pin.infoWindowOpen = true;
         // console.log("later:" + pin.infoWindowOpen)
-    }
+    };
 
     /**
      * Returns a list of MapMarkerDocument
@@ -665,24 +654,23 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Map OnClick create pushpin
      */
     @action
-    mapOnClick=(e: { location: { latitude: any; longitude: any;}; })=>{
-        if(this.placePinOn){
+    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
+        if (this.placePinOn) {
             this.createPushpin(e.location.latitude, e.location.longitude);
             this.addAllPins();
             this.placePinOn = false;
-            console.log("PUSHPIN CREATED")
+            console.log('PUSHPIN CREATED');
         }
-    }
-
+    };
 
-    searched_pin:any;
+    searched_pin: any;
     /*
      * For Bing Maps
-     * Called by search button's onClick 
+     * Called by search button's onClick
      * Finds the geocode of the searched contents and sets location to that location
-    **/
+     **/
     @action
-    bingSearch = async() =>{
+    bingSearch = async () => {
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
         this.addAllPins();
 
@@ -697,70 +685,62 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             // title: this.bingSearchBarContents,
             // subTitle: 'subtitle here',
             // text: '1',
-            color: 'blue'
+            color: 'blue',
         });
-        if (temp!=this.searched_pin || this.searched_pin==null){
+        if (temp != this.searched_pin || this.searched_pin == null) {
             this._bingMap.current.entities.push(this.searched_pin);
             this.searched_pin = temp;
         }
-        
-        
-
-            // console.log(this.allMapPushpins
-            //     .filter(marker => marker.infoWindowOpen)
-            //     .length)
-            // console.log(this.allMapPushpins
-            //     .map(marker => console.log(marker.infoWindowOpen)))
-    }
+
+        // console.log(this.allMapPushpins
+        //     .filter(marker => marker.infoWindowOpen)
+        //     .length)
+        // console.log(this.allMapPushpins
+        //     .map(marker => console.log(marker.infoWindowOpen)))
+    };
 
     /**
-      * Adds all pushpins in dataDoc onto the map
-      */
+     * Adds all pushpins in dataDoc onto the map
+     */
     @action
-    addAllPins = () =>{
-        this._bingMap.current.entities.clear(); 
+    addAllPins = () => {
+        this._bingMap.current.entities.clear();
         //TODO: clear all infoboxes
-        if(this.searched_pin)
-            this._bingMap.current.entities.push(this.searched_pin);
-        this.allMapPushpins.map(pin => this.createInfobox(pin)); 
+        if (this.searched_pin) this._bingMap.current.entities.push(this.searched_pin);
+        this.allMapPushpins.map(pin => this.createInfobox(pin));
         this.allMapPushpins.map(pin => this._bingMap.current.entities.push(pin));
-    }
+    };
 
     @action
-    createInfobox = (pin:any) =>{
+    createInfobox = (pin: any) => {
         var pushPin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
             // title: this.bingSearchBarContents,
             // subTitle: 'subtitle here',
             // text: '1'
         });
         this._bingMap.current.entities.push(pushPin);
-        
 
         var id = Utils.GenerateGuid();
         document.getElementById(id);
         var infoboxTemplate = '<div class="customInfobox"><div class="title">{title}</div>{description}</div>';
         // var infowindowtemp = '<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}/>'
-        
+
         // console.log(<div id={id} style={{width:100, height:100, background:"blue"}}/>)
         // var htmlString = ReactDOMServer.renderToString(<div id={id} style={{width:100, height:100, background:"blue"}}/>);
-        
 
         //Create an infobox at the pin
         this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
             htmlContent: infoboxTemplate, // style="width:100; height:100; background:blue"
-            visible: false
+            visible: false,
         });
-        try{
+        try {
             // console.log(document.getElementById(id))
             // console.log(this.infobox)
             // const root = ReactDOM.createRoot(document.getElementById(id)!);
             // root.render(<div style={{width:100, height:100, background:"blue"}}/>);
+        } catch (e) {
+            console.log(e);
         }
-        catch(e){
-            console.log(e)
-        }
-        
-
 
         //Assign the infobox to a map instance.
         this.infobox.setMap(this._bingMap.current);
@@ -776,17 +756,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         // this.MicrosoftMaps.Events.addHandler(pushPin, 'click', this.pushpinClicked);
 
         // For our infowindow
-        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked(e));
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(e));
         // this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e));
+    };
 
-    }
-
-
-    /** 
+    /**
      * View options for bing maps
-    */
+     */
     bingViewOptions = {
-        center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat , longitude: this.dataDoc.longitude ?? defaultCenter.lng},
+        center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat, longitude: this.dataDoc.longitude ?? defaultCenter.lng },
         zoom: this.dataDoc.latitude ?? 10,
         mapTypeId: 'grayscale',
     };
@@ -796,24 +774,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      */
     bingMapOptions = {
         navigationBarMode: 'square',
-        backgroundColor:'#f1f3f4',
-        enableInertia:true,
+        backgroundColor: '#f1f3f4',
+        enableInertia: true,
     };
 
-
-
     /**
      * Toggles mode for placing a pin down on map
      */
     @observable
     placePinOn: boolean | undefined;
     @action
-    togglePlacePin = ()=>{
-        if (this.placePinOn)
-            this.placePinOn = false;
+    togglePlacePin = () => {
+        if (this.placePinOn) this.placePinOn = false;
         else this.placePinOn = true;
-    }
-
+    };
 
     bingMapReady = (map: any) => (this._bingMap = map.map);
     render() {
@@ -833,58 +807,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         //     zoom: 15,
                         // });
                     }}
-                    style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}>
-
-                        
+                    style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {this.annotationLayer}
 
-
-                    {!MapBox.UseBing ? null : 
-                    <EditableText editing 
-                        onEdit={(newText: string) => this.bingSearchBarContents = newText}
-                        placeholder="..."
-                        size="medium" 
-                        text="Boston, MA"
-                        onKeyPress={(e: { key: any; }) => console.log(e.key)}
-                    />}
-                    
-                    {!MapBox.UseBing ? null : 
-                    <input type="button" value="Search" 
-                    onClick={this.bingSearch}/>}
-
-                    {!MapBox.UseBing ? null : 
-                        this.placePinOn ? 
-                            <input type="button" value="Place Pin Mode On" 
-                            onClick={this.togglePlacePin}/>
-                        : 
-                            <input type="button" value="Place Pin Mode Off" 
-                            onClick={this.togglePlacePin}/>
-                    }
-                    
-                    
-                    {!MapBox.UseBing ? null : 
-                    <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} >
-                        {this.allMapPushpins
-                            .filter(marker => marker.infoWindowOpen)
-                            .map(marker => (
-                                // console.log('this is a marker window')
-                                <MapBoxInfoWindow
-                                    key={marker[Id]}
-                                    {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
-                                    place={marker}
-                                    markerMap={this.markerMap}
-                                    PanelWidth={this.infoWidth}
-                                    PanelHeight={this.infoHeight}
-                                    moveDocument={this.moveDocument}
-                                    isAnyChildContentActive={this.isAnyChildContentActive}
-                                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                                />
-                            ))}
-                    </BingMapsReact>
-                    }
+                    {!MapBox.UseBing ? null : <EditableText editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="..." size="medium" text="Boston, MA" onKeyPress={(e: { key: any }) => console.log(e.key)} />}
+
+                    {!MapBox.UseBing ? null : <input type="button" value="Search" onClick={this.bingSearch} />}
+
+                    {!MapBox.UseBing ? null : this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />}
+
+                    {!MapBox.UseBing ? null : (
+                        <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}>
+                            {this.allMapPushpins
+                                .filter(marker => marker.infoWindowOpen)
+                                .map(marker => (
+                                    // console.log('this is a marker window')
+                                    <MapBoxInfoWindow
+                                        key={marker[Id]}
+                                        {...this.props}
+                                        setContentView={emptyFunction}
+                                        place={marker}
+                                        markerMap={this.markerMap}
+                                        PanelWidth={this.infoWidth}
+                                        PanelHeight={this.infoHeight}
+                                        moveDocument={this.moveDocument}
+                                        isAnyChildContentActive={this.isAnyChildContentActive}
+                                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                                    />
+                                ))}
+                        </BingMapsReact>
+                    )}
                     {/* <MapBoxInfoWindow
                                     key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
                                     {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
@@ -896,7 +851,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                     isAnyChildContentActive={this.isAnyChildContentActive}
                                     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                                 /> */}
-                    
 
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                         <MarqueeAnnotator
@@ -924,6 +878,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         rootDoc={this.rootDoc}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
+                        usePanelWidth={true}
                         showSidebar={this.SidebarShown}
                         nativeWidth={NumCast(this.layoutDoc._nativeWidth)}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}