diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 77 |
1 files changed, 66 insertions, 11 deletions
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 }), |