diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/generativeFill/GenerativeFill.tsx | 46 | ||||
| -rw-r--r-- | src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts | 5 |
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'; |