diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx | 90 |
1 files changed, 46 insertions, 44 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx index df6b791c7..0434d0ccb 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx @@ -15,11 +15,11 @@ import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils"; import { ObservableReactComponent } from "../../../../ObservableReactComponent"; import { IDisposer } from "mobx-utils"; import { ImageField } from "../../../../../../fields/URLField"; +import { DocCreatorMenuButton } from "./DocCreatorMenuButton"; interface TemplateEditingWindowProps { menu: DocCreatorMenu; template: Template; - setupButtonClick: (e: React.PointerEvent, func: () => void) => void; } @observer @@ -27,7 +27,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.'; private previewWindow: HTMLDivElement | null = null; - private _disposers: { [name: string]: IDisposer } = {}; + private disposers: { [name: string]: IDisposer } = {}; + private promptInput: HTMLTextAreaElement | null = null; @observable _loading: boolean = false; @observable _variationsTabOpen: boolean = false; @@ -35,7 +36,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit @observable _variations: Template[] = []; componentDidMount(): void { - this._disposers.windowDimensions = reaction(() => + this.disposers.windowDimensions = reaction(() => this._props.menu._resizing, () => { this.forceUpdate() }, { fireImmediately: true } @@ -43,7 +44,12 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit } componentWillUnmount() { - Object.values(this._disposers).forEach(disposer => disposer?.()); + Object.values(this.disposers).forEach(disposer => disposer?.()); + } + + setPromptInputRef: React.LegacyRef<HTMLTextAreaElement> = (node) => { + this.promptInput = node; + this.forceUpdate(); } setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => { @@ -58,6 +64,24 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit } else if (this.previewWindow && !open) { this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3); } + this.forceUpdate(); + } + + generateVariations = async () => { + this._props.menu._variations = []; + this._loading = true; + this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt); + this._variationURLs.forEach(url => { + const newTemplate: Template = this._props.template.clone(true); + this._props.menu._variations.push(newTemplate); + }); + this._loading = false; + setTimeout(() => { + this._variationURLs.forEach((url, i) => { + this._props.menu._variations[i].setImageAsBackground(url, true); + }); + this.forceUpdate(); + }); } get fireflyVariationsTab() { @@ -71,37 +95,27 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit loading={this._loading} templates={this._props.menu._variations} optionsButtonOpts={['gear', () => {}]} - setupButtonClick={this._props.setupButtonClick} previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]} /> <div className="docCreatorMenu-section"> <div className="docCreatorMenu-variation-prompt-input"> <textarea className="docCreatorMenu-variation-prompt-input-textbox" + ref={this.setPromptInputRef} onChange={e => this.fireflyPrompt = e.target.value} + onInput={() => { + if (this.promptInput !== null) { + this.promptInput.style.height = 'auto'; + this.promptInput.style.height = this.promptInput.scrollHeight + 'px'; + } + }} defaultValue={''} placeholder={'Enter a custom prompt here (optional)'} /> - <button className="docCreatorMenu-menu-button" - onPointerDown={e => this._props.setupButtonClick(e, async () => { - this._props.menu._variations = []; - this._loading = true; - this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt); - this._variationURLs.forEach(url => { - const newTemplate: Template = this._props.template.clone(true); - this._props.menu._variations.push(newTemplate); - }); - this._loading = false; - setTimeout(() => { - this._variationURLs.forEach((url, i) => { - this._props.menu._variations[i].setImageAsBackground(url, true); - }); - this.forceUpdate(); - }); - }) - }> - <FontAwesomeIcon icon="arrows-rotate" /> - </button> + <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations}/> + </div> + <div className='docCreatorMenu-variation-options-container'> + </div> </div> </> @@ -146,25 +160,13 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit {this.renderedDocPreview} {this._variationsTabOpen ? this.fireflyVariationsTab : null} <div className="right-buttons-panel"> - <button - className="docCreatorMenu-menu-button section-reveal-options top-right" - onPointerDown={e => - this._props.setupButtonClick(e, () => { - if (this._props.template === this._props.menu._selectedTemplate) { - this._props.menu.updateRenderedPreviewCollection(this._props.template); - } - this._props.menu.setExpandedView(undefined); - }) - }> - <FontAwesomeIcon icon="minimize" /> - </button> - <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => { - this.setVariationTab(!this._variationsTabOpen); - // this._props.template.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true); - this.forceUpdate(); - })}> - <FontAwesomeIcon icon="lightbulb" /> - </button> + <DocCreatorMenuButton icon={'minimize'} function={() => { + if (this._props.template === this._props.menu._selectedTemplate) { + this._props.menu.updateRenderedPreviewCollection(this._props.template); + } + this._props.menu.setExpandedView(undefined); + }}/> + <DocCreatorMenuButton icon={'lightbulb'} function={() => this.setVariationTab(!this._variationsTabOpen)}/> </div> </div> </div> |