fix: try fix hover updates on mobile touch

This commit is contained in:
ThaUnknown 2025-07-22 20:18:55 +02:00
parent 76b1b2dfd6
commit 4084293d46
No known key found for this signature in database
4 changed files with 26 additions and 9 deletions

View file

@ -1,6 +1,6 @@
{
"name": "ui",
"version": "6.4.82",
"version": "6.4.83",
"license": "BUSL-1.1",
"private": true,
"packageManager": "pnpm@9.15.5",

View file

@ -80,11 +80,12 @@ export function hover (node: HTMLElement, [cb = noop, hoverUpdate = noop]: [type
node.addEventListener('wheel', e => {
// cheap way to update hover state on scroll
// TODO: this is bad on touch, but good on mouse, fix it
if (document.elementsFromPoint(e.clientX, e.clientY).includes(node)) {
if (lastHoverElement !== hoverUpdate) lastHoverElement?.(false)
if (document.elementsFromPoint(e.clientX + e.deltaX, e.clientY + e.deltaY).includes(node)) {
lastHoverElement?.(false)
lastHoverElement = hoverUpdate
hoverUpdate(true)
} else {
lastHoverElement?.(false)
hoverUpdate(false)
}
}, { passive: true, signal: ctrl.signal })
@ -105,6 +106,7 @@ export function hover (node: HTMLElement, [cb = noop, hoverUpdate = noop]: [type
hoverUpdate(false)
cb()
} else {
lastHoverElement?.(false)
lastHoverElement = hoverUpdate
}
}, { signal: ctrl.signal })
@ -114,21 +116,35 @@ export function hover (node: HTMLElement, [cb = noop, hoverUpdate = noop]: [type
lastHoverElement?.(false)
if (lastHoverElement === hoverUpdate) {
lastHoverElement = null
hoverUpdate(false)
cb()
} else {
lastHoverElement?.(false)
hoverUpdate(true)
lastHoverElement = hoverUpdate
}
}
}, { signal: ctrl.signal })
node.addEventListener('pointerleave', () => {
if (inputType.value !== 'touch') hoverUpdate(false)
if (inputType.value !== 'touch') {
lastHoverElement?.(false)
hoverUpdate(false)
lastHoverElement = null
}
}, { signal: ctrl.signal })
node.addEventListener('pointermove', () => {
if (inputType.value === 'touch') hoverUpdate(false)
node.addEventListener('pointermove', (e) => {
if (inputType.value === 'touch' && Math.abs(e.movementY) > 0) {
lastHoverElement?.(false)
hoverUpdate(false)
lastHoverElement = null
}
}, { signal: ctrl.signal })
node.addEventListener('drag', () => {
if (inputType.value === 'mouse') hoverUpdate(false)
if (inputType.value === 'mouse') {
lastHoverElement?.(false)
hoverUpdate(false)
lastHoverElement = null
}
}, { signal: ctrl.signal })
return { destroy: () => ctrl.abort() }
@ -309,6 +325,7 @@ export function dragScroll (node: HTMLElement) {
const ctrl = new AbortController()
node.addEventListener('mousedown', e => {
if (e.button !== 0 || e.buttons !== 1) return
isDragging = true
x = e.clientX
y = e.clientY

View file

@ -67,7 +67,7 @@
<SettingCard let:id title='Max Number of Connections' description='Number of peers per torrent. Higher values will increase download speeds but might quickly fill up available ports if your ISP limits the maximum allowed number of open connections.'>
<Input type='number' inputmode='numeric' pattern='[0-9]*' min='1' max='512' bind:value={$settings.maxConns} {id} class='w-32 shrink-0 bg-background' />
</SettingCard>
<SettingCard let:id title='Forwarded Torrent Port' description='Forwarded port used for incoming torrent connections. 0 automatically finds an open unused port. Change this to a specific port if your VPN exposes only a specific port.'>
<SettingCard let:id title='Forwarded Torrent Port' description='Forwarded port used for incoming torrent connections. 0 automatically finds an open unused port. Change this to a specific port if you forwarded manually, or if you use a VPN'>
<Input type='number' inputmode='numeric' pattern='[0-9]*' min='0' max='65536' bind:value={$settings.torrentPort} {id} class='w-32 shrink-0 bg-background' />
</SettingCard>
<SettingCard let:id title='DHT Port' description='Port used for DHT connections. 0 is automatic.'>

View file

@ -80,7 +80,7 @@
<SettingCard class='bg-transparent' let:id title='Max Number of Connections' description='Number of peers per torrent. Higher values will increase download speeds but might quickly fill up available ports if your ISP limits the maximum allowed number of open connections.'>
<Input type='number' inputmode='numeric' pattern='[0-9]*' min='1' max='512' bind:value={$settings.maxConns} {id} class='w-32 shrink-0 bg-background' />
</SettingCard>
<SettingCard class='bg-transparent' let:id title='Forwarded Torrent Port' description='Forwarded port used for incoming torrent connections. 0 automatically finds an open unused port. Change this to a specific port if your VPN exposes only a specific port.'>
<SettingCard class='bg-transparent' let:id title='Forwarded Torrent Port' description='Forwarded port used for incoming torrent connections. 0 automatically finds an open unused port. Change this to a specific port if you forwarded manually, or if you use a VPN.'>
<Input type='number' inputmode='numeric' pattern='[0-9]*' min='0' max='65536' bind:value={$settings.torrentPort} {id} class='w-32 shrink-0 bg-background' />
</SettingCard>
{#if !SUPPORTS.isAndroid}