added tutorial tool, still need to integrate with metadatatool

1 files changed, 453 insertions, 200 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 017ef7191..d16baada6 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,8 +1,8 @@
-import { Button, Colors, Size, Type } from '@dash/components';
+import { Button, Colors, EditableText, IconButton, Size, Toggle, ToggleType, Type } from '@dash/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Slider, Tooltip } from '@mui/material';
 import axios from 'axios';
-import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
@@ -13,11 +13,12 @@ import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
+import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
+import { ComputedField } from '../../../fields/ScriptField';
 import { Cast, DocCast, ImageCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { Upload } from '../../../server/SharedMediaTypes';
 import { emptyFunction } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -26,7 +27,7 @@ import { Networking } from '../../Network';
 import { DragManager } from '../../util/DragManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SnappingManager } from '../../util/SnappingManager';
-import { undoable, undoBatch } from '../../util/UndoManager';
+import { undoable, undoBatch, UndoManager } from '../../util/UndoManager';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
@@ -45,8 +46,8 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
-import { RichTextField } from '../../../fields/RichTextField';
 
+const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
     // eslint-disable-next-line no-use-before-define
     private static _instance: ImageEditorData;
@@ -103,6 +104,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable private _regenerateLoading = false;
     @observable private _prevImgs: FireflyImageData[] = StrCast(this.Document.ai_firefly_history) ? JSON.parse(StrCast(this.Document.ai_firefly_history)) : [];
 
+    // Add these observable properties to the ImageBox class
+    @observable private _outpaintingInProgress = false;
+    @observable private _outpaintingPrompt = '';
+
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
@@ -146,11 +151,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true, delay: 1000 }
         );
-        const { layoutDoc } = this;
         this._disposers.path = reaction(
-            () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
-            ({ nativeSize, width }) => {
-                if ((layoutDoc === this.layoutDoc && !this.layoutDoc._layout_nativeDimEditable) || !this.layoutDoc._height) {
+            () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width), height: this.layoutDoc._height }),
+            ({ nativeSize, width, height }) => {
+                if (!this.layoutDoc._layout_nativeDimEditable || !height) {
                     this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
                 }
             },
