ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-07 21:59:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make web panel dragging way more responsive by using requestAnimationFrame.

Browse source
This commit is contained in:
brahim 2024-09-25 19:25:55 +02:00
parent b63df576e3
commit 65f32f3784
1 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/ZenSidebarManager.mjs
View file

@ -82,11 +82,13 @@ var gZenBrowserManagerSidebar = {
}
newSize = Math.max(minSize, Math.min(currentMax, maxWrapperSize,newSize));
if (reverse) {
const actualMoved = newSize - sidebarSizeStart;
this.sidebar.style[toAdjust] = (sidebarPosStart - actualMoved) + 'px';
}
this.sidebar.style[direction] = `${newSize}px`;
window.requestAnimationFrame(() => {
if (reverse) {
const actualMoved = newSize - sidebarSizeStart;
this.sidebar.style[toAdjust] = (sidebarPosStart - actualMoved) + 'px';
}
this.sidebar.style[direction] = `${newSize}px`;
});
}.bind(this);
document.addEventListener('mousemove', mouseMove);
@ -112,15 +114,17 @@ var gZenBrowserManagerSidebar = {
const topMouseOffset = startTop - mouseDownEvent.screenY;
const leftMouseOffset = startLeft - mouseDownEvent.screenX;
const moveListener = (mouseMoveEvent) => {
let top = mouseMoveEvent.screenY + topMouseOffset;
let left = mouseMoveEvent.screenX + leftMouseOffset;
window.requestAnimationFrame(() => {
let top = mouseMoveEvent.screenY + topMouseOffset;
let left = mouseMoveEvent.screenX + leftMouseOffset;
const wrapperBounds = this.sidebarWrapper.getBoundingClientRect();
top = Math.max(0, Math.min(top, wrapperBounds.height - sideBarHeight));
left = Math.max(0, Math.min(left, wrapperBounds.width - sideBarWidth));
const wrapperBounds = this.sidebarWrapper.getBoundingClientRect();
top = Math.max(0, Math.min(top, wrapperBounds.height - sideBarHeight));
left = Math.max(0, Math.min(left, wrapperBounds.width - sideBarWidth));
this.sidebar.style.top = top + 'px';
this.sidebar.style.left = left + 'px';
this.sidebar.style.top = top + 'px';
this.sidebar.style.left = left + 'px';
});
};