From 22ba42b2a44828d8d6284ea36d4f34b702ed6a4b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 30 Jul 2021 08:44:42 -0400
Subject: added sidebar button to mapBox

---
 src/client/views/nodes/MapBox/MapBox.scss |  19 +++++-
 src/client/views/nodes/MapBox/MapBox.tsx  | 101 ++++++++++++++++++------------
 2 files changed, 77 insertions(+), 43 deletions(-)

(limited to 'src/client/views/nodes/MapBox')

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
-- 
cgit v1.2.3-70-g09d2