diff options
| -rw-r--r-- | src/client/views/nodes/generativeFill/GenerativeFill.tsx | 125 |
1 files changed, 90 insertions, 35 deletions
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> |