From c973e8cbd4aabb545ea580b213e7f60d41cf2b20 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 26 Aug 2023 17:21:42 -0400 Subject: added pin highligting when following a link --- src/client/views/nodes/MapBox/MapBox.tsx | 102 +++++++++++++------------------ 1 file changed, 43 insertions(+), 59 deletions(-) (limited to 'src') 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 { - 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 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(); + map_pinHighlighted = new Map(); /* * Input: pin doc * Adds MicrosoftMaps Pushpin to the map (render) @@ -794,6 +793,22 @@ export class MapBox extends ViewBoxAnnotatableComponent { + 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 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(); -- cgit v1.2.3-70-g09d2