fixed merge conflicts

1 files changed, 246 insertions, 54 deletions

diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx
index b67daeb53..7b7828d7d 100644
--- a/src/client/views/collections/CollectionMapView.tsx
+++ b/src/client/views/collections/CollectionMapView.tsx
@@ -1,71 +1,263 @@
+import { GoogleApiWrapper, Map as GeoMap, MapProps, Marker } from "google-maps-react";
 import { observer } from "mobx-react";
-import { makeInterface } from "../../../new_fields/Schema";
+import { Doc, Opt, DocListCast, FieldResult, Field } from "../../../new_fields/Doc";
 import { documentSchema } from "../../../new_fields/documentSchemas";
-import React = require("react");
-import { Map, Marker, MapProps, GoogleApiWrapper } from "google-maps-react";
-import { NumCast, StrCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { makeInterface } from "../../../new_fields/Schema";
+import { Cast, NumCast, ScriptCast, StrCast } from "../../../new_fields/Types";
+import "./CollectionMapView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { Utils } from "../../../Utils";
-import { Opt } from "../../../new_fields/Doc";
+import React = require("react");
+import { DocumentManager } from "../../util/DocumentManager";
+import { UndoManager, undoBatch } from "../../util/UndoManager";
+import { computed, runInAction, Lambda, action } from "mobx";
+import requestPromise = require("request-promise");
+
+type MapSchema = makeInterface<[typeof documentSchema]>;
+const MapSchema = makeInterface(documentSchema);
 
-type MapDocument = makeInterface<[typeof documentSchema]>;
-const MapDocument = makeInterface(documentSchema);
+export type LocationData = google.maps.LatLngLiteral & {
+    address?: string
+    resolvedAddress?: string;
+    zoom?: number;
+};
 
-export type LocationData = google.maps.LatLngLiteral & { address?: string };
+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;
+    }
+};
 
 @observer
-class CollectionMapView extends CollectionSubView<MapDocument, Partial<MapProps> & { google: any }>(MapDocument) {
+class CollectionMapView extends CollectionSubView<MapSchema, Partial<MapProps> & { google: any }>(MapSchema) {
+
+    private _cancelAddrReq = new Map<string, boolean>();
+    private _cancelLocReq = new Map<string, boolean>();
+    private _initialLookupPending = new Map<string, boolean>();
+    private responders: { location: Lambda, address: 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, "title", 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;
+    }
+
+    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 DocumentManager.Instance.FollowLink(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();
+        }
+    }
+
+    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) => {
+        const location = this.getLocation(layout, Doc.LayoutFieldKey(layout));
+        return !location ? (null) :
+            <Marker
+                key={layout[Id]}
+                label={StrCast(layout.title)}
+                position={location}
+                onClick={() => this.markerClick(layout, location)}
+                icon={this.renderMarkerIcon(layout)}
+            />;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    @computed get reactiveContents() {
+        this.responders.forEach(({ location, address }) => { location(); address(); });
+        this.responders = [];
+        return this.childLayoutPairs.map(({ layout }) => {
+            const fieldKey = Doc.LayoutFieldKey(layout);
+            const id = layout[Id];
+            this.responders.push({
+                location: 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);
+                        }
+                    }),
+                address: 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, props } = this;
-        const { Document } = props;
-        const center: LocationData = { lat: NumCast(Document.mapCenterLat), lng: NumCast(Document.mapCenterLng) };
-        if (!center.lat) {
-            center.lat = childLayoutPairs.length ? NumCast(childLayoutPairs[0].layout.locationLat, 0) : 0;
-            center.lng = childLayoutPairs.length ? NumCast(childLayoutPairs[0].layout.locationLng, 0) : 0;
+        const { childLayoutPairs } = this;
+        const { Document, fieldKey, active, google } = this.props;
+        let center = this.getLocation(Document, `${fieldKey}-mapCenter`, false);
+        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-contents"}
-            >
-                <Map
-                    {...props}
-                    zoom={NumCast(Document.zoom, 10)}
-                    center={center}
+        return <div className="collectionMapView" ref={this.createDashEventsTarget}>
+            <div className={"collectionMapView-contents"}
+                style={{ pointerEvents: active() ? undefined : "none" }}
+                onWheel={e => e.stopPropagation()}
+                onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
+                <GeoMap
+                    google={google}
+                    zoom={center.zoom || 10}
                     initialCenter={center}
-                >
-                    {childLayoutPairs.map(({ layout }) => {
-                        const location: LocationData = {
-                            lat: NumCast(childLayoutPairs[0].layout.locationLat, 0),
-                            lng: NumCast(childLayoutPairs[0].layout.locationLng, 0)
-                        };
-                        let icon: Opt<google.maps.Icon>, iconUrl: Opt<string>;
-                        if ((iconUrl = StrCast(Document.mapIconUrl, null))) {
-                            const iconSize = new google.maps.Size(NumCast(layout.mapIconWidth, 45), NumCast(layout.mapIconHeight, 45));
-                            icon = {
-                                size: iconSize,
-                                scaledSize: iconSize,
-                                url: iconUrl
-                            };
+                    center={center}
+                    onIdle={(_props?: MapProps, 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;
+                            }))();
                         }
-                        return (
-                            <Marker
-                                key={Utils.GenerateGuid()}
-                                label={StrCast(layout.title)}
-                                position={location}
-                                onClick={() => {
-                                    Document.mapCenterLat = location.lat;
-                                    Document.mapCenterLng = location.lng;
-                                }}
-                                icon={icon}
-                            />
-                        );
-                    })}
-                </Map>
+                    }}
+                    onDragend={(_props?: MapProps, 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());
+                        }
+                    }}
+                >
+                    {this.reactiveContents}
+                </GeoMap>
             </div>
-        );
+        </div>;
     }
 
 }
 
-export default GoogleApiWrapper({ apiKey: process.env.GOOGLE_MAPS! })(CollectionMapView) as any;
\ No newline at end of file
+export default GoogleApiWrapper({
+    apiKey: process.env.GOOGLE_MAPS!,
+    LoadingContainer: () => (
+        <div className={"loadingWrapper"}>
+            <img className={"loadingGif"} src={"/assets/loading.gif"} />
+        </div>
+    )
+})(CollectionMapView) as any;
\ No newline at end of file