aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx277
1 files changed, 129 insertions, 148 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index b50fff9e0..c35099e82 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -1,25 +1,25 @@
-import { action, makeObservable, observable, reaction, runInAction } from "mobx";
-import React from "react";
-import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils";
-import { emptyFunction } from "../../../../../../Utils";
-import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
-import { DefaultStyleProvider } from "../../../../StyleProvider";
-import { DocumentView, DocumentViewInternal } from "../../../DocumentView";
-import { DocCreatorMenu } from "../DocCreatorMenu";
-import { TemplatePreviewGrid } from "./TemplatePreviewGrid";
-import { observer } from "mobx-react";
-import { Transform } from "../../../../../util/Transform";
-import { Template } from "../Template";
-import { ObservableReactComponent } from "../../../../ObservableReactComponent";
-import { IDisposer } from "mobx-utils";
-import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { action, makeObservable, observable, reaction } from 'mobx';
+import React from 'react';
+import { returnFalse, returnEmptyFilter } from '../../../../../../ClientUtils';
+import { emptyFunction } from '../../../../../../Utils';
+import { returnEmptyDoclist } from '../../../../../../fields/Doc';
+import { DefaultStyleProvider } from '../../../../StyleProvider';
+import { DocumentView, DocumentViewInternal } from '../../../DocumentView';
+import { DocCreatorMenu } from '../DocCreatorMenu';
+import { TemplatePreviewGrid } from './TemplatePreviewGrid';
+import { observer } from 'mobx-react';
+import { Transform } from '../../../../../util/Transform';
+import { Template } from '../Template';
+import { ObservableReactComponent } from '../../../../ObservableReactComponent';
+import { IDisposer } from 'mobx-utils';
+import { DocCreatorMenuButton } from './DocCreatorMenuButton';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
export type FireflyStructureOptions = {
numVariations: number;
temperature: number;
useStyleRef: boolean;
-}
+};
interface FireflyVariationsTabProps {
menu: DocCreatorMenu;
@@ -28,112 +28,93 @@ interface FireflyVariationsTabProps {
@observer
export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariationsTabProps> {
+ private _prompt: string = 'Use this template to generate an empty baseball card template.';
+ private _optionsButtonOpts: [IconProp, () => void] = ['gear', emptyFunction];
+ private _previewBoxRightButtonOpts: [IconProp, () => void] = ['gear', () => this.forceUpdate()];
- private prompt: string = 'Use this template to generate an empty baseball card template.';
-
- @observable private promptInput: HTMLTextAreaElement | null = null;
-
+ @observable _fireflyOptions: FireflyStructureOptions = { numVariations: 3, temperature: 0, useStyleRef: false };
+ @observable _promptInput: HTMLTextAreaElement | null = null;
@observable _loading: boolean = false;
@observable _variationsTabOpen: boolean = false;
@observable _variationURLs: string[] = [];
- @observable private fireflyOptions: FireflyStructureOptions = {numVariations: 3, temperature: 0, useStyleRef: false};
-
constructor(props: FireflyVariationsTabProps) {
super(props);
makeObservable(this);
}
- generateVariations = async () => {
+ generateVariations = action(async () => {
this._props.menu._variations = [];
this._loading = true;
const cloneTemplate = this._props.template.clone(false);
cloneTemplate.setMatteBackground();
- const doc: Doc = cloneTemplate.getRenderedDoc()!;
- this._variationURLs = await this._props.menu.generateVariations(doc, this.prompt, this.fireflyOptions);
- this._variationURLs.forEach(() => {
- const newTemplate: Template = this._props.template.clone(true);
- this._props.menu._variations.push(newTemplate);
- });
- setTimeout(() => {
- this._variationURLs.forEach((url, i) => {
- this._props.menu._variations[i].setImageAsBackground(url, true);
- });
- this._loading = false;
- });
- }
-
- setPromptInputRef: React.LegacyRef<HTMLTextAreaElement> = (node) => {
- this.promptInput = node;
- }
-
- // eslint-disable-next-line
- private optionsButtonOpts: [IconProp, () => any] = ['gear', () => {}];
- // eslint-disable-next-line
- private previewBoxRightButtonOpts: [IconProp, () => any] = ['gear', () => this.forceUpdate()];
+ const doc = cloneTemplate.getRenderedDoc()!;
+ this._props.menu.generateVariations(doc, this._prompt, this._fireflyOptions).then(
+ action((urls: string[]) => {
+ (this._variationURLs = urls).forEach(url => {
+ const template = this._props.template.clone(true);
+ template.setImageAsBackground(url, true);
+ this._props.menu._variations.push(template);
+ });
+ this._loading = false;
+ })
+ );
+ });
render() {
return (
- <div className='docCreatorMenu-editing-firefly-section'>
- <div className="docCreatorMenu-option-divider full no-margin-bottom"/>
+ <div className="docCreatorMenu-editing-firefly-section">
+ <div className="docCreatorMenu-option-divider full no-margin-bottom" />
<TemplatePreviewGrid
menu={this._props.menu}
- title={'Generate Variations'}
+ title="Generate Variations"
loading={this._loading}
- styles={'scrolling'}
+ styles="scrolling"
templates={this._props.menu._variations}
- optionsButtonOpts={this.optionsButtonOpts}
- previewBoxRightButtonOpts={this.previewBoxRightButtonOpts}
+ optionsButtonOpts={this._optionsButtonOpts}
+ previewBoxRightButtonOpts={this._previewBoxRightButtonOpts}
/>
<div className="docCreatorMenu-firefly-options">
<div className="docCreatorMenu-variation-prompt-row">
<textarea
className="docCreatorMenu-variation-prompt-input-textbox"
- ref={this.setPromptInputRef}
- onChange={e => { this.prompt = e.target.value }}
+ ref={action((node: HTMLTextAreaElement | null) => (this._promptInput = node))}
+ onChange={e => (this._prompt = e.target.value)}
onInput={() => {
- if (this.promptInput !== null) {
- this.promptInput.style.height = 'auto';
- this.promptInput.style.height = this.promptInput.scrollHeight + 'px';
+ if (this._promptInput !== null) {
+ this._promptInput.style.height = 'auto';
+ this._promptInput.style.height = this._promptInput.scrollHeight + 'px';
}
}}
- defaultValue={''}
- placeholder={'Enter a custom prompt here (optional)'}
+ defaultValue=""
+ placeholder="Enter a custom prompt here (optional)"
/>
- <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations}/>
+ <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations} />
</div>
- <nav className="options‑menu">
- <label className="menu‑item switch">
- <input type="checkbox" checked={this.fireflyOptions.useStyleRef}
- onChange={(e) => runInAction(() => { this.fireflyOptions.useStyleRef = e.target.checked })}
- />
- <span className="slider round"></span>
- <span className="firefly-option-label">Use template as style guide</span>
- </label>
- <div className="menu‑item">
- <span className="firefly-option-label">Variations</span>
- <input type="range" id="variations"
- min="1"
- max="5"
- value={this.fireflyOptions.numVariations}
- onChange={(e) => runInAction(() => { this.fireflyOptions.numVariations = Number(e.target.value) })}
- />
- <span className="value" id="varVal">{this.fireflyOptions.numVariations}</span>
- </div>
- <div className="menu‑item">
- <span className="firefly-option-label">Temperature</span>
- <input type="range" id="temperature"
- min="1"
- max="100"
- value={this.fireflyOptions.temperature}
- onChange={(e) => runInAction(() => { this.fireflyOptions.temperature = Number(e.target.value) })}
- />
- <span className="value" id="tempVal">{this.fireflyOptions.temperature}</span>
- </div>
- </nav>
+ <nav className="options‑menu">
+ <label className="menu‑item switch">
+ <input type="checkbox" checked={this._fireflyOptions.useStyleRef} onChange={action(e => (this._fireflyOptions.useStyleRef = e.target.checked))} />
+ <span className="slider round"></span>
+ <span className="firefly-option-label">Use template as style guide</span>
+ </label>
+ <div className="menu‑item">
+ <span className="firefly-option-label">Variations</span>
+ <input type="range" id="variations" min="1" max="5" value={this._fireflyOptions.numVariations} onChange={action(e => (this._fireflyOptions.numVariations = Number(e.target.value)))} />
+ <span className="value" id="varVal">
+ {this._fireflyOptions.numVariations}
+ </span>
+ </div>
+ <div className="menu‑item">
+ <span className="firefly-option-label">Temperature</span>
+ <input type="range" id="temperature" min="1" max="100" value={this._fireflyOptions.temperature} onChange={action(e => (this._fireflyOptions.temperature = Number(e.target.value)))} />
+ <span className="value" id="tempVal">
+ {this._fireflyOptions.temperature}
+ </span>
+ </div>
+ </nav>
</div>
</div>
- )
+ );
}
}
@@ -144,11 +125,9 @@ interface TemplateEditingWindowProps {
@observer
export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> {
-
private disposers: { [name: string]: IDisposer } = {};
- @observable private previewWindow: HTMLDivElement | null = null;
-
+ @observable private _previewWindow: HTMLDivElement | null = null;
@observable _variationsTabOpen: boolean = false;
constructor(props: TemplateEditingWindowProps) {
@@ -157,83 +136,85 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
}
componentDidMount(): void {
- this.disposers.windowDimensions = reaction(() =>
- this._props.menu._resizing,
- () => { this.forceUpdate() },
+ 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;
- }
-
@action setVariationTab = (open: boolean) => {
this._variationsTabOpen = open;
- if (this.previewWindow && open) {
- this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * .6);
- } else if (this.previewWindow && !open) {
- this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
+ if (this._previewWindow && open) {
+ this._previewWindow.style.height = String(Number(this._previewWindow.clientHeight) * 0.6);
+ } else if (this._previewWindow && !open) {
+ this._previewWindow.style.height = String((Number(this._previewWindow.clientHeight) * 5) / 3);
}
- }
-
- get renderedDocPreview(){
- const doc: Doc = this._props.template.getRenderedDoc() as unknown as Doc;
+ };
+ previewPanelWidth = () => this._previewWindow?.clientWidth ?? 500;
+ previewPanelHeight = () => this._previewWindow?.clientHeight ?? 500;
+ previewScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);
+ get renderedDocPreview() {
+ const doc = this._props.template.getRenderedDoc();
return (
- <div className="docCreatorMenu-expanded-template-preview" ref={this.setContainerRef}>
- {this.previewWindow ? <DocumentView
- Document={doc}
- isContentActive={emptyFunction}
- addDocument={returnFalse}
- moveDocument={returnFalse}
- removeDocument={returnFalse}
- PanelWidth={() => this.previewWindow?.clientWidth ?? 500}
- PanelHeight={() => this.previewWindow?.clientHeight ?? 500}
- ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
- renderDepth={5}
- whenChildContentsActiveChanged={emptyFunction}
- focus={emptyFunction}
- styleProvider={DefaultStyleProvider}
- addDocTab={DocumentViewInternal.addDocTabFunc}
- pinToPres={() => undefined}
- childFilters={returnEmptyFilter}
- childFiltersByRanges={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- fitContentsToBox={returnFalse}
- fitWidth={returnFalse}
- /> : null}
+ <div className="docCreatorMenu-expanded-template-preview" ref={action((node: HTMLDivElement | null) => (this._previewWindow = node))}>
+ {this._previewWindow && doc ? (
+ <DocumentView
+ Document={doc}
+ isContentActive={emptyFunction}
+ addDocument={returnFalse}
+ moveDocument={returnFalse}
+ removeDocument={returnFalse}
+ PanelWidth={this.previewPanelWidth}
+ PanelHeight={this.previewPanelHeight}
+ ScreenToLocalTransform={this.previewScreenToLocalXf}
+ renderDepth={5}
+ whenChildContentsActiveChanged={emptyFunction}
+ focus={emptyFunction}
+ styleProvider={DefaultStyleProvider}
+ addDocTab={DocumentViewInternal.addDocTabFunc}
+ pinToPres={emptyFunction}
+ childFilters={returnEmptyFilter}
+ childFiltersByRanges={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ // fitContentsToBox={returnFalse}
+ // fitWidth={returnFalse}
+ />
+ ) : null}
</div>
- )
+ );
}
+ expandFunc = () => {
+ // if (this._props.template === this._props.menu._selectedTemplate) {
+ // this._props.menu.updateRenderedPreviewCollection(this._props.template);
+ // }
+ this._props.menu.setExpandedView(undefined);
+ };
+ lastFunc = () => {
+ this._props.menu.editLastTemplate();
+ this.forceUpdate();
+ };
+ variationFunc = () => this.setVariationTab(!this._variationsTabOpen);
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._variationsTabOpen ? <FireflyVariationsTab
- menu={this._props.menu}
- template={this._props.template}
- />
- : null}
+ {this._variationsTabOpen ? <FireflyVariationsTab menu={this._props.menu} template={this._props.template} /> : null}
<div className="right-buttons-panel">
- <DocCreatorMenuButton icon={'minimize'} function={() => {
- // if (this._props.template === this._props.menu._selectedTemplate) {
- // this._props.menu.updateRenderedPreviewCollection(this._props.template);
- // }
- this._props.menu.setExpandedView(undefined);
- }}/>
- <DocCreatorMenuButton icon={'lightbulb'} function={() => this.setVariationTab(!this._variationsTabOpen)}/>
- <DocCreatorMenuButton icon={'arrow-rotate-backward'} function={() => { this._props.menu.editLastTemplate(); this.forceUpdate(); }}/>
+ <DocCreatorMenuButton icon="minimize" function={this.expandFunc} />
+ <DocCreatorMenuButton icon="lightbulb" function={this.variationFunc} />
+ <DocCreatorMenuButton icon="arrow-rotate-backward" function={this.lastFunc} />
</div>
</div>
</div>
);
}
-} \ No newline at end of file
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-25 15:44:09 +0000