Pointer

1<script lang="ts">
2	import { motion, AnimatePresence, useMotionValue } from "motion-sv";
3	import { cn } from "$UTILS$";
4	import { type Snippet } from "svelte";
5	import { watch } from "runed";
6	// import type { HTMLMotionProps } from "motion-sv";
7 
8	interface PointerProps {
9		children?: Snippet;
10		class?: string;
11	}
12 
13	let { children, class: className }: PointerProps = $props();
14 
15	const x = useMotionValue(0);
16	const y = useMotionValue(0);
17	let isActive = $state(false);
18	let containerRef: HTMLDivElement | null = $state(null);
19 
20	watch([() => x, () => y], () => {
21		if (typeof window !== "undefined" && containerRef) {
22			// Get the parent element directly from the ref
23			const parentElement = containerRef.parentElement;
24 
25			if (parentElement) {
26				console.log("Parent element found:", parentElement);
27 
28				// Add cursor-none to parent
29				parentElement.style.cursor = "none";
30 
31				// Add event listeners to parent
32				const handleMouseMove = (e: MouseEvent) => {
33					// console.log("Mouse move event:", e);
34					// console.log("Mouse coordinates:", e.clientX, e.clientY);
35					console.log(x, y);
36					x.set(e.clientX);
37					y.set(e.clientY);
38					isActive = true;
39				};
40 
41				const handleMouseEnter = (e: MouseEvent) => {
42					x.set(e.clientX);
43					y.set(e.clientY);
44 
45					isActive = true;
46				};
47 
48				const handleMouseLeave = () => {
49					isActive = false;
50				};
51 
52				parentElement.addEventListener("mousemove", handleMouseMove);
53				parentElement.addEventListener("mouseenter", handleMouseEnter);
54				parentElement.addEventListener("mouseleave", handleMouseLeave);
55 
56				return () => {
57					parentElement.style.cursor = "";
58					parentElement.removeEventListener("mousemove", handleMouseMove);
59					parentElement.removeEventListener("mouseenter", handleMouseEnter);
60					parentElement.removeEventListener("mouseleave", handleMouseLeave);
61				};
62			}
63		}
64	});
65</script>
66 
67<div bind:this={containerRef}></div>
68<AnimatePresence>
69	{#if isActive}
70		<motion.div
71			class="pointer-events-none fixed z-50 transform-[translate(-50%,-50%)]"
72			style={{
73				top: y,
74				left: x,
75			}}
76			initial={{
77				scale: 0,
78				opacity: 0,
79			}}
80			animate={{
81				scale: 1,
82				opacity: 1,
83			}}
84			exit={{
85				scale: 0,
86				opacity: 0,
87			}}
88		>
89			{#if children}
90				{@render children()}
91			{:else}
92				<svg
93					stroke="currentColor"
94					fill="currentColor"
95					stroke-width="1"
96					viewBox="0 0 16 16"
97					height="24"
98					width="24"
99					xmlns="http://www.w3.org/2000/svg"
100// … truncated