blind, need to test

2 files changed, 25 insertions, 17 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 5e7b4fdca..0ebf370c0 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -77,6 +77,9 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     // early stage properly, likely will get rid of
     const freeformPosition = useRef<number[]>([0, 0]);
 
+    // which urls were already saved to canvas
+    const savedSrcs = useRef<string[]>([]);
+
     // references to keep track of tree structure
     const newCollectionRef = useRef<Doc | null>(null);
     const parentDoc = useRef<Doc | null>(null);
@@ -243,16 +246,18 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         const ctx = ImageUtility.getCanvasContext(canvasRef);
         if (!ctx) return;
         setLoading(true);
+        // need to adjust later
         try {
             const maskBlob = await ImageUtility.canvasToBlob(canvas);
             const imgBlob = await ImageUtility.canvasToBlob(ImageUtility.getCanvasImg(img));
-
             const res = await ImageUtility.getEdit(imgBlob, maskBlob, input !== '' ? input + ' in the same style' : 'Fill in the image in the same style', 2);
             // const res = await ImageUtility.mockGetEdit(img.src);
+            parentDoc.current = childrenDocs.current[childrenDocs.current.length - 1];
+            childrenDocs.current = [];
+            originalImg.current = currImg.current;
             const { urls } = res as APISuccess;
             const image = new Image();
             image.src = urls[0];
-            setLoading(false);
             setEdits(urls);
             ImageUtility.drawImgToCanvas(image, canvasRef);
             currImg.current = image;
@@ -261,6 +266,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         } catch (err) {
             console.log(err);
         }
+        setLoading(false);
     };
 
     // adjusts all the img positions to be aligned
@@ -301,31 +307,34 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         });
 
         childrenDocs.current.push(newImg);
-        adjustImgPositions();
+        if (!firstDoc) {
+            DocUtils.MakeLink(parentDoc.current, newImg, { link_relationship: 'Image Edit', link_displayLine: true });
+            adjustImgPositions();
+        }
         Doc.AddDocToList(newCollectionRef.current, undefined, newImg);
-        DocUtils.MakeLink(parentDoc.current, newImg, { link_relationship: 'Image Edit' });
         return newImg;
     };
 
+    // need to maybe call on every img click, not just when the save btn is clicked
     const onSave = async () => {
+        setLoading(true);
         if (!currImg.current || !originalImg.current || !imageRootDoc) return;
         try {
             if (!newCollectionRef.current) {
                 // 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);
-                const originalSrc = originalImg.current.src;
                 await createNewImgDoc(originalImg.current, true);
             }
-            CollectionDockingView.AddSplit(Doc.MakeCopy(DocCast(Doc.UserDoc().emptyPane)), OpenWhereMod.right);
+            await createNewImgDoc(currImg.current, false);
+            // CollectionDockingView.AddSplit(Doc.MakeCopy(DocCast(Doc.UserDoc().emptyPane)), OpenWhereMod.right);
             // CollectionDockingView.AddSplit(newCollection,OpenWhere.inParent)
-            // mindmapping
+            // mind mapping
             // this.props.addDocTab();
-
-            // Create link between prompt and image
         } catch (err) {
             console.log(err);
         }
+        setLoading(false);
     };
 
     return (
@@ -336,6 +345,9 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                     <Buttons canvasRef={canvasRef} currImg={currImg} getEdit={getEdit} loading={loading} onSave={onSave} onReset={handleReset} />
                     <IconButton
                         onClick={() => {
+                            if (newCollectionRef.current) {
+                                CollectionDockingView.AddSplit(newCollectionRef.current, OpenWhereMod.right);
+                            }
                             MainView.Instance.setImageEditorOpen(false);
                             MainView.Instance.setImageEditorSource('');
                             setEdits([]);
@@ -381,12 +393,6 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                         }}>
                         <BsBrush color={brushStyle === BrushStyle.ADD ? activeColor : 'inherit'} />
                     </IconButton>
-                    {/* <IconButton
-                        onClick={() => {
-                            setBrushStyle(BrushStyle.SUBTRACT);
-                        }}>
-                        <BsEraser color={brushStyle === BrushStyle.SUBTRACT ? activeColor : 'inherit'} />
-                    </IconButton> */}
                     {/* Undo and Redo */}
                     <IconButton
                         onPointerDown={e => {
@@ -409,7 +415,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                         <CiRedo />
                     </IconButton>
                 </div>
-                {/* Edits box */}
+                {/* Edits thumbnails*/}
                 <div className="editsBox">
                     {edits.map((edit, i) => (
                         <img
@@ -422,9 +428,11 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                                 img.src = edit;
                                 ImageUtility.drawImgToCanvas(img, canvasRef);
                                 currImg.current = img;
+                                onSave();
                             }}
                         />
                     ))}
+                    {/* Original img thumbnail */}
                     {edits.length > 0 && (
                         <div style={{ position: 'relative' }}>
                             <label
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
index e8cb61ab5..53c6cec84 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
@@ -23,7 +23,7 @@ const Buttons = ({ canvasRef, currImg, loading, getEdit, onSave, onReset }: Butt
     return (
         <div className="generativeFillBtnContainer">
             <Button onClick={onReset}>Reset</Button>
-            <Button onClick={handleSave}>Save</Button>
+            {/* <Button onClick={handleSave}>Save</Button> */}
             {/* <Button
                 onClick={() => {
                     if (!canvasRef.current) return;