diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 200 |
1 files changed, 109 insertions, 91 deletions
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<ViewBoxAnnotatableProps private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); @observable private _overlayAnnoInfo: Opt<Doc>; showInfo = action((anno: Opt<Doc>) => 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<ViewBoxAnnotatableProps console.log('map bound is:' + this.bounds); this.allMapMarkers.map(place => { 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<ViewBoxAnnotatableProps map.panTo(position); const mapMarker = Docs.Create.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), [], {}); this.addDocument(mapMarker, this.annotationKey); - // Doc.AddDocToList(this.dataDoc, this.annotationKey, mapMarker); } - /** - * A function that examines allMapMarkers docs in the map node and form MapMarkers - */ - // private fillMarkers = () => { - // // 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<ViewBoxAnnotatableProps console.log("all sidebar docs during map loading is:") console.log(this.allSidebarDocs); this.fitBounds(map); - // this.fillMarkers(); // listener to addmarker event @@ -268,30 +246,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // this._map.addListener(drawingManager, 'markercomplete', this.addMarker) } - - - // @action - // private addMarkerToMap = (latLng: google.maps.LatLng) => { - // 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<ViewBoxAnnotatableProps const docs = doc instanceof Doc ? [doc] : doc docs.forEach(doc => { 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<ViewBoxAnnotatableProps return this.addDocument(doc, sidebarKey); // add to sidebar list } + sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => { + 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<ViewBoxAnnotatableProps }} > <FontAwesomeIcon icon={"comment-alt"} /> </div>; - // return (!annotated) ? (null) : <div className="mapBox-sidebar-handle" onPointerDown={this.sidebarDown} - // style={{ - // left: `max(0px, calc(100% - ${this.sidebarWidthPercent} ${this.sidebarWidth() ? "- 5px" : "- 10px"}))`, - // background: this.props.styleProvider?.(this.rootDoc, this.props as any, StyleProp.WidgetColor + (annotated ? ":annotated" : "")) - // }} />; } @action @@ -479,6 +445,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return this.addDocument(doc, annotationKey); } + pointerEvents = () => this.props.isContentActive() && this.props.pointerEvents !== "none" && !MarqueeOptionsMenu.Instance.isShown() ? "all" : SnappingManager.GetIsDragging() ? undefined : "none"; + + @computed get annotationLayer() { + TraceMobx(); + const pe = this.pointerEvents(); + return <div className="mapBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}> + {this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => + <Annotation {...this.props} fieldKey={this.annotationKey} pointerEvents={pe} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} />)} + </div>; + + } + getAnchor = () => { const anchor = @@ -493,7 +471,54 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return anchor; } - // create marker prop --> func that + //documentView + private renderChildDocs = (selectedDoc: Doc) => { + console.log("markerIdToMapMarker is:") + console.log(this.markerIdToMapMarker); + return <div> + {DocListCast(selectedDoc.data).map(doc => + <DocumentView + key={doc[Id]} + Document={doc} + moveDocument={returnFalse} + rootSelected={returnFalse} + styleProvider={this.props.styleProvider} + layerProvider={this.props.layerProvider} + docViewPath={returnEmptyDoclist} + ScreenToLocalTransform={Transform.Identity} + isDocumentActive={returnFalse} + isContentActive={returnFalse} + addDocument={returnFalse} + removeDocument={returnFalse} + addDocTab={returnFalse} + pinToPres={returnFalse} + dontRegisterView={true} + docFilters={returnEmptyFilter} + docRangeFilters={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + ContainingCollectionDoc={undefined} + ContainingCollectionView={undefined} + renderDepth={-1} + //TODO + PanelWidth={() => 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} + /> + )} + </div> + + + } + + /** + * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker + * @returns + */ private renderMarkers = () => { return this.allMapMarkers.map(place => ( <Marker @@ -508,27 +533,31 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps private renderInfoWindow = () => { return this.infoWindowOpen && this.selectedPlace && ( <InfoWindow - // anchor={this.markerMap[this.selectedPlace.Id!]} + anchor={this.markerMap[this.selectedPlace[Id]]} onCloseClick={this.handleInfoWindowClose} > - <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}> - <div style={{ fontSize: 16 }}> - <div> - {/* {// TODO need to figure out how to render these childDocs of the MapMarker in InfoWindow - marker.childDocs} */} - <hr /> - <form> - <label>Title: </label><br /> - <input type="text" id="title" name="title"></input><br /> - <label>Desription: </label><br /> - <textarea style={{ height: 150 }} id="description" name="description" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea> - <button type="submit">Save</button> - </form> - <hr /> - <div> - <button>New link+</button> - </div> - </div> + <div className="mapbox-infowindow" style={{ backgroundColor: 'white', opacity: 0.75, padding: 12, fontSize: 17 }} ref={r => { + 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)} + + <hr /> + <form> + <label>Title: </label><br /> + <input type="text" id="title" name="title"></input><br /> + <label>Desription: </label><br /> + <textarea style={{ height: 150 }} id="description" name="description" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea> + <button type="submit">Save</button> + </form> + <hr /> + <div> + <button>New link+</button> </div> </div> </InfoWindow> @@ -543,16 +572,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; - @computed get annotationLayer() { - TraceMobx(); - return <div className="webBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}> - {this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => - <Annotation {...this.props} fieldKey={this.annotationKey} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} />) - } - </div>; - - } - render() { const renderAnnotations = (docFilters?: () => string[]) => <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} @@ -637,7 +656,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps PanelWidth={this.sidebarWidth} sidebarAddDocument={this.sidebarAddDocument} moveDocument={this.moveDocument} - removeDocument={this.removeDocument} + removeDocument={this.sidebarRemoveDocument} /> </div> <div className="mapBox-overlayButton-sidebar" key="sidebar" title="Toggle Sidebar" @@ -649,7 +668,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps onPointerDown={this.sidebarBtnDown} > <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={"comment-alt"} size="sm" /> </div> - {this.sidebarHandle} </div>; } }
\ No newline at end of file |