organize the inpainting display

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<HTMLCanvasElement>(null);
+
+  const drawingRef = useRef<HTMLCanvasElement>(null);
+  const cursorRef = useRef<HTMLCanvasElement>(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<HTMLCanvasElement, 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<HTMLCanvasElement, 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 (
     <div className={DrawImageMain}>
       <img src={imageData} />
       <canvas
-        ref={canvasRef}
+        ref={drawingRef}
         width={512}
         height={512}
         onMouseDown={_handleMouseDown}
         onMouseMove={_handleMouseMove}
         onMouseUp={_handleMouseUp}
       ></canvas>
+      <canvas
+        ref={cursorRef}
+        width={512}
+        height={512}
+        onMouseMove={_handleCursorMove}
+      ></canvas>
+
     </div>
   );
 }

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)",
 });

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 {
-import { CreationPaneMain } from "./creationpane.css.ts";
+  CreationPaneMain,
+  InpaintingSlider
+} from // @ts-ignore
+  "./creationpane.css.ts";
 
 import BasicCreation from "./basicCreation";
 
 export default function CreationPanel() {
+
+
+  const isInPaintingMode = useImageCreate((state) => state.isInpainting);
   return (
-    <div className={CreationPaneMain}>
+    <>
-      <BasicCreation></BasicCreation>
+      <div className={CreationPaneMain}>
-      <AdvancedSettings></AdvancedSettings>
+        <BasicCreation></BasicCreation>
-      <ImageModifiers></ImageModifiers>
+        <AdvancedSettings></AdvancedSettings>
-    </div>
+        <ImageModifiers></ImageModifiers>
+      </div>
+
+      {isInPaintingMode && (
+
+        <div className={InpaintingSlider}>
+          <InpaintingPanel></InpaintingPanel>
+        </div>
+      )}
+    </>
   );
 }

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 (
+    <div>
+      <DrawImage imageData={init_image} />
+    </div>
+  );
+};

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<HTMLAudioElement>(null);
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
@@ -105,7 +107,7 @@ export default function DisplayPanel() {
     <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
       <div className={displayContainer}>
-        {isInPaintingMode && <DrawImage imageData={init_image}></DrawImage>}
+        {/* {isInPaintingMode && <DrawImage imageData={init_image}></DrawImage>} */}
 
         {completedImages.length > 0 && (
           <>

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({