merged infoUI

1 files changed, 173 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
new file mode 100644
index 000000000..1265dc2de
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -0,0 +1,173 @@
+import { IReactionDisposer, computed, observable, reaction, action, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../../fields/Doc';
+import { ScriptField } from '../../../../fields/ScriptField';
+import { PresBox } from '../../nodes/trails/PresBox';
+import './CollectionFreeFormView.scss';
+import * as React from 'react';
+import { CollectionFreeFormView } from './CollectionFreeFormView';
+import { NumCast } from '../../../../fields/Types';
+import { LinkManager } from '../../../util/LinkManager';
+import { InkTool } from '../../../../fields/InkField';
+import { LinkDocPreview } from '../../nodes/LinkDocPreview';
+import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
+import { DocumentManager } from '../../../util/DocumentManager';
+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;
+    Freeform: CollectionFreeFormView;
+}
+
+@observer
+export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+
+    @observable currState!: infoState;
+    constructor(props: any) {
+        super(props);
+        this.setCurrState(this.setupStates());
+    }
+
+    setCurrState = (state: infoState) => {
+        if (state) {
+            runInAction(() => (this.currState = state));
+            this.currState[StateEntryFunc]?.();
+        }
+    };
+
+    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;
+    };
+
+    /*
+    componentDidMount(): void {
+        this._disposers.reaction1 = reaction(
+            () => 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;
+    @observable secondDoc: Doc | undefined;
+    */
+    firstDocPos = { x: 0, y: 0 };
+
+    render() {
+        return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />;
+    }
+}