From f273c97121300eb9b242f7272cc1cc56c396ca8b Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Mon, 6 Jan 2025 18:21:02 -0500 Subject: started a previous images display --- src/client/views/ViewBoxInterface.ts | 3 +- src/client/views/nodes/DocumentView.scss | 17 ++++++- src/client/views/nodes/DocumentView.tsx | 62 +++++++++++++++---------- src/client/views/nodes/ImageBox.scss | 28 +++++++++-- src/client/views/nodes/ImageBox.tsx | 43 ++++++++++++----- src/client/views/smartdraw/SmartDrawHandler.tsx | 35 +++++++------- 6 files changed, 129 insertions(+), 59 deletions(-) (limited to 'src') diff --git a/src/client/views/ViewBoxInterface.ts b/src/client/views/ViewBoxInterface.ts index df08f2564..a66a20cf6 100644 --- a/src/client/views/ViewBoxInterface.ts +++ b/src/client/views/ViewBoxInterface.ts @@ -60,5 +60,6 @@ export abstract class ViewBoxInterface

extends ObservableReactComponent boolean; dontRegisterView?: () => boolean; // KeyValueBox's don't want to register their views isUnstyledView?: () => boolean; // SchemaView and KeyValue are unstyled -- not titles, no opacity, no animations - componentAIView?: (top: number) => JSX.Element; + componentAIView?: () => JSX.Element; + componentAIViewHistory?: () => JSX.Element; } diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 7568e3b57..9490be98c 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -242,7 +242,7 @@ .contentFittingDocumentView * { ::-webkit-scrollbar-track { - background: none; + background: none; } } @@ -270,3 +270,18 @@ position: relative; } } + +.documentView-editorView-history { + position: absolute; + left: 0; + top: 0; +} + +.documentView-editorView { + width: 100%; + overflow-y: scroll; + + .documentView-editorView-resizer { + height: 5px; + } +} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ab58023e3..f79eadde8 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -723,31 +723,43 @@ export class DocumentViewInternal extends DocComponent - - {this._showAIEditor && (this._componentView?.componentAIView?.(this.rph()) ?? null)} +

+
+ +
+ {this._showAIEditor && ( +
+ {this._componentView?.componentAIViewHistory?.() ?? null} +
+ )} + {this._showAIEditor && ( +
+
+ {this._componentView?.componentAIView?.() ?? null} +
+ )}
); } diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 03314e90f..9f1ac11ef 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -140,15 +140,29 @@ opacity: 0; } -.imageBox-aiView { +.imageBox-aiView-history { + display: flex; + flex-direction: column; + align-items: center; padding: 5px; - position: absolute; - overflow: scroll; + gap: 5px; + overflow-y: scroll; + + .imageBox-aiView-img { + width: 100%; + } +} + +.imageBox-aiView { + overflow-y: scroll; text-align: center; font-weight: bold; - margin-top: 5px; + align-content: center; + height: 100%; .imageBox-aiView-subtitle { + position: relative; + left: 5px; align-self: start; } @@ -156,6 +170,8 @@ .imageBox-aiView-options-container { font-weight: normal; text-align: start; + margin: 5px; + padding-left: 5px; } .imageBox-aiView-regenerate, @@ -166,4 +182,8 @@ flex-direction: row; gap: 5px; } + + .imageBox-aiView-input { + width: 50%; + } } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index f00580d77..fc8b7bc27 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -7,8 +7,8 @@ import { observer } from 'mobx-react'; import { extname } from 'path'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { ClientUtils, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils'; -import { Doc, DocListCast, Opt } from '../../../fields/Doc'; +import { ClientUtils, DashColor, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils'; +import { Doc, DocListCast, Opt, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; @@ -34,7 +34,7 @@ import { AnchorMenu } from '../pdf/AnchorMenu'; import { PinDocView, PinProps } from '../PinFuncs'; import { StickerPalette } from '../smartdraw/StickerPalette'; import { StyleProp } from '../StyleProp'; -import { DocumentView } from './DocumentView'; +import { DocumentView, DocumentViewInternal } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { FocusViewOptions } from './FocusViewOptions'; import './ImageBox.scss'; @@ -44,6 +44,7 @@ import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler'; import { Button } from 'browndash-components'; import { SettingsManager } from '../../util/SettingsManager'; import { AiOutlineSend } from 'react-icons/ai'; +import { returnEmptyDocViewList } from '../StyleProvider'; export class ImageEditorData { // eslint-disable-next-line no-use-before-define @@ -532,18 +533,30 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @observable private _regenInput = ''; @observable private _canInteract = true; @observable private _regenerateLoading = false; + @observable private _prevImgUrls: string[] = []; - componentAIView = (top: number) => { + componentAIViewHistory = () => { + return ( +
+ {this._prevImgUrls.map((url: string) => ( + (this.dataDoc[this.fieldKey] = new ImageField(url))} /> + ))} +
+ ); + }; + + componentAIView = () => { const field = Cast(this.dataDoc[this.fieldKey], ImageField); const showRegenerate = this.Document[DocData].ai; return ( -
+
Edit Image with AI {showRegenerate && (
Regenerate AI Image
() { text="Regenerate" type={Type.SEC} // style={{ alignSelf: 'flex-end' }} - icon={this._regenerateLoading && this._regenInput !== '' ? : } + icon={this._regenerateLoading ? : } iconPlacement="right" - onClick={action(async () => { - this._regenerateLoading = true; - await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput); - this._regenerateLoading = false; - this._regenInput = ''; - })} + onClick={undoable( + action(async () => { + this._regenerateLoading = true; + SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newDocs => { + this._prevImgUrls.push(this.paths.lastElement()); + this.dataDoc[this.fieldKey] = new ImageField(newDocs[0]); + this._regenerateLoading = false; + this._regenInput = ''; + }); + }), + 'regenerate image' + )} />