Merge branch 'restoringEslint' into alyssa-starter

1 files changed, 131 insertions, 101 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 43b877705..5d8373fc7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,40 +1,47 @@
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, Field, FieldResult } from '../../../../fields/Doc';
+import { Doc, DocListCast, FieldType, FieldResult } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
 import { StrCast } from '../../../../fields/Types';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { LinkManager } from '../../../util/LinkManager';
 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';
+import { DocData } from '../../../../fields/DocSymbols';
+import { CollectionFreeFormView } from './CollectionFreeFormView';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
-    Freeform: CollectionFreeFormView;
-    close: () => boolean;
+    LayoutDoc: Doc;
+    childDocs: () => Doc[];
+    close: () => void;
 }
 
 @observer
 export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> {
+    public static Init() {
+        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => (
+            //
+            <CollectionFreeFormInfoUI Document={doc} LayoutDoc={layout} childDocs={childDocs} close={close} />
+        ));
+    }
     _firstDocPos = { x: 0, y: 0 };
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        this.currState = this.setupStates();
+        this._currState = this.setupStates();
     }
     _originalbackground: string | undefined;
 
     @observable _currState: infoState | undefined = undefined;
-    get currState() { return this._currState!; } // prettier-ignore
-    set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
+    get currState() { return this._currState; } // prettier-ignore
+    set currState(val) { runInAction(() => {this._currState = val;}); } // prettier-ignore
 
     componentWillUnmount(): void {
-        this._props.Freeform.dataDoc.backgroundColor = this._originalbackground;
+        this._props.Document[DocData].backgroundColor = this._originalbackground;
     }
 
     setCurrState = (state: infoState) => {
@@ -45,23 +52,24 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     };
 
     setupStates = () => {
-        this._originalbackground = StrCast(this._props.Freeform.dataDoc.backgroundColor);
+        this._originalbackground = StrCast(this._props.Document[DocData].backgroundColor);
         //  state entry functions
-        const setBackground = (colour: string) => () => (this._props.Freeform.dataDoc.backgroundColor = colour);
-        const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity);
+        // const setBackground = (colour: string) => () => {this._props.Document[DocData].backgroundColor = colour;} // prettier-ignore
+        // const setOpacity = (opacity: number) => () => {this._props.LayoutDoc.opacity = opacity;} // prettier-ignore
         //  arc transition trigger conditions
-        const firstDoc = () => (this._props.Freeform.childDocs.length ? this._props.Freeform.childDocs[0] : undefined);
-        const numDocs = () => this._props.Freeform.childDocs.length;
+        const firstDoc = () => (this._props.childDocs().length ? this._props.childDocs()[0] : undefined);
+        const numDocs = () => this._props.childDocs().length;
 
-        let docX: FieldResult<Field>;
-        let docY: FieldResult<Field>;
+        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 = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
+        const numDocLinks = () => Doc.Links(firstDoc())?.length;
         const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
 
         const activeTool = () => Doc.ActiveTool;
@@ -70,85 +78,96 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         let trail: number;
 
-        const trailView = () => 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('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("red")); // 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("yellow")); // 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("pink")); // 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('Let\'s create a new link. Click the link icon on one of your documents.', {
-            linkStarted: [() => linkStart(), () => startedLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("purple")); // prettier-ignore
-
-        const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
-            linkCreated: [() => numDocLinks(), () => madeLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("orange")); // prettier-ignore
-
-        const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', {
-            linkCreated: [() => !numDocLinks(), () => multipleDocs],
-            linkViewed: [() => linkMenuOpen(), () => {
-                alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-                return viewedLink;
-            }],
-        }, 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, () => {
-                trail = pin().length;
-                return presentDocs;
-            }],
-            activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-        }, setBackground("black")); // prettier-ignore
+        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
+                docCreated: [() => numDocs() === 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
+
+        const multipleDocs = InfoState(
+            'Let\'s create a new link. Click the link icon on one of your documents.',
+            {
+                // eslint-disable-next-line no-use-before-define
+                linkStarted: [() => linkStart(), () => startedLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
+        ); // prettier-ignore
+
+        const startedLink = InfoState(
+            'Now click the highlighted link icon on your other document.',
+            {
+                linkUnstart: [() => linkUnstart(), () => multipleDocs],
+                // eslint-disable-next-line no-use-before-define
+                linkCreated: [() => numDocLinks(), () => madeLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
+        ); // prettier-ignore
+
+        const madeLink = InfoState(
+            'You made your first link! You can view your links by selecting the blue dot.',
+            {
+                linkCreated: [() => !numDocLinks(), () => multipleDocs],
+                linkViewed: [() => linkMenuOpen(), () => {
+                    alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+                    // eslint-disable-next-line no-use-before-define
+                    return viewedLink;
+                }],
+            },
+            'dash-following-link.gif'
+        ); // prettier-ignore
+
+        const viewedLink = InfoState(
+            'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+            {
+                linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docCreated: [() => numDocs() === 3, () => {
+                    trail = pin().length;
+                    // eslint-disable-next-line no-use-before-define
+                    return presentDocs;
+                }],
+                // eslint-disable-next-line no-use-before-define
+                activePen: [() => activeTool() === InkTool.Pen, () => penMode],
+            },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
 
         const presentDocs = InfoState(
             'Another document! You could make a presentation. Click the pin icon in the top left corner.',
@@ -157,12 +176,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                     () => pin().length > trail,
                     () => {
                         trail = pin().length;
+                        // eslint-disable-next-line no-use-before-define
                         return pinnedDoc1;
                     },
                 ],
                 docRemoved: [() => numDocs() < 3, () => viewedLink],
             },
-            setBackground('black'),
             '/assets/dash-pin-with-view.gif'
         );
 
@@ -180,11 +199,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 () => pin().length > trail,
                 () => {
                     trail = pin().length;
+                    // eslint-disable-next-line no-use-before-define
                     return pinnedDoc2;
                 },
             ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
@@ -194,11 +215,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 () => pin().length > trail,
                 () => {
                     trail = pin().length;
+                    // eslint-disable-next-line no-use-before-define
                     return pinnedDoc3;
                 },
             ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
@@ -213,6 +236,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
@@ -230,26 +254,32 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         const manualPresentationMode = InfoState("You're in manual presentation mode.", {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
-            docCreated: [() => numDocs() == 4, () => completed],
+            // eslint-disable-next-line no-use-before-define
+            docCreated: [() => numDocs() === 4, () => completed],
         });
 
         const autoPresentationMode = InfoState("You're in auto presentation mode.", {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
-            docCreated: [() => numDocs() == 4, () => completed],
+            // eslint-disable-next-line no-use-before-define
+            docCreated: [() => numDocs() === 4, () => completed],
         });
 
-        const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', {
-            docRemoved: [() => numDocs() == 1, () => oneDoc],
-        }, setBackground("white")); // prettier-ignore
+        const completed = InfoState(
+            'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
+            { docRemoved: [() => numDocs() === 1, () => oneDoc] },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
 
         return start;
     };
 
     render() {
-        return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
+        return !this.currState ? null : <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
     }
 }