aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-12-21 13:06:22 -0500
committerbobzel <zzzman@gmail.com>2023-12-21 13:06:22 -0500
commit2691b951d96f2ce7652acbea9e340b61737b3b57 (patch)
tree9f09df98a571541733980a10e681a52c6c76ce78
parentee53adac4d718ee5389b66e9b93ab1240565cd30 (diff)
added standard 3d gl view for maps. added close button for infoUI.
Diffstat
-rw-r--r--deploy/index.html1
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx10
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx103
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss3
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx7
5 files changed, 19 insertions, 105 deletions
diff --git a/deploy/index.html b/deploy/index.html
index 186c217d8..5e564e648 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -1,6 +1,7 @@
<html style="overflow: hidden">
<head>
<title>Dash</title>
+ <script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 10:32:53 +0000