extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 08:43:42 +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",
});

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

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