fixed placement of pushpins when sidebar is opened.

2 files changed, 134 insertions, 52 deletions

diff --git a/package-lock.json b/package-lock.json
index 11e7e7db9..093759145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7063,12 +7063,97 @@
                                         "strip-ansi": "^7.0.1"
                                     }
                                 },
+                                "string-width-cjs": {
+                                    "version": "npm:string-width@4.2.3",
+                                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                    "requires": {
+                                        "emoji-regex": "^8.0.0",
+                                        "is-fullwidth-code-point": "^3.0.0",
+                                        "strip-ansi": "^6.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
+                                },
                                 "strip-ansi": {
                                     "version": "7.1.0",
                                     "bundled": true,
                                     "requires": {
                                         "ansi-regex": "^6.0.1"
                                     }
+                                },
+                                "strip-ansi-cjs": {
+                                    "version": "npm:strip-ansi@6.0.1",
+                                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                    "requires": {
+                                        "ansi-regex": "^5.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        }
+                                    }
+                                },
+                                "wrap-ansi-cjs": {
+                                    "version": "npm:wrap-ansi@7.0.0",
+                                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+                                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+                                    "requires": {
+                                        "ansi-styles": "^4.0.0",
+                                        "string-width": "^4.1.0",
+                                        "strip-ansi": "^6.0.0"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "string-width": {
+                                            "version": "4.2.3",
+                                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                            "requires": {
+                                                "emoji-regex": "^8.0.0",
+                                                "is-fullwidth-code-point": "^3.0.0",
+                                                "strip-ansi": "^6.0.1"
+                                            }
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
                                 }
                             }
                         },
@@ -8573,7 +8658,7 @@
                             }
                         },
                         "string-width-cjs": {
-                            "version": "npm:string-width@4.2.3",
+                            "version": "npm:string-width-cjs@4.2.3",
                             "bundled": true,
                             "requires": {
                                 "emoji-regex": "^8.0.0",
@@ -8596,7 +8681,7 @@
                             }
                         },
                         "strip-ansi-cjs": {
-                            "version": "npm:strip-ansi@6.0.1",
+                            "version": "npm:strip-ansi-cjs@6.0.1",
                             "bundled": true,
                             "requires": {
                                 "ansi-regex": "^5.0.1"
@@ -8755,7 +8840,7 @@
                             }
                         },
                         "wrap-ansi-cjs": {
-                            "version": "npm:wrap-ansi@7.0.0",
+                            "version": "npm:wrap-ansi-cjs@7.0.0",
                             "bundled": true,
                             "requires": {
                                 "ansi-styles": "^4.0.0",
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;