EZPPFarm/EZPPLauncher
EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 14 Activity

feat: improve cursor movement handling and animation performance

Browse Source
This commit is contained in:
HorizonCode 2025-07-01 14:13:02 +02:00
parent 1834d8dfb3
commit 26ea2aeab9
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/lib/components/ui/osu-cursor/OsuCursor.svelte
View File

@ -3,16 +3,19 @@
import cursor_additive from '$assets/cursor-additive.png'; import cursor_additive from '$assets/cursor-additive.png';
import { animate } from 'animejs'; import { animate } from 'animejs';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { currentMonitor } from '@tauri-apps/api/window';
import { estimateRefreshRate } from '@/displayUtils';
import { cursorSmoothness } from '@/userSettings';
let { smoothCursor = true }: { smoothCursor?: boolean } = let { smoothCursor = true }: { smoothCursor?: boolean } = $props();
$props();
let mouseX = $state(0); let mouseX = $state(0);
let mouseY = $state(0); let mouseY = $state(0);
let lastMouseX = $state(0);
let lastMouseY = $state(0);
let rotation = $state(0); let rotation = $state(0);
let isMouseDown = $state(false); let isMouseDown = $state(false);
let isHoveringInteractive = $state(false); let isHoveringInteractive = $state(false);
let dragStartX = $state(0); let dragStartX = $state(0);
let dragStartY = $state(0); let dragStartY = $state(0);
let degrees = $state(0); let degrees = $state(0);
@ -43,7 +46,10 @@
const deltaX = e.pageX - window.pageXOffset - dragStartX; const deltaX = e.pageX - window.pageXOffset - dragStartX;
const deltaY = e.pageY - window.pageYOffset - dragStartY; const deltaY = e.pageY - window.pageYOffset - dragStartY;
if (!applyRotation && isMouseDown && deltaX * deltaX + deltaY * deltaY > 30 * 100) { const velocityX = Math.abs(mouseX - lastMouseX);
const velocityY = Math.abs(mouseY - lastMouseY);
if (!applyRotation && isMouseDown && velocityX * velocityX + velocityY * velocityY > 800) {
applyRotation = true; applyRotation = true;
} }
@ -78,10 +84,10 @@
} }
animate(cursor, { animate(cursor, {
duration: smoothCursor ? 180 : 0, duration: smoothCursor ? $cursorSmoothness : 0,
translateX: mouseX, translateX: mouseX,
translateY: mouseY - 50, translateY: mouseY - 50,
ease: (t: number) => (t - 1) ** 3 + 1, ease: (t: number) => (t - 1) ** 5 + 1,
}); });
animate(cursor, { animate(cursor, {
@ -90,6 +96,8 @@
transformOrigin: '0px 0px 0', transformOrigin: '0px 0px 0',
ease: (t: number) => Math.pow(2, -10 * t) * Math.sin((t - 0.075) * 20.94) + 1 - 0.0005 * t, ease: (t: number) => Math.pow(2, -10 * t) * Math.sin((t - 0.075) * 20.94) + 1 - 0.0005 * t,
}); });
lastMouseX = mouseX;
lastMouseY = mouseY;
}; };
const handleMouseDown = (event: MouseEvent) => { const handleMouseDown = (event: MouseEvent) => {
@ -144,10 +152,8 @@
onmousedown={handleMouseDown} onmousedown={handleMouseDown}
onmouseup={handleMouseUp} onmouseup={handleMouseUp}
/> />
<div
class="h-7 w-7 fixed pointer-events-none z-[99999]" <div class="h-7 w-7 fixed pointer-events-none z-[99999]" bind:this={cursor}>
bind:this={cursor}
>
<div class="relative"> <div class="relative">
<img class="absolute top-0 left-0" src={cursor_default} bind:this={cursorInner} alt="cursor" /> <img class="absolute top-0 left-0" src={cursor_default} bind:this={cursorInner} alt="cursor" />
<img <img