tweak

2 files changed, 33 insertions, 18 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 1709962a2..2b3cfb920 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -5,7 +5,7 @@ import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
 import { BrushHandler } from './generativeFillUtils/BrushHandler';
 import { IconButton, TextField } from '@mui/material';
 import { CursorData, Point } from './generativeFillUtils/generativeFillInterfaces';
-import { activeColor, canvasSize, eraserColor, freeformRenderSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
+import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
 import { PointerHandler } from './generativeFillUtils/PointerHandler';
 import { BsBrush, BsEraser, BsX } from 'react-icons/bs';
 import { AiOutlineUpload } from 'react-icons/ai';
@@ -20,6 +20,7 @@ import { DocUtils, Docs } from '../../../documents/Documents';
 import { DocCast, NumCast } from '../../../../fields/Types';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
 import { OpenWhere, OpenWhereMod } from '../DocumentView';
+import { Oval } from 'react-loader-spinner';
 
 /**
  * For images not 1024x1024 fill in the rest in solid black, or a
@@ -28,6 +29,14 @@ import { OpenWhere, OpenWhereMod } from '../DocumentView';
 
 /**
  * TODO: Look into img onload, sometimes the canvas doesn't update properly
+ *
+ * Ref:
+ *
+ *
+ * CollectionDockingView.AddSplit(Doc.MakeCopy(DocCast(Doc.UserDoc().emptyPane)), OpenWhereMod.right);
+ * CollectionDockingView.AddSplit(newCollection,OpenWhere.inParent)
+ * mind mapping
+ * this.props.addDocTab();
  */
 
 enum BrushStyle {
@@ -65,6 +74,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     const [brushStyle, setBrushStyle] = useState<BrushStyle>(BrushStyle.ADD);
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
+    const [saveLoading, setSaveLoading] = useState(false);
     // the current image in the main canvas
     const currImg = useRef<HTMLImageElement | null>(null);
     // the unedited version of each generation (parent)
@@ -273,8 +283,15 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                 if (!(originalImg.current && imageRootDoc)) return;
                 console.log('creating first image');
                 // create new collection and add it to the view
-                newCollectionRef.current = Docs.Create.FreeformDocument([], { x: NumCast(imageRootDoc.x) + NumCast(imageRootDoc._width) + 20, y: NumCast(imageRootDoc.y), _width: 1000, _height: 1000 });
+                newCollectionRef.current = Docs.Create.FreeformDocument([], {
+                    x: NumCast(imageRootDoc.x) + NumCast(imageRootDoc._width) + offsetX,
+                    y: NumCast(imageRootDoc.y),
+                    _width: newCollectionSize,
+                    _height: newCollectionSize,
+                    title: 'Image edit collection',
+                });
                 DocUtils.MakeLink(imageRootDoc, newCollectionRef.current, { link_relationship: 'Image Edit Version History', link_displayLine: false });
+                // add the doc to the main freeform
                 addDoc?.(newCollectionRef.current);
                 await createNewImgDoc(originalImg.current, true);
             } else {
@@ -327,7 +344,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
         if (firstDoc) {
             const x = 0;
-            const initialY = 500;
+            const initialY = 0;
             console.log('first doc');
 
             const newImg = Docs.Create.ImageDocument(source, {
@@ -369,26 +386,15 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // need to maybe call on every img click, not just when the save btn is clicked
     const onSave = async () => {
-        setLoading(true);
+        setSaveLoading(true);
         if (!currImg.current || !originalImg.current || !imageRootDoc) return;
         try {
-            // if (!newCollectionRef.current) {
-            //     console.log('creating first image');
-            //     // create new collection and add it to the view
-            //     newCollectionRef.current = Docs.Create.FreeformDocument([], { x: NumCast(imageRootDoc.x) + NumCast(imageRootDoc._width) + 20, y: NumCast(imageRootDoc.y), _width: 1000, _height: 1000 });
-            //     addDoc?.(newCollectionRef.current);
-            //     await createNewImgDoc(originalImg.current, true);
-            // }
             console.log('creating another image');
             await createNewImgDoc(currImg.current, false);
-            // CollectionDockingView.AddSplit(Doc.MakeCopy(DocCast(Doc.UserDoc().emptyPane)), OpenWhereMod.right);
-            // CollectionDockingView.AddSplit(newCollection,OpenWhere.inParent)
-            // mind mapping
-            // this.props.addDocTab();
         } catch (err) {
             console.log(err);
         }
-        setLoading(false);
+        setSaveLoading(false);
     };
 
     const handleViewClose = () => {
@@ -515,6 +521,14 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                                     currImg.current = img;
                                 }}
                             />
+                            <div
+                                style={{
+                                    position: 'absolute',
+                                    top: 10,
+                                    right: 10,
+                                }}>
+                                {saveLoading && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff89" strokeWidth={3} strokeWidthSecondary={3} />}
+                            </div>
                         </div>
                     )}
                 </div>
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
index 5fd0e9419..5a8d33742 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
@@ -1,8 +1,9 @@
 // constants
 export const canvasSize = 1024;
 export const freeformRenderSize = 300;
-export const offsetDistanceY = freeformRenderSize + 100;
-export const offsetX = 100;
+export const offsetDistanceY = freeformRenderSize + 200;
+export const offsetX = 200;
+export const newCollectionSize = 1000;
 
 export const activeColor = '#1976d2';
 export const eraserColor = '#e1e9ec';