Add slider controls

frontend/realtime/src/EditModeRootComponent/EditModeRootComponent.tsx

@@ -1,13 +1,14 @@
-import { faArrowPointer, faEdit, faHandPointer, faLocationArrow, faLocationArrowUp, faMousePointer, faNavicon, faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { faArrowPointer, faArrowsCross, faCircleXmark, faCross, faEdit, faHandPointer, faLocationArrow, faLocationArrowUp, faMousePointer, faNavicon, faSparkles, faXmarkCircle, faXmarksLines } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSignals } from "@preact/signals-react/runtime";
 import { useCallback, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { DialogAddImage } from "~/components/features";
-import { Button, TabItem, TabSelector } from "~/components/ui";
+import { Button, Slider, TabItem, TabSelector } from "~/components/ui";
 import { useRenderCounter } from "~/hooks/useRenderCounter";
 import { EditEngine } from "~/KonvaApp/EditEngine";
 import { KonvaCanvasContainer } from "~/KonvaRootComponent/KonvaCanvasContainer";
-import { EditMode, editModeState, setEditModeBaseImage } from "~/signals/editMode";
+import { EditMode, editModeBrushSize, editModeState, setEditModeBaseImage, setEditModeBrushSize, triggerEditModeClear } from "~/signals/editMode";
 
 const tabs: TabItem[] = [
   { id: EditMode.SELECT, label: "Select", icon: faLocationArrow, iconClassName: "fa-flip-horizontal mr-1.5" },
@@ -74,6 +75,32 @@ export const EditModeRootComponent = ({ className }: { className: string }) => {
             </div>
           </div >
         )}
+      {editMode === EditMode.EDIT && (
+        <div className="fixed top-20 left-0 right-0 z-10 flex max-w-full items-center justify-center">
+          <div className="glass flex rounded-full items-center justify-center p-2">
+            <EditModeBrushSlider />
+            <Button icon={faCircleXmark} className="ml-2" variant="action"
+              onClick={triggerEditModeClear}
+            />
+          </div>
+        </div>
+      )}
     </>
   );
 };
+
+const EditModeBrushSlider = () => {
+  return (
+    <Slider
+      min={0}
+      max={100}
+      value={editModeBrushSize.value}
+      onChange={setEditModeBrushSize}
+      step={1}
+      innerLabel={"Brush size"}
+      showDecrement
+      showIncrement
+      className="w-[196px]"
+    />
+  )
+}

frontend/realtime/src/KonvaApp/EditEngine.ts

@@ -21,7 +21,7 @@ import { VideoResolutions } from "./constants";
 import { ToolbarNodeButtonNames } from "~/components/features/ToolbarNode/enums";
 
 import { EditModeDrawEngine } from "./RenderingPrimitives/EditModeDrawEngine";
-import { EditMode, editModeState, onEditModeBaseImageChange, onEditModeChange } from "~/signals/editMode";
+import { EditMode, editModeState, onEditModeBaseImageChange, onEditModeBrushSizeChange, onEditModeChange, onEditModeInpaintClear } from "~/signals/editMode";
 import { MediaNode } from "./types";
 
 export interface RenderingOptions {
@@ -206,10 +206,18 @@ export class EditEngine {
     onEditModeChange((mode) => {
       this.setEditMode(mode);
     });
-    //
-    // onEditModeBaseImageChange((imageFile) => {
-    //   this.addImage(imageFile);
-    // })
+
+    onEditModeBaseImageChange((imageFile) => {
+      this.addImage(imageFile);
+    })
+
+    onEditModeBrushSizeChange((size) => {
+      this.editDrawEngine.paintBrushSize = size;
+    })
+
+    onEditModeInpaintClear(() => {
+      this.clearInpaintNodes();
+    })
   }
 
   disableAllButtons() {
@@ -371,4 +379,16 @@ export class EditEngine {
       }
     });
   }
+
+  private clearInpaintNodes() {
+    console.log("clearInpaintNodes");
+    const markedForDelete: MediaNode[] = [];
+    this.nodesManager.getAllNodes().forEach((node) => {
+      if (node instanceof PaintNode) {
+        markedForDelete.push(node);
+      }
+    });
+
+    this.commandManager.deleteSpecificNodes(markedForDelete);
+  }
 }

frontend/realtime/src/KonvaApp/RenderingPrimitives/EditModeDrawEngine.ts

@@ -19,6 +19,7 @@ import {
 } from "~/signals/uiEvents/loadingIndicator";
 import { DecodeBase64ToImage } from "~/utilities/DecodeBase64ToImage.ts";
 import { imageBitmapToBase64 } from "../EngineUtitlities/Base64Helpers";
+import { EDIT_INIT_BRUSH_SIZE } from "~/signals/editMode";
 
 interface InpaintImageParams {
   image: string;
@@ -55,7 +56,7 @@ export class EditModeDrawEngine {
   // paint Brush Size
   // has to exit out of paint mode when shape or image are used.
   public paintColor: string = "#000000";
-  private brushSize: number = 5; // Default brush size
+  private brushSize: number = EDIT_INIT_BRUSH_SIZE; // Default brush size
 
   private onDrawCallback?: (
     canvas: HTMLCanvasElement,

frontend/realtime/src/signals/editMode/EditModeSignals.ts

@@ -1,4 +1,5 @@
 import { effect, signal } from "@preact/signals-react";
+import { clamp, normalize } from "~/utilities";
 
 export enum EditMode {
   INIT = "INIT",
@@ -6,8 +7,13 @@ export enum EditMode {
   EDIT = "EDIT",
 }
 
+export const EDIT_MIN_BRUSH_SIZE = 10;
+export const EDIT_MAX_BRUSH_SIZE = 100;
+export const EDIT_INIT_BRUSH_SIZE = 50;
 export const editModePrompt = signal("");
 export const editModeState = signal<EditMode>(EditMode.SELECT);
+export const editModeBrushSize = signal(EDIT_INIT_BRUSH_SIZE);
+export const editModeClearSignal = signal(false); // Just a signal to trigger a clear, value doesn't matter
 
 export const onEditModeChange = (callback: (mode: EditMode) => void) => {
   effect(() => {
@@ -29,3 +35,25 @@ export const onEditModeBaseImageChange = (callback: (file: File) => void) => {
 export const setEditModeBaseImage = (imageFile: File) => {
   editModeBaseImage.value = imageFile;
 }
+
+export const setEditModeBrushSize = (size: number) => {
+  editModeBrushSize.value = clamp(size, EDIT_MIN_BRUSH_SIZE, EDIT_MAX_BRUSH_SIZE);
+}
+
+export const onEditModeBrushSizeChange = (callback: (size: number) => void) => {
+  effect(() => {
+    callback(normalize(editModeBrushSize.value, 0, EDIT_MAX_BRUSH_SIZE));
+  });
+}
+
+export const triggerEditModeClear = () => {
+  console.log("trigger called!!!")
+  editModeClearSignal.value = !editModeClearSignal.value;
+}
+
+export const onEditModeInpaintClear = (callback: (_: boolean) => void) => {
+  effect(() => {
+    console.log("effect called!!!")
+    callback(editModeClearSignal.value);
+  });
+};