diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 194 |
1 files changed, 59 insertions, 135 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 7875060e2..8b23405d8 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,5 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, LoadScript, Marker } from '@react-google-maps/api'; +import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api'; +import * as dotenv from 'dotenv'; import { action, computed, IReactionDisposer, observable, ObservableMap } from 'mobx'; import { observer } from "mobx-react"; import * as React from "react"; @@ -10,16 +11,12 @@ import { InkTool } from '../../../../fields/InkField'; import { makeInterface } from '../../../../fields/Schema'; import { NumCast, StrCast } from '../../../../fields/Types'; import { TraceMobx } from '../../../../fields/util'; -import { emptyFunction, OmitKeys, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { CurrentUserUtils } from '../../../util/CurrentUserUtils'; import { DragManager } from '../../../util/DragManager'; -import { SelectionManager } from '../../../util/SelectionManager'; import { SnappingManager } from '../../../util/SnappingManager'; -import { undoBatch } from '../../../util/UndoManager'; import { CollectionFreeFormView, MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; -import { CollectionStackingView } from '../../collections/CollectionStackingView'; -import { CollectionViewType } from '../../collections/CollectionView'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; import { MarqueeAnnotator } from '../../MarqueeAnnotator'; @@ -28,8 +25,8 @@ import { Annotation } from '../../pdf/Annotation'; import { SidebarAnnos } from '../../SidebarAnnos'; import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '../FieldView'; -import * as dotenv from 'dotenv'; import "./MapBox.scss"; +import { MapBoxInfoWindow } from './MapBoxInfoWindow'; /** * MapBox architecture: @@ -146,7 +143,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // iterate allMarkers to size, center, and zoom map to contain all markers private fitBounds = (map: google.maps.Map) => { - console.log('map bound is:' + this.bounds); this.allMapMarkers.map(place => { this.bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }); }); @@ -232,7 +228,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps //drawingManager.setMap(map); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( - (position: GeolocationPosition) => { + (position: Position) => { const pos = { lat: position.coords.latitude, lng: position.coords.longitude, @@ -243,17 +239,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } else { alert("Your geolocation is not supported by browser.") }; - console.log("all sidebar docs during map loading is:") - console.log(this.allSidebarDocs); this.fitBounds(map); // listener to addmarker event - this._map.addListener('click', (e) => { - console.log("add marker map status:" + this.toggleAddMarker); + this._map.addListener('click', (e: MouseEvent) => { if (this.toggleAddMarker == true) { - this.placeMarker(e.latLng, map) - console.log(this.allMapMarkers) + this.placeMarker((e as any).latLng, map); } }) } @@ -266,9 +258,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @action private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => { place[Id] ? this.markerMap[place[Id]] = marker : null; - - console.log("the following is a markerMap from id to Marker:") - console.log(this.markerMap); } /** @@ -277,15 +266,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps * @param place */ @action - private markerClickHandler = (e: MouseEvent, place: Doc) => { + private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => { // set which place was clicked this.selectedPlace = place; - - console.log("you have selected this location:"); - console.log(this.selectedPlace); - place.infoWindowOpen = true; - console.log("open infowindow") } /** @@ -406,15 +390,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ) } - - @action - private handleInfoWindowClose = (place: Doc) => { - if (place.infoWindowOpen) { - place.infoWindowOpen = false; - } - place.infoWindowOpen = false; - } - /** * Handles toggle of sidebar on click the little comment button */ @@ -476,19 +451,16 @@ 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(); + const pe = this.props.isContentActive() && this.props.pointerEvents !== "none" && !MarqueeOptionsMenu.Instance.isShown() ? "all" : + SnappingManager.GetIsDragging() ? undefined : "none" 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`} />)} + <Annotation key={`${anno[Id]}-annotation`} {...this.props} + fieldKey={this.annotationKey} pointerEvents={pe} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} />)} </div>; - } - getAnchor = () => { const anchor = AnchorMenu.Instance?.GetAnchor(this._savedAnnotations) ?? @@ -496,43 +468,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return anchor; } - infoWidth = () => this.props.PanelWidth() / 5; - infoHeight = () => this.props.PanelWidth() / 5; - - // Collection stacking view for documents in the infowindow of a map marker - private renderChildDocs = (selectedDoc: Doc) => { - return <div style={{ width: this.infoWidth(), height: this.infoHeight() }}> - <CollectionStackingView { - ...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} - Document={selectedDoc} - DataDoc={undefined} - NativeWidth={returnZero} - NativeHeight={returnZero} - PanelHeight={this.infoHeight} - PanelWidth={this.infoWidth} - docFilters={returnEmptyFilter} - setHeight={emptyFunction} - isAnnotationOverlay={false} - select={emptyFunction} - scaling={returnOne} - isContentActive={returnTrue} - chromeHidden={true} - rootSelected={returnFalse} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - childHideDecorationTitle={returnTrue} - // childDocumentsActive={returnFalse} - removeDocument={this.removeDocument} - moveDocument={this.moveDocument} - addDocument={this.addDocument} - CollectionView={undefined} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} - renderDepth={this.props.renderDepth + 1} - viewType={CollectionViewType.Stacking} - fieldKey={"data"} - pointerEvents={"all"} - /></div>; - } - /** * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker * @returns @@ -543,41 +478,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps key={place[Id]} position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }} onLoad={marker => this.markerLoadHandler(marker, place)} - onClick={e => this.markerClickHandler(e, place)} + onClick={(e: google.maps.MapMouseEvent) => this.markerClickHandler(e, place)} /> )) } - /** - * Renders infowindow corresponding to a map marker document - * @param place - * @returns - */ - private renderInfoWindow = (place: Doc) => { - - return place.infoWindowOpen && ( - <InfoWindow - key={place[Id]} - anchor={this.markerMap[place[Id]]} - onCloseClick={() => this.handleInfoWindowClose(place)} - > - <div className="mapbox-infowindow" style={{ backgroundColor: 'white', opacity: 0.75, padding: 12, fontSize: 17 }}> - {this.renderChildDocs(place)} - <hr /> - <div> - <button>New link+</button> - </div> - </div> - </InfoWindow> - ) - } - // TODO: auto center on select a document in the sidebar private handleMapCenter = (map: google.maps.Map) => { - console.log("print the selected views in selectionManager:") - if (SelectionManager.Views().lastElement()) { - console.log(SelectionManager.Views().lastElement()); - } + // console.log("print the selected views in selectionManager:") + // if (SelectionManager.Views().lastElement()) { + // console.log(SelectionManager.Views().lastElement()); + // } } panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth(); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); @@ -585,35 +496,41 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop)); transparentFilter = () => [...this.props.docFilters(), Utils.IsTransparentFilter()]; opaqueFilter = () => [...this.props.docFilters(), Utils.IsOpaqueFilter()]; - + infoWidth = () => this.props.PanelWidth() / 5; + infoHeight = () => this.props.PanelHeight() / 5; anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; render() { - const renderAnnotations = (docFilters?: () => string[]) => - <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} - renderDepth={this.props.renderDepth + 1} - isAnnotationOverlay={true} - fieldKey={this.annotationKey} - CollectionView={undefined} - setPreviewCursor={this.setPreviewCursor} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight} - ScreenToLocalTransform={this.scrollXf} - scaling={returnOne} - dropAction={"alias"} - docFilters={docFilters || this.props.docFilters} - dontRenderDocuments={docFilters ? false : true} - select={emptyFunction} - ContentScaling={returnOne} - bringToFront={emptyFunction} - whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - removeDocument={this.removeDocument} - moveDocument={this.moveDocument} - addDocument={this.sidebarAddDocument} - childPointerEvents={true} - pointerEvents={CurrentUserUtils.SelectedTool !== InkTool.None || this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />; + const renderAnnotations = (docFilters?: () => string[]) => (null); + // bcz: commmented this out. Otherwise, any documents that are rendered with an InfoWindow of a marker + // will also be rendered as freeform annotations on the map. However, it doesn't seem that rendering + // freeform documents on the map does anything anyway, so getting rid of it for now. Also, since documents + // are rendered twice, adding a new note to the InfoWindow loses focus immediately on creation since it gets + // shifted to the non-visible view of the document in this freeform view. + // <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} + // renderDepth={this.props.renderDepth + 1} + // isAnnotationOverlay={true} + // fieldKey={this.annotationKey} + // CollectionView={undefined} + // setPreviewCursor={this.setPreviewCursor} + // PanelWidth={this.panelWidth} + // PanelHeight={this.panelHeight} + // ScreenToLocalTransform={this.scrollXf} + // scaling={returnOne} + // dropAction={"alias"} + // docFilters={docFilters || this.props.docFilters} + // dontRenderDocuments={docFilters ? false : true} + // select={emptyFunction} + // ContentScaling={returnOne} + // bringToFront={emptyFunction} + // whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + // removeDocument={this.removeDocument} + // moveDocument={this.moveDocument} + // addDocument={this.sidebarAddDocument} + // childPointerEvents={true} + // pointerEvents={CurrentUserUtils.SelectedTool !== InkTool.None || this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />; return <div className="mapBox" ref={this._ref}> - {console.log(apiKey)} + {/*console.log(apiKey)*/} {/* <LoadScript googleMapsApiKey={apiKey!} libraries={['places', 'drawing']} @@ -642,9 +559,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps </Autocomplete> {this.renderMarkers()} - {this.allMapMarkers.map(place => ( - this.renderInfoWindow(place) - ))} + {this.allMapMarkers.filter(marker => marker.infoWindowOpen).map(marker => <MapBoxInfoWindow key={marker[Id]} + {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} + place={marker} + markerMap={this.markerMap} + PanelWidth={this.infoWidth} + PanelHeight={this.infoHeight} + moveDocument={this.moveDocument} + isAnyChildContentActive={this.isAnyChildContentActive} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + />)} {this.handleMapCenter(this._map)} </GoogleMap> {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) : @@ -688,4 +612,4 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps </div> </div>; } -}
\ No newline at end of file +} |