From c2312afe4ee969043ba3ce4cb9c275a48b0f1ee0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 10 Jan 2025 12:38:00 -0500
Subject: fixed scrolling when ai editor is open.  rearranged items in ImageBox
 ai editor to be more compact. added error catch handler to queryFireflyImage

---
 src/client/views/nodes/DocumentView.tsx         | 50 +++++++++++++++++--------
 src/client/views/nodes/ImageBox.scss            |  6 +--
 src/client/views/nodes/ImageBox.tsx             | 31 +++------------
 src/client/views/smartdraw/SmartDrawHandler.tsx | 34 +++++++++--------
 4 files changed, 59 insertions(+), 62 deletions(-)

(limited to 'src')

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()));
     };
 
     /**
-- 
cgit v1.2.3-70-g09d2