From edd84f5eaab0ac0498604d43764ec84868b979b0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 23 Aug 2023 21:35:10 -0400
Subject: fixed placement of pushpins when sidebar is opened.

---
 src/client/views/nodes/MapBox/MapBox.tsx | 95 ++++++++++++++++----------------
 1 file changed, 46 insertions(+), 49 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 7269a38f0..654d446a2 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -514,22 +514,22 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     // The pin that is selected
     @observable
-    selectedPin:Doc | undefined;
+    selectedPin: Doc | undefined;
 
     @action
-    deselectPin=()=>{
+    deselectPin = () => {
         if (this.selectedPin) {
             const temp = this.selectedPin;
             this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
-            const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude,temp.longitude));
+            const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude));
             this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc));
             this._bingMap.current.entities.push(newpin);
             this.map_docToPinMap.set(temp, newpin);
-            this.selectedPin=undefined;
+            this.selectedPin = undefined;
 
             // setTimeout(() => this._sidebarRef.current?.makeDocUnfiltered(this._sidebarRef.current.));
         }
-    }
+    };
 
     /*
      * Pushpin onclick
@@ -538,35 +538,31 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     pushpinClicked = (pinDoc: Doc) => {
         this.deselectPin();
         this.selectedPin = pinDoc;
-        
 
         this._bingMap.current.entities.remove(this.map_docToPinMap.get(this.selectedPin));
-        const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(this.selectedPin.latitude,this.selectedPin.longitude), {
+        const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude), {
             color: 'green',
-        })
+        });
         this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(this.selectedPin as Doc));
         this._bingMap.current.entities.push(newpin);
         this.map_docToPinMap.set(this.selectedPin, newpin);
 
-        MapAnchorMenu.Instance.Delete = this.deleteSelectedPin
+        MapAnchorMenu.Instance.Delete = this.deleteSelectedPin;
         MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
         MapAnchorMenu.Instance.LinkNote = this.createNoteAnnotation;
 
-        const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude,this.selectedPin.longitude))
+        const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude));
         const x = point.x + this.props.PanelWidth() / 2;
-        const y = point.y + this.props.PanelHeight() / 2 +32
+        const y = point.y + this.props.PanelHeight() / 2 + 32;
         const cpt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y);
-        MapAnchorMenu.Instance.jumpTo(cpt[0] - this.sidebarWidth()/this.panelWidth()*200, cpt[1], true);
-        document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true)
+        MapAnchorMenu.Instance.jumpTo(cpt[0] - (this.sidebarWidth() / this.panelWidth()) * 200, cpt[1], true);
+        document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
         this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
 
-
         // Filter sidebar:
         // if sidebar is open, filter.
-        if (this.layoutDoc._layout_showSidebar){
-
+        if (this.layoutDoc._layout_showSidebar) {
         }
-
     };
 
     /**
@@ -621,7 +617,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.dataDoc.longitude = location.longitude;
         this.dataDoc.mapZoom = this._bingMap.current.getZoom();
         // Creates a temporary pin but does not add it to the dataDoc
-        this.createPushpin(this.dataDoc.latitude, this.dataDoc.longitude)
+        this.createPushpin(this.dataDoc.latitude, this.dataDoc.longitude);
     };
 
     /**
@@ -641,7 +637,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         /// this should use SELECTED pushpin for lat/long  if there is a selection, otherwise CENTER
         const anchor = Docs.Create.MapanchorDocument({
             title: 'MapAnchor:' + this.rootDoc.title,
-            config_latitude: NumCast(this.selectedPin?.latitude ??  this.dataDoc.latitude),
+            config_latitude: NumCast(this.selectedPin?.latitude ?? this.dataDoc.latitude),
             config_longitude: NumCast(this.selectedPin?.longitude ?? this.dataDoc.longitude),
             config_mapZoom: NumCast(this.dataDoc.mapZoom),
             config_mapType: StrCast(this.dataDoc.mapType),
@@ -659,7 +655,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return this.rootDoc;
     };
 
-    map_docToPinMap  = new Map<Doc, any>();
+    map_docToPinMap = new Map<Doc, any>();
     /*
      *   Input: pin doc
      *   Adds MicrosoftMaps Pushpin to the map (render)
@@ -677,7 +673,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
         this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin));
         // this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
-        this.map_docToPinMap.set(pin,pushPin);
+        this.map_docToPinMap.set(pin, pushPin);
     };
 
     @observable
@@ -692,31 +688,30 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         // this.allMapPushpins
         // this.allMapPushpins.map(pin => this.addPushpin(pin));
         // this._bingMap.current.entities.clear();
-        
+
         this.removeDocument(pinDoc, this.annotationKey);
 
         // this.dataDoc[this.annotationKey]
     };
     /*
      * Removes pushpin from map render
-    */
-    deletePushpin = (pinDoc:Doc)=>{
+     */
+    deletePushpin = (pinDoc: Doc) => {
         this._bingMap.current.entities.remove(this.map_docToPinMap.get(pinDoc));
         this.map_docToPinMap.delete(pinDoc);
-        this.selectedPin=undefined;
-    }
+        this.selectedPin = undefined;
+    };
 
     @action
-    deleteSelectedPin = undoable(()=>{
-        if (this.selectedPin){
-            this.removePushpin(this.selectedPin)
-            
+    deleteSelectedPin = undoable(() => {
+        if (this.selectedPin) {
+            this.removePushpin(this.selectedPin);
         }
         MapAnchorMenu.Instance.fadeOut(true);
-       document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true)
-    }, "delete pin");
+        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+    }, 'delete pin');
 
-    tryHideMapAnchorMenu = (e:PointerEvent) =>{
+    tryHideMapAnchorMenu = (e: PointerEvent) => {
         let target = document.elementFromPoint(e.x, e.y);
 
         while (target != null) {
@@ -728,23 +723,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         e.stopPropagation();
         e.preventDefault();
         MapAnchorMenu.Instance.fadeOut(true);
-        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true)
-
-    }
+        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+    };
 
     // tryhidemenu = e => if( e.parent... == mapanchormenu.top.currrent) do nothing; else hide menu
 
     @action
-    centerOnSelectedPin = () =>{
-        if (this.selectedPin){
+    centerOnSelectedPin = () => {
+        if (this.selectedPin) {
             this.dataDoc.latitude = this.selectedPin.latitude;
             this.dataDoc.longitude = this.selectedPin.longitude;
-            
-            
         }
         MapAnchorMenu.Instance.fadeOut(true);
-        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu)
-    }
+        document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu);
+    };
 
     /**
      * View options for bing maps
@@ -809,11 +801,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, 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),
-                });
+                try {
+                    locationObject?.zoom &&
+                        this._bingMap.current?.setView({
+                            mapTypeId: locationObject.mapType,
+                            zoom: locationObject.zoom,
+                            center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng),
+                        });
+                } catch (e) {
+                    console.log(e);
+                }
             },
             { fireImmediately: true }
         );
@@ -841,8 +838,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         while (target != null) {
             if (target === this._ref.current) {
                 const cpt = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
-                const x = cpt[0] - this.props.PanelWidth() / 2;
-                const y = cpt[1] - 32 - this.props.PanelHeight() / 2;
+                const x = cpt[0] - (this.props.PanelWidth() - this.sidebarWidth()) / 2;
+                const y = cpt[1] - 32 /* height of search bar */ - this.props.PanelHeight() / 2;
                 const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y));
                 this.createPushpin(location.latitude, location.longitude);
                 break;
-- 
cgit v1.2.3-70-g09d2

