From cf791104c0b1608e37c3cf2d25dac7f6f58a1b66 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 18 Feb 2025 09:01:44 -0500
Subject: css fixes for gptPopup + close button

---
 src/client/views/OverlayView.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

(limited to 'src/client/views/OverlayView.tsx')

diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 5e9677b45..20931fc3d 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -18,6 +18,7 @@ import { ObservableReactComponent } from './ObservableReactComponent';
 import './OverlayView.scss';
 import { DefaultStyleProvider, returnEmptyDocViewList } from './StyleProvider';
 import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
+import { SnappingManager } from '../util/SnappingManager';
 
 export type OverlayDisposer = () => void;
 
@@ -27,12 +28,17 @@ export type OverlayElementOptions = {
     width?: number;
     height?: number;
     title?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    isHidden?: () => boolean;
+    backgroundColor?: string;
 };
 
 export interface OverlayWindowProps {
     children: JSX.Element;
     overlayOptions: OverlayElementOptions;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent) => void;
+    isHidden?: () => boolean;
+    backgroundColor?: string;
 }
 
 @observer
@@ -93,15 +99,17 @@ export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps>
 
     render() {
         return (
-            <div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}>
-                <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown}>
+            <div
+                className="overlayWindow-outerDiv"
+                style={{ display: this.props.isHidden?.() ? 'none' : undefined, backgroundColor: this._props.backgroundColor, transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}>
+                <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown} style={{ backgroundColor: SnappingManager.userVariantColor, color: SnappingManager.userColor }}>
                     {this._props.overlayOptions.title || 'Untitled'}
                     <button type="button" onClick={this._props.onClick} className="overlayWindow-closeButton">
                         X
                     </button>
                 </div>
                 <div className="overlayWindow-content">{this.props.children}</div>
-                <div className="overlayWindow-resizeDragger" onPointerDown={this.onResizerPointerDown} />
+                <div className="overlayWindow-resizeDragger" style={{ backgroundColor: SnappingManager.userVariantColor }} onPointerDown={this.onResizerPointerDown} />
             </div>
         );
     }
@@ -166,7 +174,7 @@ export class OverlayView extends ObservableReactComponent<object> {
             if (index !== -1) this._elements.splice(index, 1);
         });
         const wincontents = (
-            <OverlayWindow onClick={() => remove(wincontents)} key={Utils.GenerateGuid()} overlayOptions={options}>
+            <OverlayWindow isHidden={options.isHidden} backgroundColor={options.backgroundColor} onClick={options.onClick ?? (() => remove(wincontents))} key={Utils.GenerateGuid()} overlayOptions={options}>
                 {contents}
             </OverlayWindow>
         );
-- 
cgit v1.2.3-70-g09d2


From 0e7ae057264445ece675e4b5d2380893ea124112 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 28 Feb 2025 15:40:51 -0500
Subject: fixed gptpopup disappearing in overlayView.  added creation of images
 based on selection image in gptpopup.

---
 src/client/views/LightboxView.tsx          | 137 +++++++++++++++--------------
 src/client/views/MainView.tsx              |   1 -
 src/client/views/OverlayView.tsx           |  11 +++
 src/client/views/nodes/ImageBox.tsx        |   2 +-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx |  21 +++--
 5 files changed, 97 insertions(+), 75 deletions(-)

(limited to 'src/client/views/OverlayView.tsx')

diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 0d3feb073..0be847281 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -265,75 +265,80 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                 />
             </div>
         );
