mirror of
https://github.com/zen-browser/components.git
synced 2025-07-07 21:59:59 +02:00
Make web panel dragging way more responsive by using requestAnimationFrame.
This commit is contained in:
parent
b63df576e3
commit
65f32f3784
1 changed files with 16 additions and 12 deletions
|
@ -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';
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue