aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/generativeFill/GenerativeFill.tsx
diff options
context:
space:
mode:
authorSophie Zhang <sophie_zhang@brown.edu>2023-08-17 21:02:33 -0400
committerSophie Zhang <sophie_zhang@brown.edu>2023-08-17 21:02:33 -0400
commit1f44bed14529f8bfc280f714ffd794813c1b7a73 (patch)
tree3ca60a572a8e23fb19c0a6985e1d39b4e9c735e7 /src/client/views/nodes/generativeFill/GenerativeFill.tsx
parent107f718199a5b0e15f62e5c7e7034b11047ff512 (diff)
baseline before changes
Diffstat (limited to 'src/client/views/nodes/generativeFill/GenerativeFill.tsx')
-rw-r--r--src/client/views/nodes/generativeFill/GenerativeFill.tsx61
1 files changed, 15 insertions, 46 deletions
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);