diff options
5 files changed, 106 insertions, 66 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index 8f182d37f..277ca8238 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -230,6 +230,14 @@ &.full { width: 100%; } + + &.no-margin-bottom { + margin-bottom: 0px; + } + + &.no-margin-top { + margin-top: 0px; + } } //------------------------------------------------------------------------------------------------------------------------------------------ diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 48fea91e2..b626fc70c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -89,7 +89,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> static Instance: DocCreatorMenu; private DEBUG_MODE: boolean = true; - private _disposers: { [name: string]: IDisposer } = {}; private _ref: HTMLDivElement | null = null; private templateManager: TemplateManager; @@ -268,7 +267,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> } componentWillUnmount() { - Object.values(this._disposers).forEach(disposer => disposer?.()); document.removeEventListener('pointerdown', this.onPointerDown, true); document.removeEventListener('pointerup', this.onPointerUp); } @@ -318,10 +316,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> const { scale, refPt, transl } = this.getResizeVals(thisPt, dragHdl); !this._interactionLock && runInAction(async () => { // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate) - this._interactionLock = true; - const scaleAspect = {x: scale.x, y: scale.y}; - this.resizeView(refPt, scaleAspect, transl); // prettier-ignore - await new Promise<boolean | undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})}); + this._interactionLock = true; + const scaleAspect = {x: scale.x, y: scale.y}; + this.resizeView(refPt, scaleAspect, transl); // prettier-ignore + await new Promise<boolean | undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})}); }); // prettier-ignore return true; }; @@ -1065,12 +1063,25 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> get renderSelectedViewType() { switch (this._menuContent) { case 'templates': - return <TemplateSidescrollView - title={'Suggested Templates'} - menu={this} - setupButtonClick={this.setUpButtonClick} - templates={this._suggestedTemplates} - /> + return ( + <div className='docCreatorMenu-templates-view'> + <div className="docCreatorMenu-templates-displays"> + <TemplateSidescrollView + title={'Suggested Templates'} + menu={this} + setupButtonClick={this.setUpButtonClick} + templates={this._suggestedTemplates} + /> + <div className="docCreatorMenu-GPT-options"> + <div className="docCreatorMenu-GPT-options-container"> + <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}> + <FontAwesomeIcon icon="arrows-rotate" /> + </button> + </div> + </div> + </div> + </div> + ) case 'templateEditing': return <TemplateEditingWindow setupButtonClick={this.setUpButtonClick} 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> ); } |