From 8b48ad77e814f2732074bf2337b5848f78129bff Mon Sep 17 00:00:00 2001 From: caranicas Date: Fri, 16 Sep 2022 21:07:42 -0400 Subject: [PATCH] organize the inpainting display --- .../components/molecules/drawImage/index.tsx | 57 +++++++++++++++++-- .../creationPanel/creationpane.css.ts | 11 ++++ .../organisms/creationPanel/index.tsx | 33 ++++++++--- .../creationPanel/inpaintingPanel/index.tsx | 19 +++++++ .../organisms/displayPanel/index.tsx | 6 +- .../build_src/src/pages/Home/home.css.ts | 2 +- 6 files changed, 113 insertions(+), 15 deletions(-) create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx index 7bd71cc5..c0580410 100644 --- a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx @@ -12,7 +12,9 @@ import { } from "./drawImage.css.ts"; export default function DrawImage({ imageData }: DrawImageProps) { - const canvasRef = useRef(null); + + const drawingRef = useRef(null); + const cursorRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); @@ -33,7 +35,7 @@ export default function DrawImage({ imageData }: DrawImageProps) { ) => { setIsDrawing(false); - const canvas = canvasRef.current; + const canvas = drawingRef.current; if (canvas) { const data = canvas.toDataURL(); console.log("data", data); @@ -44,7 +46,7 @@ export default function DrawImage({ imageData }: DrawImageProps) { e: React.MouseEvent ) => { if (isDrawing) { - const canvas = canvasRef.current; + const canvas = drawingRef.current; if (canvas) { const ctx = canvas.getContext("2d"); ctx.strokeStyle = "red"; @@ -75,17 +77,64 @@ export default function DrawImage({ imageData }: DrawImageProps) { } }; + const _handleCursorMove = ( + e: React.MouseEvent + ) => { + console.log("cursor move"); + + + const canvas = cursorRef.current; + if (canvas) { + const ctx = canvas.getContext("2d"); + ctx.strokeStyle = "red"; + const { + nativeEvent: { offsetX, offsetY }, + } = e; + + ctx.beginPath(); + + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + ctx.lineWidth = 20; + + // Sets the end of the lines drawn + // to a round shape. + ctx.lineCap = "round"; + + ctx.strokeStyle = "white"; + // The cursor to start drawing + // moves to this coordinate + ctx.moveTo(offsetX, offsetY); + + // A line is traced from start + // coordinate to this coordinate + ctx.lineTo(offsetX, offsetY); + + // Draws the line. + ctx.stroke(); + } + }; + + return (
+ +
); } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts index da211031..25502c51 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts @@ -5,4 +5,15 @@ export const CreationPaneMain = style({ width: "100%", height: "100%", padding: "0 10px", + overflowY: "auto", +}); + +export const InpaintingSlider = style({ + position: "absolute", + top: "10px", + left: "400px", + width: "200px", + height: "20px", + zIndex: 1, + backgroundColor: "rgba(0, 0, 0, 0.5)", }); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx index bfdfa2c5..157e53f0 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx @@ -1,22 +1,39 @@ import React, { ChangeEvent } from "react"; -import MakeButton from "./basicCreation/makeButton"; import AdvancedSettings from "./advancedSettings"; import ImageModifiers from "./imageModifiers"; +import InpaintingPanel from "./inpaintingPanel"; + +import { useImageCreate } from "../../../stores/imageCreateStore"; import "./creationPanel.css"; -// @ts-ignore -import { CreationPaneMain } from "./creationpane.css.ts"; +import { + CreationPaneMain, + InpaintingSlider +} from // @ts-ignore + "./creationpane.css.ts"; import BasicCreation from "./basicCreation"; export default function CreationPanel() { + + + const isInPaintingMode = useImageCreate((state) => state.isInpainting); return ( -
- - - -
+ <> +
+ + + +
+ + {isInPaintingMode && ( + +
+ +
+ )} + ); } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx new file mode 100644 index 00000000..17e1635a --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import DrawImage from "../../../molecules/drawImage"; + +import { useImageCreate } from "../../../../stores/imageCreateStore"; + +export default function InpaintingPanel() { + + + const init_image = useImageCreate((state) => + state.getValueForRequestKey("init_image") + ); + + + return ( +
+ +
+ ); +}; diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index 9f807cb9..ccb441e2 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -10,7 +10,7 @@ import { doMakeImage, MakeImageKey } from "../../../api"; import AudioDing from "./audioDing"; import GeneratedImage from "../../molecules/generatedImage"; -import DrawImage from "../../molecules/drawImage"; +// import DrawImage from "../../molecules/drawImage"; import { displayPanel, @@ -25,6 +25,8 @@ type CompletedImagesType = { data: string; info: ImageRequest; }; + + export default function DisplayPanel() { const dingRef = useRef(null); const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); @@ -105,7 +107,7 @@ export default function DisplayPanel() {
- {isInPaintingMode && } + {/* {isInPaintingMode && } */} {completedImages.length > 0 && ( <> diff --git a/ui/frontend/build_src/src/pages/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts index 919047c7..f9be163f 100644 --- a/ui/frontend/build_src/src/pages/Home/home.css.ts +++ b/ui/frontend/build_src/src/pages/Home/home.css.ts @@ -35,7 +35,7 @@ export const HeaderLayout = style({ export const CreateLayout = style({ gridArea: "create", - overflow: "auto", + position: "relative", }); export const DisplayLayout = style({