diff options
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 526 |
1 files changed, 213 insertions, 313 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 5a54553b1..efc22f523 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -1,22 +1,21 @@ import { makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast, FieldResult, FieldType } from '../../../../fields/Doc'; -import { InkTool } from '../../../../fields/InkField'; -import { StrCast } from '../../../../fields/Types'; +import { Doc } from '../../../../fields/Doc'; 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 { Button } from '@dash/components'; +import { CollectionFreeFormInfoState, infoState } from './CollectionFreeFormInfoState'; +import { Button } from '../../../util/CurrentUserUtils'; +import { InfoState } from './CollectionFreeFormInfoState'; +import { DocButtonState } from '../../nodes/DocumentLinksButton'; +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 './CollectionFreeFormView.scss'; - export interface CollectionFreeFormInfoUIProps { - Doc: Doc; - layoutDoc: Doc; + Document: Doc; + LayoutDoc: Doc; childDocs: () => Doc[]; close: () => void; } @@ -24,13 +23,18 @@ export interface CollectionFreeFormInfoUIProps { @observer export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> { _originalBackground: string | undefined; - public tutorialStates: { [key: string]: infoState } = {}; + private tutorialStates: { [key: string]: infoState } = {}; public static Init() { - CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => ( - // - <CollectionFreeFormInfoUI Doc={doc} layoutDoc={layout} childDocs={childDocs} close={close} /> - )); + CollectionFreeFormView.SetInfoUICreator( + (doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => + <CollectionFreeFormInfoUI + Document={doc} + LayoutDoc={layout} + childDocs={childDocs} + close={close} + /> + ); } constructor(props: CollectionFreeFormInfoUIProps) { @@ -39,6 +43,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio this.tutorialStates = {}; // Initialize an empty object this.currState = this.setupStates(); // Call setupStates() here } + @observable _currState: infoState | undefined = undefined; @observable _nextState: infoState | undefined = undefined; // Track next state @@ -46,7 +51,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio get currState() { return this._currState; } - + set currState(val) { runInAction(() => { this._currState = val; @@ -54,303 +59,203 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio } componentWillUnmount(): void { - this._props.Doc.$backgroundColor = this._originalbackground; + this._props.Document.backgroundColor = this._originalBackground; } skipToState = (newState: infoState) => { runInAction(() => { - console.log('Transitioning to next state:', newState); if (!this._currState) { this._currState = newState; // Assign directly if undefined } else { this._currState = newState; - } + } }); }; createNextButton = (newState: ReturnType<typeof InfoState>) => { return { - title: 'Next', - toolTip: 'Next', + title: "Next", + toolTip: "Next", btnType: ButtonType.ClickButton, scripts: { - onClick: `this.skipToState(${newState})`, + onClick: `this.skipToState(${newState})` }, - targetState: newState, + targetState: newState }; }; setupStates = () => { - 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 (":")', - { + 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.", { // eslint-disable-next-line no-use-before-define - linkStarted: [ - () => DocumentLinksButton.StartLink, - () => { - linkCounter = Doc.Links(lastDocCreated).length; - // eslint-disable-next-line no-use-before-define - return startedLink; - }, - ], + linkStarted: [() => DocumentLinksButton.StartLink, () => { + linkCounter = Doc.Links(lastDocCreated).length + // eslint-disable-next-line no-use-before-define + return startedLink}], + // docCreated: [() => this._props.childDocs().length > docCounter, () => { + // docCounter += 1 + // lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + // // eslint-disable-next-line no-use-before-define + // return this.tutorialStates.makePresentation}] }, 'dash-create-link-board.gif' ); - this.tutorialStates.presentDocs = InfoState( - 'Click the pin icon in the top left corner while clicking a doc to create your presentation.', - { + this.tutorialStates.presentDocs = InfoState("Select a document then click the 'pin' button in the top left to create your presentation.", { // eslint-disable-next-line no-use-before-define - docPinned: [ - () => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter, - () => { - presentationCounter++; - // eslint-disable-next-line no-use-before-define - return pinnedDoc; - }, - ], - }, - 'pin-explanation.gif' - ); - - this.tutorialStates.nestedCollections = InfoState( - "Want to learn how to create a nested collection? Click the : button and add a 'collection' doc", - { + docPinned: [() => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter, () => { + presentationCounter++ // eslint-disable-next-line no-use-before-define - docCreated: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]; - // eslint-disable-next-line no-use-before-define - return marqueeSelection; - }, - ], + return pinnedDoc}], }, - 'dash-nested-collection.gif' - ); - - this.tutorialStates.makePresentation = InfoState('Add a new document to create a presentation!', { - docCreated: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]; - // eslint-disable-next-line no-use-before-define - return this.tutorialStates.presentDocs; - }, - ], - }); + 'pin-explanation.gif'); + this.tutorialStates.nestedCollections = InfoState("Want to learn how to create a nested collection? Click the : button and add a 'collection' doc", { + // eslint-disable-next-line no-use-before-define + docCreated: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + // eslint-disable-next-line no-use-before-define + return marqueeSelection}] + }, + 'dash-nested-collection.gif') + + + this.tutorialStates.makePresentation = InfoState("Add a new document to create a presentation!", { + docCreated: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + // eslint-disable-next-line no-use-before-define + return this.tutorialStates.presentDocs}], + }); + const skipToLinksButton: Button = { - title: 'Links Tutorial', - toolTip: 'Skip', + title: "Links Tutorial", + toolTip: "Skip", btnType: ButtonType.ClickButton, scripts: { - onClick: 'this.skipToState(this.tutorialStates.multipleDocs)', + onClick: "this.skipToState(this.tutorialStates.multipleDocs)" }, - targetState: this.tutorialStates.multipleDocs, + targetState: this.tutorialStates.multipleDocs }; const skipToPinsButton: Button = { - title: 'Pins Tutorial', - toolTip: 'Skip', + title: "Pins Tutorial", + toolTip: "Skip", btnType: ButtonType.ClickButton, scripts: { - onClick: 'this.skipToState(this.tutorialStates.makePresentation)', + onClick: "this.skipToState(this.tutorialStates.makePresentation)" }, - targetState: this.tutorialStates.makePresentation, + targetState: this.tutorialStates.makePresentation }; const skipToPresentationButton: Button = { - title: 'Collections Tutorial', - toolTip: 'Skip', + title: "Collections Tutorial", + toolTip: "Skip", btnType: ButtonType.ClickButton, scripts: { - onClick: 'this.skipToState(this.tutorialStates.nestedCollections)', + onClick: "this.skipToState(this.tutorialStates.nestedCollections)" }, - targetState: this.tutorialStates.nestedCollections, + targetState: this.tutorialStates.nestedCollections }; - const ending = InfoState("If you have any more questions, feel free to ask Dash's AI Bot!", {}); + const ending = InfoState("If you have any more questions, feel free to ask Dash's AI Bot!") // Traditional tutorial - const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', { docRemoved: [() => this._props.childDocs().length === 1, () => this.tutorialStates.start] }, 'documentation.png'); + const completed = InfoState( + "Eager to learn more? Click the ? icon in the top right corner to read our full documentation.", + { docRemoved: [() => this._props.childDocs().length === 1, () => this.tutorialStates.start] }, + 'documentation.png', + ); const penMode = InfoState("You're in pen mode! Click and drag to draw your first masterpiece, then click the Ink button once you're done.", { activePen: [() => Doc.ActiveTool !== InkTool.Ink, () => completed], }); - + const briefArtisticFeature = InfoState("Finally, want to explore the art feature of Dash? Click the 'Ink' button on the hotbar then click the pen button.", { penModeActivated: [() => Doc.ActiveTool === InkTool.Ink, () => penMode], }); - - const activatePresentation = InfoState('Lastly, click the linked node and start the presentation!', { - presentation: [() => Doc.ActivePresentation?.presentation_status === 'auto', () => briefArtisticFeature], + + const activatePresentation = InfoState("Lastly, click the linked node and start the presentation!", { + presentation: [() => Doc.ActivePresentation?.presentation_status === "auto", () => briefArtisticFeature], }); + + const deletePresentation = InfoState("Cool! Click 'setOnClick to follow primary link' for your non-presentation doc and try deleting the presentation.", { + docRemoved: [() => this._props.childDocs().length < docCounter, () => { + docCounter -= 1 + return activatePresentation}], + }, + 'onclick-node.gif'); + + const trailedPresentation = InfoState("Try linking your presentation to the last doc you created (now highlighted).", { + linkAdd: [() => Doc.Links(lastDocCreated)?.length > linkCounter, () => { + linkCounter += 1 + return deletePresentation + }], + docAdded: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + // Last doc that is not the presentation + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 2] + linkCounter = Doc.Links(lastDocCreated)?.length + return deletePresentation}] + }, + 'link-presentation.gif'); + + const pinnedPresentation = InfoState("Want to see something cool? Zoom out, click the trail button on the presentation, and drag it inside the canvas.", { + docAdded: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + // Last doc that is not the presentation + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 2] + Doc.HighlightDoc(lastDocCreated) + linkCounter = Doc.Links(lastDocCreated)?.length + return trailedPresentation}], + }, + 'dash-trail-explanation.gif'); - const deletePresentation = InfoState( - "Cool! Click 'setOnClick to follow primary link' for your linked doc and try deleting the presentation.", - { - docRemoved: [ - () => this._props.childDocs().length < docCounter, - () => { - docCounter -= 1; - return activatePresentation; - }, - ], - }, - 'onclick-node.gif' - ); - - const trailedPresentation = InfoState( - 'See the new dragged-in presentation? Try linking it to the highlighted doc.', - { - linkAdd: [ - () => Doc.Links(lastDocCreated)?.length > linkCounter, - () => { - linkCounter += 1; - return deletePresentation; - }, - ], - }, - 'link-presentation.gif' - ); - - const pinnedPresentation = InfoState( - 'Want to see something cool? Click the trail button on the presentation and drag it inside the canvas.', - { - docAdded: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - // Last doc that is not the presentation - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 2]; - Doc.HighlightDoc(lastDocCreated); - linkCounter = Doc.Links(lastDocCreated)?.length; - return trailedPresentation; - }, - ], - }, - 'dash-trail-explanation.gif' - ); - - const pinnedDoc2 = InfoState('You pinned another doc. Press play to the right to show your presentation!', { - autoPresentation: [() => Doc.ActivePresentation?.presentation_status === 'auto', () => pinnedPresentation], + const pinnedDoc2 = InfoState("You pinned another doc. Press autoplay to the right to show your presentation!", { + autoPresentation: [() => Doc.ActivePresentation?.presentation_status === "auto", () => pinnedPresentation], }); - const pinnedDoc = InfoState('You just pinned your doc. Pin another doc to add to the presentation!', { + const pinnedDoc = InfoState("You just pinned your doc. Pin another doc to add to the presentation!", { // eslint-disable-next-line no-use-before-define - addedDoc: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]; - return pinnedDoc; - }, - ], - docPinned: [ - () => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter, - () => { - presentationCounter++; - // eslint-disable-next-line no-use-before-define - return pinnedDoc2; - }, - ], + addedDoc: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + return pinnedDoc}], + docPinned: [() => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter, () => { + presentationCounter++ + // eslint-disable-next-line no-use-before-define + return pinnedDoc2}], }); + + const editLink = InfoState("Want to make your link visible? Click 'show link'.", { + docCreated: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + return this.tutorialStates.makePresentation}], + }, + 'show-link.gif'); - const editLink = InfoState( - "Want to make your link visible? Click 'show link'.", - { - docCreated: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]; - return this.tutorialStates.makePresentation; - }, - ], - }, - 'show-link.gif' - ); - - const madeLink = InfoState( - 'You made your first link! You can view your links by selecting the blue dot.', - { - linkViewed: [() => DocButtonState.Instance.LinkEditorDocView, () => editLink], - }, - 'dash-following-link.gif' - ); - - const startedLink = InfoState( - 'Now click the highlighted link icon on your other document.', - { - linkAdd: [ - () => Doc.Links(lastDocCreated)?.length > linkCounter, - () => { - linkCounter += 1; - return madeLink; - }, - ], - }, - 'dash-create-link-board.gif' - ); + const madeLink = InfoState("You made your first link! You can view your links by selecting the blue dot.", { + linkViewed: [() => DocButtonState.Instance.LinkEditorDocView, () => { + docCounter = this._props.childDocs().length + return editLink}], + }, + 'dash-following-link.gif'); + + const startedLink = InfoState("Now click the highlighted link icon on your other document.", { + linkAdd: [() => Doc.Links(lastDocCreated)?.length > linkCounter, () => { + linkCounter += 1 + return madeLink + }] + }, + 'dash-create-link-board.gif'); this.tutorialStates.movedDoc = InfoState("Great moves! Try creating a second document.", { docCreated: [() => this._props.childDocs().length > docCounter, () => { @@ -359,85 +264,80 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio return this.tutorialStates.multipleDocs}], }, 'dash-colon-menu.gif'); // prettier-ignore - - this.tutorialStates.start = InfoState( - 'Welcome to Dash! Click anywhere and begin typing to create your first text document.', - { - docCreated: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]; - return this.tutorialStates.movedDoc; - }, - ], - }, - undefined, - [skipToLinksButton, skipToPinsButton, skipToPresentationButton] - ); - + + this.tutorialStates.start = InfoState("Welcome to Dash! Click anywhere and begin typing ':' to create your first document.", { + docCreated: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + return this.tutorialStates.movedDoc}] + }, + undefined, + [skipToLinksButton, skipToPinsButton]) + // Information on created nested collections - const createdMarquee = InfoState( - 'Next, right click and drag a square to create the collection', - { - // eslint-disable-next-line no-use-before-define - marqueeMade: [ - () => this._props.childDocs().length < docCounter, - () => { - docCounter -= 1; - return ending; - }, - ], - }, - 'dash-create-collection-marquee.gif' - ); - - const marqueeSelection = InfoState('Want an easier way to make a collection of docs? First add two docs you want to make a collection of', { - marqueeMade: [ - () => this._props.childDocs().length > docCounter, - () => { - docCounter += 1; - lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]; - return createdMarquee; - }, - ], - }); + const createdMarquee = InfoState("Next, right click and drag a square to create the collection", { + // eslint-disable-next-line no-use-before-define + marqueeMade: [() => this._props.childDocs().length < docCounter, () => { + docCounter -= 1 + return ending}], + }, + 'dash-create-collection-marquee.gif') + + const marqueeSelection = InfoState("Want an easier way to make a collection of docs? First add two docs you want to make a collection of", { + marqueeMade: [() => this._props.childDocs().length > docCounter, () => { + docCounter += 1 + lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1] + return createdMarquee}] + }) // Explanation of importing - const easierImport = InfoState('Or, for easier access, you can drag any of the accepted file types from your computer or a webpage and drop it into your dashboard. This includes images, videos, audio, pdfs, and more!', {}, 'dash-', [ - this.createNextButton(ending), - ]); - - this.tutorialStates.importFile = InfoState('Want to learn how to import a file? Import using the import menu on the left hand side', {}, 'dash-import.gif', [this.createNextButton(easierImport)]); + const easierImport = InfoState("Or, for easier access, you can drag any of the accepted file types from your computer or a webpage and drop it into your dashboard. This includes images, videos, audio, pdfs, and more!", { + }, + 'dash-', + [this.createNextButton(ending)]) + + this.tutorialStates.importFile = InfoState("Want to learn how to import a file? Import using the import menu on the left hand side", { + }, + 'dash-import.gif', + [this.createNextButton(easierImport)]) // Editing documents // Accessed by right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome - const extraContentsOfDoc = InfoState('Lastly, all documents also have a context-sensitive toolbar. The toolbar contents vary depending on the document type.', {}, 'context-toolbar.png', [this.createNextButton(ending)]); + const extraContentsOfDoc = InfoState("Lastly, all documents also have a context-sensitive toolbar. The toolbar contents vary depending on the document type.", { + }, + 'context-toolbar.png', + [this.createNextButton(ending)]) - const contentsofDoc = InfoState('You can access the context of a doc through right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome', {}, 'dash-context-menu.gif', [ - this.createNextButton(extraContentsOfDoc), - ]); + const contentsofDoc = InfoState("You can access the context of a doc through right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome", { + }, + 'dash-context-menu.gif', + [this.createNextButton(extraContentsOfDoc)]) - const propertiesofDoc = InfoState('You can also access the properties of a doc through the double arrows in the top right or the single arrow on the right edge of the screen', {}, 'dash-properties-pane.gif', [ - this.createNextButton(contentsofDoc), - ]); + const propertiesofDoc = InfoState("You can also access the properties of a doc through the double arrows in the top right or the single arrow on the right edge of the screen", { + }, + 'dash-properties-pane.gif', + [this.createNextButton(contentsofDoc)]) - this.tutorialStates.editingDocuments = InfoState('Want to learn how to edit a document? Either left or right click the document', {}, 'document-chrome.png', [this.createNextButton(propertiesofDoc)]); - return this.tutorialStates.start; + this.tutorialStates.editingDocuments = InfoState("Want to learn how to edit a document? Either left or right click the document", { + }, + 'document-chrome.png', + [this.createNextButton(propertiesofDoc)]) + return this.tutorialStates.start }; + render() { if (!this.currState) return null; - + return ( - <CollectionFreeFormInfoState - next={this.skipToState} // This ensures skipToState is passed correctly - close={this._props.close} - infoState={this.currState} + <CollectionFreeFormInfoState + next={this.skipToState} // This ensures skipToState is passed correctly + close={this._props.close} + infoState={this.currState} /> ); } -} +}
\ No newline at end of file |