From 3381bbb0ef5160707513f4bbbe551ca551b64b0d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 13 Nov 2021 10:38:53 -0500
Subject: change isContentActive to a tri-state to allow turning on/off and
 default - fixes issues with videobox and others so that content can be turned
 off reliably.   added annotation overlay for treeViews for ppt like slides. 
 lots of fixes to tree view to get layout to be more robust.

---
 src/client/views/collections/CollectionStackingView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 648ff5087..bffaf86b1 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -226,7 +226,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             layerProvider={this.props.layerProvider}
             docViewPath={this.props.docViewPath}
             fitWidth={this.props.childFitWidth}
-            isContentActive={returnFalse}
+            isContentActive={emptyFunction}
             isDocumentActive={this.isContentActive}
             LayoutTemplate={this.props.childLayoutTemplate}
             LayoutTemplateString={this.props.childLayoutString}
-- 
cgit v1.2.3-70-g09d2


From 639eb465369f89dc541dfbeeaed34dfe133a8810 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 7 Dec 2021 11:23:36 -0500
Subject: restored keeping properties pane open when selection changes.   added
 Doc paraemter to fitWidth() prop function.  split MapBoxInfoWindow out of
 MapBox and added an Add Note button.

---
 src/client/util/SelectionManager.ts                |   5 +-
 .../views/collections/CollectionStackingView.tsx   |  12 +-
 src/client/views/collections/CollectionView.tsx    |   2 +-
 src/client/views/nodes/DocumentView.tsx            |   4 +-
 src/client/views/nodes/MapBox/MapBox.scss          |   7 +
 src/client/views/nodes/MapBox/MapBox.tsx           | 194 +++++++--------------
 src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx |  86 +++++++++
 7 files changed, 162 insertions(+), 148 deletions(-)
 create mode 100644 src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 6674f684d..b71086561 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -44,11 +44,8 @@ export namespace SelectionManager {
         }
         @action
         DeselectAll(): void {
-            if (CurrentUserUtils.propertiesWidth > 0) {
-                CurrentUserUtils.propertiesWidth = 0;
-            }
             manager.SelectedSchemaDocument = undefined;
-            Array.from(manager.SelectedViews.keys()).map(dv => dv.props.whenChildContentsActiveChanged(false));
+            Array.from(manager.SelectedViews.keys()).forEach(dv => dv.props.whenChildContentsActiveChanged(false));
             manager.SelectedViews.clear();
         }
     }
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index bffaf86b1..eddb97878 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -231,8 +231,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             LayoutTemplate={this.props.childLayoutTemplate}
             LayoutTemplateString={this.props.childLayoutString}
             freezeDimensions={this.props.childFreezeDimensions}
-            NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.() || doc._fitWidth && !Doc.NativeWidth(doc) ? width : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
-            NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.() || doc._fitWidth && !Doc.NativeHeight(doc) ? height : undefined}
+            NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.(doc) || doc._fitWidth && !Doc.NativeWidth(doc) ? width : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
+            NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.(doc) || doc._fitWidth && !Doc.NativeHeight(doc) ? height : undefined}
             dontCenter={this.props.childIgnoreNativeSize ? "xy" : undefined}
             dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)}
             rootSelected={this.rootSelected}
@@ -271,7 +271,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         if (!d) return 0;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
         const maxWidth = this.columnWidth / this.numGroupColumns;
-        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.())) {
+        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
             return Math.min(d[WidthSym](), maxWidth);
         }
         return maxWidth;
@@ -281,8 +281,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
         const childDataDoc = (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc;
         const maxHeight = (lim => lim === 0 ? this.props.PanelWidth() : lim === -1 ? 10000 : lim)(NumCast(this.layoutDoc.childLimitHeight, -1));
-        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.()) ? d[WidthSym]() : 0);
-        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.()) ? d[HeightSym]() : 0);
+        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0);
+        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0);
         if (nw && nh) {
             const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
             const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
@@ -291,7 +291,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                 docWid * nh / nw);
         }
         const childHeight = NumCast(childLayoutDoc._height);
