diff --git a/src/KonvaApp/Engine.ts b/src/KonvaApp/Engine.ts index d45fe9253d..1265286b56 100644 --- a/src/KonvaApp/Engine.ts +++ b/src/KonvaApp/Engine.ts @@ -1,5 +1,4 @@ import Konva from "konva"; -import { effect } from "@preact/signals-core"; import { VideoNode } from "./Nodes/VideoNode"; import { uiAccess } from "~/signals"; import { uiEvents } from "~/signals"; @@ -35,11 +34,8 @@ export class Engine { this.offScreenCanvas = new OffscreenCanvas(0, 0); const context = this.offScreenCanvas.getContext("2d"); - effect(() => { - const image = uiEvents.getStagedImage(); - if (image) { - this.addImage(image); - } + uiEvents.onGetStagedImage((image) => { + this.addImage(image); }); } diff --git a/src/components/features/ToolbarMain/index.tsx b/src/components/features/ToolbarMain/index.tsx index 63195e4429..d50a4b0d6f 100644 --- a/src/components/features/ToolbarMain/index.tsx +++ b/src/components/features/ToolbarMain/index.tsx @@ -9,11 +9,11 @@ import { faFilePlus, faFilm, faFloppyDisk, - faHand, + // faHand, faImage, faLocationArrow, - faPlus, - faMinus, + // faPlus, + // faMinus, faSquareDashed, } from "@fortawesome/pro-thin-svg-icons"; diff --git a/src/signals/uiEvents/index.ts b/src/signals/uiEvents/index.ts index 27091fa7b6..77019a09db 100644 --- a/src/signals/uiEvents/index.ts +++ b/src/signals/uiEvents/index.ts @@ -1,15 +1,19 @@ import { signal } from "@preact/signals-core"; - +import { effect } from "@preact/signals-react"; const stagedImage = signal(null); export const addImageToEngine = (image: File) => { stagedImage.value = image; }; -const getStagedImage = () => { - return stagedImage.value; +const onGetStagedImage = (callback: (file: File) => void) => { + effect(() => { + if (stagedImage.value) { + callback(stagedImage.value); + } + }); }; export const uiEvents = { - getStagedImage, + onGetStagedImage, };