diff --git a/packages/editor/src/core/extensions/side-menu.tsx b/packages/editor/src/core/extensions/side-menu.tsx index a3f7d57e9c1..eac71301200 100644 --- a/packages/editor/src/core/extensions/side-menu.tsx +++ b/packages/editor/src/core/extensions/side-menu.tsx @@ -42,7 +42,7 @@ export const SideMenuExtension = (props: Props) => { ai: aiEnabled, dragDrop: dragDropEnabled, }, - scrollThreshold: { up: 250, down: 150 }, + scrollThreshold: { up: 200, down: 150 }, }), ]; }, diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts index ffa2f2e4f7e..fabb38f527d 100644 --- a/packages/editor/src/core/plugins/drag-handle.ts +++ b/packages/editor/src/core/plugins/drag-handle.ts @@ -22,9 +22,8 @@ const generalSelectors = [ ".editor-callout-component", ].join(", "); -const maxScrollSpeed = 10; -const acceleration = 0.2; -const scrollDivisor = 1; +const maxScrollSpeed = 20; +const acceleration = 0.5; const scrollParentCache = new WeakMap(); @@ -169,9 +168,8 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp const scrollableParent = getScrollParent(dragHandleElement); if (!scrollableParent) return; - const scrollThreshold = Math.min(100, scrollableParent.clientHeight * 0.15); - const scrollRegionUp = scrollThreshold; - const scrollRegionDown = window.innerHeight - scrollThreshold; + const scrollRegionUp = options.scrollThreshold.up; + const scrollRegionDown = window.innerHeight - options.scrollThreshold.down; let targetScrollAmount = 0; @@ -180,17 +178,17 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp } else if (isDraggedOutsideWindow === "bottom") { targetScrollAmount = maxScrollSpeed * 5; } else if (lastClientY < scrollRegionUp) { - const ratio = easeOutQuadAnimation((scrollRegionUp - lastClientY) / scrollThreshold); + const ratio = easeOutQuadAnimation((scrollRegionUp - lastClientY) / options.scrollThreshold.up); targetScrollAmount = -maxScrollSpeed * ratio; } else if (lastClientY > scrollRegionDown) { - const ratio = easeOutQuadAnimation((lastClientY - scrollRegionDown) / scrollThreshold); + const ratio = easeOutQuadAnimation((lastClientY - scrollRegionDown) / options.scrollThreshold.down); targetScrollAmount = maxScrollSpeed * ratio; } currentScrollSpeed += (targetScrollAmount - currentScrollSpeed) * acceleration; if (Math.abs(currentScrollSpeed) > 0.1) { - scrollableParent.scrollBy({ top: currentScrollSpeed / scrollDivisor }); + scrollableParent.scrollBy({ top: currentScrollSpeed }); } scrollAnimationFrame = requestAnimationFrame(scroll);