even cleaner implementation

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

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";
 

src/signals/uiEvents/index.ts

@@ -1,15 +1,19 @@
 import { signal } from "@preact/signals-core";
-
+import { effect } from "@preact/signals-react";
 const stagedImage = signal<File | null>(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,
 };