diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 146 |
1 files changed, 133 insertions, 13 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 5637f9aeb..d653a2ef3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -1,13 +1,15 @@ import { IReactionDisposer, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc } from '../../../../fields/Doc'; +import { Doc, Field, FieldResult } from '../../../../fields/Doc'; import { LinkManager } from '../../../util/LinkManager'; import { ObservableReactComponent } from '../../ObservableReactComponent'; -import { DocButtonState } from '../../nodes/DocumentLinksButton'; +import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton'; import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState'; import { CollectionFreeFormView } from './CollectionFreeFormView'; import './CollectionFreeFormView.scss'; +import { InkTool } from '../../../../fields/InkField'; +import { DocumentManager } from '../../../util/DocumentManager'; export interface CollectionFreeFormInfoUIProps { Document: Doc; @@ -41,32 +43,150 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio // arc transition trigger conditions const firstDoc = () => this._props.Freeform.childDocs.lastElement(); const numDocs = () => this._props.Freeform.childDocs.length; + + let docX : FieldResult<Field>; + let docY : FieldResult<Field>; + + const docNewX = () => firstDoc().x; + const docNewY = () => firstDoc().y; + + const linkStart = () => DocumentLinksButton.StartLink; + const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length; const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView; - // set of states. - const start = InfoState('Click to create Object', { - docCreated: [() => numDocs(), () => oneDoc], + const activeTool = () => Doc.ActiveTool; + + let pinned : FieldResult<Field>; + const pin = () => Doc.ActivePresentation?.data; + const trail = () => 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('Create a second doc', { - docCreated: [() => numDocs() > 1, () => multipleDocs], + 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("green")); // 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("green")); // 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("green")); // 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('Create a link', { + 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("orange")); // prettier-ignore + + const startedLink = InfoState('Now click the highlighted link icon on your other document.', { linkCreated: [() => numDocLinks(), () => madeLink], - docsRemoved: [() => numDocs() < 2, () => oneDoc], + docRemoved: [() => numDocs() < 2, () => oneDoc], }, setBackground("orange")); // prettier-ignore - const madeLink = InfoState('View links', { + const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', { linkCreated: [() => !numDocLinks(), () => multipleDocs], - linksViewed: [() => linkMenuOpen(), (res) => { alert("Yay"+ res); return completed;}], + linkViewed: [() => linkMenuOpen(), () => { + alert(numDocLinks() + " cheer for " + numDocLinks() + " link!"); + return viewedLink; + }], }, setBackground("yellow")); // prettier-ignore - const completed = InfoState('You did it!', { + const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', { linkDeleted: [() => !numDocLinks(), () => multipleDocs], - docsRemoved: [() => numDocs() < 2, () => oneDoc], + docRemoved: [() => numDocs() < 2, () => oneDoc], + docCreated: [() => numDocs() == 3, () => { + pinned = pin(); + return demos; + }], + // docPinned: [() => pin(), () => pinnedDoc], + }, setBackground("white")); // prettier-ignore + + const demos = InfoState('Wanna explore more?', { + // activePen: [() => activeTool() === InkTool.Pen, () => penMode], + docPinned: [() => pinned && pinned != pin(), () => pinnedDoc], + }); + + // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', { + // // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode], + // docRemoved: [() => numDocs() < 3, () => demos], + // }); // prettier-ignore + + // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', { + // docsRemoved: [() => numDocs() == 3, () => demos], + // }); // prettier-ignore + + const pinnedDoc = InfoState('You just pinned your doc.', { + editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + // autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => demos], + }); + + // const openedTrail = InfoState('This is your trails tab.', { + // trailView: [() => presentationMode() === 'edit', () => editPresentationMode], + // }); + + const editPresentationMode = InfoState('You are editing your presentation.', { + manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => demos], + docCreated: [() => numDocs() == 4, () => completed], + }); + + const manualPresentationMode = InfoState('Manual presentation mode.', { + editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => demos], + docCreated: [() => numDocs() == 4, () => completed], + }); + + const autoPresentationMode = InfoState('Auto presentation mode.', { + editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + docRemoved: [() => numDocs() < 3, () => demos], + docCreated: [() => numDocs() == 4, () => completed], + }); + + const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation', { + // }, setBackground("white")); // prettier-ignore return start; |