extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 00:33:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
caranicas 2022-09-16 16:58:05 -04:00
parent 0ddff9d551
commit b15ac8b13e
3 changed files with 65 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts Normal file
View File

@ -0,0 +1,20 @@
import { style, globalStyle } from "@vanilla-extract/css";
export const DrawImageMain = style({
position: "relative",
width: "512px",
height: "512px",
});
globalStyle(`${DrawImageMain} > canvas`, {
position: "absolute",
top: "0",
left: "0",
});
globalStyle(`${DrawImageMain} > img`, {
position: "absolute",
top: "0",
left: "0",
});

81
ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
View File

@ -7,6 +7,11 @@ type DrawImageProps = {
imageData: string;
};
import {
DrawImageMain
} from //@ts-ignore
'./drawImage.css.ts';
export default function DrawImage({ imageData }: DrawImageProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
@ -15,28 +20,28 @@ export default function DrawImage({ imageData }: DrawImageProps) {
ctx.fillRect(0, 0, 100, 100);
};
useEffect(() => {
const canvas = canvasRef.current;
if (canvas) {
if (imageData) {
const ctx = canvas.getContext("2d");
if (ctx) {
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
img.src = imageData;
}
} else {
const ctx = canvas.getContext("2d");
if (ctx) {
draw(ctx);
}
}
} else {
console.log("canvas is null");
}
}, [imageData, draw]);
// useEffect(() => {
// const canvas = canvasRef.current;
// if (canvas) {
// if (imageData) {
// const ctx = canvas.getContext("2d");
// if (ctx) {
// const img = new Image();
// img.onload = () => {
// ctx.drawImage(img, 0, 0);
// };
// img.src = imageData;
// }
// } else {
// const ctx = canvas.getContext("2d");
// if (ctx) {
// draw(ctx);
// }
// }
// } else {
// console.log("canvas is null");
// }
// }, [imageData, draw]);
const _handleMouseDown = (
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
@ -45,16 +50,16 @@ export default function DrawImage({ imageData }: DrawImageProps) {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#ff0000";
ctx.strokeStyle = "#red";
const {
nativeEvent: { x, y },
nativeEvent: { offsetX, offsetY },
} = e;
console.log("x: " + x + " y: " + y);
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y + 1);
ctx.stroke();
// console.log("x: " + x + " y: " + y);
ctx.beginPath();
ctx.moveTo(offsetX, offsetY);
// ctx.lineTo(x + 1, y + 1);
// ctx.stroke();
}
};
@ -65,21 +70,25 @@ export default function DrawImage({ imageData }: DrawImageProps) {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
// if (ctx) {
// draw(ctx);
// }
if (ctx) {
// draw(ctx);
}
const {
nativeEvent: { x, y },
nativeEvent: { offsetX, offsetY },
} = e;
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y + 1);
// console.log("x: " + x + " y: " + y);
// ctx.moveTo(x, y);
ctx?.lineTo(offsetX, offsetY);
ctx.stroke();
ctx.closePath();
}
};
return (
<div>
<div className={DrawImageMain}>
<img src={imageData} />
<canvas
ref={canvasRef}
width={512}

3
ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
View File

@ -115,9 +115,6 @@ export default function DisplayPanel() {
{completedImages.length > 0 && (
<>
<div className={CurrentDisplay}>
<GeneratedImage
key={completedImages[0].id}
imageData={completedImages[0].data}