aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/MapBox
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2025-06-26 10:53:54 -0400
committerbobzel <zzzman@gmail.com>2025-06-26 10:53:54 -0400
commitbaae27b205356898c5866a0f095e4ec056e02459 (patch)
tree1b62de5579b8de8be81b6d342a9767f0f379bb91 /src/client/views/nodes/MapBox
parentccfdf905400cd4b81d8cde0f16bb0e15cd65621b (diff)
parent0093370a04348ef38b91252d02ab850f25d753b2 (diff)
Merge branch 'master' into agent-paper-main
Diffstat (limited to 'src/client/views/nodes/MapBox')
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.scss37
-rw-r--r--src/client/views/nodes/MapBox/MapBox.scss10
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx59
3 files changed, 38 insertions, 68 deletions
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.scss b/src/client/views/nodes/MapBox/MapAnchorMenu.scss
index c36d98afe..217576203 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.scss
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.scss
@@ -6,19 +6,19 @@
}
.anchorMenu-highlighter {
padding-right: 5px;
- .antimodeMenu-button {
- padding: 0;
- padding: 0;
+ .antimodeMenu-button {
+ padding: 0px;
+ padding: 0px;
padding-right: 0px;
padding-left: 0px;
width: 5px;
}
}
-.anchor-color-preview-button {
- width: 25px !important;
+.anchor-color-preview-button {
+ width: 25px !important;
.anchor-color-preview {
display: flex;
- flex-direction: column;
+ flex-direction: column;
padding-right: 3px;
width: unset !important;
.color-preview {
@@ -72,12 +72,11 @@
}
}
- .MuiInputBase-input{
+ .MuiInputBase-input {
color: white !important;
}
-
-
- .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled{
+
+ .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
-webkit-text-fill-color: #b3b2b2 !important;
}
@@ -91,7 +90,7 @@
gap: 5px;
}
- .selected-route-details-container{
+ .selected-route-details-container {
display: flex;
flex-direction: column;
gap: 3px;
@@ -99,33 +98,25 @@
align-items: flex-start;
padding: 5px;
}
-
-
}
- .customized-marker-container{
+ .customized-marker-container {
display: flex;
flex-direction: column;
gap: 10px;
- .current-marker-container{
+ .current-marker-container {
display: flex;
align-items: center;
gap: 5px;
}
- .all-markers-container{
+ .all-markers-container {
display: flex;
- align-items: center;
+ align-items: center;
gap: 10px;
flex-wrap: wrap;
max-width: 400px;
}
}
-
-
-
-
}
-
-
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index bd4b51038..89d381070 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -21,7 +21,7 @@
.mapBox-infoWindow {
background-color: white;
opacity: 0.75;
- padding: 12;
+ padding: 12px;
font-size: 17;
}
.mapBox-searchbar {
@@ -119,7 +119,7 @@
width: 100%;
label {
- margin-bottom: 0;
+ margin-bottom: 0px;
}
.speed-label {
@@ -197,12 +197,12 @@
}
.mapBox-sidebar {
position: absolute;
- right: 0;
+ right: 0px;
height: 100%;
}
.mapBox-sidebar-handle {
- top: 0;
+ top: 0px;
//top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views
width: 10px;
height: 100%;
@@ -215,7 +215,7 @@
left: 50%;
margin-left: 120px;
right: unset !important;
- margin-top: -10;
+ margin-top: -10px;
height: max-content;
}
.searchbox {
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index a563b7c1b..a279ccc48 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -13,7 +13,7 @@ import { CirclePicker, ColorResult } from 'react-color';
import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl/mapbox';
import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils';
import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast, Field, LinkedTo, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, LinkedTo, StrListCast } from '../../../../fields/Doc';
import { List } from '../../../../fields/List';
import { RichTextField } from '../../../../fields/RichTextField';
import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types';
@@ -111,12 +111,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
// this list contains pushpins and configs
@computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); } // prettier-ignore
- @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); } // prettier-ignore
+ @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.sidebarKey]); } // prettier-ignore
@computed get allPushpins() { return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); } // prettier-ignore
@computed get allRoutes() { return this.allAnnotations.filter(anno => anno.type === DocumentType.MAPROUTE); } // prettier-ignore
@computed get SidebarShown() { return !!this.layoutDoc._layout_showSidebar; } // prettier-ignore
@computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore
- @computed get SidebarKey() { return this.fieldKey + '_sidebar'; } // prettier-ignore
+ @computed get sidebarKey() { return this.fieldKey + '_sidebar'; } // prettier-ignore
@computed get sidebarColor() {
return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
}
@@ -260,7 +260,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
removeMapDocument = (doc: Doc | Doc[], annotationKey?: string) => {
this.allAnnotations
- .filter(anno => toList(doc).includes(DocCast(anno.mapPin)))
+ .filter(anno => toList(doc).includes(DocCast(anno.mapPin)!))
.forEach(anno => {
anno.mapPin = undefined;
});
@@ -339,27 +339,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
startAnchorDrag = (e: PointerEvent, ele: HTMLElement) => {
e.preventDefault();
e.stopPropagation();
-
- const sourceAnchorCreator = action(() => {
- const note = this.getAnchor(true);
- if (note && this._selectedPinOrRoute) {
- note.latitude = this._selectedPinOrRoute.latitude;
- note.longitude = this._selectedPinOrRoute.longitude;
- note.map = this._selectedPinOrRoute.map;
- }
- return note as Doc;
- });
-
const targetCreator = (annotationOn: Doc | undefined) => {
const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
+ target.layout_fitWidth = true;
DocumentView.SetSelectOnLoad(target);
return target;
};
+
+ const sourceAnchorCreator = () => this.getAnchor(true);
const docView = this.DocumentView?.();
docView &&
DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
dragComplete: dragEv => {
- if (!dragEv.aborted && dragEv.annoDragData && dragEv.annoDragData.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) {
+ if (!dragEv.aborted && dragEv.annoDragData?.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) {
dragEv.annoDragData.linkSourceDoc.followLinkToggle = dragEv.annoDragData.dropDocument.annotationOn === this.Document;
dragEv.annoDragData.linkSourceDoc.followLinkZoom = false;
}
@@ -368,17 +360,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
createNoteAnnotation = () => {
- const createFunc = undoable(
- action(() => {
- const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]);
- if (note && this._selectedPinOrRoute) {
- note.latitude = this._selectedPinOrRoute.latitude;
- note.longitude = this._selectedPinOrRoute.longitude;
- note.map = this._selectedPinOrRoute.map;
- }
- }),
- 'create note annotation'
- );
+ const createFunc = undoable(() => this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]), 'create note annotation');
if (!this.layoutDoc.layout_showSidebar) {
this.toggleSidebar();
setTimeout(createFunc);
@@ -428,14 +410,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
};
- getView = (doc: Doc, options: FocusViewOptions) => {
- if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) {
- this.toggleSidebar();
- options.didMove = true;
+ getView = async (doc: Doc, options: FocusViewOptions) => {
+ if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
+ SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, this.toggleSidebar, doc, options);
}
- return new Promise<Opt<DocumentView>>(res => {
- DocumentView.addViewRenderedCb(doc, dv => res(dv));
- });
+ return undefined;
};
/*
@@ -476,13 +455,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@action
deleteSelectedPinOrRoute = undoable(() => {
- if (this._selectedPinOrRoute) {
+ const selPin = DocCast(this._selectedPinOrRoute);
+ if (selPin) {
// Removes filter
- Doc.setDocFilter(this.Document, 'latitude', NumCast(this._selectedPinOrRoute.latitude), 'remove');
- Doc.setDocFilter(this.Document, 'longitude', NumCast(this._selectedPinOrRoute.longitude), 'remove');
- Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this._selectedPinOrRoute))}`, 'remove');
+ Doc.setDocFilter(this.Document, 'latitude', NumCast(selPin.latitude), 'remove');
+ Doc.setDocFilter(this.Document, 'longitude', NumCast(selPin.longitude), 'remove');
+ Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(selPin)}`, 'remove');
- this.removePushpinOrRoute(this._selectedPinOrRoute);
+ this.removePushpinOrRoute(selPin);
}
MapAnchorMenu.Instance.fadeOut(true);
document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
@@ -1299,7 +1279,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<SidebarAnnos
ref={this._sidebarRef}
{...this._props}
- fieldKey={this.fieldKey}
Doc={this.Document}
layoutDoc={this.layoutDoc}
dataDoc={this.dataDoc}