made ai. button draggable to regenerate images.

2 files changed, 47 insertions, 10 deletions

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,