added tutorial tool, still need to integrate with metadatatool

1 files changed, 72 insertions, 22 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index f99496bba..595bbf2e9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,21 +1,19 @@
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc } from '../../../../fields/Doc';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { CollectionFreeFormInfoState, infoState } from './CollectionFreeFormInfoState';
-import { Button } from '../../../util/CurrentUserUtils';
-import { InfoState } from './CollectionFreeFormInfoState';
-import { DocButtonState } from '../../nodes/DocumentLinksButton';
+import { Doc, DocListCast, FieldResult, FieldType } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
-import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
-import { CollectionFreeFormView } from '.';
-import { DocListCast } from '../../../../fields/Doc';
-import { ButtonType } from '../../nodes/FontIconBox/FontIconBox';
+import { StrCast } from '../../../../fields/Types';
+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';
 
 export interface CollectionFreeFormInfoUIProps {
-    Document: Doc;
-    LayoutDoc: Doc;
+    Doc: Doc;
+    layoutDoc: Doc;
     childDocs: () => Doc[];
     close: () => void;
 }
@@ -26,7 +24,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     public tutorialStates: { [key: string]: infoState } = {};
 
     public static Init() {
-        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => <CollectionFreeFormInfoUI Document={doc} LayoutDoc={layout} childDocs={childDocs} close={close} />);
+        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => (
+            //
+            <CollectionFreeFormInfoUI Doc={doc} layoutDoc={layout} childDocs={childDocs} close={close} />
+        ));
     }
 
     constructor(props: CollectionFreeFormInfoUIProps) {
@@ -50,7 +51,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     }
 
     componentWillUnmount(): void {
-        this._props.Document.backgroundColor = this._originalBackground;
+        this._props.Doc.$backgroundColor = this._originalbackground;
     }
 
     skipToState = (newState: infoState) => {
@@ -77,14 +78,63 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     };
 
     setupStates = () => {
-        let docCounter = this._props.childDocs().length;
-        let lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
-        let linkCounter = Doc.Links(lastDocCreated)?.length;
-        let presentationCounter = DocListCast(Doc.ActivePresentation?.data).length;
-        this._originalBackground = this._props.Document.backgroundColor as string;
-
-        this.tutorialStates.multipleDocs = InfoState(
-            "Let's create a new link! Click the link icon on one document and connect it to another.",
+        this._originalbackground = StrCast(this._props.Doc.$backgroundColor);
+        //  state entry functions
+        // const setBackground = (colour: string) => () => {this._props.Doc.$backgroundColor = colour;} // prettier-ignore
+        // const setOpacity = (opacity: number) => () => {this._props.layoutDoc.opacity = opacity;} // prettier-ignore
+        //  arc transition trigger conditions
+        const firstDoc = () => (this._props.childDocs().length ? this._props.childDocs()[0] : undefined);
+        const numDocs = () => this._props.childDocs().length;
+
+        let docX: FieldResult<FieldType>;
+        let docY: FieldResult<FieldType>;
+
+        const docNewX = () => firstDoc()?.x;
+        const docNewY = () => firstDoc()?.y;
+
+        const linkStart = () => DocumentLinksButton.StartLink;
+        const linkUnstart = () => !DocumentLinksButton.StartLink;
+
+        const numDocLinks = () => Doc.Links(firstDoc())?.length;
+        const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
+
+        const activeTool = () => Doc.ActiveTool;
+
+        const pin = () => DocListCast(Doc.ActivePresentation?.data);
+
+        let trail: number;
+
+        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;
+                    // eslint-disable-next-line no-use-before-define
+                    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;
+                    // eslint-disable-next-line no-use-before-define
+                    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 (":")',
             {
                 // eslint-disable-next-line no-use-before-define
                 linkStarted: [