diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx | 134 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx | 31 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx (renamed from src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx) | 33 |
3 files changed, 169 insertions, 29 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx new file mode 100644 index 000000000..fe7822087 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx @@ -0,0 +1,134 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, observable, runInAction } from "mobx"; +import React from "react"; +import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils"; +import { emptyFunction } from "../../../../../../Utils"; +import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc"; +import { DefaultStyleProvider } from "../../../../StyleProvider"; +import { DocumentView, DocumentViewInternal } from "../../../DocumentView"; +import { DocCreatorMenu } from "../DocCreatorMenu"; +import { TemplateSidescrollView } from "./TemplatesSidescrollDisplay"; +import { observer } from "mobx-react"; +import { Transform } from "../../../../../util/Transform"; +import { Template } from "../Template"; +import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils"; +import { ObservableReactComponent } from "../../../../ObservableReactComponent"; + +interface TemplateEditingWindowProps { + menu: DocCreatorMenu; + template: Template; + setupButtonClick: (e: React.PointerEvent, func: () => void) => void; +} + +@observer +export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> { + + private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.'; + private previewWindow: HTMLDivElement | null = null; + + @observable _variationsTabOpen: boolean = false; + @observable _variations: Doc[] = []; + + setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => { + this.previewWindow = node; + } + + @action setVariationTab = (open: boolean) => { + this._variationsTabOpen = open; + if (this.previewWindow && open) { + this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * .6); + } else if (this.previewWindow && !open) { + this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3); + } + } + + get fireflyVariationsTab() { + + return ( + <> + <TemplateSidescrollView + menu={this._props.menu} + title={'Generate Variations'} + templates={[]} + setupButtonClick={this._props.setupButtonClick} + /> + <div className="docCreatorMenu-section"> + <div className="docCreatorMenu-variation-prompt-input"> + <textarea + className="docCreatorMenu-variation-prompt-input-textbox" + onChange={e => this.fireflyPrompt = e.target.value} + defaultValue={''} + placeholder={'Enter a custom prompt here (optional)'} + /> + <button className="docCreatorMenu-menu-button" + onPointerDown={e => this._props.setupButtonClick(e, async () => { + this._variations = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt); + }) + }> + <FontAwesomeIcon icon="arrows-rotate" /> + </button> + </div> + </div> + </> + ) + } + + get renderedDocPreview(){ + const doc: Doc = this._props.template.getRenderedDoc() as unknown as Doc; + + return ( + <div className="docCreatorMenu-expanded-template-preview" ref={this.setContainerRef}> + <DocumentView + Document={doc} + isContentActive={emptyFunction} + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => this.previewWindow?.clientWidth ?? 1000 - 10} + PanelHeight={() => this.previewWindow?.clientHeight ?? 1000 - 60} + ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)} + renderDepth={5} + whenChildContentsActiveChanged={emptyFunction} + focus={emptyFunction} + styleProvider={DefaultStyleProvider} + addDocTab={DocumentViewInternal.addDocTabFunc} + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnFalse} + fitWidth={returnFalse} + /> + </div> + ) + } + + render() { + return ( + <div className="docCreatorMenu-expanded-template-preview"> + <div className="top-panel" /> + {this.renderedDocPreview} + {this.fireflyVariationsTab} + <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); + })}> + <FontAwesomeIcon icon="lightbulb" /> + </button> + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx index e40192fa8..4759a4158 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx @@ -6,6 +6,12 @@ import React from "react"; import { ObservableReactComponent } from "../../../../ObservableReactComponent"; import { DocCreatorMenu } from "../DocCreatorMenu"; import { IconProp } from "@fortawesome/fontawesome-svg-core"; +import { DocumentView } from "../../../DocumentView"; +import { emptyFunction } from "../../../../../../Utils"; +import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils"; +import { Transform } from "../../../../../util/Transform"; +import { DefaultStyleProvider } from "../../../../StyleProvider"; +import { returnEmptyDoclist } from "../../../../../../fields/Doc"; export interface TemplatePreviewBoxProps { template: Template; @@ -27,7 +33,7 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview border: this.props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', boxShadow: this.props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '', }} - onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => this.props.menu._selectedTemplate = template))}> + onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}> { this.props.leftButtonOpts ? <button className="option-button left" @@ -41,7 +47,28 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview <button className="option-button right" onPointerDown={e => this.props.menu.setUpButtonClick(e, () => this.props.rightButtonOpts)}> <FontAwesomeIcon icon={this.props.rightButtonOpts![0]} color="white" /> </button> : null } - {this.props.menu.docPreview(template.getRenderedDoc())} + <DocumentView + Document={this.props.template.getRenderedDoc()!} //!!! bad + isContentActive={emptyFunction} // !!! should be return false + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => this.props.menu._menuDimensions.height * .3} + PanelHeight={() => this.props.menu._menuDimensions.height * .3} + ScreenToLocalTransform={() => new Transform(-this.props.menu._pageX - 5, -this.props.menu._pageY - 35, 1)} + renderDepth={1} + whenChildContentsActiveChanged={emptyFunction} + focus={emptyFunction} + styleProvider={DefaultStyleProvider} + addDocTab={this.props.menu._props.addDocTab} + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnFalse} + fitWidth={returnFalse} + hideDecorations={true} + /> </div> ) } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx index 517a998d9..5035227d1 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx @@ -13,20 +13,17 @@ import { TemplatePreviewBox } from "./TemplatePreviewBox"; export interface SuggestedTemplatesProps { menu: DocCreatorMenu; + templates: Template[]; + previewBoxLeftButtonOpts?: [string, () => any]; + previewBoxRightButtonOpts?: [string, () => any]; setupButtonClick: (e: React.PointerEvent, func: () => void) => void; } @observer -export class SuggestedTemplatesWindow extends ObservableReactComponent<SuggestedTemplatesProps> { +export class TemplateSidescrollView extends ObservableReactComponent<SuggestedTemplatesProps> { @observable _GPTLoading: boolean = false; - @observable _suggestedTemplates: Template[] = []; - @observable _userTemplates: Template[] = []; - - @action addUserTemplate = (template: Template) => { this._userTemplates.push(template) }; - @action removeUserTemplate = (template: Template) => { this._userTemplates.splice(this._userTemplates.indexOf(template), 1) }; - render() { return ( <div className='docCreatorMenu-templates-view'> @@ -39,12 +36,12 @@ export class SuggestedTemplatesWindow extends ObservableReactComponent<Suggested </button> </div> <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}> - {this._suggestedTemplates.map(template => ( + {this.props.templates.map(template => ( <TemplatePreviewBox template={template} menu={this.props.menu} leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]} - rightButtonOpts={["plus", (template: Template) => this.addUserTemplate(template)]} + rightButtonOpts={["plus", (template: Template) => {}]} /> ))} </div> @@ -56,24 +53,6 @@ export class SuggestedTemplatesWindow extends ObservableReactComponent<Suggested </div> </div> </div> - <hr className="docCreatorMenu-option-divider full no-margin" /> - <div className="docCreatorMenu-section"> - <div className="docCreatorMenu-section-topbar"> - <div className="docCreatorMenu-section-title">Your Templates</div> - <button className="docCreatorMenu-menu-button section-reveal-options"> - <FontAwesomeIcon icon="gear" /> - </button> - </div> - <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}> - {this._userTemplates.map(template => ( - <TemplatePreviewBox - template={template} - menu={this.props.menu} - - /> - ))} - </div> - </div> </div> </div> ); |