@@ -166,6 +170,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
+        this._disposers.outpaint = reaction(
+            () => this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined && !SnappingManager.ShiftKey,
+            complete => complete && this.openOutpaintPrompt(),
+            { fireImmediately: true }
+        );
     }
 
     componentWillUnmount() {
@@ -200,7 +209,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     drop = undoable(
         action((e: Event, de: DragManager.DropEvent) => {
-            if (de.complete.docDragData) {
+            if (de.complete.docDragData && !this._props.rejectDrop?.(de, this.DocumentView?.())) {
                 let added: boolean | undefined;
                 const hitDropTarget = (ele: HTMLElement, dropTarget: HTMLDivElement | null): boolean => {
                     if (!ele) return false;
@@ -210,19 +219,21 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 if (de.metaKey || hitDropTarget(e.target as HTMLElement, this._overlayIconRef.current)) {
                     added = de.complete.docDragData.droppedDocuments.reduce((last: boolean, drop: Doc) => {
                         this.layoutDoc[this.fieldKey + '_usePath'] = 'alternate:hover';
+                        this.Document.$backgroundColor_alternate = ComputedField.MakeFunction('this.data_alternates[0]?.$backgroundColor');
                         return last && Doc.AddDocToList(this.dataDoc, this.fieldKey + '_alternates', drop);
                     }, true);
                 } else if (hitDropTarget(e.target as HTMLElement, this._regenerateIconRef.current)) {
                     this._regenerateLoading = true;
                     const drag = de.complete.docDragData.draggedDocuments.lastElement();
-                    const dragField = drag[Doc.LayoutFieldKey(drag)];
+                    const dragField = drag[Doc.LayoutDataKey(drag)];
+                    const descText = RTFCast(dragField)?.Text || StrCast(dragField) || RTFCast(drag.text)?.Text || StrCast(drag.text) || StrCast(this.Document.title);
                     const oldPrompt = StrCast(this.Document.ai_firefly_prompt, StrCast(this.Document.title));
                     const newPrompt = (text: string) => (oldPrompt ? `${oldPrompt} ~~~ ${text}` : text);
-                    DrawingFillHandler.drawingToImage(this.Document, 100, newPrompt(dragField instanceof RichTextField ? dragField.Text : ''), drag)?.then(action(() => (this._regenerateLoading = false)));
+                    DrawingFillHandler.drawingToImage(this.Document, 90, newPrompt(descText), drag)?.then(action(() => (this._regenerateLoading = false)));
                     added = false;
                 } else if (de.altKey || !this.dataDoc[this.fieldKey]) {
                     const layoutDoc = de.complete.docDragData?.draggedDocuments[0];
-                    const targetField = Doc.LayoutFieldKey(layoutDoc);
+                    const targetField = Doc.LayoutDataKey(layoutDoc);
                     const targetDoc = layoutDoc[DocData];
                     if (targetDoc[targetField] instanceof ImageField) {
                         added = true;
@@ -252,17 +263,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const nw = nscale / oldnativeWidth;
         this.dataDoc[this.fieldKey + '_nativeHeight'] = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) * nw;
         this.dataDoc[this.fieldKey + '_nativeWidth'] = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) * nw;
-        this.dataDoc._freeform_panX = nw * NumCast(this.dataDoc._freeform_panX);
-        this.dataDoc._freeform_panY = nw * NumCast(this.dataDoc._freeform_panY);
-        this.dataDoc._freeform_panX_max = this.dataDoc._freeform_panX_max ? nw * NumCast(this.dataDoc._freeform_panX_max) : undefined;
-        this.dataDoc._freeform_panX_min = this.dataDoc._freeform_panX_min ? nw * NumCast(this.dataDoc._freeform_panX_min) : undefined;
-        this.dataDoc._freeform_panY_max = this.dataDoc._freeform_panY_max ? nw * NumCast(this.dataDoc._freeform_panY_max) : undefined;
-        this.dataDoc._freeform_panY_min = this.dataDoc._freeform_panY_min ? nw * NumCast(this.dataDoc._freeform_panY_min) : undefined;
+        this.dataDoc.freeform_panX = nw * NumCast(this.dataDoc.freeform_panX);
+        this.dataDoc.freeform_panY = nw * NumCast(this.dataDoc.freeform_panY);
+        this.dataDoc.freeform_panX_max = this.dataDoc.freeform_panX_max ? nw * NumCast(this.dataDoc.freeform_panX_max) : undefined;
+        this.dataDoc.freeform_panX_min = this.dataDoc.freeform_panX_min ? nw * NumCast(this.dataDoc.freeform_panX_min) : undefined;
+        this.dataDoc.freeform_panY_max = this.dataDoc.freeform_panY_max ? nw * NumCast(this.dataDoc.freeform_panY_max) : undefined;
+        this.dataDoc.freeform_panY_min = this.dataDoc.freeform_panY_min ? nw * NumCast(this.dataDoc.freeform_panY_min) : undefined;
         const newnativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
         DocListCast(this.dataDoc[this.annotationKey]).forEach(doc => {
             doc.x = (NumCast(doc.x) / oldnativeWidth) * newnativeWidth;
             doc.y = (NumCast(doc.y) / oldnativeWidth) * newnativeWidth;
-            if (!RTFCast(doc[Doc.LayoutFieldKey(doc)])) {
+            if (!RTFCast(doc[Doc.LayoutDataKey(doc)])) {
                 doc.width = (NumCast(doc.width) / oldnativeWidth) * newnativeWidth;
                 doc.height = (NumCast(doc.height) / oldnativeWidth) * newnativeWidth;
             }
@@ -284,40 +295,38 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     crop = (region: Doc | undefined, addCrop?: boolean) => {
         if (!region) return undefined;
         const cropping = Doc.MakeCopy(region, true);
-        const regionData = region[DocData];
-        regionData.lockedPosition = true;
-        regionData.title = 'region:' + this.Document.title;
-        regionData.followLinkToggle = true;
+        region.$lockedPosition = true;
+        region.$title = 'region:' + this.Document.title;
+        region.$followLinkToggle = true;
         this.addDocument(region);
         const anchx = NumCast(cropping.x);
         const anchy = NumCast(cropping.y);
         const anchw = NumCast(cropping._width);
         const anchh = NumCast(cropping._height);
-        const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) / anchh;
-        cropping.title = 'crop: ' + this.Document.title;
+        const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) / anchw;
         cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width);
         cropping.y = NumCast(this.Document.y);
+        cropping.onClick = undefined;
         cropping._width = anchw * (this._props.NativeDimScaling?.() || 1);
         cropping._height = anchh * (this._props.NativeDimScaling?.() || 1);
-        cropping.onClick = undefined;
-        const croppingProto = cropping[DocData];
-        croppingProto.annotationOn = undefined;
-        croppingProto.isDataDoc = true;
-        croppingProto.backgroundColor = undefined;
-        croppingProto.proto = Cast(this.Document.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
-        croppingProto.type = DocumentType.IMG;
-        croppingProto.layout = ImageBox.LayoutString('data');
-        croppingProto.data = ObjectField.MakeCopy(this.dataDoc[this.fieldKey] as ObjectField);
-        croppingProto.data_nativeWidth = anchw;
-        croppingProto.data_nativeHeight = anchh;
-        croppingProto.freeform_scale = viewScale;
-        croppingProto.freeform_panX = anchx / viewScale;
-        croppingProto.freeform_panY = anchy / viewScale;
-        croppingProto.freeform_scale_min = viewScale;
-        croppingProto.freeform_panX_min = anchx / viewScale;
-        croppingProto.freeform_panX_max = anchw / viewScale;
-        croppingProto.freeform_panY_min = anchy / viewScale;
-        croppingProto.freeform_panY_max = anchh / viewScale;
+        cropping.$title = 'crop: ' + this.Document.title;
+        cropping.$annotationOn = undefined;
+        cropping.$isDataDoc = true;
+        cropping.$backgroundColor = undefined;
+        cropping.$proto = Cast(this.Document.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
+        cropping.$type = DocumentType.IMG;
+        cropping.$layout = ImageBox.LayoutString('data');
+        cropping.$data = ObjectField.MakeCopy(this.dataDoc[this.fieldKey] as ObjectField);
+        cropping.$data_nativeWidth = anchw;
+        cropping.$data_nativeHeight = anchh;
+        cropping.$freeform_scale = viewScale;
+        cropping.$freeform_panX = anchx / viewScale;
+        cropping.$freeform_panY = anchy / viewScale;
+        cropping.$freeform_scale_min = viewScale;
+        cropping.$freeform_panX_min = anchx / viewScale;
+        cropping.$freeform_panX_max = anchw / viewScale;
+        cropping.$freeform_panY_min = anchy / viewScale;
+        cropping.$freeform_panY_max = anchh / viewScale;
         if (addCrop) {
             DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' });
             cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width);
@@ -339,6 +348,228 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     });
 
+    @observable _showOutpaintPrompt: boolean = false;
+    @observable _outpaintPromptInput: string = 'Extend this image naturally with matching content';
+
+    @action
+    openOutpaintPrompt = () => {
+        this._outpaintVAlign = '';
+        this._outpaintAlign = '';
+        this._showOutpaintPrompt = true;
+    };
+
+    @action
+    closeOutpaintPrompt = () => {
+        this._showOutpaintPrompt = false;
+    };
+
+    @action
+    cancelOutpaintPrompt = () => {
+        const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']);
+        const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']);
+        this.Document._width = origWidth;
+        this.Document._height = origHeight;
+        this._outpaintingInProgress = false;
+        this.closeOutpaintPrompt();
+    };
+
+    @action
+    handlePromptChange = (val: string | number) => {
+        this._outpaintPromptInput = '' + val;
+    };
+
+    @action
+    submitOutpaintPrompt = () => {
+        this.closeOutpaintPrompt();
+        this.processOutpaintingWithPrompt(this._outpaintPromptInput);
+    };
+
+    @action
+    processOutpaintingWithPrompt = async (customPrompt: string) => {
+        const field = Cast(this.dataDoc[this.fieldKey], ImageField);
+        if (!field) return;
+
+        // Set flag that outpainting is in progress
+        this._outpaintingInProgress = true;
+
+        // Revert dimensions if prompt is blank (acts like Cancel)
+        if (!customPrompt) {
+            this.cancelOutpaintPrompt();
+            return;
+        }
+
+        try {
+            const currentPath = this.choosePath(field.url);
+            const newWidth = NumCast(this.Document._width);
+            const newHeight = NumCast(this.Document._height);
+
+            // Optional: add loading indicator
+            const loadingOverlay = document.createElement('div');
+            loadingOverlay.style.position = 'absolute';
+            loadingOverlay.style.top = '0';
+            loadingOverlay.style.left = '0';
+            loadingOverlay.style.width = '100%';
+            loadingOverlay.style.height = '100%';
+            loadingOverlay.style.background = 'rgba(0,0,0,0.5)';
+            loadingOverlay.style.display = 'flex';
+            loadingOverlay.style.justifyContent = 'center';
+            loadingOverlay.style.alignItems = 'center';
+            loadingOverlay.innerHTML = '<div style="color: white; font-size: 16px;">Generating outpainted image...</div>';
+            this._mainCont?.appendChild(loadingOverlay);
+
+            const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']);
+            const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']);
+            const response = await Networking.PostToServer('/outpaintImage', {
+                imageUrl: currentPath,
+                prompt: customPrompt,
+                originalDimensions: { width: Math.min(newWidth, origWidth), height: Math.min(newHeight, origHeight) },
+                newDimensions: { width: newWidth, height: newHeight },
+                halignment: this._outpaintAlign,
+                valignment: this._outpaintVAlign,
+            });
+
+            const error = ('error' in response && (response.error as string)) || '';
+            if (error.includes('Dropbox') && confirm('Outpaint image failed. Try authorizing DropBox?\r\n' + error.replace(/^[^"]*/, ''))) {
+                DrawingFillHandler.authorizeDropbox();
+            } else {
+                const batch = UndoManager.StartBatch('outpaint image');
+                if (response && typeof response === 'object' && 'url' in response && typeof response.url === 'string') {
+                    if (!this.dataDoc[this.fieldKey + '_alternates']) {
+                        this.dataDoc[this.fieldKey + '_alternates'] = new List<Doc>();
+                    }
+
+                    const originalDoc = Docs.Create.ImageDocument(field.url.href, {
+                        title: `Original: ${this.Document.title}`,
+                        _nativeWidth: Doc.NativeWidth(this.dataDoc),
+                        _nativeHeight: Doc.NativeHeight(this.dataDoc),
+                    });
+
+                    Doc.AddDocToList(this.dataDoc, this.fieldKey + '_alternates', originalDoc);
+
+                    // Replace with new outpainted image
+                    this.dataDoc[this.fieldKey] = new ImageField(response.url);
+
+                    Doc.SetNativeWidth(this.dataDoc, newWidth);
+                    Doc.SetNativeHeight(this.dataDoc, newHeight);
+
+                    this.Document.$ai = true;
+                    this.Document.$ai_outpainted = true;
+                    this.Document.$ai_outpaint_prompt = customPrompt;
+                    this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined;
+                    this.Document[this.fieldKey + '_outpaintOriginalHeight'] = undefined;
+                } else {
+                    this.cancelOutpaintPrompt();
+                    alert('Failed to receive a valid image URL from server.');
+                }
+                batch.end();
+            }
+
+            this._mainCont?.removeChild(loadingOverlay);
+        } catch (error) {
+            this.cancelOutpaintPrompt();
+            alert('An error occurred while outpainting.' + error);
+        } finally {
+            runInAction(() => (this._outpaintingInProgress = false));
+        }
+    };
+
+    @observable _outpaintAlign = '';
+    @observable _outpaintVAlign = '';
+    @computed get outpaintVertical() {
+        return this._props.PanelWidth() / this._props.PanelHeight() < this.nativeSize.nativeWidth / this.nativeSize.nativeHeight;
+    }
+
+    componentUI = (/* boundsLeft: number, boundsTop: number*/) =>
+        !this._showOutpaintPrompt ? null : (
+            <div
+                key="imageBox-componentui"
+                className="imageBox-regenerate-dialog"
+                style={{
+                    top: -70 + (this._props.DocumentView?.().getBounds?.top ?? 0),
+                    left: this._props.DocumentView?.().getBounds?.left ?? 0,
+                    backgroundColor: SettingsManager.userBackgroundColor,
+                    color: SettingsManager.userColor,
+                }}>
+                <div style={{ position: 'absolute', top: 5, right: 5 }}>
+                    <IconButton type={Type.TERT} onClick={this.cancelOutpaintPrompt} icon={<FontAwesomeIcon icon="times" color={'red'} />} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} />
+                </div>
+                <div>Outpaint Image</div>
+                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <EditableText
+                        placeholder="Enter a prompt for extending the image:"
+                        setVal={val => this.handlePromptChange(val)}
+                        val={this._outpaintPromptInput}
+                        type={Type.TERT}
+                        color={SettingsManager.userColor}
+                        background={SettingsManager.userBackgroundColor}
+                    />
+                    <div className="buttons" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <IconButton type={Type.TERT} onClick={this.submitOutpaintPrompt} icon={<AiOutlineSend />} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} />
+                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                            {this.outpaintVertical ? null : (
+                                <Toggle
+                                    type={Type.TERT}
+                                    toggleType={ToggleType.BUTTON}
+                                    toggleStatus={this._outpaintAlign === 'left' && this._outpaintVAlign === ''}
+                                    onClick={action(() => (this._outpaintAlign = 'left'))}
+                                    icon={<FontAwesomeIcon icon="chevron-left" color={SnappingManager.userColor} />}
+                                    color={SnappingManager.userColor}
+                                    background={SnappingManager.userVariantColor}
+                                />
+                            )}
+                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                                {!this.outpaintVertical ? null : (
+                                    <Toggle
+                                        type={Type.TERT}
+                                        toggleType={ToggleType.BUTTON}
+                                        toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === 'top'}
+                                        onClick={action(() => (this._outpaintVAlign = 'top'))}
+                                        icon={<FontAwesomeIcon icon="chevron-up" color={SnappingManager.userColor} />}
+                                        color={SnappingManager.userColor}
+                                        background={SnappingManager.userColor}
+                                    />
+                                )}
+                                <Toggle
+                                    type={Type.TERT}
+                                    toggleType={ToggleType.BUTTON}
+                                    toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === ''}
+                                    onClick={action(() => {
+                                        this._outpaintAlign = '';
+                                        this._outpaintVAlign = '';
+                                    })}
+                                    icon={<FontAwesomeIcon icon="bullseye" color={SnappingManager.userColor} />}
+                                    color={SnappingManager.userColor}
+                                    background={SnappingManager.userColor}
+                                />
+                                {!this.outpaintVertical ? null : (
+                                    <Toggle
+                                        type={Type.TERT}
+                                        toggleType={ToggleType.BUTTON}
+                                        toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === 'bottom'}
+                                        onClick={action(() => (this._outpaintVAlign = 'bottom'))}
+                                        icon={<FontAwesomeIcon icon="chevron-down" color={SnappingManager.userColor} />}
+                                        color={SnappingManager.userColor}
+                                        background={SnappingManager.userColor}
+                                    />
+                                )}
+                            </div>
+                            {this.outpaintVertical ? null : (
+                                <Toggle
+                                    type={Type.TERT}
+                                    toggleType={ToggleType.BUTTON}
+                                    toggleStatus={this._outpaintAlign === 'right' && this._outpaintVAlign === ''}
+                                    onClick={action(() => (this._outpaintAlign = 'right'))}
+                                    icon={<FontAwesomeIcon icon="chevron-right" color={SnappingManager.userColor} />}
+                                    color={SnappingManager.userColor}
+                                    background={SnappingManager.userColor}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+
     specificContextMenu = (): void => {
         const field = Cast(this.dataDoc[this.fieldKey], ImageField);
         if (field) {
@@ -346,36 +577,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             funcs.push({ description: 'Rotate Clockwise 90', event: this.rotate, icon: 'redo-alt' });
             funcs.push({ description: `Show ${this.layoutDoc._showFullRes ? 'Dynamic Res' : 'Full Res'}`, event: this.resolution, icon: 'expand' });
             funcs.push({ description: 'Set Native Pixel Size', event: this.setNativeSize, icon: 'expand-arrows-alt' });
-            funcs.push({
-                description: 'GetImageText',
-                event: () => {
+            funcs.push({ description: 'GetImageText',  event: () => {
                     Networking.PostToServer('/queryFireflyImageText', {
                         file: (file => {
-                            const ext = extname(file);
-                            return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
-                        })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
+                            const ext = file ? extname(file) : '';
+                            return file?.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
+                        })(ImageCast(this.Document[Doc.LayoutDataKey(this.Document)])?.url.href),
                     }).then(text => alert(text));
                 },
                 icon: 'expand-arrows-alt',
-            });
-            funcs.push({
-                description: 'Expand Image',
-                event: () => {
-                    Networking.PostToServer('/expandImage', {
-                        prompt: 'sunny skies',
-                        file: (file => {
-                            const ext = extname(file);
-                            return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
-                        })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
-                    }).then(res => {
-                        const info = res as Upload.ImageInformation;
-                        const img = Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { title: 'expand:' + this.Document.title });
-                        DocUtils.assignImageInfo(info, img);
-                        this._props.addDocTab(img, OpenWhere.addRight);
-                    });
-                },
-                icon: 'expand-arrows-alt',
-            });
+            }); // prettier-ignore
             funcs.push({ description: 'Copy path', event: () => ClientUtils.CopyText(this.choosePath(field.url)), icon: 'copy' });
             funcs.push({ description: 'Open Image Editor', event: this.docEditorView, icon: 'pencil-alt' });
             this.layoutDoc.ai &&
@@ -396,20 +607,35 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 event: action(undoable(async () => await StickerPalette.addToPalette(this.Document), 'save to palette')),
                 icon: this.Document.savedAsSticker ? 'clipboard-check' : 'file-arrow-down',
             });
+            // Add new outpainting option
+            funcs.push({ description: 'Outpaint Image', event: () => this.openOutpaintPrompt(), icon: 'brush' });
+
+            // Add outpainting history option if the image was outpainted
+            this.Document.ai_outpainted &&
+                funcs.push({
+                    description: 'View Original Image',
+                    event: action(() => {
+                        const alternates = DocListCast(this.dataDoc[this.fieldKey + '_alternates']);
+                        if (alternates && alternates.length) {
+                            // Toggle to show the original image
+                            this.layoutDoc[this.fieldKey + '_usePath'] = 'alternate';
+                        }
+                    }),
+                    icon: 'image',
+                });
             ContextMenu.Instance?.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
         }
     };
 
     // updateIcon = () => new Promise<void>(res => res());
-    updateIcon = (usePanelDimensions?: boolean) => {
-        const contentDiv = this._mainCont;
-        return !contentDiv
+    updateIcon = (/* usePanelDimensions?: boolean */) =>
+        !this._mainCont || !DocListCast(this.dataDoc[this.annotationKey]).length
             ? new Promise<void>(res => res())
             : UpdateIcon(
                   this.layoutDoc[Id] + '_icon_' + new Date().getTime(),
-                  contentDiv,
-                  usePanelDimensions || true ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
-                  usePanelDimensions || true ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
+                  this._mainCont,
+                  this._props.PanelWidth(), // usePanelDimensions ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
+                  this._props.PanelHeight(), // usePanelDimensions ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
                   this._props.PanelWidth(),
                   this._props.PanelHeight(),
                   0,
@@ -422,19 +648,18 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                       this.dataDoc.icon_nativeHeight = nativeHeight;
                   }
               );
-    };
 
     choosePath = (url: URL) => {
         if (!url?.href) return '';
         const lower = url.href.toLowerCase();
         if (url.protocol === 'data') return url.href;
         if (url.href.indexOf(window.location.origin) === -1 && url.href.indexOf('dashblobstore') === -1) return ClientUtils.CorsProxy(url.href);
-        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower) || lower.endsWith('/assets/unknown-file-icon-hi.png')) return `/assets/unknown-file-icon-hi.png`;
+        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower) || lower.endsWith(DefaultPath)) return DefaultPath;
 
         const ext = extname(url.href);
         return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
     };
