diff --git a/frontend/realtime/src/EditModeRootComponent/EditModeRootComponent.tsx b/frontend/realtime/src/EditModeRootComponent/EditModeRootComponent.tsx
index ffd272e63d..42016842e1 100644
--- a/frontend/realtime/src/EditModeRootComponent/EditModeRootComponent.tsx
+++ b/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 }) => {
)}
+ {editMode === EditMode.EDIT && (
+
+ )}
>
);
};
+
+const EditModeBrushSlider = () => {
+ return (
+
+ )
+}
diff --git a/frontend/realtime/src/KonvaApp/EditEngine.ts b/frontend/realtime/src/KonvaApp/EditEngine.ts
index ad5f699af6..5212b84a13 100644
--- a/frontend/realtime/src/KonvaApp/EditEngine.ts
+++ b/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);
+ }
}
diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/EditModeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/EditModeDrawEngine.ts
index eb60908786..36829f9b2c 100644
--- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/EditModeDrawEngine.ts
+++ b/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,
diff --git a/frontend/realtime/src/signals/editMode/EditModeSignals.ts b/frontend/realtime/src/signals/editMode/EditModeSignals.ts
index 262e77eb58..89472411f4 100644
--- a/frontend/realtime/src/signals/editMode/EditModeSignals.ts
+++ b/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.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);
+ });
+};