From 4b2dad9e65f0d8f607a2f120c3228990aa188417 Mon Sep 17 00:00:00 2001 From: Aubrey Li Date: Tue, 2 Nov 2021 15:36:15 -0400 Subject: mapbox render infowindow --- src/client/views/nodes/MapBox/MapBox.tsx | 200 +++++++++++++++++-------------- 1 file changed, 109 insertions(+), 91 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 4c0c4c0c7..ba6cdc2db 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -6,8 +6,8 @@ import { DataSym, Doc, DocListCast, FieldsSym, Opt, WidthSym } from '../../../.. import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; -import { Docs } from '../../../documents/Documents'; +import { emptyFunction, OmitKeys, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; import { AnchorMenu } from '../../pdf/AnchorMenu'; @@ -25,9 +25,12 @@ import { TraceMobx } from '../../../../fields/util'; import { SnappingManager } from '../../../util/SnappingManager'; import { InkTool } from '../../../../fields/InkField'; import { CurrentUserUtils } from '../../../util/CurrentUserUtils'; -import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; +import { CollectionFreeFormView, MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; import { MarqueeAnnotator } from '../../MarqueeAnnotator'; import { Annotation } from '../../pdf/Annotation'; +import { DocumentView } from '../DocumentView'; +import { Transform } from '../../../util/Transform'; +const _global = (window /* browser */ || global /* node */) as any; type MapDocument = makeInterface<[typeof documentSchema]>; const MapDocument = makeInterface(documentSchema); @@ -82,14 +85,17 @@ export class MapBox extends ViewBoxAnnotatableComponent = React.createRef(); @observable private _overlayAnnoInfo: Opt; showInfo = action((anno: Opt) => this._overlayAnnoInfo = anno); + @observable _windowWidth: number = 0; + @observable _windowHeight: number = 0; public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MapBox, fieldKey); } public get SidebarKey() { return this.fieldKey + "-sidebar"; } private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean) => void); @computed get inlineTextAnnotations() { return this.allMapMarkers.filter(a => a.textInlineAnnotations); } @observable private _map: google.maps.Map = null as unknown as google.maps.Map; - @observable private selectedPlace: MapMarker | Doc | undefined; + @observable private selectedPlace: Doc | undefined; @observable private markerMap: { [id: string]: google.maps.Marker } = {}; + @observable private markerIdToMapMarker: { [id: string]: Doc | MapMarker | undefined } = {}; @observable private center = navigator.geolocation ? navigator.geolocation.getCurrentPosition : defaultCenter; @observable private zoom = 2.5; @observable private infoWindowOpen = false; @@ -130,17 +136,10 @@ export class MapBox extends ViewBoxAnnotatableComponent { this.bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }); - return place._markerId; }); map.fitBounds(this.bounds) } - - private hasGeolocation = (doc: Doc) => { - return doc.type === DocumentType.IMG - - } - /** * Custom control for add marker button * @param controlDiv @@ -202,28 +201,8 @@ export class MapBox extends ViewBoxAnnotatableComponent { - // // console.log("allSidebarDocs:"); - // // console.log(this.allSidebarDocs); - // this.allSidebarDocs?.forEach(doc => { - // console.log(doc); - // // search for if the map marker exists, else create marker - // if (doc.lat !== undefined && doc.lng !== undefined) { - // console.log("image found! loading into marker document...") - // const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [doc], {}) - // Doc.AddDocToList(this.dataDoc, this.annotationKey, marker) // add marker to annotation key - // } - // }); - // // console.log("allMarkers:") - // // console.log(this.allMarkers); - // } - /** * store a reference to google map instance @@ -254,7 +233,6 @@ export class MapBox extends ViewBoxAnnotatableComponent { - // const marker = new google.maps.Marker({ - // map: this._map, - // position: latLng, - // draggable: true - // }); - // const newMapMarker = Docs.Create.MapMarkerDocument(NumCast(latLng.lat()), NumCast(latLng.lng()), [], {}); - // this.allMarkers.push(newMapMarker); - // } - - //TODO: Is this a valid way for adding marker from drawing manager..? If so, how do we update the allMarkers & render so info window appears - // @action - // private addMarker = (marker: google.maps.Marker) => { - // const markerPosition = marker.getPosition(); - // const newMapMarker = Docs.Create.MapMarkerDocument(NumCast(markerPosition?.lat()), NumCast(markerPosition?.lng()), [], {}) - // this.allMarkers.push(newMapMarker) - // } - @action private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => { place[Id] ? this.markerMap[place[Id]] = marker : null; + place[Id] ? this.markerIdToMapMarker[place[Id]] = place : null; + + console.log("the following is a markerMap from id to Marker:") + console.log(this.markerMap); } @action @@ -324,7 +285,7 @@ export class MapBox extends ViewBoxAnnotatableComponent { if (doc.lat !== undefined && doc.lng !== undefined) { - const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [], {}) + const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [doc], {}) this.addDocument(marker, this.annotationKey) } }) //add to annotation list @@ -334,6 +295,16 @@ export class MapBox extends ViewBoxAnnotatableComponent { + if (this.layoutDoc._showSidebar) this.toggleSidebar(); + const docs = doc instanceof Doc ? [doc] : doc; + docs.forEach(doc => { + console.log(this.allMapMarkers); + console.log(this.allSidebarDocs); + }) + return this.removeDocument(doc, sidebarKey); + } + /** * Toggle sidebar onclick the tiny comment button on the top right corner * @param e @@ -432,11 +403,6 @@ export class MapBox extends ViewBoxAnnotatableComponent ; - // return (!annotated) ? (null) :
; } @action @@ -479,6 +445,18 @@ export class MapBox extends ViewBoxAnnotatableComponent this.props.isContentActive() && this.props.pointerEvents !== "none" && !MarqueeOptionsMenu.Instance.isShown() ? "all" : SnappingManager.GetIsDragging() ? undefined : "none"; + + @computed get annotationLayer() { + TraceMobx(); + const pe = this.pointerEvents(); + return
+ {this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => + )} +
; + + } + getAnchor = () => { const anchor = @@ -493,7 +471,54 @@ export class MapBox extends ViewBoxAnnotatableComponent func that + //documentView + private renderChildDocs = (selectedDoc: Doc) => { + console.log("markerIdToMapMarker is:") + console.log(this.markerIdToMapMarker); + return
+ {DocListCast(selectedDoc.data).map(doc => + this._windowWidth} + PanelHeight={() => this._windowHeight || 200} + focus={DocUtils.DefaultFocus} + whenChildContentsActiveChanged={returnFalse} + bringToFront={returnFalse} + //TODO + NativeWidth={Doc.NativeWidth(doc) ? () => Doc.NativeWidth(doc) : undefined} + NativeHeight={Doc.NativeHeight(doc) ? () => Doc.NativeHeight(doc) : undefined} + /> + )} +
+ + + } + + /** + * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker + * @returns + */ private renderMarkers = () => { return this.allMapMarkers.map(place => ( { return this.infoWindowOpen && this.selectedPlace && ( -
-
-
- {/* {// TODO need to figure out how to render these childDocs of the MapMarker in InfoWindow - marker.childDocs} */} -
-
-
-
-
- - -
-
-
- -
-
+
{ + r && new _global.ResizeObserver(action(() => { + this._windowWidth = r.getBoundingClientRect().width; + this._windowHeight = r.getBoundingClientRect().height; + console.log(r.getBoundingClientRect()) + })).observe(r); + } + }> + + {this.renderChildDocs(this.selectedPlace)} + +
+
+
+
+
+ + +
+
+
+
@@ -543,16 +572,6 @@ export class MapBox extends ViewBoxAnnotatableComponent this._sidebarRef.current?.anchorMenuClick; - @computed get annotationLayer() { - TraceMobx(); - return
- {this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => - ) - } -
; - - } - render() { const renderAnnotations = (docFilters?: () => string[]) =>
- {this.sidebarHandle}
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2