diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu')
3 files changed, 75 insertions, 54 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx index c5c5f5cfd..08a48ccb9 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, observable, runInAction } from "mobx"; +import { action, observable, reaction, runInAction } from "mobx"; import React from "react"; -import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils"; +import { returnFalse, returnEmptyFilter, returnTrue } from "../../../../../../ClientUtils"; import { emptyFunction } from "../../../../../../Utils"; import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc"; import { DefaultStyleProvider } from "../../../../StyleProvider"; @@ -13,6 +13,7 @@ import { Transform } from "../../../../../util/Transform"; import { Template } from "../Template"; import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils"; import { ObservableReactComponent } from "../../../../ObservableReactComponent"; +import { IDisposer } from "mobx-utils"; interface TemplateEditingWindowProps { menu: DocCreatorMenu; @@ -25,12 +26,26 @@ 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 } = {}; @observable _variationsTabOpen: boolean = false; @observable _variations: Doc[] = []; + componentDidMount(): void { + this._disposers.windowDimensions = reaction(() => + this._props.menu._resizing, + () => { this.forceUpdate() }, + { fireImmediately: true } + ); + } + + componentWillUnmount() { + Object.values(this._disposers).forEach(disposer => disposer?.()); + } + setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => { this.previewWindow = node; + this.forceUpdate(); } @action setVariationTab = (open: boolean) => { @@ -78,15 +93,15 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit return ( <div className="docCreatorMenu-expanded-template-preview" ref={this.setContainerRef}> - <DocumentView + {this.previewWindow ? <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)} + PanelWidth={() => this.previewWindow?.clientWidth ?? 500} + PanelHeight={() => this.previewWindow?.clientHeight ?? 500} + ScreenToLocalTransform={() => new Transform(/*-this._props.menu._pageX - 5, -this._props.menu._pageY - 35*/0, 0, 1)} renderDepth={5} whenChildContentsActiveChanged={emptyFunction} focus={emptyFunction} @@ -98,18 +113,19 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit searchFilterDocs={returnEmptyDoclist} fitContentsToBox={returnFalse} fitWidth={returnFalse} - /> + /> : null} </div> ) } render() { return ( - <div className={`docCreatorMenu-templates-view`}> + <div className='docCreatorMenu-templates-view'> <div className="docCreatorMenu-expanded-template-preview"> - <div className="top-panel" /> + <div className="top-panel"/> {this.renderedDocPreview} - {this.fireflyVariationsTab} + <div className="docCreatorMenu-option-divider full"/> + {this._variationsTabOpen ? this.fireflyVariationsTab : null} <div className="right-buttons-panel"> <button className="docCreatorMenu-menu-button section-reveal-options top-right" @@ -125,6 +141,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit </button> <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => { this.setVariationTab(!this._variationsTabOpen); + this.forceUpdate(); + console.log('window: ', this.previewWindow) })}> <FontAwesomeIcon icon="lightbulb" /> </button> diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx index 4759a4158..e63be8f9c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx @@ -1,7 +1,7 @@ import { Colors } from "@dash/components/src"; import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; import { Template } from "../Template"; -import { runInAction } from "mobx"; +import { reaction, runInAction } from "mobx"; import React from "react"; import { ObservableReactComponent } from "../../../../ObservableReactComponent"; import { DocCreatorMenu } from "../DocCreatorMenu"; @@ -12,6 +12,7 @@ import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils"; import { Transform } from "../../../../../util/Transform"; import { DefaultStyleProvider } from "../../../../StyleProvider"; import { returnEmptyDoclist } from "../../../../../../fields/Doc"; +import { IDisposer } from "mobx-utils"; export interface TemplatePreviewBoxProps { template: Template; @@ -22,6 +23,13 @@ export interface TemplatePreviewBoxProps { export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> { + private previewWindow: HTMLDivElement | null = null; + + setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => { + this.previewWindow = node; + this.forceUpdate(); + } + render() { const template = this.props.template; @@ -29,46 +37,48 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview <div key={template.title} className="docCreatorMenu-preview-window" + ref={this.setContainerRef} style={{ 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(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}> - { this.props.leftButtonOpts ? - <button - className="option-button left" - onPointerDown={e => - this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts) - }> - <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" /> - </button> : null - } - { this.props.rightButtonOpts ? - <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 } - <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} - /> + onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))} + > + { this.props.leftButtonOpts ? + <button + className="option-button left" + onPointerDown={e => + this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts) + }> + <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" /> + </button> : null + } + { this.props.rightButtonOpts ? + <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 } + <DocumentView + Document={this.props.template.getRenderedDoc()!} //!!! bad + isContentActive={emptyFunction} // !!! should be return false + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => this.previewWindow?.clientWidth ?? this.props.menu._menuDimensions.height * .3} + PanelHeight={() => this.previewWindow?.clientHeight ?? 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/TemplatesSidescrollDisplay.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx index a5f96ef90..1f6eed9e5 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx @@ -44,13 +44,6 @@ export class TemplateSidescrollView extends ObservableReactComponent<SuggestedTe /> ))} </div> - <div className="docCreatorMenu-GPT-options"> - <div className="docCreatorMenu-GPT-options-container"> - <button className="docCreatorMenu-menu-button" onPointerDown={e => this.props.setupButtonClick(e, () => this.props.menu.generatePresetTemplates())}> - <FontAwesomeIcon icon="arrows-rotate" /> - </button> - </div> - </div> </div> ); } |