From f573d7f0e93fe4b2b1f64b8591c77a225170847f Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Mon, 21 Aug 2023 14:28:03 -0400
Subject: map

---
 src/client/views/nodes/MapBox/MapBox.tsx | 101 +++++++++++++++----------------
 1 file changed, 49 insertions(+), 52 deletions(-)

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

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 242611135..bd631f942 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GoogleMapProps, Marker } from '@react-google-maps/api';
 import BingMapsReact from 'bingmaps-react';
 import { EditableText, IconButton, Toggle, Type } from 'browndash-components';
+import { tickStep } from 'd3';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -737,35 +738,38 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             },
             { 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});
     };
+
+    // Keeps track of when dragging a pin onto map
+    draggingPin = false;
+    dragToggle(){
+        console.log("DRAGGING TOGGLE")
+        document.addEventListener('pointerup', this.dropPin)                   
+    }
+    dropPin = (e:PointerEvent) => {
+        // document.removeChild(ele);
+        
+              
+        let target = document.elementFromPoint(e.x, e.y);  
+
+        while (target != null){
+            if (target === this._ref.current){
+                const location =  this.MicrosoftMaps.tryPixelToLocation(new this.MicrosoftMaps.Point(e.clientX,e.clientY))
+                
+console.log(location)
+                this.createPushpin(location.latitude, location.longitude);
+                
+                
+
+                break;
+            }
+            target = target.parentElement
+        }  
+        document.removeEventListener('pointerup', this.dropPin)
+    }
+
+    
+
     searchbarKeyDown = (e: any) => {
         if (e.key === 'Enter') {
             this.bingSearch();
@@ -799,6 +803,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             // editing
                             setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)}
                             placeholder="Boston"
+                            
                             // text="text"
                         />
                         <IconButton
@@ -823,37 +828,29 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <label htmlFor="switch" className="toggle">
                             <p>{this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'}</p>
                         </label>
-                        <Toggle 
+                        <div  draggable={true} onPointerDown={this.dragToggle}
+                        > 
+                            <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" />
+                        {/* <Toggle 
                             toggleStatus = {this.placePinOn}
                             onClick={this.togglePlacePin}
                             iconPlacement={"right"}
-                            text="amongus"
-
-                        />
+                            text="amongus" /> */}
+                        </div>
                     </div>
 
-                    <div className="mapBox-topbar">
-                        {/* <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} />}
 
-                        <Toggle
-                            onClick={this.togglePlacePin}
-                            onPointerDown={function noRefCheck(){}}
-                            onPointerDownCapture={function noRefCheck(){}}
-                            onPointerMove={function noRefCheck(){}}
-                            onPointerMoveCapture={function noRefCheck(){}}
-                            onPointerUp={function noRefCheck(){}}
-                            text="Place Pin"
-                            toggleType = "checkbox"
-                            toggleStatus= {false}
-                            type="secondary"
-                        /> */}
-                    </div>
 
-                    {/* {this.pinIsSelected_TEMPORARY? <input type="button" value="Delete Pin" onClick={this.removeSelectedPin} /> : null} */}
-                    <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}></BingMapsReact>
+                    <BingMapsReact 
+                        onMapReady={this.bingMapReady} 
+                        bingMapsKey={bingApiKey} 
+                        height="100%" 
+                        mapOptions={this.bingMapOptions} 
+                        width="100%" 
+                        viewOptions={this.bingViewOptions}
+                        onPointerUp{...()=>this.draggingPin=false}
+                        
+                        ></BingMapsReact>
                     <div>
                         {!this._mapReady
                             ? null
-- 
cgit v1.2.3-70-g09d2