fixed map crashing when deslecting a pin

1 files changed, 67 insertions, 83 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 93020354d..48bc02f84 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -357,15 +357,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     createNoteAnnotation = () => {
         !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
 
-        setTimeout(undoable(() => {
-            const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
-            if (note && this.selectedPin) {
-              note.latitude = this.selectedPin.latitude;
-              note.longitude = this.selectedPin.latitude;
-            }
-          },"create note annotation"))
-    
-    }
+        setTimeout(
+            undoable(() => {
+                const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
+                if (note && this.selectedPin) {
+                    note.latitude = this.selectedPin.latitude;
+                    note.longitude = this.selectedPin.latitude;
+                }
+            }, 'create note annotation')
+        );
+    };
     sidebarDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true);
     };
@@ -510,7 +511,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.addDocument(mapMarker, this.annotationKey);
 
         // mapMarker.infoWindowOpen = true;
-    },"createpin");
+    }, 'createpin');
 
     /*
      * Pushpin dblclick
@@ -529,8 +530,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     deselectPin = () => {
         if (this.selectedPin) {
             // Removes filter
-            Doc.setDocFilter(this.rootDoc, "latitude", this.selectedPin.latitude, "remove");
-            Doc.setDocFilter(this.rootDoc, "longitude", this.selectedPin.longitude, "remove");
+            Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
+            Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
 
             const temp = this.selectedPin;
             this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
@@ -539,10 +540,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this._bingMap.current.entities.push(newpin);
             this.map_docToPinMap.set(temp, newpin);
             this.selectedPin = undefined;
-
-            
         }
-        
     };
 
     getView = async (doc: Doc) => {
@@ -557,8 +555,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.deselectPin();
         this.selectedPin = pinDoc;
 
-        Doc.setDocFilter(this.rootDoc, "latitude", this.selectedPin.latitude, "match");
-        Doc.setDocFilter(this.rootDoc, "longitude", this.selectedPin.latitude, "match");
+        Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'match');
+        Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.latitude, 'match');
 
         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), {
@@ -579,10 +577,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         MapAnchorMenu.Instance.jumpTo(cpt[0], cpt[1], true);
 
         document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
-        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
-
         // Filter sidebar:
-
     };
 
     /**
@@ -596,13 +591,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Map OnClick
      */
     @action
-    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
-        if (this.selectedPin) {
-            this.deselectPin();
-            this.MicrosoftMaps.Events.removeEventListener(this._bingMap.current, 'click', this.mapOnClick);
-        }
-    };
-
+    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => this.deselectPin();
     /*
      * Updates values of layout doc to match the current map
      */
@@ -720,15 +709,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this._bingMap.current.entities.remove(this.map_docToPinMap.get(pinDoc));
         this.map_docToPinMap.delete(pinDoc);
         this.selectedPin = undefined;
-
     };
 
     @action
     deleteSelectedPin = undoable(() => {
         if (this.selectedPin) {
             // Removes filter
-            Doc.setDocFilter(this.rootDoc, "latitude", this.selectedPin.latitude, "remove");
-            Doc.setDocFilter(this.rootDoc, "longitude", this.selectedPin.longitude, "remove");
+            Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
+            Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
 
             this.removePushpin(this.selectedPin);
         }
@@ -818,62 +806,58 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         if (!this._bingMap.current) {
             alert('NO Map!?');
         }
+        this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
         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._disposer.highlight = reaction( () => this.allMapPushpins.map(doc => doc[Highlight]),
-        () => this.allMapPushpins.forEach(doc => {
-
-            // if(doc[Highlight]){
-            //     this.deselectPin();
-            //     this.selectedPin = doc;
-
-            //     Doc.setDocFilter(this.rootDoc, "latitude", this.selectedPin.latitude, "match");
-            //     Doc.setDocFilter(this.rootDoc, "longitude", this.selectedPin.latitude, "match");
-
-            //     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), {
-            //         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.Center = this.centerOnSelectedPin;
-            //     MapAnchorMenu.Instance.LinkNote = this.createNoteAnnotation;
-            // }
-            // if (doc[Highlight]) {
-            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
-            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {
-            //         color: 'orange',
-            //     });
-            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
-            //     this._bingMap.current.entities.push(newpin);
-            //     this.map_docToPinMap.set(doc, newpin);
-
-            // } 
-            // if (this.map_docToPinMap.get(doc).getColor() == 'orange' && !doc[Highlight]) {
-            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
-            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {});
-            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
-            //     this._bingMap.current.entities.push(newpin);
-            //     this.map_docToPinMap.set(doc, newpin);
-
-            // } 
-            // else if (this.map_docToPinMap.get(doc).getColor() != 'orange' && doc[Highlight]) {
-            //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
-            //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {
-            //         color: 'orange',
-            //     });
-            //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
-            //     this._bingMap.current.entities.push(newpin);
-            //     this.map_docToPinMap.set(doc, newpin);
-            // }
-
-            
-        })
-        , {fireImmediately: true})
+        this._disposer.highlight = reaction(
+            () => this.allMapPushpins.map(doc => doc[Highlight]),
+            () =>
+                this.allMapPushpins.forEach(doc => {
+                    // if(doc[Highlight]){
+                    //     this.deselectPin();
+                    //     this.selectedPin = doc;
+                    //     Doc.setDocFilter(this.rootDoc, "latitude", this.selectedPin.latitude, "match");
+                    //     Doc.setDocFilter(this.rootDoc, "longitude", this.selectedPin.latitude, "match");
+                    //     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), {
+                    //         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.Center = this.centerOnSelectedPin;
+                    //     MapAnchorMenu.Instance.LinkNote = this.createNoteAnnotation;
+                    // }
+                    // if (doc[Highlight]) {
+                    //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
+                    //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {
+                    //         color: 'orange',
+                    //     });
+                    //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
+                    //     this._bingMap.current.entities.push(newpin);
+                    //     this.map_docToPinMap.set(doc, newpin);
+                    // }
+                    // if (this.map_docToPinMap.get(doc).getColor() == 'orange' && !doc[Highlight]) {
+                    //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
+                    //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {});
+                    //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
+                    //     this._bingMap.current.entities.push(newpin);
+                    //     this.map_docToPinMap.set(doc, newpin);
+                    // }
+                    // else if (this.map_docToPinMap.get(doc).getColor() != 'orange' && doc[Highlight]) {
+                    //     this._bingMap.current.entities.remove(this.map_docToPinMap.get(doc));
+                    //     const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(doc.latitude, doc.longitude), {
+                    //         color: 'orange',
+                    //     });
+                    //     this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(doc));
+                    //     this._bingMap.current.entities.push(newpin);
+                    //     this.map_docToPinMap.set(doc, newpin);
+                    // }
+                }),
+            { fireImmediately: true }
+        );
         // this.updateMapType();
         this._disposer.location = reaction(
             () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, mapType: this.rootDoc.mapType }),