From 4e837a73f5fae06368416f99c047d78f6b94565b Mon Sep 17 00:00:00 2001 From: newalina <157907056+newalina@users.noreply.github.com> Date: Thu, 29 Feb 2024 23:16:33 -0500 Subject: add state message gifs --- .../CollectionFreeFormInfoState.tsx | 20 ++-- .../CollectionFreeFormInfoUI.tsx | 117 +++++++++++++-------- 2 files changed, 83 insertions(+), 54 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 58f6b1593..688f84cd5 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { SettingsManager } from '../../../util/SettingsManager'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import './CollectionFreeFormView.scss'; -// import assets from './assets/link.png'; /** * An Fsa Arc. The first array element is a test condition function that will be observed. @@ -15,18 +14,18 @@ import './CollectionFreeFormView.scss'; export type infoArc = [() => any, (res?: any) => infoState]; export const StateMessage = Symbol('StateMessage'); -export const StateEntryFunc = Symbol('StateEntryFunc'); export const StateMessageGIF = Symbol('StateMessageGIF'); +export const StateEntryFunc = Symbol('StateEntryFunc'); export class infoState { [StateMessage]: string = ''; - [StateEntryFunc]?: () => any; - [StateMessageGIF]?: string = ''; [key: string]: infoArc; - constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) { + [StateMessageGIF]?: string = ''; + [StateEntryFunc]?: () => any; + constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) { this[StateMessage] = message; Object.assign(this, arcs); - this[StateEntryFunc] = entryFunc; this[StateMessageGIF] = messageGif; + this[StateEntryFunc] = entryFunc; } } @@ -36,16 +35,17 @@ export class infoState { * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire), * and an arc transition action function (that sets the next state) + * @param gif the gif displayed when in this state * @param entryFunc a function to call when entering the state * @returns an FSA state */ export function InfoState( msg: string, // arcs: { [key: string]: infoArc }, - entryFunc?: () => any, - gif?: string + gif?: string, + entryFunc?: () => any ) { - return new infoState(msg, arcs, entryFunc, gif); + return new infoState(msg, arcs, gif, entryFunc); } export interface CollectionFreeFormInfoStateProps { @@ -103,7 +103,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent
{this.State?.[StateMessage]}
- state message gif + state message gif
this.props.close())} /> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 8628ca3c3..cd76003c4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -11,6 +11,7 @@ import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksBu import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState'; import { CollectionFreeFormView } from './CollectionFreeFormView'; import './CollectionFreeFormView.scss'; +import { TopBar } from '../../topbar/TopBar'; export interface CollectionFreeFormInfoUIProps { Document: Doc; @@ -75,72 +76,98 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs(), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return oneDoc; - }], - }, setBackground("blue")); // prettier-ignore + docCreated: [() => numDocs(), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + 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; - return movedDoc1; - }], - }, setBackground("red")); // prettier-ignore + // docCreated: [() => numDocs() > 1, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc1; + }], + }); // prettier-ignore - const movedDoc1 = InfoState('Great moves. Try creating a second document.', { + const movedDoc1 = InfoState( + 'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + { 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 + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc2; + }], + }, + 'dash-colon-menu.gif' + ); // prettier-ignore - const movedDoc2 = InfoState('Slick moves. Try creating a second document.', { + const movedDoc2 = InfoState( + 'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + { 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 + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc3; + }], + }, + 'dash-colon-menu.gif' + ); // prettier-ignore - const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', { + const movedDoc3 = InfoState( + 'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + { 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 + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc1; + }], + }, + 'dash-colon-menu.gif' + ); // prettier-ignore - const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', { + 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 + }, + 'dash-create-link-board.gif' + ); // prettier-ignore - const startedLink = InfoState('Now click the highlighted link icon on your other document.', { + const startedLink = InfoState( + 'Now click the highlighted link icon on your other document.', + { linkCreated: [() => numDocLinks(), () => madeLink], docRemoved: [() => numDocs() < 2, () => oneDoc], - }, setBackground("orange")); // prettier-ignore + }, + '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.', { + 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; + alert(numDocLinks() + " cheer for " + numDocLinks() + " link!"); + return viewedLink; }], - }, setBackground("blue")); // prettier-ignore + }, + 'dash-following-link.gif' + ); // prettier-ignore - const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', { + const viewedLink = InfoState( + 'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.', + { linkDeleted: [() => !numDocLinks(), () => multipleDocs], docRemoved: [() => numDocs() < 2, () => oneDoc], docCreated: [() => numDocs() == 3, () => { @@ -148,7 +175,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent activeTool() === InkTool.Pen, () => penMode], - }, setBackground("black")); // prettier-ignore + }, + 'documentation.png', + + ); // prettier-ignore const presentDocs = InfoState( 'Another document! You could make a presentation. Click the pin icon in the top left corner.', @@ -162,7 +192,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() < 3, () => viewedLink], }, - setBackground('black'), '/assets/dash-pin-with-view.gif' ); @@ -244,7 +273,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() == 1, () => oneDoc], - }, setBackground("white")); // prettier-ignore + }); // prettier-ignore return start; }; -- cgit v1.2.3-70-g09d2 From 1a4a5d56a5a9962d75b625bf784420d9f8aedb4e Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 1 Mar 2024 08:31:25 -0500 Subject: added flipping of documentation icon --- .../views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index cd76003c4..a81195c95 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -42,6 +42,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent Date: Sat, 9 Mar 2024 23:58:29 -0500 Subject: add show less show more button --- .../CollectionFreeFormInfoState.tsx | 24 ++++++++++++++++++++- .../CollectionFreeFormInfoUI.tsx | 13 ++++++----- .../public/assets/nProtectOnlineSecurityV1.dmg | Bin 0 -> 19716090 bytes 3 files changed, 31 insertions(+), 6 deletions(-) create mode 100644 src/server/public/assets/nProtectOnlineSecurityV1.dmg (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 688f84cd5..ed77f29ad 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -98,12 +98,34 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent
{this.State?.[StateMessage]}
- state message gif + + state message gif +
this.props.close())} /> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index a81195c95..9ced90a00 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -42,7 +42,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const movedDoc2 = InfoState( @@ -119,7 +120,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const movedDoc3 = InfoState( @@ -133,7 +135,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const multipleDocs = InfoState( @@ -178,7 +181,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent activeTool() === InkTool.Pen, () => penMode], }, 'documentation.png', - + () => TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const presentDocs = InfoState( diff --git a/src/server/public/assets/nProtectOnlineSecurityV1.dmg b/src/server/public/assets/nProtectOnlineSecurityV1.dmg new file mode 100644 index 000000000..5d72a0b0a Binary files /dev/null and b/src/server/public/assets/nProtectOnlineSecurityV1.dmg differ -- cgit v1.2.3-70-g09d2 From a8119d13d78a12c4b3178510b8648168a870b53d Mon Sep 17 00:00:00 2001 From: newalina <157907056+newalina@users.noreply.github.com> Date: Sun, 10 Mar 2024 00:06:54 -0500 Subject: clean --- .../CollectionFreeFormInfoState.tsx | 2 +- .../CollectionFreeFormInfoUI.tsx | 185 +++++++++++---------- 2 files changed, 98 insertions(+), 89 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index ed77f29ad..7661f5aff 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -123,7 +123,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent state message gif -
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 9ced90a00..f416b61ac 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -76,112 +76,118 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent 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; - }], - }); // prettier-ignore + const start = InfoState( + 'Click anywhere and begin typing to create your first text document.', + { + docCreated: [() => numDocs(), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + 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; - return movedDoc1; - }], - }); // 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; + }], + } + ); // prettier-ignore const movedDoc1 = InfoState( - 'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".', - { - docCreated: [() => numDocs() == 2, () => multipleDocs], - docDeleted: [() => numDocs() < 1, () => start], - docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return movedDoc2; - }], - }, - 'dash-colon-menu.gif', - () => TopBar.Instance.FlipDocumentationIcon() + 'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + { + docCreated: [() => numDocs() == 2, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc2; + }], + }, + 'dash-colon-menu.gif', + () => TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const movedDoc2 = InfoState( - 'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".', - { - docCreated: [() => numDocs() == 2, () => multipleDocs], - docDeleted: [() => numDocs() < 1, () => start], - docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return movedDoc3; - }], - }, - 'dash-colon-menu.gif', - () => TopBar.Instance.FlipDocumentationIcon() + 'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + { + docCreated: [() => numDocs() == 2, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc3; + }], + }, + 'dash-colon-menu.gif', + () => TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const movedDoc3 = InfoState( - 'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".', - { - docCreated: [() => numDocs() == 2, () => multipleDocs], - docDeleted: [() => numDocs() < 1, () => start], - docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return movedDoc1; - }], - }, - 'dash-colon-menu.gif', - () => TopBar.Instance.FlipDocumentationIcon() + 'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + { + docCreated: [() => numDocs() == 2, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc1; + }], + }, + '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.', - { - linkStarted: [() => linkStart(), () => startedLink], - docRemoved: [() => numDocs() < 2, () => oneDoc], - }, - 'dash-create-link-board.gif' + 'Let\'s create a new link. Click the link icon on one of your documents.', + { + 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.', - { - linkCreated: [() => numDocLinks(), () => madeLink], - docRemoved: [() => numDocs() < 2, () => oneDoc], - }, - 'dash-create-link-board.gif' + 'Now click the highlighted link icon on your other document.', + { + 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!"); - return viewedLink; - }], - }, - 'dash-following-link.gif' + '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; + }], + }, + 'dash-following-link.gif' ); // prettier-ignore const viewedLink = InfoState( - 'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.', - { - linkDeleted: [() => !numDocLinks(), () => multipleDocs], - docRemoved: [() => numDocs() < 2, () => oneDoc], - docCreated: [() => numDocs() == 3, () => { - trail = pin().length; - return presentDocs; - }], - activePen: [() => activeTool() === InkTool.Pen, () => penMode], - }, - 'documentation.png', - () => TopBar.Instance.FlipDocumentationIcon() + '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; + return presentDocs; + }], + activePen: [() => activeTool() === InkTool.Pen, () => penMode], + }, + 'documentation.png', + () => TopBar.Instance.FlipDocumentationIcon() ); // prettier-ignore const presentDocs = InfoState( @@ -275,9 +281,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent 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], - }); // 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; }; -- cgit v1.2.3-70-g09d2 From 9bf84a22532262f05920142b1b4932a5e832f522 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 13 Mar 2024 10:46:58 -0400 Subject: cleaned up currState in freeform ui --- .../collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index fcc89d662..3b1847c00 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -26,12 +26,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent (this._currState = val)); } // prettier-ignore componentWillUnmount(): void { @@ -42,7 +42,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent; + return !this.currState ? null : ; } } -- cgit v1.2.3-70-g09d2 From 088603bf5a56e84baa3bfd5b9a45c9196df19332 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 13 Mar 2024 17:03:11 -0400 Subject: css and other cleanup for info UI --- .../CollectionFreeFormInfoState.tsx | 60 ++++++++-------------- .../CollectionFreeFormInfoUI.tsx | 43 ++-------------- .../collectionFreeForm/CollectionFreeFormView.scss | 39 +++++++------- 3 files changed, 45 insertions(+), 97 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 7661f5aff..24aedfa56 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -18,9 +18,9 @@ export const StateMessageGIF = Symbol('StateMessageGIF'); export const StateEntryFunc = Symbol('StateEntryFunc'); export class infoState { [StateMessage]: string = ''; - [key: string]: infoArc; [StateMessageGIF]?: string = ''; [StateEntryFunc]?: () => any; + [key: string]: infoArc; constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) { this[StateMessage] = message; Object.assign(this, arcs); @@ -58,6 +58,7 @@ export interface CollectionFreeFormInfoStateProps { export class CollectionFreeFormInfoState extends ObservableReactComponent { _disposers: IReactionDisposer[] = []; @observable _hide = false; + @observable _expanded = false; constructor(props: any) { super(props); @@ -72,22 +73,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent this._disposers.map(disposer => disposer()); - initState = () => - (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => { - return reaction( - // + initState = () => (this._disposers = + this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map( + arc => reaction( arc.test, - res => { - if (res) { - const next = arc.act(res); - this._props.next(next); - } - }, + res => res && this._props.next(arc.act(res)), { fireImmediately: true } - ); - })); + ) + )); // prettier-ignore - componentDidMount(): void { + componentDidMount() { this.initState(); } componentDidUpdate(prevProps: Readonly) { @@ -95,39 +90,24 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent -
{this.State?.[StateMessage]}
-
- - state message gif - +

