fixed display of documents anchored on a map marker. fixed adding documents with same geolcoation to end up on the same marker.

2 files changed, 61 insertions, 78 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c9b246c10..5d33f6b1c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -824,13 +824,13 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     }
     setContentView = action((view: { getAnchor?: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view);
     isContentActive = (outsideReaction?: boolean) => {
-        return CurrentUserUtils.SelectedTool !== InkTool.None ||
+        return (CurrentUserUtils.SelectedTool !== InkTool.None ||
             SnappingManager.GetIsDragging() ||
-            this.props.rootSelected() ||
+            this.rootSelected() ||
             this.props.Document.forceActive ||
             this.props.isSelected(outsideReaction) ||
             this._componentView?.isAnyChildContentActive?.() ||
-            this.props.isContentActive() ? true : false;
+            this.props.isContentActive() ? true : false);
     }
     @computed get contents() {
         TraceMobx();
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index ba6cdc2db..418309219 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,35 +1,33 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, Marker } from '@react-google-maps/api';
 import { action, computed, IReactionDisposer, observable, ObservableMap } from 'mobx';
 import { observer } from "mobx-react";
 import * as React from "react";
-import { DataSym, Doc, DocListCast, FieldsSym, Opt, WidthSym } from '../../../../fields/Doc';
+import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
+import { Id } from '../../../../fields/FieldSymbols';
+import { InkTool } from '../../../../fields/InkField';
 import { makeInterface } from '../../../../fields/Schema';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, OmitKeys, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils';
-import { Docs, DocUtils } from '../../../documents/Documents';
+import { TraceMobx } from '../../../../fields/util';
+import { emptyFunction, OmitKeys, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
+import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
 import { DragManager } from '../../../util/DragManager';
+import { SnappingManager } from '../../../util/SnappingManager';
+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';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
+import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '../FieldView';
 import "./MapBox.scss";
 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';
-import { TraceMobx } from '../../../../fields/util';
-import { SnappingManager } from '../../../util/SnappingManager';
-import { InkTool } from '../../../../fields/InkField';
-import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
-import { CollectionFreeFormView, MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
-import { MarqueeAnnotator } from '../../MarqueeAnnotator';
-import { Annotation } from '../../pdf/Annotation';
-import { DocumentView } from '../DocumentView';
-import { Transform } from '../../../util/Transform';
 const _global = (window /* browser */ || global /* node */) as any;
 
 type MapDocument = makeInterface<[typeof documentSchema]>;
@@ -85,8 +83,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     @observable private _overlayAnnoInfo: Opt<Doc>;
     showInfo = action((anno: Opt<Doc>) => this._overlayAnnoInfo = anno);
-    @observable _windowWidth: number = 0;
-    @observable _windowHeight: number = 0;
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MapBox, fieldKey); }
     public get SidebarKey() { return this.fieldKey + "-sidebar"; }
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean) => void);
@@ -285,8 +281,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const docs = doc instanceof Doc ? [doc] : doc
         docs.forEach(doc => {
             if (doc.lat !== undefined && doc.lng !== undefined) {
-                const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [doc], {})
-                this.addDocument(marker, this.annotationKey)
+                const existingMarker = this.allMapMarkers.find(marker => marker.lat === doc.lat && marker.lng == doc.lng);
+                if (existingMarker) {
+                    Doc.AddDocToList(existingMarker, "data", doc);
+                } else {
+                    const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [doc], {});
+                    this.addDocument(marker, this.annotationKey);
+                }
             }
         }) //add to annotation list
         console.log("sidebaraddDocument");
@@ -471,48 +472,40 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return anchor;
     }
 
+    infoWidth = () => this.props.PanelWidth() / 5;
+    infoHeight = () => this.props.PanelWidth() / 5;
+
     //documentView 
     private renderChildDocs = (selectedDoc: Doc) => {
-        console.log("markerIdToMapMarker is:")
-        console.log(this.markerIdToMapMarker);
-        return <div>
-            {DocListCast(selectedDoc.data).map(doc =>
-                <DocumentView
-                    key={doc[Id]}
-                    Document={doc}
-                    moveDocument={returnFalse}
-                    rootSelected={returnFalse}
-                    styleProvider={this.props.styleProvider}
-                    layerProvider={this.props.layerProvider}
-                    docViewPath={returnEmptyDoclist}
-                    ScreenToLocalTransform={Transform.Identity}
-                    isDocumentActive={returnFalse}
-                    isContentActive={returnFalse}
-                    addDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    addDocTab={returnFalse}
-                    pinToPres={returnFalse}
-                    dontRegisterView={true}
-                    docFilters={returnEmptyFilter}
-                    docRangeFilters={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    ContainingCollectionDoc={undefined}
-                    ContainingCollectionView={undefined}
-                    renderDepth={-1}
-                    //TODO
-                    PanelWidth={() => this._windowWidth}
-                    PanelHeight={() => this._windowHeight || 200}
-                    focus={DocUtils.DefaultFocus}
-                    whenChildContentsActiveChanged={returnFalse}
-                    bringToFront={returnFalse}
-                    //TODO
-                    NativeWidth={Doc.NativeWidth(doc) ? () => Doc.NativeWidth(doc) : undefined}
-                    NativeHeight={Doc.NativeHeight(doc) ? () => Doc.NativeHeight(doc) : undefined}
-                />
-            )}
-        </div>
-
-
+        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"}
+            /></div>;
     }
 
     /**
@@ -536,26 +529,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 anchor={this.markerMap[this.selectedPlace[Id]]}
                 onCloseClick={this.handleInfoWindowClose}
             >
-                <div className="mapbox-infowindow" style={{ backgroundColor: 'white', opacity: 0.75, padding: 12, fontSize: 17 }} ref={r => {
-                    r && new _global.ResizeObserver(action(() => {
-                        this._windowWidth = r.getBoundingClientRect().width;
-                        this._windowHeight = r.getBoundingClientRect().height;
-                        console.log(r.getBoundingClientRect())
-                    })).observe(r);
-                }
-                }>
-
-                    {this.renderChildDocs(this.selectedPlace)}
-
-                    <hr />
+                <div className="mapbox-infowindow" style={{ backgroundColor: 'white', opacity: 0.75, padding: 12, fontSize: 17 }}>
                     <form>
                         <label>Title: </label><br />
                         <input type="text" id="title" name="title"></input><br />
                         <label>Desription: </label><br />
-                        <textarea style={{ height: 150 }} id="description" name="description" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea>
-                        <button type="submit">Save</button>
+                        <textarea style={{ height: 75, width: "100%" }} id="description" name="description" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea>
                     </form>
                     <hr />
+                    {this.renderChildDocs(this.selectedPlace)}
+                    <hr />
                     <div>
                         <button>New link+</button>
                     </div>