From d5c261f306a45fda46e948b9db001874a2d9a0ae Mon Sep 17 00:00:00 2001 From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com> Date: Sat, 17 Jul 2021 12:58:57 -0700 Subject: add MapBox --- src/client/views/nodes/MapBox/MapBox.scss | 32 +++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/client/views/nodes/MapBox/MapBox.scss (limited to 'src/client/views/nodes/MapBox/MapBox.scss') diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss new file mode 100644 index 000000000..863907aaf --- /dev/null +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -0,0 +1,32 @@ +.MapBox { + width: 100%; + height: 100%; + overflow: hidden; + + .MapBox-contents { + width: 100%; + height: 100%; + overflow: hidden; + > div { + position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box + } + + .map-wrapper { + .searchbox { + box-sizing: border-box; + border: 1px solid transparent; + width: 240px; + height: 32px; + padding: 0 12px; + border-radius: 3px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + font-size: 14px; + outline: none; + text-overflow: ellipses; + position: absolute; + left: 50%; + margin-left: -120px; + } + } + } +} -- cgit v1.2.3-70-g09d2 From b3f81bf0cad1f7dadf47de7b7fc673b35180c46c Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 30 Jul 2021 08:00:49 -0400 Subject: set default native width for maps. changed map css so sidebar will show up. fixed pointerEvents for map --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/nodes/MapBox/MapBox.scss | 3 +++ src/client/views/nodes/MapBox/MapBox.tsx | 30 ++++++++++++++++-------------- 3 files changed, 20 insertions(+), 15 deletions(-) (limited to 'src/client/views/nodes/MapBox/MapBox.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index adc66c916..27bef915d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -458,7 +458,7 @@ export class CurrentUserUtils { doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, isTemplateDoc: true, _height: 512, _width: 400, useCors: true, system: true, cloneFieldFilter: new List(["system"]) }); } if (doc.emptyMap === undefined) { - doc.emptyMap = Docs.Create.MapDocument([], { title: "map", _width: 800, _height: 600, system: true, cloneFieldFilter: new List(["system"]) }); + doc.emptyMap = Docs.Create.MapDocument([], { title: "map", _showSidebar: true, _width: 800, _height: 600, system: true, cloneFieldFilter: new List(["system"]) }); ((doc.emptyMap as Doc).proto as Doc)["dragFactory-count"] = 0; } if (doc.activeMobileMenu === undefined) { diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index 863907aaf..04e8b0dd5 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -2,16 +2,19 @@ width: 100%; height: 100%; overflow: hidden; + display: flex; .MapBox-contents { width: 100%; height: 100%; overflow: hidden; + display: flex; > div { position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box } .map-wrapper { + width: 100%; .searchbox { box-sizing: border-box; border: 1px solid transparent; diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index d52b91908..775cf03ca 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,22 +1,17 @@ -import { Autocomplete, GoogleMap, GoogleMapProps, InfoBox, InfoWindow, Marker } from '@react-google-maps/api'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, Marker } from '@react-google-maps/api'; +import { action, IReactionDisposer, observable } from 'mobx'; import { observer } from "mobx-react"; import * as React from "react"; -import { Doc, WidthSym } from '../../../../fields/Doc'; +import { Doc, WidthSym, HeightSym } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { Cast, NumCast, StrCast } from '../../../../fields/Types'; -import { setupMoveUpEvents, emptyFunction } from '../../../../Utils'; +import { NumCast } from '../../../../fields/Types'; +import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { DragManager } from '../../../util/DragManager'; -import { undoBatch } from '../../../util/UndoManager'; -import { CollectionViewType } from '../../collections/CollectionView'; -import { TabDocView } from '../../collections/TabDocView'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; import { SidebarAnnos } from '../../SidebarAnnos'; -import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '../FieldView'; -import { PresMovement } from '../PresBox'; -import "./MapBox.scss" +import "./MapBox.scss"; import { MapMarker } from './MapMarker'; type MapDocument = makeInterface<[typeof documentSchema]>; @@ -87,6 +82,15 @@ export class MapBox extends ViewBoxAnnotatableComponent(); private _ref: React.RefObject = React.createRef(); + 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) => { @@ -239,12 +243,10 @@ export class MapBox extends ViewBoxAnnotatableComponent {/* HELLO WORLD! */}
e.stopPropagation()} onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > {/* // {/* Date: Fri, 30 Jul 2021 08:44:42 -0400 Subject: added sidebar button to mapBox --- src/client/views/SidebarAnnos.tsx | 7 +- src/client/views/nodes/MapBox/MapBox.scss | 19 +++- src/client/views/nodes/MapBox/MapBox.tsx | 101 +++++++++++++-------- src/client/views/nodes/PDFBox.tsx | 1 + src/client/views/nodes/WebBox.tsx | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 1 + 6 files changed, 85 insertions(+), 45 deletions(-) (limited to 'src/client/views/nodes/MapBox/MapBox.scss') diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index c5ae82c61..8b063b02f 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -23,6 +23,7 @@ interface ExtraProps { layoutDoc: Doc; rootDoc: Doc; dataDoc: Doc; + usePanelWidth: boolean; whenChildContentsActiveChanged: (isActive: boolean) => void; ScreenToLocalTransform: () => Transform; sidebarAddDocument: (doc: (Doc | Doc[]), suffix: string) => boolean; @@ -70,7 +71,9 @@ export class SidebarAnnos extends React.Component { sidebarKey = () => this.props.fieldKey + "-sidebar"; filtersHeight = () => 38; screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(Doc.NativeWidth(this.props.dataDoc), 0).scale(this.props.scaling?.() || 1); - panelWidth = () => !this.props.layoutDoc._showSidebar ? 0 : this.props.layoutDoc.type === DocumentType.RTF ? this.props.PanelWidth() : (NumCast(this.props.layoutDoc.nativeWidth) - Doc.NativeWidth(this.props.dataDoc)) * this.props.PanelWidth() / NumCast(this.props.layoutDoc.nativeWidth); + panelWidth = () => !this.props.layoutDoc._showSidebar ? 0 : + this.props.usePanelWidth ? this.props.PanelWidth() : + (NumCast(this.props.layoutDoc.nativeWidth) - Doc.NativeWidth(this.props.dataDoc)) * this.props.PanelWidth() / NumCast(this.props.layoutDoc.nativeWidth); panelHeight = () => this.props.PanelHeight() - this.filtersHeight(); addDocument = (doc: Doc | Doc[]) => this.props.sidebarAddDocument(doc, this.sidebarKey()); moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument(doc, targetCollection, addDocument, this.sidebarKey()); @@ -99,7 +102,7 @@ export class SidebarAnnos extends React.Component {
; }; return !this.props.layoutDoc._showSidebar ? (null) : -
{ this.searchBox = searchBox; @@ -166,19 +161,10 @@ export class MapBox extends ViewBoxAnnotatableComponent { - 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 d?.author).length; + return (!annotated && !this.isContentActive()) ? (null) :
; + } + @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
+ return
{/* HELLO WORLD! */} -
e.stopPropagation()} onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > {/* // {/* */} -
+
{/* {/* */} - -
-
; +
+ +
+ {this.sidebarHandle} +
+
; } - } \ No newline at end of file diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 59f069c3d..5f82650da 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -281,6 +281,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent Date: Fri, 30 Jul 2021 09:03:53 -0400 Subject: from last --- src/client/views/nodes/MapBox/MapBox.scss | 8 -- src/client/views/nodes/MapBox/MapBox.tsx | 142 ++++++++++++++---------------- src/client/views/nodes/WebBox.tsx | 2 +- 3 files changed, 69 insertions(+), 83 deletions(-) (limited to 'src/client/views/nodes/MapBox/MapBox.scss') diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index e329af15c..4fae8d8ff 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,11 +1,4 @@ .mapBox { - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - - - .mapBox-contents { width: 100%; height: 100%; overflow: hidden; @@ -44,5 +37,4 @@ border-radius: 20px; cursor:grabbing; } - } } diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 2d53116f3..2b3bcb0a2 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -255,88 +255,82 @@ export class MapBox extends ViewBoxAnnotatableComponent - {/* HELLO WORLD! */} -
e.stopPropagation()} - onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > - {/* // {/* + {/* // {/* */} -
- this.loadHandler(map)} - options={mapOptions} - > - - - - - {this.childDocs.map(place => ( - this.markerLoadHandler(marker, place)} - onClick={e => this.markerClickHandler(e, place)} - /> - ))} - {this.infoWindowOpen && this.selectedPlace && ( - -
-
+
e.stopPropagation()} + onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} + style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}> + this.loadHandler(map)} + options={mapOptions} + > + + + + + {this.childDocs.map(place => ( + this.markerLoadHandler(marker, place)} + onClick={e => this.markerClickHandler(e, place)} + /> + ))} + {this.infoWindowOpen && this.selectedPlace && ( + +
+
+
+ +
+
+
+
+
+ +
+
- -
-
-
-
-
- -
-
-
- -
+
- - )} - -
- {/* {/* */} -
- -
- {this.sidebarHandle} +
+ + )} + +
+ {/* {/* */} +
+
+ {this.sidebarHandle}
; } } \ No newline at end of file diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index ffa6593e5..acf50e773 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -487,7 +487,7 @@ export class WebBox extends ViewBoxAnnotatableComponent +
-- cgit v1.2.3-70-g09d2 From ff9c17fd3e4a32b63a365c7706656dc91095b082 Mon Sep 17 00:00:00 2001 From: Aubrey Li Date: Wed, 15 Sep 2021 20:54:16 -0400 Subject: merge conflicts and toggle sidebar --- src/client/views/nodes/MapBox/MapBox.scss | 22 ++++++++++++++++++++++ src/client/views/nodes/MapBox/MapBox.tsx | 26 +++++++++++++++++++++++--- src/server/public/files | 0 3 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 src/server/public/files (limited to 'src/client/views/nodes/MapBox/MapBox.scss') diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index 4fae8d8ff..f275bed54 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,3 +1,4 @@ +@import "../../global/globalCssVariables.scss"; .mapBox { width: 100%; height: 100%; @@ -7,6 +8,27 @@ position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box } + .mapBox-overlayButton-sidebar { + background: #121721; + height: 25px; + width: 25px; + right: 5px; + display: flex; + position: absolute; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + z-index: 1; // so it appears on top of the document's title, if shown + + box-shadow: $standard-box-shadow; + transition: 0.2s; + + &:hover{ + filter: brightness(0.85); + } + } + .mapBox-wrapper { width: 100%; .searchbox { diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 0314aa419..1323048d9 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -19,6 +19,8 @@ import { MapMarker } from './MapMarker'; import { DocumentType } from '../../../documents/DocumentTypes'; import { identity } from 'lodash'; import { Id } from '../../../../fields/FieldSymbols'; +import { Colors } from '../../global/globalEnums'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; type MapDocument = makeInterface<[typeof documentSchema]>; const MapDocument = makeInterface(documentSchema); @@ -135,6 +137,12 @@ export class MapBox extends ViewBoxAnnotatableComponent real time updates ** + /** * store a reference to google map instance @@ -298,7 +306,8 @@ export class MapBox extends ViewBoxAnnotatableComponent d?.author).length; - return (!annotated && !this.isContentActive()) ? (null) :
+ // style={{ pointerEvents: this.isContentActive() ? undefined : "none" }} + > {/* // {/*
+
+ +
{this.sidebarHandle}
; } diff --git a/src/server/public/files b/src/server/public/files new file mode 100644 index 000000000..e69de29bb -- cgit v1.2.3-70-g09d2