From 46009592ed7210436393b8214674d796bcdc7c78 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 15 May 2026 13:21:40 +0200 Subject: [PATCH] Route Soma scroll area hide timer --- .../scroll-area-provider.svelte.ts | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts b/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts index c621b3982..64d18a0ca 100644 --- a/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts +++ b/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts @@ -8,7 +8,7 @@ import { isBrowser } from '$adom'; import { scrollAreaMorfo } from '../../../morfo/components/scroll-area'; import type { SomaRuntime, SomaRuntimePart } from '../../runtime.svelte'; - +import type { TimerHandle } from '$timer'; export type ScrollAreaType = 'hover' | 'scroll' | 'auto' | 'always'; @@ -232,7 +232,7 @@ export class ScrollAreaScrollbarProvider { // Visibility state visible = $state(false); - private hideTimer: ReturnType | null = null; + private hideTimer: TimerHandle | null = null; private mounted = false; hovering = $state(false); dragging = $state(false); @@ -321,20 +321,30 @@ export class ScrollAreaScrollbarProvider { scheduleHide() { this.clearHideTimer(); const delay = this.provider.opts.scrollHideDelay.current; - this.hideTimer = setTimeout(() => { - if (!this.hovering && !this.dragging) { - this.visible = false; - } - }, delay); + this.hideTimer = this.provider.soma.uix.timers.schedule( + this.hideTimerKey, + delay, + () => { + this.hideTimer = null; + if (!this.hovering && !this.dragging) { + this.visible = false; + } + }, + { replace: true, meta: { component: 'scroll-area', action: 'hide-scrollbar' } } + ); } private clearHideTimer() { if (this.hideTimer) { - clearTimeout(this.hideTimer); + this.hideTimer.cancel(); this.hideTimer = null; } } + private get hideTimerKey() { + return `soma:scroll-area:${this.opts.id.current}:hide:${this.opts.orientation.current}`; + } + readonly onpointerenter = () => { this.hovering = true; this.show();