-        const panelHeight = (childLayoutDoc._fitWidth || this.props.childFitWidth?.()) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin;
+        const panelHeight = (childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin;
         return Math.min(childHeight, maxHeight, panelHeight);
     }
 
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 510ec6ba9..f66bac20e 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -70,7 +70,7 @@ export interface CollectionViewProps extends FieldViewProps {
     children?: never | (() => JSX.Element[]) | React.ReactNode;
     childDocuments?: Doc[]; // used to override the documents shown by the sub collection to an explicit list (see LinkBox)
     childDocumentsActive?: () => boolean;// whether child documents can be dragged if collection can be dragged (eg., in a when a Pile document is in startburst mode)
-    childFitWidth?: () => boolean;
+    childFitWidth?: (child: Doc) => boolean;
     childShowTitle?: () => string;
     childOpacity?: () => number;
     childContextMenuItems?: () => { script: ScriptField, label: string }[];
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 138bad9b8..9fc4b7890 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -118,7 +118,7 @@ export interface DocumentViewSharedProps {
     layerProvider: undefined | ((doc: Doc, assign?: boolean) => boolean);
     styleProvider: Opt<StyleProviderFunc>;
     focus: DocFocusFunc;
-    fitWidth?: () => boolean;
+    fitWidth?: (doc: Doc) => boolean;
     docFilters: () => string[];
     docRangeFilters: () => string[];
     searchFilterDocs: () => Doc[];
@@ -1140,7 +1140,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     get ComponentView() { return this.docView?._componentView; }
     get allLinks() { return this.docView?.allLinks || []; }
     get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; }
-    get fitWidth() { return this.props.fitWidth?.() || this.layoutDoc.fitWidth; }
+    get fitWidth() { return this.props.fitWidth?.(this.rootDoc) || this.layoutDoc.fitWidth; }
 
     @computed get docViewPath() { return this.props.docViewPath ? [...this.props.docViewPath(), this] : [this]; }
     @computed get layoutDoc() { return Doc.Layout(this.Document, this.props.LayoutTemplate?.()); }
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index f275bed54..1714fcaa9 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -8,6 +8,13 @@
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
 
+        .mapBox-infoWindow {
+            background-color: white;
+            opacity: 0.75;
+            padding: 12; 
+            font-size: 17;
+        }
+
         .mapBox-overlayButton-sidebar {
             background: #121721;
             height: 25px;
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
+}
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
new file mode 100644
index 000000000..e6f98e5cf
--- /dev/null
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -0,0 +1,86 @@
+import { InfoWindow } from '@react-google-maps/api';
+import { action, computed } from 'mobx';
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Doc } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
+import { emptyFunction, OmitKeys, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { CollectionStackingView } from '../../collections/CollectionStackingView';
+import { CollectionViewType } from '../../collections/CollectionView';
+import { ViewBoxAnnotatableProps } from '../../DocComponent';
+import { FieldViewProps } from '../FieldView';
+import { FormattedTextBox } from '../formattedText/FormattedTextBox';
+import "./MapBox.scss";
+
+
+interface MapBoxInfoWindowProps {
+    place: Doc;
+    renderDepth: number;
+    markerMap: { [id: string]: google.maps.Marker };
+    isAnyChildContentActive: () => boolean;
+}
+@observer
+export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & ViewBoxAnnotatableProps & FieldViewProps>{
+
+    @action
+    private handleInfoWindowClose = () => {
+        if (this.props.place.infoWindowOpen) {
+            this.props.place.infoWindowOpen = false;
+        }
+        this.props.place.infoWindowOpen = false;
+    }
+
+    addNoteClick = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => {
+            const newBox = Docs.Create.TextDocument("Note", { _autoHeight: true });
+            FormattedTextBox.SelectOnLoad = newBox[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
+            Doc.AddDocToList(this.props.place, "data", newBox);
+            e.stopPropagation();
+            e.preventDefault();
+        });
+    }
+
+    // Collection stacking view for documents in the infowindow of a map marker
+    @computed get renderChildDocs() {
+        return;
+    }
+    render() {
+        return <InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose} >
+            <div className="mapbox-infowindow">
+                <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
+                    <CollectionStackingView
+                        {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+                        Document={this.props.place}
+                        DataDoc={undefined}
+                        fieldKey="data"
+                        CollectionView={undefined}
+                        NativeWidth={returnZero}
+                        NativeHeight={returnZero}
+                        docFilters={returnEmptyFilter}
+                        setHeight={emptyFunction}
+                        isAnnotationOverlay={false}
+                        select={emptyFunction}
+                        scaling={returnOne}
+                        isContentActive={returnTrue}
+                        chromeHidden={true}
+                        rootSelected={returnFalse}
+                        childHideDecorationTitle={returnTrue}
+                        childFitWidth={doc => doc.type === DocumentType.RTF}
+                        // childDocumentsActive={returnFalse}
+                        removeDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, "data", d), true as boolean)}
+                        addDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, "data", d), true as boolean)}
+                        renderDepth={this.props.renderDepth + 1}
+                        viewType={CollectionViewType.Stacking}
+                        pointerEvents="all"
+                    />
+                </div>
+                <hr />
+                <div onPointerDown={this.addNoteClick} onClick={e => { e.stopPropagation(); e.preventDefault(); }} >
+                    Add Note
+                </div>
+            </div>
+        </InfoWindow>;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From f8ce34c8ed42646691d1e392effe79bc27daf810 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 8 Dec 2021 22:48:46 -0500
Subject: Added auto scroll to bottom of map info view stack when note is
 added.  hide resize handles for map view info window stack documents.

