added mapped cursor position

src/channels/cursor.ts

@@ -1,12 +1,19 @@
 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 type CursorPositions = {
+  raw: { x: number; y: number };
+  mapped: { x: number; y: number };
+};
+export let cursorPositionOnScreen = writable<CursorPositions>({
+  raw: { x: 0, y: 0 },
+  mapped: { x: 0, y: 0 },
+});
 
-export function initCursorPositionStream() {
-  const channel = new Channel<{ x: number; y: number }>();
+export function initChannelCursorPosition() {
+  const channel = new Channel<CursorPositions>();
   channel.onmessage = (pos) => {
     cursorPositionOnScreen.set(pos);
   };
-  invoke("stream_cursor_position", { onEvent: channel });
-}
+  invoke("channel_cursor_positions", { onEvent: channel });
+}

src/routes/+layout.ts

@@ -4,6 +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";
+import { initChannelCursorPosition } from "../channels/cursor";
 
-initCursorPositionStream();
+initChannelCursorPosition();

src/routes/scene/+page.svelte

@@ -2,7 +2,7 @@
   import { cursorPositionOnScreen } from "../../channels/cursor";
 </script>
 
-<div class="w-svw h-svh p-4">
+<div class="w-svw h-svh p-4 relative">
   <div
     class="size-max mx-auto bg-base-100 border-base-200 border px-4 py-3 rounded-xl"
   >
@@ -10,9 +10,14 @@
       <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
-        >
+        <span class="font-mono">
+          Cursor: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw
+            .y})
+        </span>
+        <span class="font-mono">
+          Cursor: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen
+            .mapped.y})
+        </span>
       </div>
     </div>
   </div>