baseline before changes

5 files changed, 32 insertions, 61 deletions

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 6b4106f56..6bde7989b 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -39,7 +39,6 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => {
             temperature: opts.temp,
             prompt: `${opts.prompt}${inputText}`,
         });
-        // console.log(response.data.choices[0]);
         return response.data.choices[0].text;
     } catch (err) {
         console.log(err);
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 4d475149d..97d1cbf20 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -4,37 +4,21 @@ import { useEffect, useRef, useState } from 'react';
 import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
 import { BrushHandler } from './generativeFillUtils/BrushHandler';
 import { Box, IconButton, Slider, TextField } from '@mui/material';
-import { CursorData, Point } from './generativeFillUtils/generativeFillInterfaces';
+import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
 import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
 import { PointerHandler } from './generativeFillUtils/PointerHandler';
 import { BsEraser, BsX } from 'react-icons/bs';
 import { CiUndo, CiRedo } from 'react-icons/ci';
-import Buttons from './GenerativeFillButtons';
 import { MainView } from '../../MainView';
 import { Doc } from '../../../../fields/Doc';
 import { Networking } from '../../../Network';
 import { Utils } from '../../../../Utils';
 import { DocUtils, Docs } from '../../../documents/Documents';
-import { Cast, DocCast, NumCast } from '../../../../fields/Types';
+import { NumCast } from '../../../../fields/Types';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
-import { OpenWhere, OpenWhereMod } from '../DocumentView';
+import { OpenWhereMod } from '../DocumentView';
 import { Oval } from 'react-loader-spinner';
-
-/**
- * For images not 1024x1024 fill in the rest in solid black, or a
- * reflected version of the image.
- *
- * add a branch from image directly checkbox
- */
-
-/**
- *
- *
- * CollectionDockingView.AddSplit(Doc.MakeCopy(DocCast(Doc.UserDoc().emptyPane)), OpenWhereMod.right);
- * CollectionDockingView.AddSplit(newCollection,OpenWhere.inParent)
- * mind mapping
- * this.props.addDocTab();
- */
+import Buttons from './GenerativeFillButtons';
 
 enum BrushStyle {
     ADD,
@@ -42,11 +26,6 @@ enum BrushStyle {
     MARQUEE,
 }
 
-interface ImageDimensions {
-    width: number;
-    height: number;
-}
-
 interface GenerativeFillProps {
     imageEditorOpen: boolean;
     imageEditorSource: string;
@@ -112,10 +91,13 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     };
 
     const handleRedo = () => {
-        // TODO: handle undo as well
+        const ctx = ImageUtility.getCanvasContext(canvasRef);
+        if (!ctx || !currImg.current || !canvasRef.current) return;
+
         const target = redoStack.current[redoStack.current.length - 1];
         if (!target) {
         } else {
+            undoStack.current = [...undoStack.current, canvasRef.current?.toDataURL()];
             const img = new Image();
             img.src = target;
             ImageUtility.drawImgToCanvas(img, canvasRef, canvasDims.width, canvasDims.height);
@@ -123,6 +105,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         }
     };
 
+    // resets any erase strokes
     const handleReset = () => {
         if (!canvasRef.current || !currImg.current) return;
         const ctx = ImageUtility.getCanvasContext(canvasRef);
@@ -130,7 +113,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         ctx.clearRect(0, 0, canvasSize, canvasSize);
         undoStack.current = [];
         redoStack.current = [];
-        ImageUtility.drawImgToCanvas(currImg.current, canvasRef, canvasSize, canvasSize);
+        ImageUtility.drawImgToCanvas(currImg.current, canvasRef, canvasDims.width, canvasDims.height);
     };
 
     // initiate brushing
@@ -236,7 +219,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             e.preventDefault();
             e.stopPropagation();
             const delta = e.deltaY;
-            const scaleFactor = delta > 0 ? 0.98 : 1.02; // Adjust the scale factor as per your requirement
+            const scaleFactor = delta > 0 ? 0.98 : 1.02;
             setCanvasScale(prevScale => prevScale * scaleFactor);
         };
 
@@ -267,13 +250,11 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         const ctx = ImageUtility.getCanvasContext(canvasRef);
         if (!ctx) return;
         setLoading(true);
-        // need to adjust later
         try {
             const canvasOriginalImg = ImageUtility.getCanvasImg(img);
             if (!canvasOriginalImg) return;
             const canvasMask = ImageUtility.getCanvasMask(canvas);
             if (!canvasMask) return;
-            // ImageUtility.downloadCanvas(canvasMask);
             const maskBlob = await ImageUtility.canvasToBlob(canvasMask);
             const imgBlob = await ImageUtility.canvasToBlob(canvasOriginalImg);
             const res = await ImageUtility.getEdit(imgBlob, maskBlob, input !== '' ? input + ' in the same style' : 'Fill in the image in the same style', 2);
@@ -282,7 +263,6 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             // 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) + offsetX,
@@ -294,19 +274,17 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                 DocUtils.MakeLink(imageRootDoc, newCollectionRef.current, { link_relationship: 'Image Edit Version History', link_displayLine: false });
 
                 // opening new tab
-                newCollectionRef.current.fitContentOnce = true;
                 CollectionDockingView.AddSplit(newCollectionRef.current, OpenWhereMod.right);
+                newCollectionRef.current.fitContentOnce = true;
 
                 // add the doc to the main freeform
-                // addDoc?.(newCollectionRef.current);
                 await createNewImgDoc(originalImg.current, true);
             } else {
-                // parentDoc.current = childrenDocs.current[childrenDocs.current.length - 1];
+                parentDoc.current = childrenDocs.current[childrenDocs.current.length - 1];
                 childrenDocs.current = [];
             }
 
             originalImg.current = currImg.current;
-
             const { urls } = res as APISuccess;
             const imgUrls = await Promise.all(urls.map(url => ImageUtility.convertImageToCanvasDataURL(url, canvasDims.width, canvasDims.height)));
             const image = new Image();
@@ -366,8 +344,6 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         } 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, {
@@ -388,12 +364,10 @@ 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 () => {
         setSaveLoading(true);
         if (!currImg.current || !originalImg.current || !imageRootDoc) return;
         try {
-            console.log('creating another image');
             await createNewImgDoc(currImg.current, false);
         } catch (err) {
             console.log(err);
@@ -402,10 +376,6 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     };
 
     const handleViewClose = () => {
-        // if (newCollectionRef.current) {
-        //     newCollectionRef.current.fitContentOnce = true;
-        //     CollectionDockingView.AddSplit(newCollectionRef.current, OpenWhereMod.right);
-        // }
         MainView.Instance.setImageEditorOpen(false);
         MainView.Instance.setImageEditorSource('');
         setEdits([]);
@@ -435,8 +405,8 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                 onPointerMove={updateCursorData}
                 onPointerDown={handlePointerDown}
                 onPointerUp={handlePointerUp}>
-                <canvas ref={canvasRef} width={canvasDims.width} height={canvasSize} style={{ transform: `scale(${canvasScale})` }} />
-                <canvas ref={canvasBackgroundRef} width={canvasDims.height} height={canvasSize} style={{ transform: `scale(${canvasScale})` }} />
+                <canvas ref={canvasRef} width={canvasDims.width} height={canvasDims.height} style={{ transform: `scale(${canvasScale})` }} />
+                <canvas ref={canvasBackgroundRef} width={canvasDims.width} height={canvasDims.height} style={{ transform: `scale(${canvasScale})` }} />
                 <div
                     className="pointer"
                     style={{
@@ -507,7 +477,6 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                             width={75}
                             src={edit}
                             onClick={async () => {
-                                // if (savedSrcs.current.has(edit)) return;
                                 const img = new Image();
                                 img.src = edit;
                                 ImageUtility.drawImgToCanvas(img, canvasRef, canvasDims.width, canvasDims.height);
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
index 8d32221bd..4847bfeed 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -35,7 +35,6 @@ export class ImageUtility {
             if (width < height) {
                 // horizontal padding, x offset
                 const xOffset = (canvasSize - width) / 2;
-                console.log(xOffset);
                 ctx.drawImage(img, xOffset, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
             } else {
                 // vertical padding, y offset
@@ -156,7 +155,7 @@ export class ImageUtility {
         }
     };
 
-    // The image must be loaded!
+    // The image must be loaded
     static getCanvasMask = (srcCanvas: HTMLCanvasElement): HTMLCanvasElement | undefined => {
         const canvas = document.createElement('canvas');
         canvas.width = canvasSize;
@@ -164,7 +163,7 @@ export class ImageUtility {
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
         ctx?.clearRect(0, 0, canvasSize, canvasSize);
-        ctx.fillStyle = bgColor;
+        ctx.fillStyle = '#000000';
         ctx.fillRect(0, 0, canvasSize, canvasSize);
 
         // extract and set padding data
@@ -182,7 +181,7 @@ export class ImageUtility {
         return canvas;
     };
 
-    // The image must be loaded!
+    // The image must be loaded
     static getCanvasImg = (img: HTMLImageElement): HTMLCanvasElement | undefined => {
         const canvas = document.createElement('canvas');
         canvas.width = canvasSize;
@@ -194,10 +193,9 @@ export class ImageUtility {
         const width = img.width * scale;
         const height = img.height * scale;
         ctx?.clearRect(0, 0, canvasSize, canvasSize);
-        ctx.fillStyle = bgColor;
+        ctx.fillStyle = '#000000';
         ctx.fillRect(0, 0, canvasSize, canvasSize);
 
-        // extract and set padding data
         if (img.naturalHeight > img.naturalWidth) {
             // horizontal padding, x offset
             const xOffset = (canvasSize - width) / 2;
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
index 286dc6e4c..1fe151b46 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
@@ -1,7 +1,7 @@
 // constants
 export const canvasSize = 512;
 export const freeformRenderSize = 300;
-export const offsetDistanceY = freeformRenderSize + 300;
+export const offsetDistanceY = freeformRenderSize + 400;
 export const offsetX = 200;
 export const newCollectionSize = 500;
 
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts
index 9b9b9d3c2..83a21a1a5 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts
@@ -1,16 +1,21 @@
 // interfaces
 export interface CursorData {
-  x: number;
-  y: number;
-  width: number;
+    x: number;
+    y: number;
+    width: number;
 }
 
 export interface Point {
-  x: number;
-  y: number;
+    x: number;
+    y: number;
 }
 
 export enum BrushMode {
-  ADD,
-  SUBTRACT,
+    ADD,
+    SUBTRACT,
+}
+
+export interface ImageDimensions {
+    width: number;
+    height: number;
 }