-    getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
+    getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc.freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
 
     @computed get usingAlternate() {
         const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
@@ -443,7 +668,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed get nativeSize() {
         TraceMobx();
-        if (this.paths.length && this.paths[0].includes('icon-hi')) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
+        if (this.paths.length && this.paths[0].includes(DefaultPath)) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
         const nativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500));
         const nativeHeight = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500));
         const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1);
@@ -453,15 +678,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     /**
      * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
      */
-    @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale * ( this._props.NativeDimScaling?.() || 1); } // prettier-ignore
+    @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.()??1); } // prettier-ignore
     /**
      * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
      */
-    @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth, 0.5 * Math.min(NumCast(this.Document.width)))* this.viewScaling; } // prettier-ignore
+    @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth, 0.2 * this._props.PanelWidth())*this.viewScaling; } // prettier-ignore
     /**
      * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
      */
-    @computed get uiBtnScaling() { return Math.min(this.maxWidgetSize / this._sideBtnWidth, 1); } // prettier-ignore
+    @computed get uiBtnScaling() { return Math.min(1/(this._props.NativeDimScaling?.()??1), this.maxWidgetSize / this._sideBtnWidth); } // prettier-ignore
 
     @computed get overlayImageIcon() {
         const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`];
@@ -508,30 +733,33 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     @computed get regenerateImageIcon() {
         return (
-            <div
-                className="imageBox-regenerateDropTarget"
-                ref={this._regenerateIconRef}
-                onClick={() => DocumentView.showDocument(DocCast(this.Document.ai_firefly_generatedDocs), { openLocation: OpenWhere.addRight })}
-                style={{
-                    display: (this._props.isContentActive() && (SnappingManager.CanEmbed || this.Document.ai_firefly_generatedDocs)) || this._regenerateLoading ? 'block' : 'none',
-                    transform: `scale(${this.uiBtnScaling})`,
-                    width: this._sideBtnWidth,
-                    height: this._sideBtnWidth,
-                    background: 'transparent',
-                    // color: SettingsManager.userBackgroundColor,
-                }}>
-                {this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width="100%" height="100%" /> : <FontAwesomeIcon icon="portrait" color={SettingsManager.userColor} size="lg" />}
-            </div>
+            <Tooltip title={'click to show AI generations.  Drop an image on to create a new generation'}>
+                <div
+                    className="imageBox-regenerateDropTarget"
+                    ref={this._regenerateIconRef}
+                    onClick={() => DocCast(this.Document.ai_firefly_generatedDocs) && DocumentView.showDocument(DocCast(this.Document.ai_firefly_generatedDocs)!, { openLocation: OpenWhere.addRight })}
+                    style={{
+                        display: (this._props.isContentActive() && (SnappingManager.CanEmbed || this.Document.ai_firefly_generatedDocs)) || this._regenerateLoading ? 'block' : 'none',
+                        transform: `scale(${this.uiBtnScaling})`,
+                        width: this._sideBtnWidth,
+                        height: this._sideBtnWidth,
+                        background: 'black',
+                        color: 'white',
+                        // color: SettingsManager.userBackgroundColor,
+                    }}>
+                    {this._regenerateLoading ? <ReactLoading type="spin" width="100%" height="100%" /> : <FontAwesomeIcon icon="portrait" size="lg" />}
+                </div>
+            </Tooltip>
         );
     }
 
     @computed get paths() {
         const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); // retrieve the primary image URL that is being rendered from the data doc
         const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
-        const defaultUrl = new URL(ClientUtils.prepend('/assets/unknown-file-icon-hi.png'));
+        const defaultUrl = new URL(ClientUtils.prepend(DefaultPath));
         const altpaths =
             alts
-                ?.map(doc => (doc instanceof Doc ? (ImageCast(doc[Doc.LayoutFieldKey(doc)])?.url ?? defaultUrl) : defaultUrl))
+                ?.map(doc => (doc instanceof Doc ? (ImageCast(doc[Doc.LayoutDataKey(doc)])?.url ?? defaultUrl) : defaultUrl))
                 .filter(url => url)
                 .map(url => this.choosePath(url)) ?? []; // acc  ess the primary layout data of the alternate documents
         const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
@@ -541,11 +769,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get content() {
         TraceMobx();
 
+        const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
+        const alternate = '_' + usePath.replace(':hover', '');
+        const altColor = DashColor(StrCast(this.Document[this.fieldKey + alternate], StrCast(this.Document['$backgroundColor' + alternate], 'black')));
+
         const backColor = DashColor((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string) ?? Colors.WHITE);
         // allow use case where the image is transparent when the alpha value is to smallest possible value from UI (alpha = 1 out of 255)
         const backAlpha = backColor.alpha() < 0.015 && backColor.alpha() > 0 ? backColor.alpha() : 1;
-        const srcpath = this.layoutDoc.hideImage ? '' : this.paths[0];
-        const fadepath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
+        const fadepath = this.layoutDoc.hideImage ? '' : this.paths[0];
+        const srcpath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
         const { nativeWidth, nativeHeight /* , nativeOrientation */ } = this.nativeSize;
         const rotation = NumCast(this.dataDoc[this.fieldKey + '_rotation']);
         const aspect = rotation % 180 ? nativeHeight / nativeWidth : 1;
@@ -572,21 +804,33 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 })}
                 key={this.layoutDoc[Id]}
                 onPointerDown={this.marqueeDown}>
-                <div className="imageBox-fader" style={{ opacity: backAlpha }}>
+                <div
+                    className="imageBox-fader"
+                    style={{
+                        opacity: backAlpha,
+                        flexDirection: this._outpaintVAlign ? 'row' : 'column',
+                        alignItems: this._outpaintAlign === 'left' || this._outpaintVAlign === 'top' ? 'flex-start' : this._outpaintAlign === 'right' || this._outpaintVAlign === 'bottom' ? 'flex-end' : undefined,
+                    }}>
                     <img
                         alt=""
                         ref={action((r: HTMLImageElement | null) => (this.imageRef = r))}
                         key="paths"
                         src={srcpath}
-                        style={{ transform, transformOrigin }}
-                        onError={action(e => {
-                            this._error = e.toString();
-                        })}
+                        style={{
+                            position: 'relative',
+                            transform,
+                            transformOrigin,
+                            width: this._outpaintAlign ? 'max-content' : this._outpaintAlign ? '100%' : undefined,
+                            height: this._outpaintVAlign ? 'max-content' : this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined ? '100%' : undefined,
+                        }}
+                        onError={action(e => (this._error = e.toString()))}
                         draggable={false}
                         width={nativeWidth}
                     />
                     {fadepath === srcpath ? null : (
-                        <div className={`imageBox-fadeBlocker${this.usingAlternate ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
+                        <div
+                            className={`imageBox-fadeBlocker${!this.usingAlternate ? '-hover' : ''}`}
+                            style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms'), background: altColor.alpha() === 0 ? 'transparent' : altColor.toString() }}>
                             <img alt="" className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
                         </div>
                     )}
