aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/MapBox/MapBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx162
1 files changed, 110 insertions, 52 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index be2defa9b..14ecc910e 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -5,6 +5,7 @@ import { Button, EditableText, IconButton, Type } from 'browndash-components';
import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
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 { Id } from '../../../../fields/FieldSymbols';
@@ -26,6 +27,7 @@ import { SidebarAnnos } from '../../SidebarAnnos';
import { DocumentView, OpenWhere } from '../DocumentView';
import { FieldView, FieldViewProps } from '../FieldView';
import { PinProps, PresBox } from '../trails';
+import { MapAnchorMenu } from './MapAnchorMenu';
import './MapBox.scss';
// amongus
/**
@@ -116,9 +118,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@observable private toggleAddMarker = false;
private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
- @observable _showSidebar = false;
@computed get SidebarShown() {
- return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
+ return this.layoutDoc._layout_showSidebar ? true : false;
}
static _canAnnotate = true;
@@ -299,11 +300,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
const fullWidth = this.layoutDoc[Width]();
const mapWidth = fullWidth - this.sidebarWidth();
if (this.sidebarWidth() + localDelta[0] > 0) {
- this._showSidebar = true;
+ this.layoutDoc._layout_showSidebar = true;
this.layoutDoc._width = fullWidth + localDelta[0];
this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%';
} else {
- this._showSidebar = false;
+ this.layoutDoc._layout_showSidebar = false;
this.layoutDoc._width = mapWidth;
this.layoutDoc._layout_sidebarWidthPercent = '0%';
}
@@ -505,13 +506,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
/*
* Pushpin dblclick
*/
- @action
- pushpinDblClicked = (pin: any, pinDoc?: Doc) => {
- if (pinDoc) this.removePushpin(pinDoc, pin);
- else this._bingMap.current.entities.remove(pin);
- };
+ // @action
+ // pushpinDblClicked = (pin: any, pinDoc?: Doc) => {
+ // if (pinDoc) this.removePushpin(pinDoc);
+ // else this._bingMap.current.entities.remove(pin);
+ // };
// The pin that is selected
+ @observable
selectedPin:Doc | undefined;
/*
@@ -519,18 +521,37 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
*/
@action
pushpinClicked = (pinDoc: Doc) => {
- // TODO:
- // if (sidebarannos is not open) open sidebarannos
- // creates button onclick removes the doc from annotations
+ if (this.selectedPin) {
+ const temp = this.selectedPin;
+ this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
+ const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude,temp.longitude));
+ this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc));
+ this._bingMap.current.entities.push(newpin);
+ this.map_docToPinMap.set(temp, newpin);
+ }
+
+ this.selectedPin = pinDoc;
- // pan to pushpin location
- // this.dataDoc.latitude = pinDoc.latitude;
- // this.dataDoc.longitude = pinDoc.longitude;
- this.selectedPin = pinDoc
+ 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 should SELECT, not center
+ MapAnchorMenu.Instance.Delete = this.deleteSelectedPin
+ MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
+ MapAnchorMenu.Instance.LinkNote = this.createNoteAnnotation;
+
+ const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude,this.selectedPin.longitude))
+ const x = point.x + this.props.PanelWidth() / 2;
+ const y = point.y + this.props.PanelHeight() / 2 +32
+ const cpt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y);
+ MapAnchorMenu.Instance.jumpTo(cpt[0] - this.sidebarWidth()/this.panelWidth()*200, cpt[1], true);
+ document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true)
+ this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick);
- this.createNoteAnnotation();
};
/**
@@ -545,10 +566,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
*/
@action
mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
- if (this.placePinOn) {
- this.createPushpin(e.location.latitude, e.location.longitude);
- // this.addAllPins();
- // this.placePinOn = false;
+ if (this.selectedPin) {
+ const temp = this.selectedPin;
+ this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
+ const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude,temp.longitude));
+ this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc));
+ this._bingMap.current.entities.push(newpin);
+ this.map_docToPinMap.set(temp, newpin);
+
+ this.selectedPin=undefined;
+ this.MicrosoftMaps.Events.removeEventListener(this._bingMap.current, 'click', this.mapOnClick);
}
};
@@ -585,26 +612,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.dataDoc.latitude = location.latitude;
this.dataDoc.longitude = location.longitude;
this.dataDoc.mapZoom = this._bingMap.current.getZoom();
- // this.dataDoc.mapType = this._bingMap.current.getMapTypeId();
- // this.bingSearchBarContents=location.name;
-
- // Centers on the searched location
- // this._bingMap.current.panTo(new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude));
-
- // this._bingMap.current.setView({
- // center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude),
- // });
-
// Creates a temporary pin but does not add it to the dataDoc
- var temp = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
- color: 'blue',
- });
-
- this.MicrosoftMaps.Events.addHandler(temp, 'dblclick', (e: any) => this.pushpinDblClicked(temp));
- if (temp != this.searched_pin || this.searched_pin == null) {
- this._bingMap.current.entities.push(temp);
- this.searched_pin = temp;
- }
+ this.createPushpin(this.dataDoc.latitude, this.dataDoc.longitude)
};
/**
@@ -624,8 +633,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
/// this should use SELECTED pushpin for lat/long if there is a selection, otherwise CENTER
const anchor = Docs.Create.MapanchorDocument({
title: 'MapAnchor:' + this.rootDoc.title,
- config_latitude: NumCast(this.selectedPin ? this.selectedPin.latitude : this.dataDoc.latitude),
- config_longitude: NumCast(this.selectedPin ? this.selectedPin.longitude : this.dataDoc.longitude),
+ config_latitude: NumCast(this.selectedPin?.latitude ?? this.dataDoc.latitude),
+ config_longitude: NumCast(this.selectedPin?.longitude ?? this.dataDoc.longitude),
config_mapZoom: NumCast(this.dataDoc.mapZoom),
config_mapType: StrCast(this.dataDoc.mapType),
// preslocationToLookAt:this.dataDoc.locationToLookAt,
@@ -642,6 +651,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
return this.rootDoc;
};
+ map_docToPinMap = new Map<Doc, any>();
/*
* Input: pin doc
* Adds MicrosoftMaps Pushpin to the map (render)
@@ -658,7 +668,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this._bingMap.current.entities.push(pushPin);
this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin));
- this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
+ // this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
+ this.map_docToPinMap.set(pin,pushPin);
};
@observable
@@ -666,24 +677,72 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
/*
* Input: pin doc
- * Removes MicrosoftMaps Pushpin to the map (render)
+ * Removes pin from annotations
*/
@action
- removePushpin = (pinDoc: Doc, pin: any) => {
+ removePushpin = (pinDoc: Doc) => {
// this.allMapPushpins
// this.allMapPushpins.map(pin => this.addPushpin(pin));
// this._bingMap.current.entities.clear();
- this._bingMap.current.entities.remove(pin);
+
this.removeDocument(pinDoc, this.annotationKey);
// this.dataDoc[this.annotationKey]
};
+ /*
+ * Removes pushpin from map render
+ */
+ deletePushpin = (pinDoc:Doc)=>{
+ this._bingMap.current.entities.remove(this.map_docToPinMap.get(pinDoc));
+ this.map_docToPinMap.delete(pinDoc);
+ this.selectedPin=undefined;
+ }
+
+ @action
+ deleteSelectedPin = undoable(()=>{
+ if (this.selectedPin){
+ this.removePushpin(this.selectedPin)
+
+ }
+ MapAnchorMenu.Instance.fadeOut(true);
+ document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true)
+ }, "delete pin");
+
+ tryHideMapAnchorMenu = (e:PointerEvent) =>{
+ let target = document.elementFromPoint(e.x, e.y);
+
+ while (target != null) {
+ if (target === MapAnchorMenu.top.current) {
+ return;
+ }
+ target = target.parentElement;
+ }
+ e.stopPropagation();
+ e.preventDefault();
+ MapAnchorMenu.Instance.fadeOut(true);
+ document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true)
+
+ }
+
+ // tryhidemenu = e => if( e.parent... == mapanchormenu.top.currrent) do nothing; else hide menu
+
+ @action
+ centerOnSelectedPin = () =>{
+ if (this.selectedPin){
+ this.dataDoc.latitude = this.selectedPin.latitude;
+ this.dataDoc.longitude = this.selectedPin.longitude;
+
+
+ }
+ MapAnchorMenu.Instance.fadeOut(true);
+ document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu)
+ }
/**
* View options for bing maps
*/
bingViewOptions = {
- center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat, longitude: this.dataDoc.longitude ?? defaultCenter.lng },
+ // center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat, longitude: this.dataDoc.longitude ?? defaultCenter.lng },
zoom: this.dataDoc.latitude ?? 10,
mapTypeId: 'grayscale',
};
@@ -734,10 +793,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
if (!this._bingMap.current) {
alert('NO Map!?');
}
- this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', undoable(this.mapOnClick, 'Added Pin to Map'));
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.updateMapType();
this._disposer.location = reaction(
() => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, mapType: this.rootDoc.mapType }),
@@ -756,13 +814,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// Keeps track of when dragging a pin onto map
draggingPin = false;
dragToggle = (e: React.PointerEvent) => {
- console.log('DRAGGING TOGGLE');
+ // console.log('DRAGGING TOGGLE');
document.addEventListener('drop', this.dropPin, true);
document.addEventListener('pointermove', this.pinMove, true);
e.stopPropagation();
};
pinMove = (e: PointerEvent) => {
- console.log('MOVING');
+ // console.log('MOVING');
e.stopPropagation();
};
dropPin = (e: DragEvent) => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 05:53:01 +0000