set default native width for maps. changed map css so sidebar will show up. fixed pointerEvents for map

3 files changed, 20 insertions, 15 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index adc66c916..27bef915d 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -458,7 +458,7 @@ export class CurrentUserUtils {
             doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, isTemplateDoc: true, _height: 512, _width: 400, useCors: true, system: true, cloneFieldFilter: new List<string>(["system"]) });
         }
         if (doc.emptyMap === undefined) {
-            doc.emptyMap = Docs.Create.MapDocument([], { title: "map", _width: 800, _height: 600, system: true, cloneFieldFilter: new List<string>(["system"]) });
+            doc.emptyMap = Docs.Create.MapDocument([], { title: "map", _showSidebar: true, _width: 800, _height: 600, system: true, cloneFieldFilter: new List<string>(["system"]) });
             ((doc.emptyMap as Doc).proto as Doc)["dragFactory-count"] = 0;
         }
         if (doc.activeMobileMenu === undefined) {
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 863907aaf..04e8b0dd5 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -2,16 +2,19 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    display: flex;
 
     .MapBox-contents {
         width: 100%;
         height: 100%;
         overflow: hidden;
+        display: flex;
         > div {
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
 
         .map-wrapper {
+            width: 100%;
             .searchbox {
                 box-sizing: border-box;
                 border: 1px solid transparent;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d52b91908..775cf03ca 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,22 +1,17 @@
-import { Autocomplete, GoogleMap, GoogleMapProps, InfoBox, InfoWindow, Marker } from '@react-google-maps/api';
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
+import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, Marker } from '@react-google-maps/api';
+import { action, IReactionDisposer, observable } from 'mobx';
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Doc, WidthSym } from '../../../../fields/Doc';
+import { Doc, WidthSym, HeightSym } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
 import { makeInterface } from '../../../../fields/Schema';
-import { Cast, NumCast, StrCast } from '../../../../fields/Types';
-import { setupMoveUpEvents, emptyFunction } from '../../../../Utils';
+import { NumCast } from '../../../../fields/Types';
+import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import { DragManager } from '../../../util/DragManager';
-import { undoBatch } from '../../../util/UndoManager';
-import { CollectionViewType } from '../../collections/CollectionView';
-import { TabDocView } from '../../collections/TabDocView';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
 import { SidebarAnnos } from '../../SidebarAnnos';
-import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '../FieldView';
-import { PresMovement } from '../PresBox';
-import "./MapBox.scss"
+import "./MapBox.scss";
 import { MapMarker } from './MapMarker';
 
 type MapDocument = makeInterface<[typeof documentSchema]>;
@@ -87,6 +82,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _sidebarRef = React.createRef<SidebarAnnos>();
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
 
+    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) => {
@@ -239,12 +243,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     render() {
-        const { Document, fieldKey, isContentActive: active } = this.props;
-
         return <div className="MapBox" ref={this._ref}>
             {/* HELLO WORLD! */}
             <div className={"MapBox-contents"}
-                style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
+                style={{ pointerEvents: this.isContentActive() ? undefined : "none" }}
                 onWheel={e => e.stopPropagation()}
                 onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
                 {/* // {/* <LoadScript