diff options
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 102 |
1 files changed, 43 insertions, 59 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 48bc02f84..62d622fd6 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 { Button, EditableText, IconButton, Type } from 'browndash-components'; +import { docs_v1 } from 'googleapis'; import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -11,7 +12,7 @@ import { Highlight, Width } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { InkTool } from '../../../../fields/InkField'; import { ScriptField } from '../../../../fields/ScriptField'; -import { NumCast, StrCast } from '../../../../fields/Types'; +import { DocCast, NumCast, StrCast } from '../../../../fields/Types'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; @@ -358,13 +359,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps !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') + undoable( + action(() => { + 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) => { @@ -558,13 +562,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps 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); + this.recolorPin(this.selectedPin, 'green'); MapAnchorMenu.Instance.Delete = this.deleteSelectedPin; MapAnchorMenu.Instance.Center = this.centerOnSelectedPin; @@ -653,9 +651,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // preslocationToLookAt:this.dataDoc.locationToLookAt, // presType: layout_unrendered: true, - annotationOn: this.rootDoc, }); if (anchor) { + anchor.mapPin = this.selectedPin; if (!addAsAnnotation) anchor.backgroundColor = 'transparent'; /* addAsAnnotation &&*/ this.addDocument(anchor); PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.rootDoc); @@ -665,6 +663,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; map_docToPinMap = new Map<Doc, any>(); + map_pinHighlighted = new Map<Doc, boolean>(); /* * Input: pin doc * Adds MicrosoftMaps Pushpin to the map (render) @@ -794,6 +793,22 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this.bingSearchBarContents = newText; }; + recolorPin = (pin: Doc, color?: string) => { + this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin)); + this.map_docToPinMap.delete(pin); + const newpin = new this.MicrosoftMaps.Pushpin( + new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), + color + ? { + color, + } + : {} + ); + this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin)); + this._bingMap.current.entities.push(newpin); + this.map_docToPinMap.set(pin, newpin); + }; + /* * Called when BingMap is first rendered * Initializes starting values @@ -813,49 +828,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps 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); - // } - }), + this.allMapPushpins + .map(doc => ({ doc, pushpin: DocCast(doc.mapPin) })) + .filter(pair => pair.pushpin) + .forEach(({ doc, pushpin }) => { + if (doc[Highlight] && !this.map_pinHighlighted.get(pushpin)) { + this.recolorPin(pushpin, 'orange'); + this.map_pinHighlighted.set(pushpin, true); + } else if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) { + this.recolorPin(pushpin); + this.map_pinHighlighted.delete(pushpin); + } + }), { fireImmediately: true } ); // this.updateMapType(); |