diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 101 |
1 files changed, 61 insertions, 40 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 775cf03ca..2d53116f3 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,15 +1,16 @@ import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, Marker } from '@react-google-maps/api'; -import { action, IReactionDisposer, observable } from 'mobx'; +import { action, computed, IReactionDisposer, observable } from 'mobx'; import { observer } from "mobx-react"; import * as React from "react"; -import { Doc, WidthSym, HeightSym } from '../../../../fields/Doc'; +import { Doc, DocListCast, WidthSym } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { NumCast } from '../../../../fields/Types'; +import { NumCast, StrCast } from '../../../../fields/Types'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { DragManager } from '../../../util/DragManager'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; import { SidebarAnnos } from '../../SidebarAnnos'; +import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '../FieldView'; import "./MapBox.scss"; import { MapMarker } from './MapMarker'; @@ -84,14 +85,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps constructor(props: any) { super(props); - - if (!Doc.NativeWidth(this.dataDoc)) { - Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || 850); - Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || this.Document[HeightSym]() / this.Document[WidthSym]() * 850); - } } - @action private setSearchBox = (searchBox: any) => { this.searchBox = searchBox; @@ -166,19 +161,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }, emptyFunction, this.toggleSidebar); } - toggleSidebar = action(() => { - const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]); - const ratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? 250 : 0) + nativeWidth) / nativeWidth; - const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth); - this.layoutDoc.nativeWidth = nativeWidth * ratio; - this.layoutDoc._width = this.layoutDoc[WidthSym]() * nativeWidth * ratio / curNativeWidth; - this.layoutDoc._showSidebar = nativeWidth !== this.layoutDoc._nativeWidth; - }); - - sidebarWidth = () => { - !this.layoutDoc._showSidebar ? 0 : - (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth); - } + sidebarWidth = () => Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100 * this.props.PanelWidth(); + @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._sidebarWidthPercent, "0%"); } + @computed get sidebarColor() { return StrCast(this.layoutDoc.sidebarColor, StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "#e4e4e4")); } + @action private handlePlaceChanged = () => { @@ -242,18 +228,48 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }); } + public get SidebarKey() { return this.fieldKey + "-sidebar"; } + @computed get sidebarHandle() { + const annotated = DocListCast(this.dataDoc[this.SidebarKey]).filter(d => d?.author).length; + return (!annotated && !this.isContentActive()) ? (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 + toggleSidebar = () => { + const prevWidth = this.sidebarWidth(); + this.layoutDoc._showSidebar = ((this.layoutDoc._sidebarWidthPercent = StrCast(this.layoutDoc._sidebarWidthPercent, "0%") === "0%" ? "50%" : "0%")) !== "0%"; + this.layoutDoc._width = this.layoutDoc._showSidebar ? NumCast(this.layoutDoc._width) * 2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth); + } + sidebarDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), false); + } + sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => { + const bounds = this._ref.current!.getBoundingClientRect(); + this.layoutDoc._sidebarWidthPercent = "" + 100 * Math.max(0, (1 - (e.clientX - bounds.left) / bounds.width)) + "%"; + this.layoutDoc._showSidebar = this.layoutDoc._sidebarWidthPercent !== "0%"; + e.preventDefault(); + return false; + } + render() { - return <div className="MapBox" ref={this._ref}> + return <div className="mapBox" ref={this._ref}> {/* HELLO WORLD! */} - <div className={"MapBox-contents"} - style={{ pointerEvents: this.isContentActive() ? undefined : "none" }} + <div className={"mapBox-contents"} + style={{ + pointerEvents: this.isContentActive() ? undefined : "none" + }} onWheel={e => e.stopPropagation()} onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > {/* // {/* <LoadScript // googleMapsApiKey={process.env.GOOGLE_MAPS!} // libraries={['places', 'drawing']} // > */} - <div className="map-wrapper"> + <div className="mapBox-wrapper" style={{ + width: `calc(100% - ${this.sidebarWidthPercent})` + }}> <GoogleMap mapContainerStyle={mapContainerStyle} zoom={this.zoom} @@ -303,19 +319,24 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps </GoogleMap> </div> {/* {/* </LoadScript > */} - <SidebarAnnos ref={this._sidebarRef} - {...this.props} - fieldKey={this.annotationKey} - rootDoc={this.rootDoc} - layoutDoc={this.layoutDoc} - dataDoc={this.dataDoc} - sidebarAddDocument={this.sidebarAddDocument} - moveDocument={this.moveDocument} - removeDocument={this.removeDocument} - isContentActive={this.isContentActive} - /> - </div > - </div >; + <div className={"mapBox-sidebar"} + style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> + <SidebarAnnos ref={this._sidebarRef} + {...this.props} + fieldKey={this.annotationKey} + rootDoc={this.rootDoc} + layoutDoc={this.layoutDoc} + dataDoc={this.dataDoc} + usePanelWidth={true} + PanelWidth={this.sidebarWidth} + sidebarAddDocument={this.sidebarAddDocument} + moveDocument={this.moveDocument} + removeDocument={this.removeDocument} + isContentActive={this.isContentActive} + /> + </div> + {this.sidebarHandle} + </div> + </div>; } - }
\ No newline at end of file |