2 files changed, 108 insertions, 80 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 9090d0ea5..3af5a6c4b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -3,30 +3,79 @@ import { observer } from 'mobx-react';
 import './CollectionFreeFormView.scss';
 import React = require('react');
 
-export type infoArc = {
-    events: () => any;
-    actions: (arg?: any) => any;
-};
-export type infoState = {
-    Message: string;
-    Arcs: infoArc[];
-};
+/**
+ * An Fsa Arc.  The first array element is a test condition function that will be observed.
+ * The second array element is a function that will be invoked when the first test function
+ * returns a truthy value
+ */
+export type infoArc = [() => any, (res?: any) => infoState];
+
+export const StateMessage = Symbol('StateMessage');
+export const StateEntryFunc = Symbol('StateEntryFunc');
+export class infoState {
+    [StateMessage]: string = '';
+    [StateEntryFunc]?: () => any;
+    [key: string]: infoArc;
+    constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any) {
+        this[StateMessage] = message;
+        Object.assign(this, arcs);
+        this[StateEntryFunc] = entryFunc;
+    }
+}
+
+/**
+ * Create an FSA state.
+ * @param msg the message displayed when in this state
+ * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
+ * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
+ * and an arc transition action function (that sets the next state)
+ * @param entryFunc a function to call when entering the state
+ * @returns an FSA state
+ */
+export function InfoState(
+    msg: string, //
+    arcs: { [key: string]: infoArc },
+    entryFunc?: () => any
+) {
+    return new infoState(msg, arcs, entryFunc);
+}
 
 export interface CollectionFreeFormInfoStateProps {
-    state: infoState;
+    infoState: infoState;
+    next: (state: infoState) => any;
 }
 
 @observer
 export class CollectionFreeFormInfoState extends React.Component<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
 
+    get State() {
+        return this.props.infoState;
+    }
+    get Arcs() {
+        return Object.keys(this.State).map(key => this.State[key]);
+    }
+
     clearState = () => this._disposers.map(disposer => disposer());
-    initState = () => (this._disposers = this.props.state.Arcs.map(arc => reaction(arc.events, arc.actions, { fireImmediately: true })));
+    initState = () =>
+        (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
+            return reaction(
+                //
+                arc.test,
+                res => {
+                    if (res) {
+                        const next = arc.act(res);
+                        this.props.next(next);
+                    }
+                },
+                { fireImmediately: true }
+            );
+        }));
 
     componentDidMount(): void {
         this.initState();
     }
