made ai. button draggable to regenerate images.

7 files changed, 72 insertions, 23 deletions

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index c5b61477b..e1f490c1a 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -599,7 +599,7 @@ export function StopEvent(e: React.PointerEvent | React.MouseEvent | React.Keybo
 
 export function setupMoveUpEvents(
     target: object,
-    e: React.PointerEvent,
+    e: React.PointerEvent | PointerEvent,
     moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean,
     upEvent: (e: PointerEvent, movement: number[], isClick: boolean) => void,
     clickEvent: (e: PointerEvent, doubleTap?: boolean) => unknown,
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index a9f03a658..b17dbc93d 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -28,6 +28,7 @@ import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView } from './nodes/DocumentView';
 import { OpenWhere } from './nodes/OpenWhere';
 import { DashFieldView } from './nodes/formattedText/DashFieldView';
+import { SmartDrawHandler } from './smartdraw/SmartDrawHandler';
 
 @observer
 export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (DocumentView | undefined)[]; stack?: unknown }> {
@@ -319,7 +320,22 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
         const targetDoc = this.view0?.Document;
         return !targetDoc ? null : (
             <Tooltip title={<div className="dash-ai-editor-button">Edit with AI</div>}>
-                <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={undoable(() => this.view0?.toggleAIEditor(), 'toggle AI editor')}>
+                <div
+                    className="documentButtonBar-icon"
+                    style={{ color: 'white' }}
+                    onPointerDown={e =>
+                        setupMoveUpEvents(
+                            this,
+                            e,
+                            me => {
+                                this.view0?.docViewPath().slice(-2)[0]?.ComponentView?.showSmartDraw?.(me.x, me.y, true);
+                                SmartDrawHandler.Instance.startDragging(me);
+                                return true;
+                            },
+                            emptyFunction,
+                            undoable(() => this.view0?.toggleAIEditor(), 'toggle AI editor')
+                        )
+                    }>
                     <FontAwesomeIcon className="documentdecorations-icon" icon="robot" />
                 </div>
             </Tooltip>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 752e8b217..aa9b9b0fa 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1294,7 +1294,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      */
     addDrawing = (doc: Doc, opts: DrawingOptions, gptRes: string, x?: number, y?: number) => {
         const docData = doc[DocData];
-        docData.title = opts.text.match(/^(.*?)~~~.*$/)?.[1] || opts.text;
+        docData.title = opts.text;
         docData._width = opts.size;
         docData.ai_drawing_input = opts.text;
         docData.ai_drawing_complexity = opts.complexity;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f3aea76a5..55474cb7e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -625,11 +625,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.props.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title), this.Document)?.then(action(() => (this._regenerateLoading = false)));
                                 } else {
                                     SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput || StrCast(this.Document.title), true).then(
                                         action(newImgs => {
diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index d0a840883..7447f8afb 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -47,11 +47,11 @@ export class DrawingFillHandler {
                 return imageUrlToBase64(structureUrl)
                     .then(gptDescribeImage)
                     .then((prompt, newPrompt = user_prompt || prompt) =>
-                        Networking.PostToServer('/queryFireflyImageFromStructure', { prompt: `${newPrompt}`, width: dims.width, height: dims.height, structure: structureUrl, strength, presets: styles, styleUrl })
-                            .then((infos: Upload.ImageInformation[]) => {
+                        Networking.PostToServer('/queryFireflyImageFromStructure', { prompt: `${newPrompt}`, width: dims.width, height: dims.height, structureUrl, strength, presets: styles, styleUrl })
+                            .then(res => {
                                 const genratedDocs = DocCast(drawing.ai_firefly_generatedDocs) ?? Docs.Create.MasonryDocument([], { _width: 400, _height: 400 });
                                 drawing[DocData].ai_firefly_generatedDocs = genratedDocs;
-                                infos.map(info =>
+                                (res as Upload.ImageInformation[]).map(info =>
                                     Doc.AddDocToList(
                                         genratedDocs,
                                         undefined,
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 811bc6e25..fbf471900 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
 import { INode, parse } from 'svgson';
-import { imageUrlToBase64 } from '../../../ClientUtils';
+import { imageUrlToBase64, setupMoveUpEvents } from '../../../ClientUtils';
 import { unimplementedFunction } from '../../../Utils';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
@@ -205,11 +205,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         this._isLoading = true;
         this._canInteract = false;
         if (this.ShowRegenerate) {
-            await this.regenerate(this._selectedDocs).then(
-                action(() => {
-                    this._showEditBox = false;
-                })
-            );
+            await this.regenerate(this._selectedDocs, undefined, undefined, this._regenInput).then(action(() => (this._showEditBox = false)));
         } else {
             this._showOptions = false;
             try {
@@ -295,7 +291,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                 }
                 const newseed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)?.[1];
                 const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, {
-                    title: input.match(/^(.*?)~~~.*$/)?.[1] || input,
+                    title: input,
                     nativeWidth: dims.width,
                     nativeHeight: dims.height,
                     ai: 'firefly',
@@ -523,6 +519,19 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         return (
             <div
                 className="smart-draw-handler"
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        action(me => {
+                            this._pageX = this._pageX + me.movementX;
+                            this._pageY = this._pageY + me.movementY;
+                            return false;
+                        }),
+                        () => {},
+                        () => {}
+                    )
+                }
                 style={{
                     display: this._display ? '' : 'none',
                     left: this._pageX,
@@ -581,6 +590,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                 onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
                 onKeyDown={this.handleKeyPress}
                 placeholder="Edit instructions"
+                onPointerDown={e => e.stopPropagation()}
             />
             <Button
                 style={{ alignSelf: 'flex-end' }}
@@ -593,10 +603,37 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         </div>
     );
 
+    startDragging = (e: PointerEvent) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            action(me => {
+                this._pageX = this._pageX + me.movementX;
+                this._pageY = this._pageY + me.movementY;
+                return false;
+            }),
+            () => {},
+            () => {}
+        );
+    };
     renderRegenerate = () => (
         <div
             className="smart-draw-handler"
+            onPointerDown={e =>
+                setupMoveUpEvents(
+                    this,
+                    e,
+                    action(me => {
+                        this._pageX = this._pageX + me.movementX;
+                        this._pageY = this._pageY + me.movementY;
+                        return false;
+                    }),
+                    () => {},
+                    () => {}
+                )
+            }
             style={{
+                padding: 10,
                 left: this._pageX,
                 ...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
                 background: SettingsManager.userBackgroundColor,
diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts
index 8a310aed8..e75ede9df 100644
--- a/src/server/ApiManagers/FireflyManager.ts
+++ b/src/server/ApiManagers/FireflyManager.ts
@@ -298,13 +298,13 @@ export default class FireflyManager extends ApiManager {
                                 _invalid(res, styleUrl.message);
                                 throw new Error('Error uploading images to dropbox');
                             }
-                            this.uploadImageToDropbox(req.body.structure, req.user as DashUserModel)
-                                .then(structureUrl => {
-                                    if (structureUrl instanceof Error) {
-                                        _invalid(res, structureUrl.message);
+                            this.uploadImageToDropbox(req.body.structureUrl, req.user as DashUserModel)
+                                .then(dropboxStructureUrl => {
+                                    if (dropboxStructureUrl instanceof Error) {
+                                        _invalid(res, dropboxStructureUrl.message);
                                         throw new Error('Error uploading images to dropbox');
                                     }
-                                    return { styleUrl, structureUrl };
+                                    return { styleUrl, structureUrl: dropboxStructureUrl };
                                 })
                                 .then(uploads =>
                                     this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, uploads.styleUrl)