diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 99 |
1 files changed, 58 insertions, 41 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 3e5fc156e..ee154994e 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc'; -import { DocCast, ImageCast, ScriptCast } from '../../../../fields/Types'; +import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { emptyFunction } from '../../../../Utils'; import { SnappingManager } from '../../../util/SnappingManager'; @@ -23,6 +23,7 @@ import { Docs } from '../../../documents/Documents'; import { OpenWhere } from '../OpenWhere'; import { IDisposer } from 'mobx-utils'; import { LightboxView } from '../../LightboxView'; +import ReactLoading from 'react-loading'; export enum LayoutType { Stacked = 'stacked', @@ -53,6 +54,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _GPTOpt: boolean = false; @observable _userPrompt: string = ''; @observable _callCount: number = 0; + @observable _GPTLoading: boolean = false; @observable _pageX: number = 0; @observable _pageY: number = 0; @@ -83,7 +85,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { super(props); makeObservable(this); DocCreatorMenu.Instance = this; - setTimeout(() => this.generateTemplates('')); + //setTimeout(() => this.generateTemplates('')); } @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz }; @@ -182,7 +184,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { document.addEventListener('pointerup', this.onPointerUp); this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon)); this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon)); - this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {console.log(true); this.generateTemplates('')}) + //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()}) } @@ -322,13 +324,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { let prompt: string = `(#${origCount}) Please generate for the fields:`; this.selectedFields?.forEach(field => prompt += ` ${field},`) - prompt += ` Additional prompt: ${inputText}`; + prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`; console.log(prompt) + this._GPTLoading = true; + try { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); if (res && this._callCount === origCount) { + this._GPTTemplates = []; + this._GPTLoading = false; const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res); this.createGeneratedTemplates(templates, 500, 500); } @@ -348,11 +354,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { const right: number = Number(field.brx) * tempWidth / 2; const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore const height = bottom - top; const width = right - left; - const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/$$/g, ''), x: left, y: top }); + console.log(field.title); + const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top }); return doc; }); - const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 }); + const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 }); mainCollection.addDocument(template); @@ -371,6 +378,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { Doc.UnBrushDoc(doc); } + removeTemplate = (doc: Doc) => { + this._templateDocs.splice(this._templateDocs.indexOf(doc), 1); + } + get templatesPreviewContents(){ const renderedTemplates: Doc[] = []; @@ -380,43 +391,46 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { return ( <div className='docCreatorMenu-templates-view'> <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 165}}> - <div className='docCreatorMenu-section-topbar'> - <div className='docCreatorMenu-section-title'>Suggested Templates</div> - <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}> - <FontAwesomeIcon icon='gear'/> - </button> - </div> - <div className='docCreatorMenu-templates-preview-window'> - {this._GPTTemplates?.map(doc => - - //<div className='docCreatorMenu-preview-window empty'/> - ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => - <div - className='docCreatorMenu-preview-window' - style={{ - border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', - boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '' - }} - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> - <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}> - <FontAwesomeIcon icon='pencil' color='black'/> - </button> - <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}> - <FontAwesomeIcon icon='plus' color='black'/> - </button> - <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} /> - </div> - )} - </div> - {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'> - <div className='docCreatorMenu-GPT-options-container'> - <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}> - <FontAwesomeIcon icon='arrows-rotate'/> + <div className='docCreatorMenu-section-topbar'> + <div className='docCreatorMenu-section-title'>Suggested Templates</div> + <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}> + <FontAwesomeIcon icon='gear'/> </button> - <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/> </div> - {this._GPTOpt ? GPTOptions : null} - </div>) : null} + <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading ? 'center' : ''}}> + {this._GPTLoading ? ( + <div className="loading-spinner"> + <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> + </div> + ) : ( + this._GPTTemplates?.map(doc => + ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => + <div + className='docCreatorMenu-preview-window' + style={{ + border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', + boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '' + }} + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> + <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}> + <FontAwesomeIcon icon='pencil' color='black'/> + </button> + <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}> + <FontAwesomeIcon icon='plus' color='black'/> + </button> + <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} /> + </div> + ))} + </div> + {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'> + <div className='docCreatorMenu-GPT-options-container'> + <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}> + <FontAwesomeIcon icon='arrows-rotate'/> + </button> + <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/> + </div> + {this._GPTOpt ? GPTOptions : null} + </div>) : null} </div> <hr className='docCreatorMenu-option-divider full no-margin'/> <div className='docCreatorMenu-section'> @@ -445,6 +459,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}> <FontAwesomeIcon icon='pencil' color='black'/> </button> + <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.removeTemplate(info.doc)})}> + <FontAwesomeIcon icon='trash' color='black'/> + </button> <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} /> </div> )})} |