@@ -650,7 +894,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             onClick={action(async () => {
                                 this._regenerateLoading = true;
                                 if (this._fireflyRefStrength) {
-                                    DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title), this.Document)?.then(action(() => (this._regenerateLoading = false)));
+                                    DrawingFillHandler.drawingToImage(this.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title))?.then(action(() => (this._regenerateLoading = false)));
                                 } else {
                                     SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput || StrCast(this.Document.title), true).then(
                                         action(newImgs => {
@@ -659,7 +903,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                                 const url = firstImg.pathname;
                                                 const imgField = new ImageField(url);
                                                 this._prevImgs.length === 0 &&
-                                                    this._prevImgs.push({ prompt: StrCast(this.dataDoc.ai_firefly_prompt), seed: this.dataDoc.ai_firefly_seed as number, href: this.paths.lastElement(), pathname: field.url.pathname });
+                                                    this._prevImgs.push({ prompt: StrCast(this.dataDoc.ai_firefly_prompt), seed: this.dataDoc.ai_firefly_seed as number, href: this.paths.lastElement(), pathname: field?.url.pathname ?? '' });
                                                 this._prevImgs.unshift({ prompt: firstImg.prompt, seed: firstImg.seed, pathname: url });
                                                 this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs);
                                                 this.dataDoc.ai_firefly_prompt = firstImg.prompt;
@@ -704,21 +948,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop) * this.ScreenToLocalBoxXf().Scale);
     marqueeDown = (e: React.PointerEvent) => {
-        if (!this.dataDoc[this.fieldKey]) {
-            this.chooseImage();
-        } else if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._freeform_scale, 1) <= NumCast(this.dataDoc.freeform_scaleMin, 1) && this._props.isContentActive() && Doc.ActiveTool !== InkTool.Ink) {
-            setupMoveUpEvents(
-                this,
-                e,
-                action(moveEv => {
-                    MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
-                    this.marqueeref.current?.onInitiateSelection([moveEv.clientX, moveEv.clientY]);
-                    return true;
-                }),
-                returnFalse,
-                () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations),
-                false
-            );
+        if (!e.altKey && e.button === 0) {
+            if (NumCast(this.layoutDoc._freeform_scale, 1) <= NumCast(this.dataDoc.freeform_scaleMin, 1) && this._props.isContentActive() && Doc.ActiveTool !== InkTool.Ink) {
+                setupMoveUpEvents(
+                    this,
+                    e,
+                    action(moveEv => {
+                        MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
+                        this.marqueeref.current?.onInitiateSelection([moveEv.clientX, moveEv.clientY]);
+                        return true;
+                    }),
+                    returnFalse,
+                    () => {
+                        if (!this.dataDoc[this.fieldKey]) this.chooseImage();
+                        else MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
+                    },
+                    false
+                );
+            }
         }
     };
     @action
