From 4e273e0618ff130ad04cbc9a1d23dea10e9e73b8 Mon Sep 17 00:00:00 2001
From: alinayejin <alina_kim@brown.edu>
Date: Sun, 17 Dec 2023 23:36:14 -0500
Subject: infoUI new state entries and info states

---
 .../CollectionFreeFormInfoUI.tsx                   | 146 +++++++++++++++++++--
 1 file changed, 133 insertions(+), 13 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 5637f9aeb..d653a2ef3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,13 +1,15 @@
 import { IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc } from '../../../../fields/Doc';
+import { Doc, Field, FieldResult } from '../../../../fields/Doc';
 import { LinkManager } from '../../../util/LinkManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { DocButtonState } from '../../nodes/DocumentLinksButton';
+import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
+import { InkTool } from '../../../../fields/InkField';
+import { DocumentManager } from '../../../util/DocumentManager';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -41,32 +43,150 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         //  arc transition trigger conditions
         const firstDoc = () => this._props.Freeform.childDocs.lastElement();
         const numDocs = () => this._props.Freeform.childDocs.length;
+
+        let docX : FieldResult<Field>;
+        let docY : FieldResult<Field>;
+
+        const docNewX = () => firstDoc().x;
+        const docNewY = () => firstDoc().y;
+
+        const linkStart = () => DocumentLinksButton.StartLink;
+
         const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
         const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
 
-        // set of states.
-        const start = InfoState('Click to create Object', {
-            docCreated: [() => numDocs(), () => oneDoc],
+        const activeTool = () => Doc.ActiveTool;
+
+        let pinned : FieldResult<Field>;
+        const pin = () => Doc.ActivePresentation?.data;
+        const trail = () => DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails);
+        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('Create a second doc', {
-            docCreated: [() => numDocs() > 1, () => multipleDocs],
+        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("green")); // 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("green")); // 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("green")); // 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('Create a link', {
+        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("orange")); // prettier-ignore
+
+        const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
             linkCreated: [() => numDocLinks(), () => madeLink],
-            docsRemoved: [() => numDocs() < 2, () => oneDoc],
+            docRemoved: [() => numDocs() < 2, () => oneDoc],
         }, setBackground("orange")); // prettier-ignore
 
-        const madeLink = InfoState('View links', {
+        const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', {
             linkCreated: [() => !numDocLinks(), () => multipleDocs],
-            linksViewed: [() => linkMenuOpen(), (res) => { alert("Yay"+ res); return completed;}],
+            linkViewed: [() => linkMenuOpen(), () => {
+                alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+                return viewedLink;
+            }],
         }, setBackground("yellow")); // prettier-ignore
 
-        const completed = InfoState('You did it!', {
+        const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
             linkDeleted: [() => !numDocLinks(), () => multipleDocs],
-            docsRemoved: [() => numDocs() < 2, () => oneDoc],
+            docRemoved: [() => numDocs() < 2, () => oneDoc],
+            docCreated: [() => numDocs() == 3, () => {
+                pinned = pin();
+                return demos;
+            }],
+            // docPinned: [() => pin(), () => pinnedDoc],
+        }, setBackground("white")); // prettier-ignore
+
+        const demos = InfoState('Wanna explore more?', {
+            // activePen: [() => activeTool() === InkTool.Pen, () => penMode],
+            docPinned: [() => pinned && pinned != pin(), () => pinnedDoc],
+        });
+
+        // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
+        //     // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
+        //     docRemoved: [() => numDocs() < 3, () => demos],
+        // }); // prettier-ignore
+
+        // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', {
+        //     docsRemoved: [() => numDocs() == 3, () => demos],
+        // }); // prettier-ignore
+
+        const pinnedDoc = InfoState('You just pinned your doc.', {
+            editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
+            docRemoved: [() => numDocs() < 3, () => demos],
+        });
+        
+        // const openedTrail = InfoState('This is your trails tab.', {
+        //     trailView: [() => presentationMode() === 'edit', () => editPresentationMode],
+        // });
+
+        const editPresentationMode = InfoState('You are editing your presentation.', {
+            manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
+            docRemoved: [() => numDocs() < 3, () => demos],
+            docCreated: [() => numDocs() == 4, () => completed],
+      });
+
+        const manualPresentationMode = InfoState('Manual presentation mode.', {
+            editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
+            docRemoved: [() => numDocs() < 3, () => demos],
+            docCreated: [() => numDocs() == 4, () => completed],
+        });
+
+        const autoPresentationMode = InfoState('Auto presentation mode.', {
+            editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            docRemoved: [() => numDocs() < 3, () => demos],
+            docCreated: [() => numDocs() == 4, () => completed],
+        });
+
+        const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation', {
+            //
         }, setBackground("white")); // prettier-ignore
 
         return start;
-- 
cgit v1.2.3-70-g09d2

