From 26ea2aeab92a7719639ea478fe57a8d8156aa4a5 Mon Sep 17 00:00:00 2001 From: HorizonCode Date: Tue, 1 Jul 2025 14:13:02 +0200 Subject: [PATCH] feat: improve cursor movement handling and animation performance --- .../components/ui/osu-cursor/OsuCursor.svelte | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/lib/components/ui/osu-cursor/OsuCursor.svelte b/src/lib/components/ui/osu-cursor/OsuCursor.svelte index 4716ae6..8aede35 100644 --- a/src/lib/components/ui/osu-cursor/OsuCursor.svelte +++ b/src/lib/components/ui/osu-cursor/OsuCursor.svelte @@ -3,16 +3,19 @@ import cursor_additive from '$assets/cursor-additive.png'; import { animate } from 'animejs'; import { onMount } from 'svelte'; + import { currentMonitor } from '@tauri-apps/api/window'; + import { estimateRefreshRate } from '@/displayUtils'; + import { cursorSmoothness } from '@/userSettings'; - let { smoothCursor = true }: { smoothCursor?: boolean } = - $props(); + let { smoothCursor = true }: { smoothCursor?: boolean } = $props(); let mouseX = $state(0); let mouseY = $state(0); + let lastMouseX = $state(0); + let lastMouseY = $state(0); let rotation = $state(0); let isMouseDown = $state(false); let isHoveringInteractive = $state(false); - let dragStartX = $state(0); let dragStartY = $state(0); let degrees = $state(0); @@ -43,7 +46,10 @@ const deltaX = e.pageX - window.pageXOffset - dragStartX; 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; } @@ -78,10 +84,10 @@ } animate(cursor, { - duration: smoothCursor ? 180 : 0, + duration: smoothCursor ? $cursorSmoothness : 0, translateX: mouseX, translateY: mouseY - 50, - ease: (t: number) => (t - 1) ** 3 + 1, + ease: (t: number) => (t - 1) ** 5 + 1, }); animate(cursor, { @@ -90,6 +96,8 @@ transformOrigin: '0px 0px 0', 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) => { @@ -144,10 +152,8 @@ onmousedown={handleMouseDown} onmouseup={handleMouseUp} /> -
+ +
cursor