From 1e68b75c68fb5695f8f13b5851542424f5743766 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 22 Apr 2025 16:06:40 +0800
Subject: [PATCH] chore: stop scrolling when wheeling in chat page

---
 src/components/image-editor/index.tsx         |  5 +-
 src/components/image-editor/tools-bar.tsx     |  2 -
 src/hooks/use-overlay-scroller.ts             | 46 +++++++++++++++++++
 .../playground/hooks/use-chat-completion.ts   |  1 -
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index 084de2db..7e1138cf 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -74,7 +74,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       onScaleImageSize,
       handleUpdateImageList,
       handleUpdateMaskList,
-      uploadButton,
       maskUpload
     },
     ref
@@ -203,6 +202,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
 
         loadMaksWorkerRef.current!.onmessage = (event: any) => {
           if (event.data.type === 'done' && event.data.imageData) {
+            console.log('load mask done');
             // draw the data to the overlay canvas
             const ctx = overlayCanvasRef.current!.getContext('2d')!;
             ctx.putImageData(event.data.imageData, 0, 0);
@@ -406,8 +406,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
         height: canvasRef.current!.height
       });
 
-      console.log('Image status:', imageStatus, negativeMaskRef.current);
-
       if (imageStatus.isResetNeeded) {
         onReset();
         resetCanvas();
@@ -424,6 +422,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       ) {
         invertPainting(true);
       }
+      console.log('Image status:', imageStatus, negativeMaskRef.current);
 
       updateCursorSize();
     }, [drawImage, imageStatus.isOriginal, imageStatus.isResetNeeded]);
diff --git a/src/components/image-editor/tools-bar.tsx b/src/components/image-editor/tools-bar.tsx
index 4fe19b1a..98a5af19 100644
--- a/src/components/image-editor/tools-bar.tsx
+++ b/src/components/image-editor/tools-bar.tsx
@@ -32,7 +32,6 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
     disabled,
     loading,
     lineWidth,
-    uploadButton,
     invertMask,
     handleBrushSizeChange,
     undo,
@@ -94,7 +93,6 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
           <ClearOutlined className="font-size-14" />
         </Button>
       </Tooltip>
-      {uploadButton}
       <UploadImg
         disabled={loading || invertMask}
         handleUpdateImgList={handleUpdateImageList}
diff --git a/src/hooks/use-overlay-scroller.ts b/src/hooks/use-overlay-scroller.ts
index 22a6a130..389ea7f4 100644
--- a/src/hooks/use-overlay-scroller.ts
+++ b/src/hooks/use-overlay-scroller.ts
@@ -32,6 +32,9 @@ export default function useOverlayScroller(data?: {
   const scrollEventElement = React.useRef<any>(null);
   const instanceRef = React.useRef<any>(null);
   const initialized = React.useRef(false);
+  const scrollElementRef = React.useRef<any>(null);
+  const stopUpdatePosition = React.useRef(false);
+  const timerRef = React.useRef<any>(null);
   const [initialize, instance] = useOverlayScrollbars({
     options: {
       update: {
@@ -57,6 +60,20 @@ export default function useOverlayScroller(data?: {
   scrollEventElement.current =
     instanceRef.current?.elements()?.scrollEventElement;
 
+  const handleOnScroll = () => {
+    const scrollTop = scrollEventElement.current?.scrollTop;
+    const scrollHeight = scrollEventElement.current?.scrollHeight;
+    const clientHeight = scrollEventElement.current?.clientHeight;
+
+    const isBottom = scrollTop + clientHeight + 20 >= scrollHeight;
+
+    if (isBottom) {
+      stopUpdatePosition.current = false;
+    } else {
+      stopUpdatePosition.current = true;
+    }
+  };
+
   const throttledScroll = React.useCallback(
     throttle(() => {
       scrollEventElement.current?.scrollTo?.({
@@ -79,6 +96,9 @@ export default function useOverlayScroller(data?: {
   // scroll to bottom
   const throttledUpdateScrollerPosition = React.useCallback(
     (delay?: number) => {
+      if (stopUpdatePosition.current) {
+        return;
+      }
       if (delay === 0) {
         scrollauto();
       } else {
@@ -103,6 +123,29 @@ export default function useOverlayScroller(data?: {
       instanceRef.current?.elements()?.scrollEventElement;
   };
 
+  const handleWheelCallback = React.useCallback((e: any) => {
+    handleOnScroll();
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      stopUpdatePosition.current = false;
+    }, 1500);
+  }, []);
+
+  // add  wheel event
+  const handleWheelEvent = () => {
+    scrollElementRef.current?.addEventListener?.('wheel', handleWheelCallback);
+  };
+
+  // remove wheel event
+  const removeWheelEvent = () => {
+    scrollElementRef.current?.removeEventListener?.(
+      'wheel',
+      handleWheelCallback
+    );
+  };
+
   const createInstance = React.useCallback(
     (el: any) => {
       if (instanceRef.current) {
@@ -110,10 +153,12 @@ export default function useOverlayScroller(data?: {
       }
       if (el) {
         initialize(el);
+        scrollElementRef.current = el;
         initialized.current = true;
         instanceRef.current = instance?.();
         scrollEventElement.current =
           instanceRef.current?.elements()?.scrollEventElement;
+        handleWheelEvent();
       }
       return instanceRef.current;
     },
@@ -123,6 +168,7 @@ export default function useOverlayScroller(data?: {
   useEffect(() => {
     return () => {
       instanceRef.current?.destroy?.();
+      removeWheelEvent();
     };
   }, [instance]);
 
diff --git a/src/pages/playground/hooks/use-chat-completion.ts b/src/pages/playground/hooks/use-chat-completion.ts
index dfe9fff1..2b6b9c02 100644
--- a/src/pages/playground/hooks/use-chat-completion.ts
+++ b/src/pages/playground/hooks/use-chat-completion.ts
@@ -176,7 +176,6 @@ export default function useChatCompletion(
       setLoading(false);
     }
   };
-  const throttleUpdatePosition = _.throttle(updateScrollerPosition, 100);
 
   useEffect(() => {
     if (scroller.current) {