-        return !this._doc ? (
-            <OverlayView />
-        ) : (
-            <div
-                className="lightboxView-frame"
-                style={{ background: SnappingManager.userBackgroundColor }}
-                onPointerDown={e => {
-                    downx = e.clientX;
-                    downy = e.clientY;
-                }}
-                onClick={e => ClientUtils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}>
-                <div
-                    className="lightboxView-contents"
-                    style={{
-                        left: this.leftBorder,
-                        top: this.topBorder,
-                        width: this.lightboxWidth(),
-                        height: this.lightboxHeight(),
-                        // clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
-                        background: SnappingManager.userBackgroundColor,
-                    }}>
-                    <GestureOverlay isActive>
-                        <DocumentView
-                            key={this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc
-                            ref={action((r: DocumentView | null) => {
-                                this._docView = r !== null ? r : undefined;
-                            })}
-                            Document={this._doc}
-                            PanelWidth={this.lightboxWidth}
-                            PanelHeight={this.lightboxHeight}
-                            LayoutTemplate={this.lightboxDocTemplate}
-                            isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
-                            isContentActive={returnTrue}
-                            styleProvider={DefaultStyleProvider}
-                            ScreenToLocalTransform={this.lightboxScreenToLocal}
-                            renderDepth={0}
-                            suppressSetHeight={!!this._doc._layout_fitWidth}
-                            containerViewPath={returnEmptyDocViewList}
-                            childFilters={returnEmptyFilter}
-                            childFiltersByRanges={returnEmptyFilter}
-                            searchFilterDocs={returnEmptyDoclist}
-                            addDocument={undefined}
-                            removeDocument={undefined}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            addDocTab={this.AddDocTab}
-                            pinToPres={DocumentView.PinDoc}
-                            focus={emptyFunction}
-                        />
-                    </GestureOverlay>
+        return (
+            <>
+                <div style={{ display: this._doc ? 'none' : undefined }}>
+                    <OverlayView />
                 </div>
+                {!this._doc ? null : (
+                    <div
+                        className="lightboxView-frame"
+                        style={{ background: SnappingManager.userBackgroundColor }}
+                        onPointerDown={e => {
+                            downx = e.clientX;
+                            downy = e.clientY;
+                        }}
+                        onClick={e => ClientUtils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}>
+                        <div
+                            className="lightboxView-contents"
+                            style={{
+                                left: this.leftBorder,
+                                top: this.topBorder,
+                                width: this.lightboxWidth(),
+                                height: this.lightboxHeight(),
+                                // clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
+                                background: SnappingManager.userBackgroundColor,
+                            }}>
+                            <GestureOverlay isActive>
+                                <DocumentView
+                                    key={this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc
+                                    ref={action((r: DocumentView | null) => {
+                                        this._docView = r !== null ? r : undefined;
+                                    })}
+                                    Document={this._doc}
+                                    PanelWidth={this.lightboxWidth}
+                                    PanelHeight={this.lightboxHeight}
+                                    LayoutTemplate={this.lightboxDocTemplate}
+                                    isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
+                                    isContentActive={returnTrue}
+                                    styleProvider={DefaultStyleProvider}
+                                    ScreenToLocalTransform={this.lightboxScreenToLocal}
+                                    renderDepth={0}
+                                    suppressSetHeight={!!this._doc._layout_fitWidth}
+                                    containerViewPath={returnEmptyDocViewList}
+                                    childFilters={returnEmptyFilter}
+                                    childFiltersByRanges={returnEmptyFilter}
+                                    searchFilterDocs={returnEmptyDoclist}
+                                    addDocument={undefined}
+                                    removeDocument={undefined}
+                                    whenChildContentsActiveChanged={emptyFunction}
+                                    addDocTab={this.AddDocTab}
+                                    pinToPres={DocumentView.PinDoc}
+                                    focus={emptyFunction}
+                                />
+                            </GestureOverlay>
+                        </div>
 
-                {this._showPalette && <StickerPalette ref={r => (this._annoPaletteView = r)} Document={DocCast(Doc.UserDoc().myLightboxDrawings)} />}
-                {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length ? true : false, this.previous)}
-                {this.renderNavBtn(
-                    this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
-                    undefined,
-                    this._props.PanelHeight / 2 - 12.5,
-                    'chevron-right',
-                    this._doc && this._future.length ? true : false,
-                    this.next,
-                    this.future().length.toString()
+                        {this._showPalette && <StickerPalette ref={r => (this._annoPaletteView = r)} Document={DocCast(Doc.UserDoc().myLightboxDrawings)} />}
+                        {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length ? true : false, this.previous)}
+                        {this.renderNavBtn(
+                            this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
+                            undefined,
+                            this._props.PanelHeight / 2 - 12.5,
+                            'chevron-right',
+                            this._doc && this._future.length ? true : false,
+                            this.next,
+                            this.future().length.toString()
+                        )}
+                        <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} />
+                        {toggleBtn('lightboxView-navBtn', 'toggle reading view', BoolCast(this._doc?._layout_fitWidth), 'book-open', 'book', this.toggleFitWidth)}
+                        {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-export', '', this.downloadDoc)}
+                        {toggleBtn('lightboxView-paletteBtn', 'toggle sticker palette', this._showPalette === true, 'palette', '', this.togglePalette)}
+                        {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Ink, 'pen', '', this.togglePen)}
+                        {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)}
+                    </div>
                 )}
-                <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} />
-                {toggleBtn('lightboxView-navBtn', 'toggle reading view', BoolCast(this._doc?._layout_fitWidth), 'book-open', 'book', this.toggleFitWidth)}
-                {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-export', '', this.downloadDoc)}
-                {toggleBtn('lightboxView-paletteBtn', 'toggle sticker palette', this._showPalette === true, 'palette', '', this.togglePalette)}
-                {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Ink, 'pen', '', this.togglePen)}
-                {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)}
-            </div>
+            </>
         );
     }
 }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8b0354471..631c10b89 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -169,7 +169,6 @@ export class MainView extends ObservableReactComponent<object> {
     mainDocViewHeight = () => this._dashUIHeight - this.headerBarDocHeight();
 
     componentDidMount() {
-        OverlayView.Instance.addWindow(<GPTPopup />, { x: 400, y: 200, width: 500, height: 400, title: 'GPT', backgroundColor: 'transparent', isHidden: () => !SnappingManager.ChatVisible, onClick: () => SnappingManager.SetChatVisible(false) });
         // Utils.TraceConsoleLog();
         reaction(
             // when a multi-selection occurs, remove focus from all active elements to allow keyboad input to go only to global key manager to act upon selection
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 20931fc3d..6686a162e 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -19,6 +19,7 @@ import './OverlayView.scss';
 import { DefaultStyleProvider, returnEmptyDocViewList } from './StyleProvider';
 import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
 import { SnappingManager } from '../util/SnappingManager';
+import { GPTPopup } from './pdf/GPTPopup/GPTPopup';
 
 export type OverlayDisposer = () => void;
 
@@ -126,6 +127,16 @@ export class OverlayView extends ObservableReactComponent<object> {
         makeObservable(this);
         if (!OverlayView.Instance) {
             OverlayView.Instance = this;
+            this.addWindow(<GPTPopup />, {
+                x: 400,
+                y: 200,
+                width: 500,
+                height: 400,
+                title: 'GPT', //
+                backgroundColor: 'transparent',
+                isHidden: () => !SnappingManager.ChatVisible,
+                onClick: () => SnappingManager.SetChatVisible(false),
+            });
             new ResizeObserver(
                 action(entries => {
                     Array.from(entries).forEach(entry => {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d122ca5b0..279317f49 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -36,7 +36,7 @@ import { OverlayView } from '../OverlayView';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler';
-import { FireflyImageData, FireflyImageDimensions, isFireflyImageData } from '../smartdraw/FireflyConstants';
+import { FireflyImageData, isFireflyImageData } from '../smartdraw/FireflyConstants';
 import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
 import { StickerPalette } from '../smartdraw/StickerPalette';
 import { StyleProp } from '../StyleProp';
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 96c7f37a3..79f5121ed 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -28,6 +28,8 @@ import './GPTPopup.scss';
 import { FireflyImageDimensions } from '../../smartdraw/FireflyConstants';
 import { Upload } from '../../../../server/SharedMediaTypes';
 import { OpenWhere } from '../../nodes/OpenWhere';
+import { DrawingFillHandler } from '../../smartdraw/DrawingFillHandler';
+import { ImageField } from '../../../../fields/URLField';
 
 export enum GPTPopupMode {
     SUMMARY, // summary of seleted document text
@@ -204,13 +206,18 @@ export class GPTPopup extends ObservableReactComponent<object> {
         )) // prettier-ignore
 
     generateFireflyImage = (imgDesc: string) => {
-        // if (this._fireflyRefStrength) {
-        //     DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title), this.Document)?.then(
-        //         action(() => {
-        //             this._regenerateLoading = false;
-        //         })
-        //     );
-        // }  else∂
+        const selView = DocumentView.Selected().lastElement();
+        const selDoc = selView?.Document;
+        if (selDoc && (selView._props.renderDepth > 1 || selDoc[Doc.LayoutFieldKey(selDoc)] instanceof ImageField)) {
+            const oldPrompt = StrCast(selDoc.ai_firefly_prompt, StrCast(selDoc.title));
+            const newPrompt = oldPrompt ? `${oldPrompt} ~~~ ${imgDesc}` : imgDesc;
+            return DrawingFillHandler.drawingToImage(selDoc, 100, newPrompt, selDoc)
+                .then(action(() => (this._userPrompt = '')))
+                .catch(e => {
+                    alert(e);
+                    return undefined;
+                });
+        }
         return SmartDrawHandler.CreateWithFirefly(imgDesc, FireflyImageDimensions.Square, 0)
             .then(
                 action(doc => {
-- 
cgit v1.2.3-70-g09d2

