added sidebar button to mapBox

6 files changed, 85 insertions, 45 deletions

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<FieldViewProps & ExtraProps> {
     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<FieldViewProps & ExtraProps> {
             </div>;
         };
         return !this.props.layoutDoc._showSidebar ? (null) :
-            <div style={{
+            <div className="sidebarAnnos-container" style={{
                 position: "absolute", pointerEvents: this.props.isContentActive() ? "all" : undefined, top: 0, right: 0,
                 background: this.props.styleProvider?.(this.props.rootDoc, this.props, StyleProp.WidgetColor),
                 width: `${this.panelWidth()}px`,
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 04e8b0dd5..e329af15c 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,10 +1,11 @@
-.MapBox {
+.mapBox {
     width: 100%;
     height: 100%;
     overflow: hidden;
     display: flex;
 
-    .MapBox-contents {
+
+    .mapBox-contents {
         width: 100%;
         height: 100%;
         overflow: hidden;
@@ -13,7 +14,7 @@
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
 
-        .map-wrapper {
+        .mapBox-wrapper {
             width: 100%;
             .searchbox {
                 box-sizing: border-box;
@@ -31,5 +32,17 @@
                 margin-left: -120px;
             }
         }
+
+        .mapBox-sidebar-handle {
+            position: absolute !important;
+            top: 0;
+            //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
+            width: 10px;
+            height: 100%;
+            max-height: 35px;
+            background: lightgray;
+            border-radius: 20px;
+            cursor:grabbing;
+        }
     }
 }
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
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<ViewBoxAnnotatableProps
                 rootDoc={this.rootDoc}
                 layoutDoc={this.layoutDoc}
                 dataDoc={this.dataDoc}
+                usePanelWidth={false}
                 whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                 sidebarAddDocument={this.sidebarAddDocument}
                 moveDocument={this.moveDocument}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index f5b1f96f2..ffa6593e5 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -552,6 +552,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     rootDoc={this.rootDoc}
                     layoutDoc={this.layoutDoc}
                     dataDoc={this.dataDoc}
+                    usePanelWidth={false}
                     sidebarAddDocument={this.sidebarAddDocument}
                     moveDocument={this.moveDocument}
                     removeDocument={this.removeDocument}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 8cac21927..6738d481d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1471,6 +1471,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                     rootDoc={this.rootDoc}
                     layoutDoc={this.layoutDoc}
                     dataDoc={this.dataDoc}
+                    usePanelWidth={true}
                     PanelWidth={this.sidebarWidth}
                     setHeight={this.setSidebarHeight}
                     sidebarAddDocument={this.sidebarAddDocument}