-    componentWillUpdate() {
+    componentDidUpdate() {
         this.clearState();
         this.initState();
     }
@@ -34,6 +83,6 @@ export class CollectionFreeFormInfoState extends React.Component<CollectionFreeF
         this.clearState();
     }
     render() {
-        return <div className="infoUI">{this.props.state.Message}</div>;
+        return <div className="infoUI">{this.State[StateMessage]}</div>;
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 57d2b7ba1..daf1bd8a7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,4 +1,4 @@
-import { IReactionDisposer, computed, observable, reaction } from 'mobx';
+import { IReactionDisposer, computed, observable, reaction, action, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -12,7 +12,9 @@ import { InkTool } from '../../../../fields/InkField';
 import { LinkDocPreview } from '../../nodes/LinkDocPreview';
 import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { DocumentManager } from '../../../util/DocumentManager';
-import { CollectionFreeFormInfoState, infoState } from './CollectionFreeFormInfoState';
+import { CollectionFreeFormInfoState, infoState, StateMessage, infoArc, StateEntryFunc, InfoState } from './CollectionFreeFormInfoState';
+import { string32 } from 'pdfjs-dist/types/src/shared/util';
+import { any } from 'bluebird';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -23,77 +25,54 @@ export interface CollectionFreeFormInfoUIProps {
 export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
     private _disposers: { [name: string]: IReactionDisposer } = {};
 
+    @observable currState!: infoState;
     constructor(props: any) {
         super(props);
-        this.currState = this.state0;
+        this.setCurrState(this.setupStates());
     }
 
-    @computed get first_doc() {
-        return this.props.Freeform.childDocs.lastElement();
-    }
-    @observable currState: infoState;
-    state0: infoState = {
-        Message: 'Click to create Object',
-        Arcs: [
-            {
-                events: () => this.props.Freeform.childDocs,
-                actions: (docs: Doc[]) => {
-                    if (docs.length === 1) this.currState = this.state1;
-                    if (docs.length > 1) this.currState = this.state2;
-                },
-            },
-        ],
-    };
-    state1: infoState = {
-        Message: 'Create a second doc',
-        Arcs: [
-            {
-                events: () => this.props.Freeform.childDocs,
-                actions: (docs: Doc[]) => {
-                    if (docs.length === 0) this.currState = this.state0;
-                    if (docs.length === 2) this.currState = this.state2;
-                },
-            },
-        ],
-    };
-    state2: infoState = {
-        Message: 'Create a link',
-        Arcs: [
-            {
-                events: () => LinkManager.Instance.getAllDirectLinks(this.first_doc),
-                actions: links => links?.length && (this.currState = this.state3),
-            },
-            {
-                events: () => this.props.Freeform.childDocs,
-                actions: docs => {
-                    if (docs.length === 0) this.currState = this.state0;
-                    if (docs.length === 1) this.currState = this.state1;
-                },
-            },
-        ],
+    setCurrState = (state: infoState) => {
+        if (state) {
+            runInAction(() => (this.currState = state));
+            this.currState[StateEntryFunc]?.();
+        }
     };
 
-    state3: infoState = {
-        Message: 'View links',
-        Arcs: [
-            {
-                events: () => LinkManager.Instance.getAllDirectLinks(this.first_doc),
-                actions: links => links?.length === 0 && (this.currState = this.state2),
-            },
-            {
-                events: () => DocumentLinksButton.LinkEditorDocView,
-                actions: viewingLinks => viewingLinks && (this.currState = this.state4),
-            },
-        ],
-    };
-    state4: infoState = {
-        Message: 'You did it!',
-        Arcs: [
-            {
-                events: () => false,
-                actions: arc => {},
-            },
-        ],
+    setupStates = () => {
+        //  state entry functions
+        const setBackground = (col: string) => () => (this.props.Freeform.layoutDoc.backgroundColor = col);
+        //  arc transition trigger conditions
+        const firstDoc = () => this.props.Freeform.childDocs.lastElement();
+        const numDocs = () => this.props.Freeform.childDocs.length;
+        const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
+        const linkMenuOpen = () => DocumentLinksButton.LinkEditorDocView;
+
+        // set of states.
+        const start = InfoState('Click to create Object', {
+            docCreated: [() => numDocs(), () => oneDoc],
+        }, setBackground("blue")); // prettier-ignore
+
+        const oneDoc = InfoState('Create a second doc', {
+            docCreated: [() => numDocs() > 1, () => multipleDocs],
+            docDeleted: [() => numDocs() < 1, () => start],
+        }, setBackground("green")); // prettier-ignore
+
+        const multipleDocs = InfoState('Create a link', {
+            linkCreated: [() => numDocLinks(), () => madeLink],
+            docsRemoved: [() => numDocs() < 2, () => oneDoc],
+        }, setBackground("orange")); // prettier-ignore
+
+        const madeLink = InfoState('View links', {
+            linkCreated: [() => !numDocLinks(), () => multipleDocs],
+            linksViewed: [() => linkMenuOpen(), (res) => { alert("Yay"+ res); return completed;}],
+        }, setBackground("yellow")); // prettier-ignore
+
+        const completed = InfoState('You did it!', {
+            linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+            docsRemoved: [() => numDocs() < 2, () => oneDoc],
+        }, setBackground("white")); // prettier-ignore
+
+        return start;
     };
 
     /*
@@ -189,6 +168,6 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
     firstDocPos = { x: 0, y: 0 };
 
     render() {
-        return <CollectionFreeFormInfoState state={this.currState} />;
+        return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />;
     }
 }