@midscene/visualizer 1.4.8 → 1.4.9

package/dist/es/hooks/usePlaygroundState.mjs

@@ -76,6 +76,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider, targetName)
     const [actionSpaceLoading, setActionSpaceLoading] = useState(true);
     const [uiContextPreview, setUiContextPreview] = useState();
     const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
+    const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+    const lastScrollTopRef = useRef(0);
     const [verticalMode, setVerticalMode] = useState(false);
     const [replayCounter, setReplayCounter] = useState(0);
     const infoListRef = useRef(null);
@@ -189,6 +191,10 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider, targetName)
             const { scrollTop, scrollHeight, clientHeight } = infoListRef.current;
             const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
             setShowScrollToBottomButton(!isAtBottom);
+            const scrollingUp = scrollTop < lastScrollTopRef.current;
+            lastScrollTopRef.current = scrollTop;
+            if (isAtBottom) setAutoScrollEnabled(true);
+            else if (scrollingUp) setAutoScrollEnabled(false);
         }
     }, []);
     const handleScrollToBottom = useCallback(()=>{
@@ -198,13 +204,15 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider, targetName)
                 behavior: 'smooth'
             });
             setShowScrollToBottomButton(false);
+            setAutoScrollEnabled(true);
         }
     }, []);
     useEffect(()=>{
-        if (infoList.length > 0) scrollToBottom();
+        if (infoList.length > 0 && autoScrollEnabled) scrollToBottom();
     }, [
         infoList,
-        scrollToBottom
+        scrollToBottom,
+        autoScrollEnabled
     ]);
     useEffect(()=>{
         const container = infoListRef.current;

package/dist/lib/hooks/usePlaygroundState.js

@@ -104,6 +104,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider, targetName)
     const [actionSpaceLoading, setActionSpaceLoading] = (0, external_react_namespaceObject.useState)(true);
     const [uiContextPreview, setUiContextPreview] = (0, external_react_namespaceObject.useState)();
     const [showScrollToBottomButton, setShowScrollToBottomButton] = (0, external_react_namespaceObject.useState)(false);
+    const [autoScrollEnabled, setAutoScrollEnabled] = (0, external_react_namespaceObject.useState)(true);
+    const lastScrollTopRef = (0, external_react_namespaceObject.useRef)(0);
     const [verticalMode, setVerticalMode] = (0, external_react_namespaceObject.useState)(false);
     const [replayCounter, setReplayCounter] = (0, external_react_namespaceObject.useState)(0);
     const infoListRef = (0, external_react_namespaceObject.useRef)(null);
@@ -217,6 +219,10 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider, targetName)
             const { scrollTop, scrollHeight, clientHeight } = infoListRef.current;
             const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
             setShowScrollToBottomButton(!isAtBottom);
+            const scrollingUp = scrollTop < lastScrollTopRef.current;
+            lastScrollTopRef.current = scrollTop;
+            if (isAtBottom) setAutoScrollEnabled(true);
+            else if (scrollingUp) setAutoScrollEnabled(false);
         }
     }, []);
     const handleScrollToBottom = (0, external_react_namespaceObject.useCallback)(()=>{
@@ -226,13 +232,15 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider, targetName)
                 behavior: 'smooth'
             });
             setShowScrollToBottomButton(false);
+            setAutoScrollEnabled(true);
         }
     }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (infoList.length > 0) scrollToBottom();
+        if (infoList.length > 0 && autoScrollEnabled) scrollToBottom();
     }, [
         infoList,
-        scrollToBottom
+        scrollToBottom,
+        autoScrollEnabled
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const container = infoListRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -60,10 +60,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/shared": "1.4.8",
-    "@midscene/web": "1.4.8",
-    "@midscene/core": "1.4.8",
-    "@midscene/playground": "1.4.8"
+    "@midscene/core": "1.4.9",
+    "@midscene/playground": "1.4.9",
+    "@midscene/shared": "1.4.9",
+    "@midscene/web": "1.4.9"
   },
   "license": "MIT",
   "scripts": {