+
+ state message gif
-
+
this.props.close())} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 3b1847c00..f8fe2bb0b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -61,6 +61,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent firstDoc()?.y; const linkStart = () => DocumentLinksButton.StartLink; + const linkUnstart = () => !DocumentLinksButton.StartLink; const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length; const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView; @@ -94,51 +95,16 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { docX = firstDoc()?.x; docY = firstDoc()?.y; - return movedDoc1; + return movedDoc; }], } ); // prettier-ignore - const movedDoc1 = InfoState( - 'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".', + const movedDoc = InfoState( + 'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (\":\")', { docCreated: [() => numDocs() == 2, () => multipleDocs], docDeleted: [() => numDocs() < 1, () => start], - docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return movedDoc2; - }], - }, - 'dash-colon-menu.gif', - () => TopBar.Instance.FlipDocumentationIcon() - ); // prettier-ignore - - const movedDoc2 = InfoState( - 'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".', - { - docCreated: [() => numDocs() == 2, () => multipleDocs], - docDeleted: [() => numDocs() < 1, () => start], - docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return movedDoc3; - }], - }, - 'dash-colon-menu.gif', - () => TopBar.Instance.FlipDocumentationIcon() - ); // prettier-ignore - - const movedDoc3 = InfoState( - 'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".', - { - docCreated: [() => numDocs() == 2, () => multipleDocs], - docDeleted: [() => numDocs() < 1, () => start], - docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { - docX = firstDoc()?.x; - docY = firstDoc()?.y; - return movedDoc1; - }], }, 'dash-colon-menu.gif', () => TopBar.Instance.FlipDocumentationIcon() @@ -156,6 +122,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent linkUnstart(), () => multipleDocs], linkCreated: [() => numDocLinks(), () => madeLink], docRemoved: [() => numDocs() < 2, () => oneDoc], }, diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 9e7d364ea..2c94446fb 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -273,33 +273,34 @@ margin: 15px; padding: 10px; + .collectionFreeform-infoUI-close { + position: absolute; + top: -10; + left: -10; + } - .msg { + .collectionFreeform-infoUI-msg { + position: relative; + max-width: 500; + margin: 10; + } + .collectionFreeform-infoUI-button { + border-radius: 50px; + font-size: 12px; + padding: 6; position: relative; - // display: block; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; } - .gif-container { + .collectionFreeform-infoUI-gif-container { position: relative; margin-top: 5px; - // display: block; + pointer-events: none; - justify-content: center; - align-items: center; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - - .gif { - background-color: transparent; + > img { height: 300px; } } + .collectionFreeform-hidden { + display: none; + } } -- cgit v1.2.3-70-g09d2 From a5d81be52ec685aede35791a706e5e1cb7f40613 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 14 Mar 2024 08:45:16 -0400 Subject: fixed disabling info ui to keep it off -- use settings manager to turn it back on. --- src/client/util/SettingsManager.tsx | 3 ++- .../collections/collectionFreeForm/CollectionFreeFormInfoState.tsx | 4 ++-- .../views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 2 +- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- src/fields/Doc.ts | 2 ++ 5 files changed, 9 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 682704770..8594a1c92 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -483,7 +483,8 @@ export class SettingsManager extends React.Component<{}> { toggleStatus={BoolCast(Doc.defaultAclPrivate)} onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))} /> - (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} /> + (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} /> + (Doc.IsInfoUIDisabled = !Doc.IsInfoUIDisabled))} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 24aedfa56..73dd7fea3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { SettingsManager } from '../../../util/SettingsManager'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import './CollectionFreeFormView.scss'; +import { Doc } from '../../../../fields/Doc'; /** * An Fsa Arc. The first array element is a test condition function that will be observed. @@ -57,7 +58,6 @@ export interface CollectionFreeFormInfoStateProps { @observer export class CollectionFreeFormInfoState extends ObservableReactComponent { _disposers: IReactionDisposer[] = []; - @observable _hide = false; @observable _expanded = false; constructor(props: any) { @@ -97,7 +97,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent +

{this.State?.[StateMessage]}

); }; + + /** + * Display the Docs in the before/after fields of the comparison. This also supports a GPT flash card use case + * where if there are no Docs in the slots, but the main fieldKey contains text, then + * @param which + * @returns + */ const displayDoc = (which: string) => { const whichDoc = DocCast(this.dataDoc[which]); const targetDoc = DocCast(whichDoc?.annotationOn, whichDoc); - const subjectText = RTFCast(this.Document[this.fieldKey])?.Text; + const subjectText = RTFCast(this.Document[this.fieldKey])?.Text.trim(); // if there is no Doc in the first comparison slot, but the comparison box's fieldKey slot has a RichTextField, then render a text box to show the contents of the document's field key slot // of if there is no Doc in the second comparison slot, but the second slot has a RichTextField, then render a text box to show the contents of the document's field key slot const layoutTemplateString = !targetDoc @@ -188,15 +194,18 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() : undefined; // A bit hacky to try out the concept of using GPT to fill in flashcards -- this whole process should probably be packaged into a script to be more generic. - // If the second slot doesn't have anything in it, but the fieldKey slot has text - // and the fieldKey + "_alternate" has a text that incldues "--TEXT--", then - // treat the fieldKey + "_altenrate" text as a GPT query parameterized by the fieldKey text - // Call GPT to fill in an "answer" value in the second slot. + // If the second slot doesn't have anything in it, but the fieldKey slot has text (e.g., this.text is a string) + // and the fieldKey + "_alternate" has text, then treat the _alternate's text as a GPT query (indicated by (( && )) ) that is parameterized (optionally) + // by the field references in the text (eg., this.text_alternate is + // "((Provide a one sentence definition for (this) that doesn't use any word in (this.excludeWords) ))" + // where (this) is replaced by the text in the fieldKey slot abd this.excludeWords is repalced by the conetnts of the excludeWords field + // A GPT call will put the "answer" in the second slot of the comparison (eg., text_2) if (which.endsWith('2') && !layoutTemplateString && !targetDoc) { - const queryText = RTFCast(this.Document[this.fieldKey + '_alternate'])?.Text; - if (queryText?.includes('--TEXT--') && subjectText) { - this.Document[DocData][this.fieldKey + '_2'] = ''; - gptAPICall(queryText?.replace('--TEXT--', subjectText), GPTCallType.COMPLETION).then(value => (this.Document[DocData][this.fieldKey + '_2'] = value.trim())); + var queryText = RTFCast(this.Document[this.fieldKey + '_alternate']) + ?.Text.replace('(this)', subjectText) // TODO: this should be done in KeyValueBox.setField but it doesn't know about the fieldKey ... + .trim(); + if (subjectText && queryText.match(/\(\(.*\)\)/)) { + KeyValueBox.SetField(this.Document, which, ':=' + queryText, false); // make the second slot be a computed field on the data doc that calls ChatGpt } } return targetDoc || layoutTemplateString ? ( diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bbeacef88..9848f18e0 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1215,7 +1215,7 @@ export class DocumentView extends DocComponent() { if (layout_fieldKey && layout_fieldKey !== 'layout' && layout_fieldKey !== 'layout_icon') this.Document.deiconifyLayout = layout_fieldKey.replace('layout_', ''); } else { const deiconifyLayout = Cast(this.Document.deiconifyLayout, 'string', null); - this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finalFinished); + this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finalFinished, true); this.Document.deiconifyLayout = undefined; this._props.bringToFront?.(this.Document); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 8a49b4757..4ecaaa283 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -11,6 +11,7 @@ import { ViewBoxInterface } from '../DocComponent'; import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; import { DocumentView, OpenWhere } from './DocumentView'; import { PinProps } from './trails'; +import { computed } from 'mobx'; export interface FocusViewOptions { willPan?: boolean; // determines whether to pan to target document @@ -121,9 +122,12 @@ export class FieldView extends React.Component { public static LayoutString(fieldType: { name: string }, fieldStr: string) { return `<${fieldType.name} {...props} fieldKey={'${fieldStr}'}/>`; //e.g., "" } + @computed get fieldval() { + return this.props.Document[this.props.fieldKey]; + } render() { - const field = this.props.Document[this.props.fieldKey]; + const field = this.fieldval; // prettier-ignore if (field instanceof Doc) return

{field.title?.toString()}

; if (field === undefined) return

{''}

; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 89a5ac0b8..2257e6455 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -6,7 +6,7 @@ import { Doc, Field, FieldResult } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { RichTextField } from '../../../fields/RichTextField'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; -import { DocCast } from '../../../fields/Types'; +import { DocCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { Docs } from '../../documents/Documents'; import { SetupDrag } from '../../util/DragManager'; @@ -71,34 +71,51 @@ export class KeyValueBox extends ObservableReactComponent { } } }; - public static CompileKVPScript(value: string): KVPScript | undefined { - const eq = value.startsWith('='); - value = eq ? value.substring(1) : value; - const dubEq = value.startsWith(':=') ? 'computed' : value.startsWith('$=') ? 'script' : false; - value = dubEq ? value.substring(2) : value; - const options: ScriptOptions = { addReturn: true, typecheck: false, params: { this: Doc.name, self: Doc.name, documentView: 'any', _last_: 'any', _readOnly_: 'boolean' }, editable: true }; - if (dubEq) options.typecheck = false; - const script = CompileScript(value, { ...options, transformer: DocumentIconContainer.getTransformer() }); - return !script.compiled ? undefined : { script, type: dubEq, onDelegate: eq }; + /** + * this compiles a string as a script after parsing off initial characters that determine script parameters + * if the script starts with '=', then it will be stored on the delegate of the Doc, otherise on the data doc + * if the script then starts with a ':=', then it will be treated as ComputedField, + * '$=', then it will just be a Script + * @param value + * @returns + */ + public static CompileKVPScript(rawvalue: string): KVPScript | undefined { + const onDelegate = rawvalue.startsWith('='); + rawvalue = onDelegate ? rawvalue.substring(1) : rawvalue; + const type: 'computed' | 'script' | false = rawvalue.startsWith(':=') ? 'computed' : rawvalue.startsWith('$=') ? 'script' : false; + rawvalue = type ? rawvalue.substring(2) : rawvalue; + rawvalue = rawvalue.replace(/.*\(\((.*)\)\)/, 'dashCallChat(_setCacheResult_, this, "$1")'); + const value = ["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any) ? rawvalue : '`' + rawvalue + '`'; + + var script = ScriptField.CompileScript(rawvalue, {}, true, undefined, DocumentIconContainer.getTransformer()); + if (!script.compiled) { + script = ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer()); + } + return !script.compiled ? undefined : { script, type, onDelegate }; } - public static ApplyKVPScript(doc: Doc, key: string, kvpScript: KVPScript, forceOnDelegate?: boolean): boolean { + public static ApplyKVPScript(doc: Doc, key: string, kvpScript: KVPScript, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) { const { script, type, onDelegate } = kvpScript; //const target = onDelegate ? Doc.Layout(doc.layout) : Doc.GetProto(doc); // bcz: TODO need to be able to set fields on layout templates const target = forceOnDelegate || onDelegate || key.startsWith('_') ? doc : DocCast(doc.proto, doc); - let field: Field; - if (type === 'computed') { - field = new ComputedField(script); - } else if (type === 'script') { - field = new ScriptField(script); - } else { - const res = script.run({ this: Doc.Layout(doc), self: doc }, console.log); - if (!res.success) { - target[key] = script.originalScript; - return true; + let field: Field | undefined; + switch (type) { + case 'computed': field = new ComputedField(script); break; // prettier-ignore + case 'script': field = new ScriptField(script); break; // prettier-ignore + default: { + const _setCacheResult_ = (value: FieldResult) => { + field = value as Field; + setResult?.(value); + }; + const res = script.run({ this: Doc.Layout(doc), self: doc, _setCacheResult_ }, console.log); + if (!res.success) { + if (key) target[key] = script.originalScript; + return false; + } + field === undefined && (field = res.result); } - field = res.result; } + if (!key) return field; if (Field.IsField(field, true) && (key !== 'proto' || field !== target)) { target[key] = field; return true; @@ -107,10 +124,10 @@ export class KeyValueBox extends ObservableReactComponent { } @undoBatch - public static SetField(doc: Doc, key: string, value: string, forceOnDelegate?: boolean) { + public static SetField(doc: Doc, key: string, value: string, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) { const script = this.CompileKVPScript(value); if (!script) return false; - return this.ApplyKVPScript(doc, key, script, forceOnDelegate); + return this.ApplyKVPScript(doc, key, script, forceOnDelegate, setResult); } onPointerDown = (e: React.PointerEvent): void => { diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index f9e8ce4f3..d59489a78 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -125,7 +125,7 @@ export class KeyValuePair extends ObservableReactComponent { pinToPres: returnZero, }} GetValue={() => Field.toKeyValueString(this._props.doc, this._props.keyName)} - SetValue={(value: string) => KeyValueBox.SetField(this._props.doc, this._props.keyName, value)} + SetValue={(value: string) => (KeyValueBox.SetField(this._props.doc, this._props.keyName, value) ? true : false)} /> diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 5c4d850ad..62cb460c2 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -137,7 +137,7 @@ export class DashFieldViewInternal extends ObservableReactComponent this._props.tbox._props.PanelWidth() - 20 : returnZero} selectedCell={() => [this._dashDoc!, 0]} fieldKey={this._fieldKey} diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index d5c91fc09..c798ae4b3 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -1,6 +1,6 @@ import { ellipsis, emDash, InputRule, smartQuotes, textblockTypeInputRule } from 'prosemirror-inputrules'; import { NodeSelection, TextSelection } from 'prosemirror-state'; -import { Doc, StrListCast } from '../../../../fields/Doc'; +import { Doc, FieldResult, StrListCast } from '../../../../fields/Doc'; import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; @@ -8,13 +8,14 @@ import { NumCast, StrCast } from '../../../../fields/Types'; import { Utils } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; import { Docs, DocUtils } from '../../../documents/Documents'; +import { CollectionViewType } from '../../../documents/DocumentTypes'; +import { CollectionView } from '../../collections/CollectionView'; +import { ContextMenu } from '../../ContextMenu'; +import { KeyValueBox } from '../KeyValueBox'; import { FormattedTextBox } from './FormattedTextBox'; import { wrappingInputRule } from './prosemirrorPatches'; import { RichTextMenu } from './RichTextMenu'; import { schema } from './schema_rts'; -import { CollectionView } from '../../collections/CollectionView'; -import { CollectionViewType } from '../../../documents/DocumentTypes'; -import { ContextMenu } from '../../ContextMenu'; export class RichTextRules { public Document: Doc; @@ -282,18 +283,28 @@ export class RichTextRules { : tr; }), + new InputRule(new RegExp(/(^|[^=])(\(\(.*\)\))/), (state, match, start, end) => { + var count = 0; // ignore first return value which will be the notation that chat is pending a result + KeyValueBox.SetField(this.Document, '', match[2], false, (gptval: FieldResult) => { + count && this.TextBox.EditorView?.dispatch(this.TextBox.EditorView!.state.tr.insertText(' ' + (gptval as string))); + count++; + }); + return null; + }), + // create a text display of a metadata field on this or another document, or create a hyperlink portal to another document // [[ : ]] // [[:docTitle]] => hyperlink // [[fieldKey]] => show field - // [[fieldKey=value]] => show field and also set its value + // [[fieldKey{:,=:}=value]] => show field and also set its value // [[fieldKey:docTitle]] => show field of doc new InputRule( - new RegExp(/\[\[([a-zA-Z_\? \-0-9]*)(=[a-z,A-Z_@\? /\-0-9]*)?(:[a-zA-Z_@:\.\? \-0-9]+)?\]\]$/), + new RegExp(/\[\[([a-zA-Z_\? \-0-9]*)((=:|:)?=)([a-z,A-Z_@\?+\-*/\ 0-9\(\)]*)?(:[a-zA-Z_@:\.\? \-0-9]+)?\]\]$/), (state, match, start, end) => { const fieldKey = match[1]; - const docTitle = match[3]?.replace(':', ''); - const value = match[2]?.substring(1); + const assign = match[2] === '=' ? '' : match[2]; + const value = match[4]; + const docTitle = match[5]?.replace(':', ''); const linkToDoc = (target: Doc) => { const rstate = this.TextBox.EditorView?.state; const selection = rstate?.selection.$from.pos; @@ -325,13 +336,14 @@ export class RichTextRules { } return state.tr; } - if (value?.includes(',')) { + // if the value has commas assume its an array (unless it's part of a chat gpt call indicated by '((' ) + if (value?.includes(',') && !value.startsWith('((')) { const values = value.split(','); const strs = values.some(v => !v.match(/^[-]?[0-9.]$/)); this.Document[DocData][fieldKey] = strs ? new List(values) : new List(values.map(v => Number(v))); - } else if (value !== '' && value !== undefined) { - const num = value.match(/^[0-9.]$/); - this.Document[DocData][fieldKey] = value === 'true' ? true : value === 'false' ? false : num ? Number(value) : value; + } else if (value) { + KeyValueBox.SetField(this.Document, fieldKey, assign + value, Doc.IsDataProto(this.Document) ? true : undefined, assign ? undefined: + (gptval: FieldResult) => this.Document[DocData][fieldKey] = gptval as string ); // prettier-ignore } const target = getTitledDoc(docTitle); const fieldView = state.schema.nodes.dashField.create({ fieldKey, docId: target?.[Id], hideKey: false }); diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 4706a97fa..c9115be90 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -1,4 +1,3 @@ -import * as React from 'react'; import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model'; import { listItem, orderedList } from 'prosemirror-schema-list'; import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec'; diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 921d7aa5d..30f5f716c 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -34,14 +34,29 @@ import * as JSZip from 'jszip'; import { FieldViewProps } from '../client/views/nodes/FieldView'; export const LinkedTo = '-linkedTo'; export namespace Field { - export function toKeyValueString(doc: Doc, key: string): string { - const onDelegate = Object.keys(doc).includes(key.replace(/^_/, '')); + /** + * Converts a field to its equivalent input string in the key value box such that if the string + * is entered into a keyValueBox it will create an equivalent field (except if showComputedValue is set). + * @param doc doc containing key + * @param key field key to display + * @param showComputedValue whether copmuted function should display its value instead of its function + * @returns string representation of the field + */ + export function toKeyValueString(doc: Doc, key: string, showComputedValue?: boolean): string { + const onDelegate = !Doc.IsDataProto(doc) && Object.keys(doc).includes(key.replace(/^_/, '')); const field = ComputedField.WithoutComputed(() => FieldValue(doc[key])); return !Field.IsField(field) ? key.startsWith('_') ? '=' : '' - : (onDelegate ? '=' : '') + (field instanceof ComputedField ? `:=${field.script.originalScript}` : field instanceof ScriptField ? `$=${field.script.originalScript}` : Field.toScriptString(field)); + : (onDelegate ? '=' : '') + + (field instanceof ComputedField && showComputedValue + ? field._lastComputedResult + : field instanceof ComputedField + ? `:=${field.script.originalScript}` + : field instanceof ScriptField + ? `$=${field.script.originalScript}` + : Field.toScriptString(field)); } export function toScriptString(field: Field) { switch (typeof field) { diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index c7fe72ca6..9021c8896 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -1,15 +1,17 @@ +import { action, makeObservable, observable } from 'mobx'; import { computedFn } from 'mobx-utils'; import { createSimpleSchema, custom, map, object, primitive, PropSchema, serializable, SKIP } from 'serializr'; import { DocServer } from '../client/DocServer'; -import { CompiledScript, CompileScript, ScriptOptions } from '../client/util/Scripting'; +import { CompiledScript, CompileScript, ScriptOptions, Transformer } from '../client/util/Scripting'; import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { autoObject, Deserializable } from '../client/util/SerializationHelper'; import { numberRange } from '../Utils'; -import { Doc, Field, Opt } from './Doc'; -import { Copy, Id, ToJavascriptString, ToScriptString, ToString, ToValue } from './FieldSymbols'; +import { Doc, Field, FieldResult, Opt } from './Doc'; +import { Copy, FieldChanged, Id, ToJavascriptString, ToScriptString, ToString, ToValue } from './FieldSymbols'; import { List } from './List'; import { ObjectField } from './ObjectField'; import { Cast, StrCast } from './Types'; +import { GPTCallType, gptAPICall } from '../client/apis/gpt/GPT'; function optional(propSchema: PropSchema) { return custom( @@ -85,6 +87,13 @@ export class ScriptField extends ObjectField { readonly script: CompiledScript; @serializable(object(scriptSchema)) readonly setterscript: CompiledScript | undefined; + @serializable + @observable + _cachedResult: FieldResult = undefined; + setCacheResult = action((value: FieldResult) => { + this._cachedResult = value; + this[FieldChanged]?.(); + }); @serializable(autoObject()) captures?: List; @@ -122,21 +131,25 @@ export class ScriptField extends ObjectField { [ToString]() { return this.script.originalScript; } - public static CompileScript(script: string, params: object = {}, addReturn = false, capturedVariables?: { [name: string]: Doc | string | number | boolean }) { + public static CompileScript(script: string, params: object = {}, addReturn = false, capturedVariables?: { [name: string]: Doc | string | number | boolean }, transformer?: Transformer) { return CompileScript(script, { params: { this: Doc?.name || 'Doc', // this is the doc that executes the script self: Doc?.name || 'Doc', // self is the root doc of the doc that executes the script + documentView: 'any', _last_: 'any', // _last_ is the previous value of a computed field when it is being triggered to re-run. + _setCacheResult_: 'any', // set the cached value of the function _readOnly_: 'boolean', // _readOnly_ is set when a computed field is executed to indicate that it should not have mobx side-effects. used for checking the value of a set function (see FontIconBox) ...params, }, + transformer, typecheck: false, editable: true, addReturn: addReturn, capturedVariables, }); } + public static MakeFunction(script: string, params: object = {}, capturedVariables?: { [name: string]: Doc | string | number | boolean }) { const compiled = ScriptField.CompileScript(script, params, true, capturedVariables); return compiled.compiled ? new ScriptField(compiled) : undefined; @@ -146,29 +159,62 @@ export class ScriptField extends ObjectField { const compiled = ScriptField.CompileScript(script, params, false, capturedVariables); return compiled.compiled ? new ScriptField(compiled) : undefined; } + public static CallGpt(queryText: string, setVal: (val: FieldResult) => void, target: Doc) { + if (typeof queryText === 'string' && setVal) { + while (queryText.match(/\(this\.[a-zA-Z_]*\)/)?.length) { + const fieldRef = queryText.split('(this.')[1].replace(/\).*/, ''); + queryText = queryText.replace(/\(this\.[a-zA-Z_]*\)/, Field.toString(target[fieldRef] as Field)); + } + setVal(`Chat Pending: ${queryText}`); + gptAPICall(queryText, GPTCallType.COMPLETION).then(result => { + if (queryText.includes('#')) { + const matches = result.match(/-?[0-9][0-9,]+[.]?[0-9]*/); + if (matches?.length) setVal(Number(matches[0].replace(/,/g, ''))); + } else setVal(result.trim()); + }); + } + } } @scriptingGlobal @Deserializable('computed', deserializeScript) export class ComputedField extends ScriptField { - _lastComputedResult: any; - //TODO maybe add an observable cache based on what is passed in for doc, considering there shouldn't really be that many possible values for doc - value = computedFn((doc: Doc) => this._valueOutsideReaction(doc)); - _valueOutsideReaction = (doc: Doc) => (this._lastComputedResult = this.script.compiled && this.script.run({ this: doc, self: doc, value: '', _last_: this._lastComputedResult, _readOnly_: true }, console.log).result); - - [ToValue](doc: Doc) { - return ComputedField.toValue(doc, this); + static undefined = '__undefined'; + static useComputed = true; + static DisableComputedFields() { this.useComputed = false; } // prettier-ignore + static EnableComputedFields() { this.useComputed = true; } // prettier-ignore + static WithoutComputed(fn: () => T) { + this.DisableComputedFields(); + try { + return fn(); + } finally { + this.EnableComputedFields(); + } } - [Copy](): ObjectField { - return new ComputedField(this.script, this.setterscript, this.rawscript); + + constructor(script: CompiledScript | undefined, setterscript?: CompiledScript, rawscript?: string) { + super(script, setterscript, rawscript); + makeObservable(this); } + _lastComputedResult: FieldResult; + value = computedFn((doc: Doc) => this._valueOutsideReaction(doc)); + _valueOutsideReaction = (doc: Doc) => { + this._lastComputedResult = + this._cachedResult ?? (this.script.compiled && this.script.run({ this: doc, self: doc, value: '', _setCacheResult_: this.setCacheResult, _last_: this._lastComputedResult, _readOnly_: true }, console.log).result); + return this._lastComputedResult; + }; + + [ToValue](doc: Doc) { if (ComputedField.useComputed) return { value: this._valueOutsideReaction(doc) }; } // prettier-ignore + [Copy](): ObjectField { return new ComputedField(this.script, this.setterscript, this.rawscript); } // prettier-ignore + public static MakeFunction(script: string, params: object = {}, capturedVariables?: { [name: string]: Doc | string | number | boolean }, setterscript?: string) { const compiled = ScriptField.CompileScript(script, params, true, { value: '', ...capturedVariables }); const compiledsetter = setterscript ? ScriptField.CompileScript(setterscript, { ...params, value: 'any' }, false, capturedVariables) : undefined; const compiledsetscript = compiledsetter?.compiled ? compiledsetter : undefined; return compiled.compiled ? new ComputedField(compiled, compiledsetscript) : undefined; } + public static MakeInterpolatedNumber(fieldKey: string, interpolatorKey: string, doc: Doc, curTimecode: number, defaultVal: Opt) { if (!doc[`${fieldKey}_indexed`]) { const flist = new List(numberRange(curTimecode + 1).map(i => undefined) as any as number[]); @@ -206,33 +252,6 @@ export class ComputedField extends ScriptField { return (doc[`${fieldKey}`] = getField.compiled ? new ComputedField(getField, setField?.compiled ? setField : undefined) : undefined); } } -export namespace ComputedField { - let useComputed = true; - export function DisableComputedFields() { - useComputed = false; - } - - export function EnableComputedFields() { - useComputed = true; - } - - export const undefined = '__undefined'; - - export function WithoutComputed(fn: () => T) { - DisableComputedFields(); - try { - return fn(); - } finally { - EnableComputedFields(); - } - } - - export function toValue(doc: any, value: any) { - if (useComputed) { - return { value: value._valueOutsideReaction(doc) }; - } - } -} ScriptingGlobals.add( function setIndexVal(list: any[], index: number, value: any) { @@ -258,3 +277,6 @@ ScriptingGlobals.add( 'returns the value at a given index of a list', '(list: any[], index: number)' ); +ScriptingGlobals.add(function dashCallChat(setVal: (val: FieldResult) => void, target: Doc, queryText: string) { + ScriptField.CallGpt(queryText, setVal, target); +}, 'calls chat gpt for the query string and then calls setVal with the result'); diff --git a/src/server/public/assets/documentation.png b/src/server/public/assets/documentation.png new file mode 100644 index 000000000..95c76b198 Binary files /dev/null and b/src/server/public/assets/documentation.png differ -- cgit v1.2.3-70-g09d2