cursor position on screen stream

src/channels/cursor.ts

@@ -0,0 +1,12 @@
+import { Channel, invoke } from "@tauri-apps/api/core";
+import { writable } from "svelte/store";
+
+export let cursorPositionOnScreen = writable<{ x: number; y: number }>({ x: 0, y: 0 });
+
+export function initCursorPositionStream() {
+  const channel = new Channel<{ x: number; y: number }>();
+  channel.onmessage = (pos) => {
+    cursorPositionOnScreen.set(pos);
+  };
+  invoke("stream_cursor_position", { onEvent: channel });
+}

src/routes/+layout.ts

@@ -4,3 +4,6 @@
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const ssr = false;
 import "../app.css";
+import { initCursorPositionStream } from "../channels/cursor";
+
+initCursorPositionStream();

src/routes/scene/+page.svelte

@@ -1,10 +1,19 @@
+<script lang="ts">
+  import { cursorPositionOnScreen } from "../../channels/cursor";
+</script>
+
 <div class="w-svw h-svh p-4">
-    <div
-        class="size-max mx-auto bg-base-100 border-base-200 border px-4 py-3 rounded-xl"
-    >
-        <div class="flex flex-col text-center">
-            <p class="text-xl">Friendolls</p>
-            <p class="text-sm opacity-50">Scene Screen</p>
-        </div>
+  <div
+    class="size-max mx-auto bg-base-100 border-base-200 border px-4 py-3 rounded-xl"
+  >
+    <div class="flex flex-col text-center">
+      <p class="text-xl">Friendolls</p>
+      <p class="text-sm opacity-50">Scene Screen</p>
+      <div class="mt-4">
+        <span class="font-mono"
+          >Cursor: ({$cursorPositionOnScreen.x}, {$cursorPositionOnScreen.y})</span
+        >
+      </div>
     </div>
+  </div>
 </div>