From 8195cb97556765a8025de554a44f48d4c15d4c64 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 11 May 2025 03:06:02 -0400 Subject: text and images are no longer messed up --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 15 +++++++++ .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 6 ++-- .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx | 9 +---- .../DocCreatorMenu/Menu/TemplatePreviewBox.tsx | 38 ++++++++++++---------- .../TemplateFieldTypes/DynamicField.ts | 4 +-- .../TemplateFieldTypes/StaticContentField.ts | 4 ++- .../TemplateFieldTypes/TemplateField.ts | 4 ++- 7 files changed, 45 insertions(+), 35 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu') 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 // 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 }; generateVariations = async (onDoc: Doc, prompt: string): Promise => { - this._loadingVariants = true; this.variations = []; const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; @@ -605,8 +604,6 @@ export class DocCreatorMenu extends ObservableReactComponent await DrawingFillHandler.drawingToImage(clone, 100, prompt, undefined, this) - this._loadingVariants = false; - return this.variations; } @@ -1075,6 +1072,7 @@ export class DocCreatorMenu extends ObservableReactComponent (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 { - 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 {}]} 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 { +@observer +export class TemplatePreviewBox extends ObservableReactComponent { private previewWindow: HTMLDivElement | null = null; // private icon: ImageField | undefined = undefined; @@ -51,11 +53,11 @@ export class TemplatePreviewBox extends ObservableReactComponent 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 ? : null } - { this.props.rightButtonOpts ? - : null } {/* { this.icon ? */} @@ -89,14 +91,14 @@ export class TemplatePreviewBox extends ObservableReactComponent 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) { -- cgit v1.2.3-70-g09d2