From e4eac6e4256dc320f6c767ecbad54b83459c4331 Mon Sep 17 00:00:00 2001 From: zaultavangar Date: Mon, 11 Dec 2023 14:46:58 -0500 Subject: updates to map feature --- deploy/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'deploy') diff --git a/deploy/index.html b/deploy/index.html index b345e193f..186c217d8 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -1,6 +1,7 @@ Dash + Date: Mon, 18 Dec 2023 22:17:22 -0500 Subject: moved assets to deploy/assets --- deploy/assets/dash-pin-with-view.gif | Bin 0 -> 695946 bytes .../CollectionFreeFormInfoState.tsx | 15 +++++++++----- .../collectionFreeForm/CollectionFreeFormView.scss | 22 +++++++++++++++++++++ .../assets/dash-pin-with-view.gif | Bin 695946 -> 0 bytes .../collections/collectionFreeForm/assets/link.png | Bin 8908 -> 0 bytes 5 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 deploy/assets/dash-pin-with-view.gif delete mode 100644 src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif delete mode 100644 src/client/views/collections/collectionFreeForm/assets/link.png (limited to 'deploy') diff --git a/deploy/assets/dash-pin-with-view.gif b/deploy/assets/dash-pin-with-view.gif new file mode 100644 index 000000000..b0896d5c7 Binary files /dev/null and b/deploy/assets/dash-pin-with-view.gif differ diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index ba9225a92..35833ab23 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -94,10 +94,15 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent - {/* state message gif */} - - {this.State?.[StateMessage]} - ; + return ( +
+
+ state message gif +
+ + {/* state message gif */} + {/* */} + {this.State?.[StateMessage]} +
) } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 418c518ad..9fbf5d628 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -276,4 +276,26 @@ margin: 15px; padding: 10px; + + .gif-container { + font-size: 15; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + + .gif { + background-color: transparent; + width: 25px; + height: 25px; + margin-right: 5px; + } + } + } + diff --git a/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif b/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif deleted file mode 100644 index b0896d5c7..000000000 Binary files a/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif and /dev/null differ diff --git a/src/client/views/collections/collectionFreeForm/assets/link.png b/src/client/views/collections/collectionFreeForm/assets/link.png deleted file mode 100644 index 1e10fc658..000000000 Binary files a/src/client/views/collections/collectionFreeForm/assets/link.png and /dev/null differ -- cgit v1.2.3-70-g09d2 From e5536e19be862125cef574faff4d745191d7849c Mon Sep 17 00:00:00 2001 From: alinayejin Date: Tue, 19 Dec 2023 22:34:48 -0500 Subject: upgraded info ui state --- deploy/assets/dash-colon-menu.gif | Bin 0 -> 348794 bytes deploy/assets/dash-create-link-board.gif | Bin 0 -> 167854 bytes deploy/assets/documentation.png | Bin 0 -> 4526 bytes .../collectionFreeForm/CollectionFreeFormInfoUI.tsx | 12 ++++++------ 4 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 deploy/assets/dash-colon-menu.gif create mode 100644 deploy/assets/dash-create-link-board.gif create mode 100644 deploy/assets/documentation.png (limited to 'deploy') diff --git a/deploy/assets/dash-colon-menu.gif b/deploy/assets/dash-colon-menu.gif new file mode 100644 index 000000000..b5512afb1 Binary files /dev/null and b/deploy/assets/dash-colon-menu.gif differ diff --git a/deploy/assets/dash-create-link-board.gif b/deploy/assets/dash-create-link-board.gif new file mode 100644 index 000000000..354188fd9 Binary files /dev/null and b/deploy/assets/dash-create-link-board.gif differ diff --git a/deploy/assets/documentation.png b/deploy/assets/documentation.png new file mode 100644 index 000000000..95c76b198 Binary files /dev/null and b/deploy/assets/documentation.png differ diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index dc0930a23..6a9c96854 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -73,7 +73,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() > 1, () => multipleDocs], @@ -143,13 +143,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent activeTool() === InkTool.Pen, () => penMode], }, setBackground("black")); // prettier-ignore - const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon on the top left corner.', { + const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon in the top left corner.', { docPinned: [() => pin().length > trail, () => { trail = pin().length; return pinnedDoc1; }], docRemoved: [() => numDocs() < 3, () => viewedLink], - }, setBackground("pink"), "assets/dash-pin-with-view.gif"); + }, setBackground("black"), "/assets/dash-pin-with-view.gif"); const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', { // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode], @@ -171,7 +171,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() < 3, () => viewedLink], }); - const pinnedDoc2 = InfoState(`You pinned ${pin().length} docs.`, { + const pinnedDoc2 = InfoState(`You pinned another doc.`, { docPinned: [() => pin().length > trail, () => { trail = pin().length; return pinnedDoc3; @@ -182,7 +182,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() < 3, () => viewedLink], }); - const pinnedDoc3 = InfoState(`You pinned ${pin().length} docs.`, { + const pinnedDoc3 = InfoState(`You pinned yet another doc.`, { docPinned: [() => pin().length > trail, () => { trail = pin().length; return pinnedDoc2; @@ -218,7 +218,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() == 4, () => completed], }); - const completed = InfoState('Eager to learn more? Click the ? icon on the top right corner to read our full documentation.', { + const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', { docRemoved: [() => numDocs() == 1, () => oneDoc], }, setBackground("white")); // prettier-ignore -- cgit v1.2.3-70-g09d2 From 2691b951d96f2ce7652acbea9e340b61737b3b57 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 21 Dec 2023 13:06:22 -0500 Subject: added standard 3d gl view for maps. added close button for infoUI. --- deploy/index.html | 1 + .../CollectionFreeFormInfoState.tsx | 10 +- .../CollectionFreeFormInfoUI.tsx | 103 +-------------------- .../collectionFreeForm/CollectionFreeFormView.scss | 3 +- src/client/views/nodes/MapBox/MapBox.tsx | 7 +- 5 files changed, 19 insertions(+), 105 deletions(-) (limited to 'deploy') 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 @@ Dash + 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 { _disposers: IReactionDisposer[] = []; + @observable _hide = false; constructor(props: any) { super(props); @@ -96,11 +99,14 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent +
{this.State?.[StateMessage]}
state message gif
+
+ this._hide = true)} /> +
); } 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 { - private _disposers: { [name: string]: IReactionDisposer } = {}; + _firstDocPos = { x: 0, y: 0 }; constructor(props: any) { super(props); @@ -225,98 +224,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent 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 ; } 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|
Select Line Color:
- this.setAnimationLineColor(color)} /> + this.setAnimationLineColor(color)} />
@@ -1455,7 +1455,7 @@ export class MapBox extends ViewBoxAnnotatableComponentMap Style: