fix: scroll threshold logic fixed

makeplane · Dec 23, 2024 · 065c5d2 · 065c5d2
1 parent c28d35a
commit 065c5d2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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);