@@ -743,85 +990,91 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         TraceMobx();
         const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string;
         const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad;
-        const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']);
-        const doc = this.usingAlternate ? (alts.lastElement() ?? this.Document) : this.Document;
         return (
-            <div
-                className="imageBox"
-                onContextMenu={this.specificContextMenu}
-                ref={this.createDropTarget}
-                onScroll={action(() => {
-                    if (!this._forcedScroll) {
-                        if (this.layoutDoc._layout_scrollTop || this._mainCont?.scrollTop) {
-                            this._ignoreScroll = true;
-                            this.layoutDoc._layout_scrollTop = this._mainCont?.scrollTop;
-                            this._ignoreScroll = false;
+            <>
+                <div
+                    className="imageBox"
+                    onContextMenu={this.specificContextMenu}
+                    ref={this.createDropTarget}
+                    onScroll={action(() => {
+                        if (!this._forcedScroll) {
+                            if (this.layoutDoc._layout_scrollTop || this._mainCont?.scrollTop) {
+                                this._ignoreScroll = true;
+                                this.layoutDoc._layout_scrollTop = this._mainCont?.scrollTop;
+                                this._ignoreScroll = false;
+                            }
                         }
-                    }
-                })}
-                style={{
-                    width: this._props.PanelWidth() ? undefined : `100%`,
-                    height: this._props.PanelHeight() ? undefined : `100%`,
-                    pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
-                    borderRadius,
-                    overflow: this.layoutDoc.layout_fitWidth || this._props.fitWidth?.(this.Document) ? 'auto' : 'hidden',
-                }}>
-                <CollectionFreeFormView
-                    ref={this._ffref}
-                    {...this._props}
-                    Document={doc}
-                    setContentViewBox={emptyFunction}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    renderDepth={this._props.renderDepth + 1}
-                    fieldKey={this.annotationKey}
-                    styleProvider={this._props.styleProvider}
-                    isAnnotationOverlay
-                    annotationLayerHostsContent
-                    PanelWidth={this._props.PanelWidth}
-                    PanelHeight={this._props.PanelHeight}
-                    ScreenToLocalTransform={this.screenToLocalTransform}
-                    select={emptyFunction}
-                    focus={this.focus}
-                    getScrollHeight={this.getScrollHeight}
-                    NativeDimScaling={returnOne}
-                    isAnyChildContentActive={returnFalse}
-                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                    removeDocument={this.removeDocument}
-                    moveDocument={this.moveDocument}
-                    addDocument={this.addDocument}>
-                    {this.content}
-                </CollectionFreeFormView>
-                {this.Loading ? (
-                    <div className="loading-spinner" style={{ position: 'absolute' }}>
-                        <ReactLoading type="spin" height={50} width={50} color={'blue'} />
-                    </div>
-                ) : null}
-                {this.regenerateImageIcon}
-                {this.overlayImageIcon}
-                {this.annotationLayer}
-                {!this._mainCont || !this.DocumentView || !this._annotationLayer.current ? null : (
-                    <MarqueeAnnotator
+                    })}
+                    style={{
+                        width: this._props.PanelWidth() ? undefined : `100%`,
+                        height: this._props.PanelHeight() ? undefined : `100%`,
+                        pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
+                        borderRadius,
+                        overflow: this.layoutDoc.layout_fitWidth || this._props.fitWidth?.(this.Document) ? 'auto' : 'hidden',
+                    }}>
+                    <CollectionFreeFormView
+                        ref={this._ffref}
+                        {...this._props}
                         Document={this.Document}
-                        ref={this.marqueeref}
-                        scrollTop={0}
-                        annotationLayerScrollTop={0}
-                        scaling={returnOne}
-                        annotationLayerScaling={this._props.NativeDimScaling}
-                        screenTransform={this.DocumentView().screenToViewTransform}
-                        docView={this.DocumentView}
-                        addDocument={this.addDocument}
-                        finishMarquee={this.finishMarquee}
-                        savedAnnotations={this.savedAnnotations}
-                        selectionText={returnEmptyString}
-                        annotationLayer={this._annotationLayer.current}
-                        marqueeContainer={this._mainCont}
-                        highlightDragSrcColor=""
-                        anchorMenuCrop={this.crop}
-                        // anchorMenuFlashcard={() => this.getImageDesc()}
-                    />
-                )}
-            </div>
+                        setContentViewBox={emptyFunction}
+                        NativeWidth={returnZero}
+                        NativeHeight={returnZero}
+                        renderDepth={this._props.renderDepth + 1}
+                        fieldKey={this.annotationKey}
+                        styleProvider={this._props.styleProvider}
+                        isAnnotationOverlay
+                        annotationLayerHostsContent
+                        PanelWidth={this._props.PanelWidth}
+                        PanelHeight={this._props.PanelHeight}
+                        ScreenToLocalTransform={this.screenToLocalTransform}
+                        select={emptyFunction}
+                        focus={this.focus}
+                        rejectDrop={this._props.rejectDrop}
+                        getScrollHeight={this.getScrollHeight}
+                        NativeDimScaling={returnOne}
+                        isAnyChildContentActive={returnFalse}
+                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                        removeDocument={this.removeDocument}
+                        moveDocument={this.moveDocument}
+                        addDocument={this.addDocument}>
+                        {this.content}
+                    </CollectionFreeFormView>
+                    {this.Loading ? (
+                        <div className="loading-spinner" style={{ position: 'absolute' }}>
+                            <ReactLoading type="spin" height={50} width={50} color={'blue'} />
+                        </div>
+                    ) : null}
+                    {this.regenerateImageIcon}
+                    {this.overlayImageIcon}
+                    {this.annotationLayer}
+                    {!this._mainCont || !this.DocumentView || !this._annotationLayer.current ? null : (
+                        <MarqueeAnnotator
+                            Document={this.Document}
+                            ref={this.marqueeref}
+                            scrollTop={0}
+                            annotationLayerScrollTop={0}
+                            scaling={returnOne}
+                            annotationLayerScaling={this._props.NativeDimScaling}
+                            screenTransform={this.DocumentView().screenToViewTransform}
+                            docView={this.DocumentView}
+                            addDocument={this.addDocument}
+                            finishMarquee={this.finishMarquee}
+                            savedAnnotations={this.savedAnnotations}
+                            selectionText={returnEmptyString}
+                            annotationLayer={this._annotationLayer.current}
+                            marqueeContainer={this._mainCont}
+                            highlightDragSrcColor=""
+                            anchorMenuCrop={this.crop}
+                            // anchorMenuFlashcard={() => this.getImageDesc()}
+                        />
+                    )}
+                    {this._outpaintingInProgress && (
+                        <div className="imageBox-outpaintingSpinner">
+                            <ReactLoading type="spin" color="#666" height={60} width={60} />
+                        </div>
+                    )}
+                </div>
+            </>
         );
     }