diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu')
7 files changed, 45 insertions, 35 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index 082ebb7dc..9fb973265 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -705,6 +705,19 @@ } } +.loading-spinner { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + z-index: 200; + font-size: 20px; + font-weight: bold; + color: #17175e; +} + .docCreatorMenu-layout-preview-window-wrapper { flex: 0 0 auto; display: flex; @@ -791,6 +804,8 @@ } } + + //------------------------------------------------------------------------------------------------------------------------------------------ // DocCreatorMenu dashboard CSS //-------------------------------------------------------------------------------------------------------------------------------------------- diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 2ddaa214c..7beb93636 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -88,7 +88,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> // eslint-disable-next-line no-use-before-define static Instance: DocCreatorMenu; - private DEBUG_MODE: boolean = true; + private DEBUG_MODE: boolean = false; private _ref: HTMLDivElement | null = null; private templateManager: TemplateManager; @@ -594,7 +594,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> }; generateVariations = async (onDoc: Doc, prompt: string): Promise<string[]> => { - this._loadingVariants = true; this.variations = []; const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; @@ -605,8 +604,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> await DrawingFillHandler.drawingToImage(clone, 100, prompt, undefined, this) - this._loadingVariants = false; - return this.variations; } @@ -1075,6 +1072,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> <TemplatePreviewGrid title={'Suggested Templates'} menu={this} + loading={this._GPTLoading} optionsButtonOpts={['gear', () => (this._menuContent = 'dashboard')]} setupButtonClick={this.setUpButtonClick} templates={this._suggestedTemplates} 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} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts index ee8bcef51..5fba68c14 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts @@ -58,7 +58,7 @@ export class DynamicField extends TemplateField { // implement Field's abstract method for replacing a subfield with a new one exchangeFields(newField: TemplateField, oldField: TemplateField) { this._subfields.splice(this._subfields.indexOf(oldField), 1, newField); - this.initRenderDoc(this._settings); + this.refreshRenderedDoc(); } get isContentField(): boolean { @@ -84,7 +84,6 @@ export class DynamicField extends TemplateField { } initRenderDoc = (settings: FieldSettings) => { - console.log('initializing') this._disposers.fieldList = reaction(() => DocListCast(this._renderDoc?.[Doc.LayoutFieldKey(this._renderDoc)]), this.handleFieldUpdate); this._subfields = settings.subfields?.map((fieldSettings, index) => {return TemplateField.CreateField(fieldSettings, index, this)}) || []; const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!); @@ -98,7 +97,6 @@ export class DynamicField extends TemplateField { }; refreshRenderedDoc = () => { - console.log('refreshing'); const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!); this._renderDoc = (() => { switch (this.settings.viewType) { case ViewType.CAROUSEL3D: return Docs.Create.Carousel3DDocument(renderedSubfields, this.settings.opts); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts index 625a7bc4a..420d03076 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts @@ -1,3 +1,4 @@ +import { FontSize } from '@dash/components'; import { FieldResult } from '../../../../../../fields/Doc'; import { DocData } from '../../../../../../fields/DocSymbols'; import { RichTextField } from '../../../../../../fields/RichTextField'; @@ -40,7 +41,8 @@ export class ImageTemplateField extends StaticContentField { export class TextTemplateField extends StaticContentField { setContent(text: string, type?: ViewType) { - this.setDataContent(ViewType.TEXT, 'text', RichTextField.textToRtf(text), text, type); + const fontSize: number = TemplateFieldUtils.calculateFontSize(this._dimensions?.width ?? 10, this._dimensions?.height ?? 10, text, true); + this.setDataContent(ViewType.TEXT, 'text', RichTextField.textToRtf(text, undefined, {fontSize: fontSize}), text, type); } initRenderDoc(settings: FieldSettings) { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts index e178756f9..e2779968d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts @@ -62,7 +62,7 @@ export abstract class TemplateField { abstract getContent(): string; setContent(content: string, type?: ViewType) { - this._settings && (this._settings.viewType = type ?? this._settings.viewType); + if (type) this._settings.viewType = type; } setTitle = (title: string) => { @@ -73,6 +73,8 @@ export abstract class TemplateField { updateDocSetting = (setting: string, newVal: string) => { if (this._renderDoc) this._renderDoc[setting] = newVal; + const settings: {[s: string]: string } = {[setting]: newVal} + Object.assign(this.settings.opts, settings); } makeClone(parent?: TemplateField) { |