aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
diff options
context:
space:
mode:
authorSophie Zhang <sophie_zhang@brown.edu>2023-06-28 11:47:41 -0400
committerSophie Zhang <sophie_zhang@brown.edu>2023-06-28 11:47:41 -0400
commitb6537cce6aa34eb33c052d7ec2cbbf804be08fba (patch)
tree34ee9ff83af71359ce6a0cc17d5a711db7780fa1 /src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
parenta6181a5695c7355b7996ac6c6c1e7aad886e6302 (diff)
added files
Diffstat (limited to 'src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx')
-rw-r--r--src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx58
1 files changed, 58 insertions, 0 deletions
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
new file mode 100644
index 000000000..348e27a16
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@mui/material';
+import { ImageUtility } from './generativeFillUtils/ImageHandler';
+import { canvasSize } from './generativeFillUtils/generativeFillConstants';
+import { Oval } from 'react-loader-spinner';
+import './GenerativeFillButtons.scss';
+import React from 'react';
+
+interface ButtonContainerProps {
+ canvasRef: React.RefObject<HTMLCanvasElement>;
+ backgroundref: React.RefObject<HTMLCanvasElement>;
+ currImg: React.MutableRefObject<HTMLImageElement | null>;
+ undoStack: React.MutableRefObject<ImageData[]>;
+ getEdit: () => Promise<void>;
+ loading: boolean;
+}
+
+const Buttons = ({ canvasRef, backgroundref, currImg, undoStack, loading, getEdit }: ButtonContainerProps) => {
+ const handleReset = () => {
+ if (!canvasRef.current || !currImg.current) return;
+ const ctx = ImageUtility.getCanvasContext(canvasRef);
+ if (!ctx) return;
+ ctx.clearRect(0, 0, canvasSize, canvasSize);
+ ImageUtility.drawImgToCanvas(currImg.current, canvasRef, true);
+ };
+
+ return (
+ <div className="generativeFillBtnContainer">
+ <Button onClick={handleReset}>Reset</Button>
+ <Button
+ onClick={() => {
+ if (!canvasRef.current) return;
+ ImageUtility.downloadCanvas(canvasRef.current);
+ }}>
+ Download
+ </Button>
+ {/* <Button
+ onClick={() => {
+ if (!canvasRef.current) return;
+ ImageUtility.downloadImageCanvas("/assets/firefly.png");
+ }}
+ >
+ Download Original
+ </Button> */}
+ <Button
+ variant="contained"
+ onClick={() => {
+ getEdit();
+ }}>
+ <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+ Get Edit
+ {loading && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff89" strokeWidth={3} strokeWidthSecondary={3} />}
+ </span>
+ </Button>
+ </div>
+ );
+};
+
+export default Buttons;