From 2c46608d3207a8463907b0e1904d9b3026d6d1c8 Mon Sep 17 00:00:00 2001
From: Eric <ericmabr@gmail.com>
Date: Sat, 26 Aug 2023 12:33:47 -0400
Subject: Final1

---
 src/client/views/nodes/MapBox/MapBox.tsx | 77 +++++++++++++++++++++++++++-----
 1 file changed, 66 insertions(+), 11 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 dbb38e763..93020354d 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { TbHeartMinus } from 'react-icons/tb';
 import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
-import { Width } from '../../../../fields/DocSymbols';
+import { Highlight, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -133,6 +133,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     componentWillUnmount(): void {
+        this.deselectPin();
         Object.keys(this._disposer).forEach(key => this._disposer[key]?.());
     }
     // iterate allMarkers to size, center, and zoom map to contain all markers
@@ -353,17 +354,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
     };
 
-    createNoteAnnotation = undoable(() => {
+    createNoteAnnotation = () => {
         !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
-        setTimeout(() =>{
-          const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false));
-          if (note && this.selectedPin) {
-            note.latitude = this.selectedPin.latitude;
-            note.longitude = this.selectedPin.latitude;
-          }
-        }); // give time for sidebarRef to be created
-    }, "create linked note");
 
+        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);
     };
@@ -818,7 +820,60 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
         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.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.updateMapType();
         this._disposer.location = reaction(
             () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, mapType: this.rootDoc.mapType }),
-- 
cgit v1.2.3-70-g09d2