diff --git a/src/components/logs-viewer/index.tsx b/src/components/logs-viewer/index.tsx index ae6c4277..fe433b7e 100644 --- a/src/components/logs-viewer/index.tsx +++ b/src/components/logs-viewer/index.tsx @@ -23,12 +23,14 @@ const LogsViewer: React.FC = (props) => { const termwrapRef = useRef({}); const fitAddonRef = useRef({}); const cacheDataRef = useRef(null); + const isScorlling = useRef(false); const size = useSize(scroller); const updateContent = useCallback( _.throttle((data: string) => { - cacheDataRef.current = data; + cacheDataRef.current = ''; termRef.current?.clear?.(); + cacheDataRef.current = data; termRef.current?.write?.(data); }, 100), [] @@ -50,6 +52,12 @@ const LogsViewer: React.FC = (props) => { handler: updateContent }); }; + + const scrollAnimation = () => { + window.requestAnimationFrame(() => { + termRef.current?.scrollToBottom(); + }); + }; const initTerm = () => { termRef.current?.dispose?.(); termRef.current = new Terminal({ @@ -63,12 +71,20 @@ const LogsViewer: React.FC = (props) => { background: '#1e1e1e', foreground: 'rgba(255,255,255,0.8)' }, - cursorInactiveStyle: 'none' + cursorInactiveStyle: 'none', + smoothScrollDuration: 600 }); fitAddonRef.current = new FitAddon(); termRef.current.loadAddon(fitAddonRef.current); termRef.current.open(termwrapRef.current); - // fitAddonRef.current?.fit?.(); + + // add event + + termRef.current.onWriteParsed((e: any) => { + if (cacheDataRef.current) { + window.requestAnimationFrame(scrollAnimation); + } + }); }; const handleResize = _.throttle(() => {