From eb35837e5ffe8e7eba9decea1fae5c163528dc1e Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Mon, 21 Aug 2023 11:59:05 -0400
Subject: Buggy

---
 src/client/views/nodes/MapBox/MapBox.tsx | 201 +++++++++++++++++--------------
 1 file changed, 108 insertions(+), 93 deletions(-)

(limited to 'src/client/views/nodes/MapBox/MapBox.tsx')

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 283d57bb6..bad1a3ebd 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
-import { EditableText, Toggle } from 'browndash-components';
+import { EditableText, IconButton, Toggle, Type } from 'browndash-components';
 import e from 'connect-flash';
 import { truncateSync } from 'fs';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
@@ -13,12 +13,12 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnAll, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnAll, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnIgnore, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
-import { UndoManager } from '../../../util/UndoManager';
+import { undoable, UndoManager } from '../../../util/UndoManager';
 import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
@@ -116,7 +116,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable private _marqueeing: number[] | undefined;
     @observable private inputRef = React.createRef<HTMLInputElement>();
     @observable private searchMarkers: google.maps.Marker[] = [];
-    // @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
+    @observable private searchBox =  undefined as any; //  new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
     @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get allSidebarDocs() {
         return DocListCast(this.dataDoc[this.SidebarKey]);
@@ -138,45 +138,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _disposer: {[key:string]:IReactionDisposer} = {}
     componentDidMount() {
-        this.props.setContentView?.(this);
-        this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude, zoom:this.rootDoc.zoom,mapType:this.rootDoc.mapType}), 
-        (locationObject) => {
-
-            this._bingMap.current.setView({
-                mapTypeId: locationObject.mapType,
-                zoom:locationObject.zoom,
-                center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
-            });
-
-        }, {fireImmediately: true});
-        // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), 
-        // (pinsObject) => {
-        //     this._bingMap.current.entities.clear();
-        //     pinsObject.pinList.map((pushpin: Doc) => (
-        //                         <DocumentView
-        //                             {...this.props}
-        //                             Document={pushpin}
-        //                             DataDoc={undefined}
-        //                             PanelWidth={returnOne}
-        //                             PanelHeight={returnOne}
-        //                             NativeWidth={returnOne} 
-        //                             NativeHeight={returnOne}
-        //                             onClick={()=>new ScriptField(undefined)}
-        //                             onKey={undefined}
-        //                             onDoubleClick={undefined}
-        //                             onBrowseClick={undefined}
-        //                             docFilters={returnEmptyDoclist}
-        //                             docRangeFilters={returnEmptyDoclist}
-        //                             searchFilterDocs={returnEmptyDoclist}
-        //                             isDocumentActive={returnFalse}
-        //                             isContentActive={returnFalse}
-        //                             addDocTab={returnFalse}
-        //                             ScreenToLocalTransform={()=>new Transform(0,0,0)}
-        //                             fitContentsToBox={undefined}
-        //                             focus={returnOne}
-        //                 />));
-
-        // }, {fireImmediately: false});
 
         
     }
@@ -638,7 +599,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      *
      *
      **/
