Merge branch 'master' into dataviz-ai-sarah

1 files changed, 90 insertions, 82 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 43b877705..cc729decc 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -8,6 +8,7 @@ import { DocumentManager } from '../../../util/DocumentManager';
 import { LinkManager } from '../../../util/LinkManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
+import { TopBar } from '../../topbar/TopBar';
 import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
@@ -25,12 +26,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        this.currState = this.setupStates();
+        this._currState = this.setupStates();
     }
     _originalbackground: string | undefined;
 
     @observable _currState: infoState | undefined = undefined;
-    get currState() { return this._currState!; } // prettier-ignore
+    get currState() { return this._currState; } // prettier-ignore
     set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
 
     componentWillUnmount(): void {
@@ -60,6 +61,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const docNewY = () => firstDoc()?.y;
 
         const linkStart = () => DocumentLinksButton.StartLink;
+        const linkUnstart = () => !DocumentLinksButton.StartLink;
 
         const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
         const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
@@ -74,81 +76,85 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const presentationMode = () => Doc.ActivePresentation?.presentation_status;
 
         // set of states
-        const start = InfoState('Click anywhere and begin typing to create your first text document.', {
-            docCreated: [() => numDocs(), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return oneDoc;
-            }],
-        }, setBackground("blue")); // prettier-ignore
-
-        const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
-            // docCreated: [() => numDocs() > 1, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc1;
-              }],
-        }, setBackground("red")); // prettier-ignore
-
-        const movedDoc1 = InfoState('Great moves. Try creating a second document.', {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc2;
-              }],
-        }, setBackground("yellow")); // prettier-ignore
-
-        const movedDoc2 = InfoState('Slick moves. Try creating a second document.', {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc3;
-              }],
-        }, setBackground("pink")); // prettier-ignore
-
-        const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc1;
-              }],
-        }, setBackground("green")); // prettier-ignore
-
-        const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', {
-            linkStarted: [() => linkStart(), () => startedLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("purple")); // prettier-ignore
-
-        const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
-            linkCreated: [() => numDocLinks(), () => madeLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("orange")); // prettier-ignore
-
-        const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', {
-            linkCreated: [() => !numDocLinks(), () => multipleDocs],
-            linkViewed: [() => linkMenuOpen(), () => {
-                alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-                return viewedLink;
-            }],
-        }, setBackground("blue")); // prettier-ignore
-
-        const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
-            linkDeleted: [() => !numDocLinks(), () => multipleDocs],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-            docCreated: [() => numDocs() == 3, () => {
-                trail = pin().length;
-                return presentDocs;
-            }],
-            activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-        }, setBackground("black")); // prettier-ignore
+        const start = InfoState(
+            'Click anywhere and begin typing to create your first text document.',
+            {
+                docCreated: [() => numDocs(), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return oneDoc;
+                }],
+            }
+        ); // prettier-ignore
+
+        const oneDoc = InfoState(
+            'Hello world! You can drag and drop to move your document around.',
+            {
+                // docCreated: [() => numDocs() > 1, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc;
+                }],
+            }
+        ); // prettier-ignore
+
+        const movedDoc = InfoState(
+            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (\":\")',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
+
+        const multipleDocs = InfoState(
+            'Let\'s create a new link. Click the link icon on one of your documents.',
+            {
+                linkStarted: [() => linkStart(), () => startedLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
+        ); // prettier-ignore
+
+        const startedLink = InfoState(
+            'Now click the highlighted link icon on your other document.',
+            {
+                linkUnstart: [() => linkUnstart(), () => multipleDocs],
+                linkCreated: [() => numDocLinks(), () => madeLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
+        ); // prettier-ignore
+
+        const madeLink = InfoState(
+            'You made your first link! You can view your links by selecting the blue dot.',
+            {
+                linkCreated: [() => !numDocLinks(), () => multipleDocs],
+                linkViewed: [() => linkMenuOpen(), () => {
+                    alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+                    return viewedLink;
+                }],
+            },
+            'dash-following-link.gif'
+        ); // prettier-ignore
+
+        const viewedLink = InfoState(
+            'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+            {
+                linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docCreated: [() => numDocs() == 3, () => {
+                    trail = pin().length;
+                    return presentDocs;
+                }],
+                activePen: [() => activeTool() === InkTool.Pen, () => penMode],
+            },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
 
         const presentDocs = InfoState(
             'Another document! You could make a presentation. Click the pin icon in the top left corner.',
@@ -162,7 +168,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 ],
                 docRemoved: [() => numDocs() < 3, () => viewedLink],
             },
-            setBackground('black'),
             '/assets/dash-pin-with-view.gif'
         );
 
@@ -242,14 +247,17 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             docCreated: [() => numDocs() == 4, () => completed],
         });
 
-        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
+        const completed = InfoState(
+            'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
+            { docRemoved: [() => numDocs() == 1, () => oneDoc] },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
 
         return start;
     };
 
     render() {
-        return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
+        return !this.currState ? null : <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
     }
 }