diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx | 38 |
2 files changed, 21 insertions, 26 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx index fa84616cc..8b58ac1cf 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx @@ -15,7 +15,6 @@ import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils"; import { ObservableReactComponent } from "../../../../ObservableReactComponent"; import { IDisposer } from "mobx-utils"; import { ImageField } from "../../../../../../fields/URLField"; -import { TemplatePreviewBoxProps } from "./TemplatePreviewBox"; interface TemplateEditingWindowProps { menu: DocCreatorMenu; @@ -61,12 +60,6 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit } } - func = () => { - this._props.menu._variations.forEach(variation => { - variation.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true) - }); - } - get fireflyVariationsTab() { return ( @@ -77,7 +70,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit title={'Generate Variations'} loading={this._loading} templates={this._props.menu._variations} - optionsButtonOpts={['gear', this.func]} + optionsButtonOpts={['gear', () => {}]} setupButtonClick={this._props.setupButtonClick} previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]} /> diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx index e94ddfc15..c9f817d2f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx @@ -1,5 +1,5 @@ import { Colors } from "@dash/components/src"; -import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; +import { FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { Template } from "../Template"; import { reaction, runInAction } from "mobx"; import React from "react"; @@ -15,15 +15,17 @@ import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc"; import { IDisposer } from "mobx-utils"; import { ImageField } from "../../../../../../fields/URLField"; import { ImageCast } from "../../../../../../fields/Types"; +import { observer } from "mobx-react"; -export interface TemplatePreviewBoxProps { +export interface TemplatePreviewBox_props { template: Template; menu: DocCreatorMenu; leftButtonOpts?: [icon: IconProp, func: (...args: any) => void] rightButtonOpts?: [icon: IconProp, func: (...args: any) => void] } -export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> { +@observer +export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBox_props> { private previewWindow: HTMLDivElement | null = null; // private icon: ImageField | undefined = undefined; @@ -51,11 +53,11 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview // } get doc() { - return this.props.template.getRenderedDoc() as Doc; + return this._props.template.getRenderedDoc() as Doc; } render() { - const template = this.props.template; + const template = this._props.template; return ( <div @@ -63,23 +65,23 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview 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)` : '', + 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}))} + onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.menu.updateSelectedTemplate(template))} > - { this.props.leftButtonOpts ? + { this._props.leftButtonOpts ? <button className="option-button left" onPointerDown={e => - this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts) + this._props.menu.setUpButtonClick(e, () => this._props.leftButtonOpts) }> - <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" /> + <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" /> + { 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 } {/* { this.icon ? <img className="docCreatorMenu-preview-image" src={this.icon.url.href.replace('.png', '_o.png')} /> */} @@ -89,14 +91,14 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview 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)} + 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} + addDocTab={this._props.menu._props.addDocTab} pinToPres={() => undefined} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} |