blob: 348e27a16ed7c0d1898095160613e32fbe5cfc61 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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;
|
