sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2059 from TriliumNext/tab-row 

feat(tab-row): Added smooth decay logic
pull/2056/head
Elian Doran 2025-05-30 17:31:48 +07:00 committed by GitHub
parent 64234aed9b 7010472bea
commit e4af99bfd4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
apps/client/src/widgets/tab_row.ts
Unescape Escape View File

@ -378,16 +378,45 @@ export default class TabRowWidget extends BasicWidget {
}
scrollTabContainer(direction: number, behavior: ScrollBehavior = "smooth") {
const currentScrollLeft = this.$tabScrollingContainer[0]?.scrollLeft;
this.$tabScrollingContainer[0].scrollTo({
left: currentScrollLeft + direction,
this.$tabScrollingContainer[0].scrollBy({
left: direction,
behavior
});
};
setupScrollEvents() {
this.$tabScrollingContainer[0].addEventListener('wheel', (event) => {
this.scrollTabContainer(event.deltaY * 1.5);
let deltaX = 0;
let isScrolling = false;
const stepScroll = () => {
if (Math.abs(deltaX) > 5) {
const step = Math.round(deltaX * 0.2);
deltaX -= step;
this.scrollTabContainer(step, "instant");
requestAnimationFrame(stepScroll);
} else {
this.scrollTabContainer(deltaX, "instant");
deltaX = 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();
}
} else if (event.shiftKey) {
event.preventDefault();
if (event.deltaY > 0) {
await appContext.tabManager.activateNextTabCommand();
} else {
await appContext.tabManager.activatePreviousTabCommand();
}
this.activeTabEl.scrollIntoView();
}
});
this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200));