From 12f5a435ee6476e2e07ded0c9cdd597c70ca8af0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 13 Jan 2025 22:26:35 -0500 Subject: changing ai for images and collections to work mostly the same way. fixes for document view/collection/images to keep things working when the ai editor view reduces the rendered document size. fixed so that freeform views overlaid on images/vieos/etc have the ui menu items of collections. --- src/client/views/nodes/DocumentView.scss | 1 - src/client/views/nodes/DocumentView.tsx | 48 +++++++------ src/client/views/nodes/ImageBox.scss | 19 ++++-- src/client/views/nodes/ImageBox.tsx | 113 +++++++++++++++++++------------ 4 files changed, 111 insertions(+), 70 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index a3d47290a..8e7307d23 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -280,7 +280,6 @@ .documentView-editorView { width: 100%; - overflow-y: scroll; justify-items: center; background-color: rgb(223, 223, 223); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 640d27aa1..e37658ca5 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -85,7 +85,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { reactParent?: React.Component; // parent React component view (see CollectionFreeFormDocumentView) } @observer -export class DocumentViewInternal extends DocComponent() { +export class DocumentViewInternal extends DocComponent() { // this makes mobx trace() statements more descriptive public get displayName() { return 'DocumentViewInternal(' + this.Document.title + ')'; } // prettier-ignore public static SelectAfterContextMenu = true; // whether a document should be selected after it's contextmenu is triggered. @@ -109,7 +109,7 @@ export class DocumentViewInternal extends DocComponent(); private _titleRef = React.createRef(); private _dropDisposer?: DragManager.DragDropDisposer; - constructor(props: FieldViewProps & DocumentViewProps) { + constructor(props: FieldViewProps & DocumentViewProps & { showAIEditor: boolean }) { super(props); makeObservable(this); } @@ -122,12 +122,6 @@ export class DocumentViewInternal extends DocComponent> = undefined; // needs to be accessed from DocumentView wrapper class @observable _animateScaleTime: Opt = undefined; // milliseconds for animating between views. defaults to 300 if not uset @observable _animateScalingTo = 0; - @observable public _showAIEditor: boolean = false; - - @action - showAIEditor() { - this._showAIEditor = !this._showAIEditor; - } get _contentDiv() { return this._mainCont.current; } // prettier-ignore get _docView() { return this._props.DocumentView?.(); } // prettier-ignore @@ -689,7 +683,11 @@ export class DocumentViewInternal extends DocComponent this._rootSelected; panelHeight = () => this._props.PanelHeight() - this.headerMargin; - screenToLocalContent = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin); + screenToLocalContent = () => + this._props + .ScreenToLocalTransform() + .translate(0, -this.headerMargin) + .scale(this._props.showAIEditor ? (this._props.PanelHeight() || 1) / this.rph() : 1); onClickFunc = this.disableClickScriptFunc ? undefined : () => this.onClickHdlr; setHeight = (height: number) => { !this._props.suppressSetHeight && (this.layoutDoc._height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), height)); } // prettier-ignore setContentView = action((view: ViewBoxInterface) => { this._componentView = view; }); // prettier-ignore @@ -715,9 +713,9 @@ export class DocumentViewInternal extends DocComponent this._props.PanelWidth() - this._aiWinHeight; - rph = () => this.panelHeight() - this._aiWinHeight; + @observable _aiWinHeight = 95; + rpw = () => (this.rph() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1); + rph = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight); @computed get viewBoxContents() { TraceMobx(); const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; @@ -728,8 +726,8 @@ export class DocumentViewInternal extends DocComponent - {!this._showAIEditor ? null : ( + {!this._props.showAIEditor ? null : ( <>
() { @computed private get nativeScaling() { if (this.shouldNotScale) return 1; const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0; - if (this.layout_fitWidth || this._props.PanelHeight() / (this.effectiveNativeHeight || 1) > this._props.PanelWidth() / (this.effectiveNativeWidth || 1)) { - return Math.max(minTextScale, this._props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or layout_fitWidth + const ai = this._showAIEditor && this.nativeWidth === this.layoutDoc.width ? 95 : 0; + const effNW = Math.max(this.effectiveNativeWidth - ai, 1); + const effNH = Math.max(this.effectiveNativeHeight - ai, 1); + if (this.layout_fitWidth || (this._props.PanelHeight() - ai) / effNH > (this._props.PanelWidth() - ai) / effNW) { + return Math.max(minTextScale, (this._props.PanelWidth() - ai) / effNW); // width-limited or layout_fitWidth } - return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled + return Math.max(minTextScale, (this._props.PanelHeight() - ai) / effNH); // height-limited or unscaled } @computed private get panelWidth() { return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth(); @@ -1231,7 +1232,7 @@ export class DocumentView extends DocComponent() { } @computed get layout_fitWidth() { - return this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth; + return this._showAIEditor ? false : (this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth); } @computed get anchorViewDoc() { return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document.link_anchor_2) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document.link_anchor_1) : undefined; @@ -1327,9 +1328,11 @@ export class DocumentView extends DocComponent() { } }; + @observable public _showAIEditor: boolean = false; + @action public toggleAIEditor = () => { - this._docViewInternal && this._docViewInternal.showAIEditor(); + this._showAIEditor = !this._showAIEditor; }; public setTextHtmlOverlay = action((text: string | undefined, effect?: Doc) => { @@ -1516,6 +1519,7 @@ export class DocumentView extends DocComponent() { }}> () { @observable private _regenInput = ''; @observable private _canInteract = true; @observable private _regenerateLoading = false; - @observable private _prevImgs: FireflyImageData[] = []; + @observable private _prevImgs: FireflyImageData[] = StrCast(this.Document.ai_firefly_history) ? JSON.parse(StrCast(this.Document.ai_firefly_history)) : []; constructor(props: FieldViewProps) { super(props); @@ -386,8 +387,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { : UpdateIcon( this.layoutDoc[Id] + '_icon_' + new Date().getTime(), contentDiv, - usePanelDimensions ? this._props.PanelWidth() : NumCast(this.layoutDoc._width), - usePanelDimensions ? this._props.PanelHeight() : NumCast(this.layoutDoc._height), + usePanelDimensions || true ? this._props.PanelWidth() : NumCast(this.layoutDoc._width), + usePanelDimensions || true ? this._props.PanelHeight() : NumCast(this.layoutDoc._height), this._props.PanelWidth(), this._props.PanelHeight(), 0, @@ -543,65 +544,91 @@ export class ImageBox extends ViewBoxAnnotatableComponent() {
{ this.dataDoc[this.fieldKey] = new ImageField(img.pathname); this.dataDoc.ai_firefly_prompt = img.prompt; this.dataDoc.ai_firefly_seed = img.seed; }} /> - {img.prompt} + {img.prompt}
))}
); }; + @observable private _fireflyRefStrength = 0; componentAIView = () => { const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); - const showRegenerate = this.Document[DocData].ai; return (
- {showRegenerate && ( -
-
- this._canInteract && (this._regenInput = e.target.value))} - placeholder="Prompt (Optional)" - /> -
+
- )} +
- {showRegenerate && More Options: } + More Options: