diff options
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 50 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.scss | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 31 | ||||
| -rw-r--r-- | src/client/views/smartdraw/SmartDrawHandler.tsx | 34 |
4 files changed, 59 insertions, 62 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d656bcf50..640d27aa1 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -52,7 +52,6 @@ import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { PresEffect, PresEffectDirection } from './trails/PresEnums'; import SpringAnimation from './trails/SlideEffect'; import { SpringType, springMappings } from './trails/SpringUtils'; -import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler'; export interface DocumentViewProps extends FieldViewSharedProps { hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected @@ -716,21 +715,21 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document return this._props.styleProvider?.(doc, props, property); }; - rpw = () => this._props.PanelWidth() / 2; - rph = () => this.panelHeight() / 2; + @observable _aiWinHeight = 100; + rpw = () => this._props.PanelWidth() - this._aiWinHeight; + rph = () => this.panelHeight() - this._aiWinHeight; @computed get viewBoxContents() { TraceMobx(); const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; const noBackground = this.Document.isGroup && !this._componentView?.isUnstyledView?.() && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent'); return ( - <div> + <> <div className="documentView-contentsView" style={{ pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'), width: this._showAIEditor ? this.rpw() : undefined, height: this._showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, - justifySelf: this._showAIEditor ? 'center' : undefined, }}> <DocumentContentsView {...this._props} @@ -749,20 +748,39 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)} /> </div> - {this._showAIEditor && ( - <div className="documentView-editorView-history" style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) / 2 }}> - {this._componentView?.componentAIViewHistory?.() ?? null} - </div> - )} - {this._showAIEditor && ( - <div className="documentView-editorView" style={{ height: this.panelHeight() - this.rph() }}> - <div className="documentView-editorView-resizer" /> - {this._componentView?.componentAIView?.() ?? null} - </div> + {!this._showAIEditor ? null : ( + <> + <div + className="documentView-editorView-history" + ref={r => { + this.historyRef(this._oldAiWheel, (this._oldAiWheel = r)); + }} + style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) * 0.95 }}> + {this._componentView?.componentAIViewHistory?.() ?? null} + </div> + <div + className="documentView-editorView" + ref={r => { + this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r)); + }}> + <div className="documentView-editorView-resizer" /> + {this._componentView?.componentAIView?.() ?? null} + </div> + </> )} - </div> + </> ); } + _oldHistoryWheel: HTMLDivElement | null = null; + _oldAiWheel: HTMLDivElement | null = null; + onPassiveWheel = (e: WheelEvent) => { + e.stopPropagation(); + }; + + protected historyRef = (lastEle: HTMLDivElement | null, ele: HTMLDivElement | null) => { + lastEle?.removeEventListener('wheel', this.onPassiveWheel); + ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + }; captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption'); fieldsDropdown = (placeholder: string) => ( diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 9532f4ad3..1b6b3c85a 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -162,16 +162,14 @@ .imageBox-aiView-subtitle { position: relative; - left: 5px; - align-self: start; + align-content: center; } .imageBox-aiView-regenerate-container, .imageBox-aiView-options-container { font-weight: normal; - text-align: start; margin: 5px; - padding-left: 5px; + display: flex; } .imageBox-aiView-regenerate, diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index db8bb2c6e..9838af4d0 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -76,7 +76,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return FieldView.LayoutString(ImageBox, fieldKey); } _ffref = React.createRef<CollectionFreeFormView>(); - _oldWheel: HTMLElement | null = null; private _ignoreScroll = false; private _forcedScroll = false; private _dropDisposer?: DragManager.DragDropDisposer; @@ -536,24 +535,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ); } - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - - protected createDashEventsTarget = (ele: HTMLDivElement | null) => { - // this._dropDisposer?.(); - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); - }; - componentAIViewHistory = () => { return ( - <div className="imageBox-aiView-history" ref={this.createDashEventsTarget}> + <div className="imageBox-aiView-history"> <Button text="Clear History" type={Type.SEC} size={Size.XSMALL} /> {this._prevImgs.map(img => ( - <div> + <div key={img.pathname}> <img - key={img.pathname} className="imageBox-aiView-img" src={img.href} onClick={() => { @@ -573,18 +561,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { 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 ( - <div - className="imageBox-aiView" - ref={(ele: HTMLDivElement | null) => { - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); - }}> - Edit Image with AI + <div className="imageBox-aiView"> {showRegenerate && ( <div className="imageBox-aiView-regenerate-container"> - <text className="imageBox-aiView-subtitle">Regenerate AI Image</text> <div className="imageBox-aiView-regenerate"> <input className="imageBox-aiView-input" @@ -595,7 +574,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { placeholder="Prompt (Optional)" /> <Button - text="Regenerate" + text="Regenerate Image" type={Type.SEC} // style={{ alignSelf: 'flex-end' }} icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} @@ -622,7 +601,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { </div> )} <div className="imageBox-aiView-options-container"> - {showRegenerate && <text className="imageBox-aiView-subtitle"> More Image Options </text>} + {showRegenerate && <text className="imageBox-aiView-subtitle"> More Options: </text>} <div className="imageBox-aiView-options"> <Button type={Type.TERT} diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx index 4052ea852..f635b5642 100644 --- a/src/client/views/smartdraw/SmartDrawHandler.tsx +++ b/src/client/views/smartdraw/SmartDrawHandler.tsx @@ -271,22 +271,24 @@ export class SmartDrawHandler extends ObservableReactComponent<object> { createImageWithFirefly = (input: string, seed?: number, changeInPlace?: boolean): Promise<FireflyImageData> => { this._lastInput.text = input; const dims = FireflyDimensionsMap[this._imgDims]; - return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed: seed }).then(img => { - const seed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1]; - if (!changeInPlace) { - const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, { - title: input.match(/^(.*?)~~~.*$/)?.[1] || input, - nativeWidth: dims.width, - nativeHeight: dims.height, - ai: 'firefly', - ai_firefly_seed: seed, - ai_firefly_prompt: input, - }); - DocumentViewInternal.addDocTabFunc(imgDoc, OpenWhere.addRight); - this._selectedDocs.push(imgDoc); - } - return { prompt: input, seed, pathname: img.accessPaths.agnostic.client }; - }); + return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed: seed }) + .then(img => { + const seed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1]; + if (!changeInPlace) { + const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, { + title: input.match(/^(.*?)~~~.*$/)?.[1] || input, + nativeWidth: dims.width, + nativeHeight: dims.height, + ai: 'firefly', + ai_firefly_seed: seed, + ai_firefly_prompt: input, + }); + DocumentViewInternal.addDocTabFunc(imgDoc, OpenWhere.addRight); + this._selectedDocs.push(imgDoc); + } + return { prompt: input, seed, pathname: img.accessPaths.agnostic.client }; + }) + .catch(e => alert('create image failed: ' + e.toString())); }; /** |