From 0e3b280ab0c20c36742e2d269a80dbaada2192b1 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 6 Jul 2023 13:57:25 -0400
Subject: it's working

---
 .../views/nodes/generativeFill/GenerativeFill.tsx  | 125 +++++++++++++++------
 1 file changed, 90 insertions(+), 35 deletions(-)

(limited to 'src/client/views/nodes/generativeFill/GenerativeFill.tsx')

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 0ebf370c0..1709962a2 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -166,11 +166,14 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         };
 
         drawingAreaRef.current?.addEventListener('pointermove', handlePointerMove);
-        return () => drawingAreaRef.current?.removeEventListener('pointermove', handlePointerMove);
+        return () => {
+            drawingAreaRef.current?.removeEventListener('pointermove', handlePointerMove);
+        };
     }, [isBrushing]);
 
     // first load
     useEffect(() => {
+        console.log('first load');
         if (!imageEditorSource || imageEditorSource === '') return;
         const img = new Image();
         img.src = imageEditorSource;
@@ -178,6 +181,18 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         currImg.current = img;
         originalImg.current = img;
         freeformPosition.current = [0, 0];
+
+        return () => {
+            console.log('cleanup');
+            newCollectionRef.current = null;
+            parentDoc.current = null;
+            childrenDocs.current = [];
+            currImg.current = null;
+            originalImg.current = null;
+            freeformPosition.current = [0, 0];
+            undoStack.current = [];
+            redoStack.current = [];
+        };
     }, [canvasRef, imageEditorSource]);
 
     // handles brush sizing
@@ -252,15 +267,30 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             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 = [];
+
+            // create first image
+            if (!newCollectionRef.current) {
+                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 });
+                DocUtils.MakeLink(imageRootDoc, newCollectionRef.current, { link_relationship: 'Image Edit Version History', link_displayLine: false });
+                addDoc?.(newCollectionRef.current);
+                await createNewImgDoc(originalImg.current, true);
+            } else {
+                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];
             setEdits(urls);
             ImageUtility.drawImgToCanvas(image, canvasRef);
             currImg.current = image;
+            onSave();
             freeformPosition.current[0] += 1;
             freeformPosition.current[1] = 0;
         } catch (err) {
@@ -274,6 +304,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         if (!parentDoc.current) return;
         const startY = NumCast(parentDoc.current.y);
         const len = childrenDocs.current.length;
+        console.log(len);
         let initialYPositions: number[] = [];
         for (let i = 0; i < len; i++) {
             initialYPositions.push(startY + i * offsetDistanceY);
@@ -289,30 +320,51 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // creates a new image document and returns its reference
     const createNewImgDoc = async (img: HTMLImageElement, firstDoc: boolean): Promise<Doc | undefined> => {
-        if (!newCollectionRef.current || !imageRootDoc || !parentDoc.current) return;
+        if (!newCollectionRef.current || !imageRootDoc) return;
         const src = img.src;
         const [result] = await Networking.PostToServer('/uploadRemoteImage', { sources: [src] });
         const source = Utils.prepend(result.accessPaths.agnostic.client);
-        // the y position is dummy
-        const x = firstDoc ? 0 : NumCast(parentDoc.current.x) + freeformRenderSize + offsetX;
-        const initialY = firstDoc ? 500 : 0;
-
-        const newImg = Docs.Create.ImageDocument(source, {
-            x: x,
-            y: initialY,
-            _height: freeformRenderSize,
-            _width: freeformRenderSize,
-            data_nativeWidth: result.nativeWidth,
-            data_nativeHeight: result.nativeHeight,
-        });
 
-        childrenDocs.current.push(newImg);
-        if (!firstDoc) {
+        if (firstDoc) {
+            const x = 0;
+            const initialY = 500;
+            console.log('first doc');
+
+            const newImg = Docs.Create.ImageDocument(source, {
+                x: x,
+                y: initialY,
+                _height: freeformRenderSize,
+                _width: freeformRenderSize,
+                data_nativeWidth: result.nativeWidth,
+                data_nativeHeight: result.nativeHeight,
+            });
+
+            Doc.AddDocToList(newCollectionRef.current, undefined, newImg);
+            parentDoc.current = newImg;
+            return newImg;
+        } else {
+            if (!parentDoc.current) return;
+            const x = NumCast(parentDoc.current.x) + freeformRenderSize + offsetX;
+            // dummy position
+            console.log('creating child elements');
+            const initialY = 0;
+
+            const newImg = Docs.Create.ImageDocument(source, {
+                x: x,
+                y: initialY,
+                _height: freeformRenderSize,
+                _width: freeformRenderSize,
+                data_nativeWidth: result.nativeWidth,
+                data_nativeHeight: result.nativeHeight,
+            });
+
+            childrenDocs.current.push(newImg);
             DocUtils.MakeLink(parentDoc.current, newImg, { link_relationship: 'Image Edit', link_displayLine: true });
             adjustImgPositions();
+
+            Doc.AddDocToList(newCollectionRef.current, undefined, newImg);
+            return newImg;
         }
-        Doc.AddDocToList(newCollectionRef.current, undefined, newImg);
-        return newImg;
     };
 
     // need to maybe call on every img click, not just when the save btn is clicked
@@ -320,12 +372,14 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         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);
-                await createNewImgDoc(originalImg.current, true);
-            }
+            // 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)
@@ -337,21 +391,22 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         setLoading(false);
     };
 
+    const handleViewClose = () => {
+        // if (newCollectionRef.current) {
+        //     CollectionDockingView.AddSplit(newCollectionRef.current, OpenWhereMod.right);
+        // }
+        MainView.Instance.setImageEditorOpen(false);
+        MainView.Instance.setImageEditorSource('');
+        setEdits([]);
+    };
+
     return (
         <div className="generativeFillContainer" style={{ display: imageEditorOpen ? 'flex' : 'none' }}>
             <div className="generativeFillControls">
                 <h1>Generative Fill</h1>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
                     <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([]);
-                        }}>
+                    <IconButton onClick={handleViewClose}>
                         <BsX color={activeColor} />
                     </IconButton>
                 </div>
-- 
cgit v1.2.3-70-g09d2

