new collection freeform info ui

1 files changed, 84 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..dde803ab5
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -0,0 +1,84 @@
+import { IReactionDisposer, computed, observable, reaction } 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 React = require('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';
+
+export interface CollectionFreeFormInfoUIProps {
+    Document: Doc;
+    Freeform: CollectionFreeFormView;
+}
+
+@observer
+export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+
+    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 = 'Doc 1';
+                }
+                if ((docs.length = 2)) {
+                    console.log('hello 1', docs[0]);
+                    console.log('hello 2', docs[1]);
+                    this.message = 'Doc 2';
+                } 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 = 'You moved the doc';
+                }
+                if (links && links.length > 0) {
+                    this.message = 'You made your first link! You can also click the link icon to start and complete the link.';
+                }
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.reaction3 = reaction(
+            () => ({ activeTool: Doc.ActiveTool, linkMenu: DocumentLinksButton.LinkEditorDocView }),
+            ({ activeTool, linkMenu }) => {
+                if (activeTool == InkTool.Pen) {
+                    this.message = "You're in pen mode! Click and drag to draw your first masterpiece.";
+                }
+                if (linkMenu) {
+                    this.message = 'To edit your links, click this pencil icon.';
+                }
+            },
+            { fireImmediately: true }
+        );
+    }
+
+    componentWillUnmount(): void {
+        Object.values(this._disposers).forEach(disposer => disposer?.());
+    }
+
+    // stop that 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 <div className="infoUI">{this.message}</div>;
+    }
+}