added standard 3d gl view for maps. added close button for infoUI.

4 files changed, 18 insertions, 105 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 763d14116..d9f7ca6ea 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -1,6 +1,8 @@
-import { IReactionDisposer, makeObservable, reaction } from 'mobx';
+import { IconButton, Size, Type } from 'browndash-components';
+import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
 // import assets from './assets/link.png';
@@ -54,6 +56,7 @@ export interface CollectionFreeFormInfoStateProps {
 @observer
 export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
+    @observable _hide = false;
 
     constructor(props: any) {
         super(props);
@@ -96,11 +99,14 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
     render() {
         return (
-            <div className="infoUI">
+            <div className="collectionFreeform-infoUI" style={{display:this._hide ? 'none':undefined}}>
                 <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
                     <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img>
                 </div>
+               <div style={{position:"absolute", top:-10, left:-10}}>
+                   <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this._hide = true)} />
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 6a9c96854..181f325f3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -2,15 +2,14 @@ import { IReactionDisposer, makeObservable, observable, runInAction } from 'mobx
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Field, FieldResult } from '../../../../fields/Doc';
+import { InkTool } from '../../../../fields/InkField';
+import { DocumentManager } from '../../../util/DocumentManager';
 import { LinkManager } from '../../../util/LinkManager';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
-import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { CollectionFreeFormInfoState, InfoState, infoState, StateEntryFunc } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
-import { InkTool } from '../../../../fields/InkField';
-import { DocumentManager } from '../../../util/DocumentManager';
-import TrailsIcon from '../../nodes/FontIconBox/TrailsIcon';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -19,7 +18,7 @@ export interface CollectionFreeFormInfoUIProps {
 
 @observer
 export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> {
-    private _disposers: { [name: string]: IReactionDisposer } = {};
+    _firstDocPos = { x: 0, y: 0 };
 
     constructor(props: any) {
         super(props);
@@ -225,98 +224,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         return start;
     };
 
-    /*
-    componentDidMount(): void {
-        this._disposers.reaction1 = reaction(
-            () => this._props.Freeform.childDocs.slice(),
-            docs => {
-                if (docs.length === 1) {
-                    this.firstDoc = docs[0];
-                    this.firstDocPos = { x: NumCast(this.firstDoc.x), y: NumCast(this.firstDoc.y) };
-                    this.message = 'Hello world! You can drag and drop to move your document around.';
-                } else if (docs.length === 2) {
-                    this.message = 'Great job. To create a new link between them, click the link icon on both documents.';
-                } else {
-                    // this.message = 'Click anywhere and begin typing to create your first text document!';
-                }
-            },
-            { fireImmediately: true }
-        );
-        this._disposers.reaction2 = reaction(
-            () => ({ x: NumCast(this.firstDoc?.x), y: NumCast(this.firstDoc?.y), links: this.firstDoc && LinkManager.Instance.getAllDirectLinks(this.firstDoc) }),
-            ({ x, y, links }) => {
-                if ((x && x != this.firstDocPos.x) || (y && y != this.firstDocPos.y)) {
-                    this.message = 'Great moves. Try creating a second document.';
-                }
-                if (links && links.length > 0) {
-                    this.message = 'You made your first link! You can view your links by selecting the blue dot.';
-                }
-            },
-            { fireImmediately: true }
-        );
-        this._disposers.reaction3 = reaction(
-            () => ({ activeTool: Doc.ActiveTool, viewingLinks: DocumentLinksButton.LinkEditorDocView }),
-            ({ activeTool, viewingLinks }) => {
-                if (activeTool == InkTool.Pen) {
-                    this.message = "You're in pen mode! Click and drag to draw your first masterpiece.";
-                }
-                if (viewingLinks) {
-                    this.message = 'To edit your links, click the pencil icon.';
-                }
-                if (Doc.ActiveTool === InkTool.Pen) {
-                    this.message = 'Editing links';
-                }
-            },
-            { fireImmediately: true }
-        );
-        this._disposers.reaction4 = reaction(
-            () => ({ startLink: DocumentLinksButton.StartLink, endLink: Doc.UserDoc().links }),
-            ({ startLink, endLink }) => {
-                if (startLink) {
-                    this.message = "You've started a link.";
-                } else if (endLink) {
-                    this.message = "You've completed a link.";
-                }
-            }
-        );
-        this._disposers.reaction5 = reaction(
-            () => ({ pin: Doc.ActivePresentation?.data, trails: DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails) }),
-            ({ pin, trails }) => {
-                // if (pin) {
-                //     this.message = 'You pinned your doc to a trail.';
-                // }
-                if (trails) {
-                    this.message = 'This is your trails tab.';
-                }
-            }
-        );
-        this._disposers.reaction6 = reaction(
-            () => ({ presentationMode: Doc.ActivePresentation?.presentation_status }),
-            ({ presentationMode }) => {
-                if (presentationMode === 'edit') {
-                    this.message = 'You are editing your presentation.';
-                } else if (presentationMode === 'manual') {
-                    this.message = 'Manual presentation mode';
-                } else if (presentationMode === 'auto') {
-                    this.message = 'Auto presentation mode';
-                }
-            }
-        );
-    }
-
-    componentWillUnmount(): void {
-        Object.values(this._disposers).forEach(disposer => disposer?.());
-    }
-
-    // stop reaction from what it's currently doing
-    // this._disposers.reaction1();
-
-    @observable message = 'Click anywhere and begin typing to create your first document!';
-    @observable firstDoc: Doc | undefined = undefined;
-    @observable secondDoc: Doc | undefined = undefined;
-    */
-    firstDocPos = { x: 0, y: 0 };
-
     render() {
         return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />;
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 3e0236776..7d3acaea7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -256,11 +256,10 @@
     position: absolute;
 }
 
-.infoUI {
+.collectionFreeform-infoUI {
     position: absolute;
     display: block;
     top: 0;
-    overflow: auto;
 
     color: white;
     background-color: #5075ef;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 562cb63d1..7db139d74 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -31,7 +31,7 @@ import { Checkbox, FormControlLabel, TextField } from '@mui/material';
 import * as turf from '@turf/turf';
 import * as d3 from 'd3';
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson';
-import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from '!mapbox-gl';
+import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl';
 import { CirclePicker, ColorResult } from 'react-color';
 import { MarkerEvent } from 'react-map-gl/dist/esm/types';
 import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons';
@@ -1434,7 +1434,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <div id="divider">|</div>
                         <div style={{display: 'flex', alignItems: 'center'}}>
                             <div>Select Line Color: </div>
-                            <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
+                            <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color:any) => this.setAnimationLineColor(color)} />
                         </div>
                         
                     </div>
@@ -1455,7 +1455,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     settingsOpen: boolean = false;
 
     @observable
-    mapStyle: string = 'mapbox://styles/mapbox/streets-v12';
+    mapStyle: string = 'mapbox://styles/mapbox/standard';
 
     @observable
     showTerrain: boolean = true;
@@ -1588,6 +1588,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 <div>Map Style:</div>
                                 <div>
                                     <select onChange={this.changeMapStyle} value={StrCast(this.dataDoc.map_style)}>
+                                        <option value="mapbox://styles/mapbox/standard">Standard</option>
                                         <option value="mapbox://styles/mapbox/streets-v11">Streets</option>
                                         <option value="mapbox://styles/mapbox/outdoors-v12">Outdoors</option>
                                         <option value="mapbox://styles/mapbox/light-v11">Light</option>