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); + }); +};