fixed gptpopup disappearing in overlayView. added creation of images based on selection image in gptpopup.

1 files changed, 71 insertions, 66 deletions

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>
+            </>
         );
     }
 }