Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2059 from TriliumNext/tab-row

Browse Source 
feat(tab-row): Added smooth decay logic
This commit is contained in:
Elian Doran 2025-05-30 17:31:48 +03:00 committed by GitHub
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
View File

@ -378,16 +378,45 @@ export default class TabRowWidget extends BasicWidget {
} }
scrollTabContainer(direction: number, behavior: ScrollBehavior = "smooth") { scrollTabContainer(direction: number, behavior: ScrollBehavior = "smooth") {
const currentScrollLeft = this.$tabScrollingContainer[0]?.scrollLeft; this.$tabScrollingContainer[0].scrollBy({
this.$tabScrollingContainer[0].scrollTo({ left: direction,
left: currentScrollLeft + direction,
behavior behavior
}); });
}; };
setupScrollEvents() { setupScrollEvents() {
this.$tabScrollingContainer[0].addEventListener('wheel', (event) => { let deltaX = 0;
this.scrollTabContainer(event.deltaY * 1.5); 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)); this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200));