pin and presentation mode states

1 files changed, 58 insertions, 24 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 7445b3b7c..ff0968ef8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -10,6 +10,7 @@ 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;
@@ -39,7 +40,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
     setupStates = () => {
         //  state entry functions
-        const setBackground = (col: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = col);
+        const setBackground = (colour: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = colour);
+        const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity);
         //  arc transition trigger conditions
         const firstDoc = () => (this._props.Freeform.childDocs.length ? this._props.Freeform.childDocs[0] : undefined);
         const numDocs = () => this._props.Freeform.childDocs.length;
@@ -58,6 +60,9 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const activeTool = () => Doc.ActiveTool;
 
         const pin = () => DocListCast(Doc.ActivePresentation?.data);
+
+        let trail: number;
+
         const trailView = () => DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails);
         const presentationMode = () => Doc.ActivePresentation?.presentation_status;
 
@@ -78,7 +83,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docY = firstDoc()?.y;
                 return movedDoc1;
               }],
-        }, setBackground("green")); // prettier-ignore
+        }, setBackground("red")); // prettier-ignore
 
         const movedDoc1 = InfoState('Great moves. Try creating a second document.', {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
@@ -88,7 +93,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docY = firstDoc()?.y;
                 return movedDoc2;
               }],
-        }, setBackground("green")); // prettier-ignore
+        }, setBackground("yellow")); // prettier-ignore
 
         const movedDoc2 = InfoState('Slick moves. Try creating a second document.', {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
@@ -98,7 +103,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docY = firstDoc()?.y;
                 return movedDoc3;
               }],
-        }, setBackground("green")); // prettier-ignore
+        }, setBackground("pink")); // prettier-ignore
 
         const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
@@ -113,7 +118,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         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
+        }, setBackground("purple")); // prettier-ignore
 
         const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
             linkCreated: [() => numDocLinks(), () => madeLink],
@@ -126,18 +131,21 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
                 return viewedLink;
             }],
-        }, setBackground("yellow")); // prettier-ignore
+        }, 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, () => demos],
             // docPinned: [() => pin(), () => pinnedDoc],
-        }, setBackground("white")); // prettier-ignore
+        }, setBackground("black")); // prettier-ignore
 
-        const demos = InfoState('Wanna explore more?', {
+        const demos = InfoState('', {
             // activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-            docPinned: [() => pin().length, () => pinnedDoc],
+            docPinned: [() => pin().length, () => {
+                trail = pin().length;
+                return pinnedDoc1;
+            }],
         });
 
         // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
@@ -149,40 +157,66 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         //     docsRemoved: [() => numDocs() == 3, () => demos],
         // }); // prettier-ignore
 
-        const pinnedDoc = InfoState('You just pinned your doc.', {
-            editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+        const pinnedDoc1 = InfoState('You just pinned your doc.', {
+            docPinned: [() => pin().length > trail, () => {
+                trail = pin().length;
+                return pinnedDoc2;
+            }],
+            // 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 pinnedDoc2 = InfoState('You pinned another doc.', {
+            docPinned: [() => pin().length > trail, () => {
+                trail = pin().length;
+                return pinnedDoc3;
+            }],
+            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
+            docRemoved: [() => numDocs() < 3, () => demos],
+        });
 
-        const editPresentationMode = InfoState('You are editing your presentation.', {
-            manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+        const pinnedDoc3 = InfoState('You pinned yet another doc.', {
+            docPinned: [() => pin().length > trail, () => {
+                trail = pin().length;
+                return pinnedDoc2;
+            }],
+            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            // 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],
+        // 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('You\'re in 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],
+        const autoPresentationMode = InfoState('You\'re in 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', {
-            //
+        const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation.', {
+            docRemoved: [() => numDocs() == 1, () => oneDoc],
         }, setBackground("white")); // prettier-ignore
 
         return start;