overflow issue

2 files changed, 101 insertions, 227 deletions

diff --git a/src/client/views/collections/CollectionMapView.scss b/src/client/views/collections/CollectionMapView.scss
index 870b7fda8..e87c02611 100644
--- a/src/client/views/collections/CollectionMapView.scss
+++ b/src/client/views/collections/CollectionMapView.scss
@@ -1,6 +1,7 @@
 .collectionMapView {
     width: 100%;
     height: 100%;
+    overflow: hidden;
 
     .collectionMapView-contents {
         width: 100%;
@@ -8,6 +9,16 @@
         > div {
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
+
+        .dash-label {
+            position: absolute;
+            top: 1rem;
+            left: 5rem;
+            color: black;
+            z-index: 10;
+            margin: 0;
+            padding: 0;
+        }
     }
 }
 
@@ -27,4 +38,4 @@
         width: 50px;
         height: 50px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx
index 2d7569d45..2203176de 100644
--- a/src/client/views/collections/CollectionMapView.tsx
+++ b/src/client/views/collections/CollectionMapView.tsx
@@ -1,4 +1,4 @@
-import { GoogleApiWrapper, IMapProps, Map as GeoMap, Marker } from "google-maps-react";
+import { GoogleMap, Marker, InfoWindow, LoadScript, GoogleMapProps } from '@react-google-maps/api';
 import { action, computed, Lambda, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../fields/Doc";
@@ -22,248 +22,111 @@ export type LocationData = google.maps.LatLngLiteral & {
     zoom?: number;
 };
 
-interface DocLatLng {
-    lat: FieldResult<Field>;
-    lng: FieldResult<Field>;
-}
-
-// Nowhere, Oklahoma
-const defaultLocation = { lat: 35.1592238, lng: -98.444512, zoom: 15 };
-const noResults = "ZERO_RESULTS";
-
-const query = async (data: string | google.maps.LatLngLiteral) => {
-    const contents = typeof data === "string" ? `address=${data.replace(/\s+/g, "+")}` : `latlng=${data.lat},${data.lng}`;
-    const target = `https://maps.googleapis.com/maps/api/geocode/json?${contents}&key=${process.env.GOOGLE_MAPS_GEO}`;
-    try {
-        return JSON.parse(await requestPromise.get(target));
-    } catch {
-        return undefined;
-    }
+const mapContainerStyle = {
+    width: '100%',
+    heiht: '100%',
+    overflow: 'hidden',
 };
 
-@observer
-export class CollectionMapView extends CollectionSubView<MapSchema, Partial<IMapProps> & { google: any }>(MapSchema) {
-
-    private _cancelAddrReq = new Map<string, boolean>();
-    private _cancelLocReq = new Map<string, boolean>();
-    private _initialLookupPending = new Map<string, boolean>();
-    private responders: { locationDisposer: Lambda, addressDisposer: Lambda }[] = [];
 
-    /**
-     * Note that all the uses of runInAction below are not included
-     * as a way to update observables (documents handle this already
-     * in their property setters), but rather to create a single bulk
-     * update and thus prevent uneeded invocations of the location-
-     * and address–updating reactions. 
-     */
-
-    private getLocation = (doc: Opt<Doc>, fieldKey: string, returnDefault: boolean = true): Opt<LocationData> => {
-        if (doc) {
-            const titleLoc = StrCast(doc.title).startsWith("@") ? StrCast(doc.title).substring(1) : undefined;
-            const lat = Cast(doc[`${fieldKey}-lat`], "number", null) || (Cast(doc[`${fieldKey}-lat`], "string", null) && Number(Cast(doc[`${fieldKey}-lat`], "string", null))) || undefined;
-            const lng = Cast(doc[`${fieldKey}-lng`], "number", null) || (Cast(doc[`${fieldKey}-lng`], "string", null) && Number(Cast(doc[`${fieldKey}-lng`], "string", null))) || undefined;
-            const zoom = Cast(doc[`${fieldKey}-zoom`], "number", null) || (Cast(doc[`${fieldKey}-zoom`], "string", null) && Number(Cast(doc[`${fieldKey}-zoom`], "string", null))) || undefined;
-            const address = titleLoc || StrCast(doc[`${fieldKey}-address`], StrCast(doc.title).replace(/^-/, ""));
-            if (titleLoc || (address && (lat === undefined || lng === undefined))) {
-                const id = doc[Id];
-                if (!this._initialLookupPending.get(id)) {
-                    this._initialLookupPending.set(id, true);
-                    setTimeout(() => {
-                        titleLoc && Doc.SetInPlace(doc, `${fieldKey}-address`, titleLoc, true);
-                        this.respondToAddressChange(doc, fieldKey, address).then(() => this._initialLookupPending.delete(id));
-                    });
-                }
-            }
-            return (lat === undefined || lng === undefined) ? (returnDefault ? defaultLocation : undefined) : { lat, lng, zoom };
-        }
-        return undefined;
-    }
+const defaultCenter = {
+    lat: 0,
+    lng: 0,
+}
+//-----------------------------test map marker-----------------------------------
+// const map = new google.maps.Map(document.getElementById('map')!, {
+//     zoom: 10,
+//     center: new google.maps.LatLng(-33.92, 151.25),
+//     mapTypeId: google.maps.MapTypeId.ROADMAP
+// });
+
+// // test display markers
+// let locations = [
+//     ['Bondi Beach', -33.890542, 151.274856, 4],
+//     ['Coogee Beach', -33.923036, 151.259052, 5],
+//     ['Cronulla Beach', -34.028249, 151.157507, 3],
+//     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
+//     ['Maroubra Beach', -33.950198, 151.259302, 1]
+// ];
+
+// const infowindow = new google.maps.InfoWindow();
+// let marker: google.maps.Marker
+// let i: number
+
+// for (i = 0; i < locations.length; i++) {
+//     marker = new google.maps.Marker({
+//         position: new google.maps.LatLng(locations[i][1] as number, locations[i][2] as number),
+//         map: map
+//     });
+
+//     google.maps.event.addListener(marker, 'click', (function (marker, i) {
+//         return function () {
+//             infowindow.setContent(locations[i][0] as string);
+//             infowindow.open(map, marker);
+//         }
+//     })(marker, i));
+// }
+
+//----------------------------------------------------------------
 
-    private markerClick = async (layout: Doc, { lat, lng, zoom }: LocationData) => {
-        const batch = UndoManager.StartBatch("marker click");
-        const { fieldKey } = this.props;
-        runInAction(() => {
-            this.layoutDoc[`${fieldKey}-mapCenter-lat`] = lat;
-            this.layoutDoc[`${fieldKey}-mapCenter-lng`] = lng;
-            zoom && (this.layoutDoc[`${fieldKey}-mapCenter-zoom`] = zoom);
-        });
-        if (layout.isLinkButton && DocListCast(layout.links).length) {
-            await LinkManager.traverseLink(undefined, layout, (doc: Doc, where: string, finished?: () => void) => {
-                this.props.addDocTab(doc, where);
-                finished?.();
-            }, false, this.props.ContainingCollectionDoc, batch.end, undefined);
-        } else {
-            ScriptCast(layout.onClick)?.script.run({ this: layout, self: Cast(layout.rootDocument, Doc, null) || layout });
-            batch.end();
-        }
-    }
+@observer
+export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) {
 
-    private renderMarkerIcon = (layout: Doc) => {
-        const { Document } = this.props;
-        const fieldKey = Doc.LayoutFieldKey(layout);
-        const iconUrl = StrCast(layout.mapIconUrl, StrCast(Document.mapIconUrl));
-        if (iconUrl) {
-            const iconWidth = NumCast(layout[`${fieldKey}-iconWidth`], 45);
-            const iconHeight = NumCast(layout[`${fieldKey}-iconHeight`], 45);
-            const iconSize = new google.maps.Size(iconWidth, iconHeight);
-            return {
-                size: iconSize,
-                scaledSize: iconSize,
-                url: iconUrl
-            };
-        }
-    }
 
-    private renderMarker = (layout: Doc, fieldKey?: string) => {
-        const location = this.getLocation(layout, fieldKey || Doc.LayoutFieldKey(layout));
-        return !location ? (null) :
-            <Marker
-                key={layout[Id]}
-                label={StrCast(layout[`${this.props.fieldKey}-address`])}
-                position={location}
-                onClick={() => this.markerClick(layout, location)}
-                icon={this.renderMarkerIcon(layout)}
-            />;
-    }
+    render() {
+        const { childLayoutPairs } = this;
+        const { Document, fieldKey, isContentActive: active } = this.props;
 
-    private respondToAddressChange = async (doc: Doc, fieldKey: string, newAddress: string, oldAddress?: string) => {
-        if (newAddress === oldAddress) {
-            return false;
-        }
-        const response = await query(newAddress);
-        const id = doc[Id];
-        if (!response || response.status === noResults) {
-            this._cancelAddrReq.set(id, true);
-            doc[`${fieldKey}-address`] = oldAddress;
-            return false;
-        }
-        const { geometry, formatted_address } = response.results[0];
-        const { lat, lng } = geometry.location;
-        runInAction(() => {
-            if (doc[`${fieldKey}-lat`] !== lat || doc[`${fieldKey}-lng`] !== lng) {
-                this._cancelLocReq.set(id, true);
-                Doc.SetInPlace(doc, `${fieldKey}-lat`, lat, true);
-                Doc.SetInPlace(doc, `${fieldKey}-lng`, lng, true);
-            }
-            if (formatted_address !== newAddress) {
-                this._cancelAddrReq.set(id, true);
-                Doc.SetInPlace(doc, `${fieldKey}-address`, formatted_address, true);
-            }
-        });
-        return true;
-    }
+        // const { isLoaded, loadError } = useLoadScript({
+        //     googleMapsApiKey: 'AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg',
+        //     libraries: ['places']
+        // })
 
-    private respondToLocationChange = async (doc: Doc, fieldKey: string, newLatLng: DocLatLng, oldLatLng: Opt<DocLatLng>) => {
-        if (newLatLng === oldLatLng) {
-            return false;
-        }
-        const response = await query({ lat: NumCast(newLatLng.lat), lng: NumCast(newLatLng.lng) });
-        const id = doc[Id];
-        if (!response || response.status === noResults) {
-            this._cancelLocReq.set(id, true);
-            runInAction(() => {
-                doc[`${fieldKey}-lat`] = oldLatLng?.lat;
-                doc[`${fieldKey}-lng`] = oldLatLng?.lng;
-            });
-            return false;
-        }
-        const { formatted_address } = response.results[0];
-        if (formatted_address !== doc[`${fieldKey}-address`]) {
-            this._cancelAddrReq.set(doc[Id], true);
-            Doc.SetInPlace(doc, `${fieldKey}-address`, formatted_address, true);
-        }
-        return true;
-    }
+        // if (loadError) return "Error loading maps";
+        // if (!isLoaded) return "Loading Maps";
 
-    @computed get reactiveContents() {
-        this.responders.forEach(({ locationDisposer, addressDisposer }) => {
-            locationDisposer();
-            addressDisposer();
-        });
-        this.responders = [];
-        return this.childLayoutPairs.map(({ layout }) => {
-            const fieldKey = Doc.LayoutFieldKey(layout);
-            const id = layout[Id];
-            this.responders.push({
-                locationDisposer: computed(() => ({ lat: layout[`${fieldKey}-lat`], lng: layout[`${fieldKey}-lng`] }))
-                    .observe(({ oldValue, newValue }) => {
-                        if (this._cancelLocReq.get(id)) {
-                            this._cancelLocReq.set(id, false);
-                        } else if (newValue.lat !== undefined && newValue.lng !== undefined) {
-                            this.respondToLocationChange(layout, fieldKey, newValue, oldValue);
-                        }
-                    }),
-                addressDisposer: computed(() => Cast(layout[`${fieldKey}-address`], "string", null))
-                    .observe(({ oldValue, newValue }) => {
-                        if (this._cancelAddrReq.get(id)) {
-                            this._cancelAddrReq.set(id, false);
-                        } else if (newValue?.length) {
-                            this.respondToAddressChange(layout, fieldKey, newValue, oldValue);
-                        }
-                    })
-            });
-            return this.renderMarker(layout);
-        });
-    }
 
-    render() {
-        const { childLayoutPairs } = this;
-        const { Document, fieldKey, isContentActive: active, google } = this.props;
-        const mapLoc = this.getLocation(this.rootDoc, `${fieldKey}-mapCenter`, false);
-        let center = mapLoc;
-        if (center === undefined) {
-            const childLocations = childLayoutPairs.map(({ layout }) => this.getLocation(layout, Doc.LayoutFieldKey(layout), false));
-            center = childLocations.find(location => location) || defaultLocation;
-        }
         return <div className="collectionMapView" ref={this.createDashEventsTarget}>
+
             <div className={"collectionMapView-contents"}
-                style={{ pointerEvents: active() ? undefined : "none" }}
+                style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
                 onWheel={e => e.stopPropagation()}
                 onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
-                <GeoMap
-                    google={google}
-                    zoom={center.zoom || 10}
-                    initialCenter={center}
-                    center={center}
-                    onIdle={(_props?: IMapProps, map?: google.maps.Map) => {
-                        if (this.layoutDoc._lockedTransform) {
-                            // reset zoom (ideally, we could probably can tell the map to disallow zooming somehow instead)
-                            map?.setZoom(center?.zoom || 10);
-                            map?.setCenter({ lat: center?.lat!, lng: center?.lng! });
-                        } else {
-                            const zoom = map?.getZoom();
-                            (center?.zoom !== zoom) && undoBatch(action(() => {
-                                Document[`${fieldKey}-mapCenter-zoom`] = zoom;
-                            }))();
-                        }
-                    }}
-                    onDragend={(_props?: IMapProps, map?: google.maps.Map) => {
-                        if (this.layoutDoc._lockedTransform) {
-                            // reset the drag (ideally, we could probably can tell the map to disallow dragging somehow instead)
-                            map?.setCenter({ lat: center?.lat!, lng: center?.lng! });
-                        } else {
-                            undoBatch(action(({ lat, lng }) => {
-                                Document[`${fieldKey}-mapCenter-lat`] = lat();
-                                Document[`${fieldKey}-mapCenter-lng`] = lng();
-                            }))(map?.getCenter());
-                        }
-                    }}
+                <h1 className="dash-label">
+                    Dash!
+                </h1>
+                <LoadScript
+                    // googleMapsApiKey='AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg'
+                    googleMapsApiKey={process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY!}
+                    libraries={['places']}
                 >
-                    {this.reactiveContents}
-                    {mapLoc && StrCast(this.rootDoc[`${fieldKey}-mapCenter-address`]) ? this.renderMarker(this.rootDoc, `${fieldKey}-mapCenter`) : undefined}
-                </GeoMap>
+                    <GoogleMap
+                        mapContainerStyle={mapContainerStyle}
+                        zoom={5}
+                        center={defaultCenter}
+                    >
+                        <Marker
+                            // name={'SOMA'}
+                            position={{ lat: 37.778519, lng: -122.405640 }} />
+                        <Marker
+                            // name={'Dolores park'}
+                            position={{ lat: 47.617701, lng: -122.359485 }} />
+
+                    </GoogleMap>
+                </LoadScript >
             </div>
-        </div>;
+        </div >;
     }
 
 }
 
-export default GoogleApiWrapper({
-    apiKey: process.env.GOOGLE_MAPS!,
-    LoadingContainer: () => {
-        console.log(process.env.GOOGLE_MAPS);
-        return <div className={"loadingWrapper"}>
-            <img className={"loadingGif"} src={"/assets/loading.gif"} />
-        </div>;
-    }
-})(CollectionMapView) as any;
\ No newline at end of file
+// export default GoogleApiWrapper({
+//     // apiKey: process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY!,
+//     apiKey: 'AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg',
+//     LoadingContainer: () => {
+//         console.log(process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY);
+//         return <div className={"loadingWrapper"}>
+//             <img className={"loadingGif"} src={"/assets/loading.gif"} />
+//         </div>;
+//     }
+// })(CollectionMapView) as any;
\ No newline at end of file