---
 src/client/views/collections/CollectionStackingView.tsx | 5 +++++
 src/client/views/collections/CollectionView.tsx         | 1 +
 src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx      | 6 ++++++
 3 files changed, 12 insertions(+)

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index eddb97878..cdc680a08 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -178,6 +178,10 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         return this.props.addDocTab(doc, where);
     }
 
+    scrollToBottom = () => {
+        smoothScroll(500, this._mainCont!, this._mainCont!.scrollHeight);
+    }
+
     focusDocument = (doc: Doc, options?: DocFocusOptions) => {
         Doc.BrushDoc(doc);
 
@@ -244,6 +248,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             focus={this.focusDocument}
             docFilters={this.childDocFilters}
             hideDecorationTitle={this.props.childHideDecorationTitle?.()}
+            hideResizeHandles={this.props.childHideResizeHandles?.()}
             hideTitle={this.props.childHideTitle?.()}
             docRangeFilters={this.childDocRangeFilters}
             searchFilterDocs={this.searchFilterDocs}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index f66bac20e..681a15e3d 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -76,6 +76,7 @@ export interface CollectionViewProps extends FieldViewProps {
     childContextMenuItems?: () => { script: ScriptField, label: string }[];
     childHideTitle?: () => boolean; // whether to hide the documentdecorations title for children
     childHideDecorationTitle?: () => boolean;
+    childHideResizeHandles?: () => boolean;
     childLayoutTemplate?: () => (Doc | undefined);// specify a layout Doc template to use for children of the collection
     childLayoutString?: string;
     childFreezeDimensions?: boolean; // used by TimeView to coerce documents to treat their width height as their native width/height
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
index e6f98e5cf..0d5fedb7b 100644
--- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -37,11 +37,15 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
             const newBox = Docs.Create.TextDocument("Note", { _autoHeight: true });
             FormattedTextBox.SelectOnLoad = newBox[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
             Doc.AddDocToList(this.props.place, "data", newBox);
+            this._stack?.scrollToBottom();
             e.stopPropagation();
             e.preventDefault();
         });
     }
 
+
+    _stack: CollectionStackingView | null | undefined;
+
     // Collection stacking view for documents in the infowindow of a map marker
     @computed get renderChildDocs() {
         return;
@@ -51,6 +55,7 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
             <div className="mapbox-infowindow">
                 <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
                     <CollectionStackingView
+                        ref={r => this._stack = r}
                         {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                         Document={this.props.place}
                         DataDoc={undefined}
@@ -66,6 +71,7 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
                         isContentActive={returnTrue}
                         chromeHidden={true}
                         rootSelected={returnFalse}
+                        childHideResizeHandles={returnTrue}
                         childHideDecorationTitle={returnTrue}
                         childFitWidth={doc => doc.type === DocumentType.RTF}
                         // childDocumentsActive={returnFalse}
-- 
cgit v1.2.3-70-g09d2

