From b721bb4cfcebd307d5eb1737d9d57129964be7ce Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Thu, 5 Jun 2025 17:54:34 +0800 Subject: [PATCH 1/8] fix(tab-row): ensure similar behavior between horizontal/vertical scrolling --- apps/client/src/widgets/tab_row.ts | 39 +++++++++++++++++++----------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 6d0fc2fba..3de5b796b 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -385,31 +385,42 @@ export default class TabRowWidget extends BasicWidget { }; setupScrollEvents() { - let deltaX = 0; + let pendingScroll = 0; let isScrolling = false; const stepScroll = () => { - if (Math.abs(deltaX) > 5) { - const step = Math.round(deltaX * 0.2); - deltaX -= step; + if (Math.abs(pendingScroll) > 10) { + const step = Math.round(pendingScroll * 0.2); + pendingScroll -= step; this.scrollTabContainer(step, "instant"); requestAnimationFrame(stepScroll); } else { - this.scrollTabContainer(deltaX, "instant"); - deltaX = 0; + this.scrollTabContainer(pendingScroll, "instant"); + pendingScroll = 0; isScrolling = false; } }; this.$tabScrollingContainer[0].addEventListener('wheel', async (event) => { - if (!event.shiftKey && event.deltaX === 0) { - event.preventDefault(); - // Clamp deltaX between TAB_CONTAINER_MIN_WIDTH and TAB_CONTAINER_MIN_WIDTH * 3 - deltaX += Math.sign(event.deltaY) * Math.max(Math.min(Math.abs(event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3), TAB_CONTAINER_MIN_WIDTH); - if (!isScrolling) { - isScrolling = true; - stepScroll(); + if (utils.isCtrlKey(event) || event.altKey) { + return; + } + event.preventDefault(); + event.stopImmediatePropagation(); + if (!event.shiftKey) { + // Set an upper limit to avoid scrolling too fast + // no lower limit is set because touchpad deltas are usually small + const delta = Math.sign( event.deltaX + event.deltaY ) * Math.min(Math.abs(event.deltaX + event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3); + + // Check if the device has reduced motion enabled + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + this.scrollTabContainer(delta, "instant"); + } else { + pendingScroll += delta + if (!isScrolling) { + isScrolling = true; + stepScroll(); + } } } else if (event.shiftKey) { - event.preventDefault(); if (event.deltaY > 0) { await appContext.tabManager.activateNextTabCommand(); } else { From be8ee350cb625b7c5028f14c878f50f9fa51d8f9 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Thu, 5 Jun 2025 19:54:37 +0800 Subject: [PATCH 2/8] fix(tab-row): ensure similar behavior between horizontal/vertical scrolling --- apps/client/src/widgets/tab_row.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 3de5b796b..79a9eb960 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -405,11 +405,12 @@ export default class TabRowWidget extends BasicWidget { } event.preventDefault(); event.stopImmediatePropagation(); - if (!event.shiftKey) { - // Set an upper limit to avoid scrolling too fast - // no lower limit is set because touchpad deltas are usually small - const delta = Math.sign( event.deltaX + event.deltaY ) * Math.min(Math.abs(event.deltaX + event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3); - + + // Set an upper limit to avoid scrolling too fast + // no lower limit is set because touchpad deltas are usually small + const delta = Math.sign(event.deltaX + event.deltaY) * Math.min(Math.abs(event.deltaX + event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3); + + if (!event.shiftKey) { // Check if the device has reduced motion enabled if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { this.scrollTabContainer(delta, "instant"); @@ -421,7 +422,7 @@ export default class TabRowWidget extends BasicWidget { } } } else if (event.shiftKey) { - if (event.deltaY > 0) { + if (delta > 0) { await appContext.tabManager.activateNextTabCommand(); } else { await appContext.tabManager.activatePreviousTabCommand(); From 7b1c6807bacb1740c2f4543358068381844ec8ab Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Thu, 5 Jun 2025 20:20:29 +0800 Subject: [PATCH 3/8] fix(tab-row): Remove shift+wheel tab switching --- apps/client/src/widgets/tab_row.ts | 29 ++++++++++------------------- 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 79a9eb960..bfd3fe918 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -400,7 +400,7 @@ export default class TabRowWidget extends BasicWidget { } }; this.$tabScrollingContainer[0].addEventListener('wheel', async (event) => { - if (utils.isCtrlKey(event) || event.altKey) { + if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) { return; } event.preventDefault(); @@ -409,25 +409,16 @@ export default class TabRowWidget extends BasicWidget { // Set an upper limit to avoid scrolling too fast // no lower limit is set because touchpad deltas are usually small const delta = Math.sign(event.deltaX + event.deltaY) * Math.min(Math.abs(event.deltaX + event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3); - - if (!event.shiftKey) { - // Check if the device has reduced motion enabled - if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { - this.scrollTabContainer(delta, "instant"); - } else { - pendingScroll += delta - if (!isScrolling) { - isScrolling = true; - stepScroll(); - } + + // Check if the device has reduced motion enabled + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + this.scrollTabContainer(delta, "instant"); + } else { + pendingScroll += delta + if (!isScrolling) { + isScrolling = true; + stepScroll(); } - } else if (event.shiftKey) { - if (delta > 0) { - await appContext.tabManager.activateNextTabCommand(); - } else { - await appContext.tabManager.activatePreviousTabCommand(); - } - this.activeTabEl.scrollIntoView(); } }); From 6508ef4fce23281bac0efea0e8f76ddf56b58e10 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Thu, 5 Jun 2025 20:27:58 +0800 Subject: [PATCH 4/8] fix(tab-row): Avoid this.newTabOuterWidth being a decimal in Electron --- apps/client/src/widgets/tab_row.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index bfd3fe918..2d8c8e20e 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -488,8 +488,9 @@ export default class TabRowWidget extends BasicWidget { // this.$newTab may include margin, and using NEW_TAB_WIDTH could cause tabsContainerWidth to be slightly larger, // resulting in misaligned scrollbars/buttons. Therefore, use outerwidth. this.updateOuterWidth(); - let tabsContainerWidth = Math.floor(this.$widget.width() ?? 0); - tabsContainerWidth -= this.newTabOuterWidth + MIN_FILLER_WIDTH; + let tabsContainerWidth = Math.floor( + (this.$widget.width() ?? 0) - this.newTabOuterWidth - MIN_FILLER_WIDTH + ); // Check whether the scroll buttons need to be displayed. if ((TAB_CONTAINER_MIN_WIDTH + MARGIN_WIDTH) * numberOfTabs > tabsContainerWidth) { tabsContainerWidth -= this.scrollButtonsOuterWidth; From ea1bce4e7b7cb3866300598385802c44d26ddc8c Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Thu, 5 Jun 2025 23:19:00 +0800 Subject: [PATCH 5/8] fix(tab-row): ensure similar behavior between horizontal/vertical scrolling --- apps/client/src/widgets/tab_row.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 2d8c8e20e..94dc9cda2 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -388,7 +388,7 @@ export default class TabRowWidget extends BasicWidget { let pendingScroll = 0; let isScrolling = false; const stepScroll = () => { - if (Math.abs(pendingScroll) > 10) { + if (Math.abs(pendingScroll) > 5) { const step = Math.round(pendingScroll * 0.2); pendingScroll -= step; this.scrollTabContainer(step, "instant"); From 6d416cfe65cd1bd0e92c47c26c92471d1495ce25 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Fri, 6 Jun 2025 09:06:14 +0800 Subject: [PATCH 6/8] fix(tab-row): Reduce animation frames --- apps/client/src/widgets/tab_row.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 2d8c8e20e..26da432c2 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -388,7 +388,7 @@ export default class TabRowWidget extends BasicWidget { let pendingScroll = 0; let isScrolling = false; const stepScroll = () => { - if (Math.abs(pendingScroll) > 10) { + if (Math.abs(pendingScroll) > 20) { const step = Math.round(pendingScroll * 0.2); pendingScroll -= step; this.scrollTabContainer(step, "instant"); From 537ad1c1e5453dc3b4a27bc904ba1fc7106df3b9 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Fri, 6 Jun 2025 15:55:00 +0800 Subject: [PATCH 7/8] fix(tab-row): Fix extra +1 when extraWidthRemaining is a decimal --- apps/client/src/widgets/tab_row.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 26da432c2..6e212f6f6 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -510,11 +510,11 @@ export default class TabRowWidget extends BasicWidget { let extraWidthRemaining = totalExtraWidthDueToFlooring; for (let i = 0; i < numberOfTabs; i += 1) { - const extraWidth = flooredClampedTargetWidth < TAB_CONTAINER_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0; + const extraWidth = flooredClampedTargetWidth < TAB_CONTAINER_MAX_WIDTH && extraWidthRemaining >= 1 ? 1 : 0; widths.push(flooredClampedTargetWidth + extraWidth); - if (extraWidthRemaining > 0) { + if (extraWidthRemaining >= 1) { extraWidthRemaining -= 1; } } From 17885f60912b07f397a817a6bfc02436507ac817 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Fri, 6 Jun 2025 19:09:25 +0800 Subject: [PATCH 8/8] fix(tab-row): Remove smooth scrolling --- apps/client/src/widgets/tab_row.ts | 34 +++++------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts index 6e212f6f6..776f379a9 100644 --- a/apps/client/src/widgets/tab_row.ts +++ b/apps/client/src/widgets/tab_row.ts @@ -385,41 +385,17 @@ export default class TabRowWidget extends BasicWidget { }; setupScrollEvents() { - let pendingScroll = 0; - let isScrolling = false; - const stepScroll = () => { - if (Math.abs(pendingScroll) > 20) { - const step = Math.round(pendingScroll * 0.2); - pendingScroll -= step; - this.scrollTabContainer(step, "instant"); - requestAnimationFrame(stepScroll); - } else { - this.scrollTabContainer(pendingScroll, "instant"); - pendingScroll = 0; - isScrolling = false; - } - }; - this.$tabScrollingContainer[0].addEventListener('wheel', async (event) => { + this.$tabScrollingContainer.on('wheel', (event) => { + const wheelEvent = event.originalEvent as WheelEvent; if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) { return; } event.preventDefault(); - event.stopImmediatePropagation(); - // Set an upper limit to avoid scrolling too fast - // no lower limit is set because touchpad deltas are usually small - const delta = Math.sign(event.deltaX + event.deltaY) * Math.min(Math.abs(event.deltaX + event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3); + const delta = Math.sign(wheelEvent.deltaX + wheelEvent.deltaY) * + Math.min(Math.abs(wheelEvent.deltaX + wheelEvent.deltaY), TAB_CONTAINER_MIN_WIDTH * 2); - // Check if the device has reduced motion enabled - if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { - this.scrollTabContainer(delta, "instant"); - } else { - pendingScroll += delta - if (!isScrolling) { - isScrolling = true; - stepScroll(); - } - } + this.scrollTabContainer(delta, "instant"); }); this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200));