-
+    @observable
     bingSearchBarContents: any = 'Boston, MA'; // For Bing Maps: The contents of the Bing search bar (string)
 
     geoDataRequestOptions = {
@@ -675,7 +636,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Pushpin onclick
      */
     @action
-    pushpinClicked = (pinDoc:Doc,pin:any) => {
+    pushpinClicked = (pinDoc:Doc) => {
         // TODO:
         // if (sidebarannos is not open) open sidebarannos
         // creates button onclick removes the doc from annotations
@@ -685,27 +646,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.dataDoc.longitude = pinDoc.lng;
 
         
-
-
-    //     @action
-    // onPointerDown = (e: React.PointerEvent) => {
-    //     if (e.button === 2 || e.ctrlKey) {
-    //         AnchorMenu.Instance.Status = 'annotation';
-    //         AnchorMenu.Instance.Delete = this.deleteAnnotation.bind(this);
-    //         AnchorMenu.Instance.Pinned = false;
-    //         AnchorMenu.Instance.PinToPres = this.pinToPres;
-    //         AnchorMenu.Instance.MakeTargetToggle = this.makeTargretToggle;
-    //         AnchorMenu.Instance.IsTargetToggler = this.isTargetToggler;
-    //         AnchorMenu.Instance.ShowTargetTrail = () => this.showTargetTrail(this.annoTextRegion);
-    //         AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true);
-    //         e.stopPropagation();
-    //     } else if (e.button === 0) {
-    //         e.stopPropagation();
-    //         LinkFollower.FollowLink(undefined, this.annoTextRegion, false);
-    //     }
-    // };
-
-        // TODO: UPDATE FOR DASHDOC SELECTION
     };
 
     /**
@@ -811,10 +751,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 presLat: NumCast(this.dataDoc.latitude),
                 presLong: NumCast(this.dataDoc.longitude),
                 presZoom: NumCast(this.dataDoc.zoom),
-                presMapType: this.dataDoc.mapType,
+                presMapType: StrCast(this.dataDoc.mapType),
                 // preslocationToLookAt:this.dataDoc.locationToLookAt,
                 // presType: 
-                unrendered: true,
+                layout_unrendered: true,
                 annotationOn: this.rootDoc,
             });
         if (anchor) {
@@ -839,7 +779,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         
         this._bingMap.current.entities.push(pushPin);
 
-        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin,pushPin));
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin));
         this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
     }
 
@@ -876,7 +816,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Map options
      */
     bingMapOptions = {
-        navigationBarMode: 'compact',
+        navigationBarMode: 'square',
         backgroundColor: '#f1f3f4',
         enableInertia: true,
         supportedMapTypes:['grayscale', 'canvasLight'],
@@ -901,19 +841,71 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         else this.placePinOn = true;
     };
 
+    @action
+    searchbarOnEdit=(newText:string)=>{
+        this.bingSearchBarContents = newText
+    }
+
     /*
      * Called when BingMap is first rendered 
      * Initializes starting values
      */
     bingMapReady = (map: any) => {
         this._bingMap = map.map;
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', this.updateLayout);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', this.updateMapType);
-        this.updateLayout();
-        this.updateMapType();
+        if (!this._bingMap.current) {
+            alert("NO Map!?")
+        }
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', undoable(this.mapOnClick, "Added Pin to Map"));
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.updateLayout, "Map Layout Change"));
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, "Map ViewType Change"));
+        //this.updateLayout();
+       // this.updateMapType();
+        this.props.setContentView?.(this);
+        this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude, zoom:this.rootDoc.zoom,mapType:this.rootDoc.mapType}), 
+        (locationObject) => {
+            // if (this._bingMap.current)
+                this._bingMap.current?.setView({
+                    mapTypeId: locationObject.mapType,
+                    zoom:locationObject.zoom,
+                    center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
+                });
+
+        }, {fireImmediately: true});
+        // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), 
+        // (pinsObject) => {
+        //     this._bingMap.current.entities.clear();
+        //     pinsObject.pinList.map((pushpin: Doc) => (
+        //                         <DocumentView
+        //                             {...this.props}
+        //                             Document={pushpin}
+        //                             DataDoc={undefined}
+        //                             PanelWidth={returnOne}
+        //                             PanelHeight={returnOne}
+        //                             NativeWidth={returnOne} 
+        //                             NativeHeight={returnOne}
+        //                             onClick={()=>new ScriptField(undefined)}
+        //                             onKey={undefined}
+        //                             onDoubleClick={undefined}
+        //                             onBrowseClick={undefined}
+        //                             docFilters={returnEmptyDoclist}
+        //                             docRangeFilters={returnEmptyDoclist}
+        //                             searchFilterDocs={returnEmptyDoclist}
+        //                             isDocumentActive={returnFalse}
+        //                             isContentActive={returnFalse}
+        //                             addDocTab={returnFalse}
+        //                             ScreenToLocalTransform={()=>new Transform(0,0,0)}
+        //                             fitContentsToBox={undefined}
+        //                             focus={returnOne}
+        //                 />));
+
+        // }, {fireImmediately: false});
+    }
+    searchbarKeyDown = (e:any)=>{
+        if (e.key === 'Enter') {
+            this.bingSearch()
+          }
+            
     }
-        
     render() {
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
@@ -937,9 +929,44 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {this.annotationLayer}
 
-                    <EditableText setEditing={(isEditing: boolean) => ({})} editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="Boston, MA" text="Boston, MA" />
+
+                    <div className='mapBox-searchbar'>
+                        <EditableText 
+                            // editing 
+                            setVal={(newText:string|number) => typeof newText === "string" && this.searchbarOnEdit(newText)}
+                            placeholder="Boston" 
+                            // text="text" 
+                            />
+                        <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}
+                        onDoubleClick={function noRefCheck(){}}
+                        onPointerDown={function noRefCheck(){}}
+                        onPointerDownCapture={function noRefCheck(){}}
+                        onPointerMove={function noRefCheck(){}}
+                        onPointerMoveCapture={function noRefCheck(){}}
+                        onPointerUp={function noRefCheck(){}}
+                        type={Type.TERT}
+                        />
+                        <input type="checkbox"
+                                    id="switch"
+                                    className="checkbox" 
+                                    checked={this.placePinOn}
+                                    onChange={this.togglePlacePin}
+                                    />
+                                        
+                                <label htmlFor="switch"
+                                    className="toggle">
+                                    <p>
+                                    {this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'}
+                                    </p>
+                                </label>
+                    </div>
+                    
+                    
                     <div className='mapBox-topbar'>
-                        <input type="button" value="Search" onClick={this.bingSearch} />
+                        {/* <input type="button" value="Search" onClick={this.bingSearch} /> */}
+                        
 
                         {/* {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />} */}
                         {/* {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />}
@@ -957,19 +984,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             type="secondary"
                         /> */}
 
-                        <input type="checkbox"
-                                    id="switch"
-                                    className="checkbox" 
-                                    checked={this.placePinOn}
-                                    onChange={this.togglePlacePin}
-                                    />
-                                        
-                                <label htmlFor="switch"
-                                    className="toggle">
-                                    <p>
-                                    {this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'}
-                                    </p>
-                                </label>
+                        
                     </div>
                     
 
@@ -992,8 +1007,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                     onKey={undefined}
                                     onDoubleClick={undefined}
                                     onBrowseClick={undefined}
-                                    docFilters={returnEmptyDoclist}
-                                    docRangeFilters={returnEmptyDoclist}
+                                    childFilters={returnEmptyFilter}
+                                    childFiltersByRanges={returnEmptyFilter}
                                     searchFilterDocs={returnEmptyDoclist}
                                     isDocumentActive={returnFalse}
                                     isContentActive={returnFalse}
-- 
cgit v1.2.3-70-g09d2

