changing ai for images and collections to work mostly the same way. fixes for document view/collection/images to keep things working when the ai editor view reduces the rendered document size. fixed so that freeform views overlaid on images/vieos/etc have the ui menu items of collections.

1 files changed, 117 insertions, 119 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 112bfd178..5b4f81379 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1877,8 +1877,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             : UpdateIcon(
                   this.layoutDoc[Id] + '_icon_' + new Date().getTime(),
                   contentDiv,
-                  usePanelDimensions ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
-                  usePanelDimensions ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
+                  usePanelDimensions || true ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
+                  usePanelDimensions || true ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
                   this._props.PanelWidth(),
                   this._props.PanelHeight(),
                   0,
@@ -2228,45 +2228,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     componentAIView = () => {
-        const showRegenerate = this.Document[DocData].ai;
         return (
             <div className="collectionfreeformview-aiView" onPointerDown={e => e.stopPropagation()}>
-                Edit Collection with AI
-                {showRegenerate && (
-                    <div className="collectionfreeformview-aiView-regenerate-container">
-                        <text className="collectionfreeformview-aiView-subtitle">Regenerate AI Image</text>
-                        <div className="collectionfreeformview-aiView-regenerate">
-                            <input
-                                className="collectionfreeformview-aiView-input"
-                                aria-label="Edit instructions input"
-                                type="text"
-                                value={this._regenInput}
-                                onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
-                                placeholder="Prompt (Optional)"
-                            />
-                            <Button
-                                text="Regenerate"
-                                type={Type.SEC}
-                                icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                                iconPlacement="right"
-                                onClick={action(async () => {
-                                    this._regenLoading = true;
-                                    SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
-                                    SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
-                                    SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
-                                    await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
-                                    this._regenLoading = false;
-                                })}
-                            />
-                        </div>
-                    </div>
-                )}
                 <div className="collectionfreeformview-aiView-options-container">
-                    <text className="collectionfreeformview-aiView-subtitle"> Create Image with Firefly </text>
+                    <span className="collectionfreeformview-aiView-subtitle">Firefly:</span>
                     <div className="collectionfreeformview-aiView-options">
-                        <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => this._canInteract && (this._drawingFillInput = e.target.value))} />
+                        <input
+                            className="collectionfreeformview-aiView-prompt"
+                            placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'}
+                            type="text"
+                            value={this._drawingFillInput}
+                            onChange={action(e => this._canInteract && (this._drawingFillInput = e.target.value))}
+                        />
                         <div className="collectionfreeformview-aiView-strength">
-                            Reference Strength
+                            Similarity
                             <Slider
                                 className="collectionfreeformview-aiView-slider"
                                 sx={{
@@ -2286,24 +2261,49 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         <Button
                             text="Send"
                             type={Type.SEC}
-                            icon={this._drawingFillLoading && this._drawingFillInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                            icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                             iconPlacement="right"
                             onClick={undoable(
                                 action(() => {
                                     this._drawingFillLoading = true;
-                                    DrawingFillHandler.drawingToImage(
-                                        this.props.Document,
-                                        this._fireflyRefStrength,
-                                        this._drawingFillInput !== '' ? this._drawingFillInput : StrCast(this.props.Document.title) !== 'grouping' ? StrCast(this.props.Document.title) : ''
+                                    DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
+                                        action(() => {
+                                            this._drawingFillLoading = false;
+                                        })
                                     );
-                                    this._drawingFillInput = '';
-                                    this._drawingFillLoading = false;
                                 }),
                                 'create image'
                             )}
                         />
                     </div>
                 </div>
+                <div className="collectionfreeformview-aiView-regenerate-container">
+                    <span className="collectionfreeformview-aiView-subtitle">Regenerate</span>
+                    <div className="collectionfreeformview-aiView-regenerate">
+                        <input
+                            className="collectionfreeformview-aiView-input"
+                            aria-label="Edit instructions input"
+                            type="text"
+                            value={this._regenInput}
+                            onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+                            placeholder="..under development.."
+                        />
+                        <Button
+                            text="Regenerate"
+                            type={Type.SEC}
+                            icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                            iconPlacement="right"
+                            // onClick={action(async () => {
+                            //     this._regenLoading = true;
+                            //     SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
+                            //     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
+                            //     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
+                            //     await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
+                            //     this._regenLoading = false;
+                            // })}
+                        />
+                    </div>
+                </div>
             </div>
         );
     };
@@ -2311,83 +2311,81 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     render() {
         TraceMobx();
         return (
-            <div>
-                <div
-                    className="collectionfreeformview-container"
-                    id={this._paintedId}
-                    ref={r => {
-                        this.createDashEventsTarget(r);
-                        this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
-                        this._oldWheel = r;
-                        // prevent wheel events from passivly propagating up through containers
-                        r?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
-                        r?.addEventListener('mouseleave', this.onMouseLeave);
-                        r?.addEventListener('mouseenter', this.onMouseEnter);
-                    }}
-                    onWheel={this.onPointerWheel}
-                    onClick={this.onClick}
-                    onPointerDown={this.onPointerDown}
-                    onPointerMove={this.onCursorMove}
-                    onDrop={this.onExternalDrop}
-                    onDragOver={e => e.preventDefault()}
-                    onContextMenu={this.onContextMenu}
-                    style={{
-                        pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : this._props.pointerEvents?.(),
-                        textAlign: this.isAnnotationOverlay ? 'initial' : undefined,
-                        transform: `scale(${this.nativeDimScaling})`,
-                        width: `${100 / this.nativeDimScaling}%`,
-                        height: this._props.getScrollHeight?.() ?? `${100 / this.nativeDimScaling}%`,
-                    }}>
-                    {Doc.ActiveTool === InkTool.Eraser && Doc.ActiveEraser === InkEraserTool.Radius && this._showEraserCircle && (
-                        <div
-                            onPointerMove={this.onCursorMove}
-                            style={{
-                                position: 'fixed',
-                                left: this._eraserX,
-                                top: this._eraserY,
-                                width: (ActiveEraserWidth() + 5) * 2,
-                                height: (ActiveEraserWidth() + 5) * 2,
-                                borderRadius: '50%',
-                                border: '1px solid gray',
-                                transform: 'translate(-50%, -50%)',
-                            }}
+            <div
+                className="collectionfreeformview-container"
+                id={this._paintedId}
+                ref={r => {
+                    this.createDashEventsTarget(r);
+                    this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
+                    this._oldWheel = r;
+                    // prevent wheel events from passivly propagating up through containers
+                    r?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+                    r?.addEventListener('mouseleave', this.onMouseLeave);
+                    r?.addEventListener('mouseenter', this.onMouseEnter);
+                }}
+                onWheel={this.onPointerWheel}
+                onClick={this.onClick}
+                onPointerDown={this.onPointerDown}
+                onPointerMove={this.onCursorMove}
+                onDrop={this.onExternalDrop}
+                onDragOver={e => e.preventDefault()}
+                onContextMenu={this.onContextMenu}
+                style={{
+                    pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : this._props.pointerEvents?.(),
+                    textAlign: this.isAnnotationOverlay ? 'initial' : undefined,
+                    transform: `scale(${this.nativeDimScaling})`,
+                    width: `${100 / this.nativeDimScaling}%`,
+                    height: this._props.getScrollHeight?.() ?? `${100 / this.nativeDimScaling}%`,
+                }}>
+                {Doc.ActiveTool === InkTool.Eraser && Doc.ActiveEraser === InkEraserTool.Radius && this._showEraserCircle && (
+                    <div
+                        onPointerMove={this.onCursorMove}
+                        style={{
+                            position: 'fixed',
+                            left: this._eraserX,
+                            top: this._eraserY,
+                            width: (ActiveEraserWidth() + 5) * 2,
+                            height: (ActiveEraserWidth() + 5) * 2,
+                            borderRadius: '50%',
+                            border: '1px solid gray',
+                            transform: 'translate(-50%, -50%)',
+                        }}
+                    />
+                )}
+                {this.paintFunc ? (
+                    <FormattedTextBox {...this.props} /> // need this so that any live dashfieldviews will update the underlying text that the code eval reads
+                ) : this._lightboxDoc ? (
+                    <div style={{ padding: 15, width: '100%', height: '100%' }}>
+                        <DocumentView
+                            {...this._props}
+                            Document={this._lightboxDoc}
+                            containerViewPath={this.DocumentView?.().docViewPath}
+                            TemplateDataDocument={undefined}
+                            PanelWidth={this.lightboxPanelWidth}
+                            PanelHeight={this.lightboxPanelHeight}
+                            NativeWidth={returnZero}
+                            NativeHeight={returnZero}
+                            onClickScript={this.onChildClickHandler}
+                            onKey={this.onKeyDown}
+                            onDoubleClickScript={this.onChildDoubleClickHandler}
+                            childFilters={this.childDocFilters}
+                            childFiltersByRanges={this.childDocRangeFilters}
+                            searchFilterDocs={this.searchFilterDocs}
+                            isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this.isContentActive}
+                            isContentActive={this._props.childContentsActive ?? emptyFunction}
+                            addDocTab={this.addDocTab}
+                            ScreenToLocalTransform={this.lightboxScreenToLocal}
+                            fitContentsToBox={undefined}
+                            focus={this.focus}
                         />
-                    )}
-                    {this.paintFunc ? (
-                        <FormattedTextBox {...this.props} /> // need this so that any live dashfieldviews will update the underlying text that the code eval reads
-                    ) : this._lightboxDoc ? (
-                        <div style={{ padding: 15, width: '100%', height: '100%' }}>
-                            <DocumentView
-                                {...this._props}
-                                Document={this._lightboxDoc}
-                                containerViewPath={this.DocumentView?.().docViewPath}
-                                TemplateDataDocument={undefined}
-                                PanelWidth={this.lightboxPanelWidth}
-                                PanelHeight={this.lightboxPanelHeight}
-                                NativeWidth={returnZero}
-                                NativeHeight={returnZero}
-                                onClickScript={this.onChildClickHandler}
-                                onKey={this.onKeyDown}
-                                onDoubleClickScript={this.onChildDoubleClickHandler}
-                                childFilters={this.childDocFilters}
-                                childFiltersByRanges={this.childDocRangeFilters}
-                                searchFilterDocs={this.searchFilterDocs}
-                                isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this.isContentActive}
-                                isContentActive={this._props.childContentsActive ?? emptyFunction}
-                                addDocTab={this.addDocTab}
-                                ScreenToLocalTransform={this.lightboxScreenToLocal}
-                                fitContentsToBox={undefined}
-                                focus={this.focus}
-                            />
-                        </div>
-                    ) : (
-                        <>
-                            {this._firstRender ? this.placeholder : this.marqueeView}
-                            {this._props.noOverlay ? null : <CollectionFreeFormOverlayView elements={this.elementFunc} />}
-                            {!this.GroupChildDrag ? null : <div className="collectionFreeForm-groupDropper" />}
-                        </>
-                    )}
-                </div>
+                    </div>
+                ) : (
+                    <>
+                        {this._firstRender ? this.placeholder : this.marqueeView}
+                        {this._props.noOverlay ? null : <CollectionFreeFormOverlayView elements={this.elementFunc} />}
+                        {!this.GroupChildDrag ? null : <div className="collectionFreeForm-groupDropper" />}
+                    </>
+                )}
             </div>
         );
     }