feat(nds): dispatch events to screens from the nds itself

app/pages/index.vue

@@ -1,31 +1,17 @@
 <script setup lang="ts">
 import { OrbitControls } from "@tresjs/cientos";
+import type { Screen as NDSScreen } from "#components";
+
+type ScreenInstance = InstanceType<typeof NDSScreen>;
 
 const route = useRoute();
 const screen = computed(() => route.query.screen as string | undefined);
 
-const topScreen = useTemplateRef("topScreen");
-const bottomScreen = useTemplateRef("bottomScreen");
+const topScreen = useTemplateRef<ScreenInstance>("topScreen");
+const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
 
 const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
 const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
-
-const handleScreenClick = (
-  canvas: HTMLCanvasElement | null,
-  x: number,
-  y: number,
-) => {
-  if (!canvas) return;
-
-  const rect = canvas.getBoundingClientRect();
-  const clickEvent = new MouseEvent("click", {
-    bubbles: true,
-    cancelable: true,
-    clientX: (x / SCREEN_WIDTH) * rect.width + rect.left,
-    clientY: (y / SCREEN_HEIGHT) * rect.height + rect.top,
-  });
-  canvas.dispatchEvent(clickEvent);
-};
 </script>
 
 <template>
@@ -41,10 +27,6 @@ const handleScreenClick = (
         v-if="topScreenCanvas && bottomScreenCanvas"
         :top-screen-canvas="topScreenCanvas"
         :bottom-screen-canvas="bottomScreenCanvas"
-        @top-screen-click="(x, y) => handleScreenClick(topScreenCanvas, x, y)"
-        @bottom-screen-click="
-          (x, y) => handleScreenClick(bottomScreenCanvas, x, y)
-        "
       />
     </TresCanvas>