From 97e6f6bb49af9cfe2ec7094c6c695cdabe289346 Mon Sep 17 00:00:00 2001
From: lqqyt2423 <974923609@qq.com>
Date: Sat, 15 May 2021 20:31:59 +0800
Subject: [PATCH] web addon web auto scroll

---
 addon/web/client/package.json                 |  1 +
 addon/web/client/src/App.tsx                  | 27 ++++++++++++++++++-
 addon/web/client/src/types/scrollmonitor.d.ts |  3 +++
 addon/web/client/yarn.lock                    |  5 ++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 addon/web/client/src/types/scrollmonitor.d.ts

diff --git a/addon/web/client/package.json b/addon/web/client/package.json
index 790cd27..c2a7b46 100644
--- a/addon/web/client/package.json
+++ b/addon/web/client/package.json
@@ -15,6 +15,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "scrollmonitor": "^1.2.4",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
diff --git a/addon/web/client/src/App.tsx b/addon/web/client/src/App.tsx
index cca7afa..babc2cc 100644
--- a/addon/web/client/src/App.tsx
+++ b/addon/web/client/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Table from 'react-bootstrap/Table'
 import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
+import scrollMonitor from 'scrollmonitor'
 import './App.css'
 
 import BreakPoint from './components/BreakPoint'
@@ -22,6 +23,9 @@ class App extends React.Component<any, IState> {
   private flowMgr: FlowManager
   private ws: WebSocket | null
 
+  private pageBottom: HTMLDivElement | null
+  private autoScore = false
+
   constructor(props: any) {
     super(props)
 
@@ -35,6 +39,7 @@ class App extends React.Component<any, IState> {
     }
 
     this.ws = null
+    this.pageBottom = null
   }
 
   componentDidMount() {
@@ -71,7 +76,9 @@ class App extends React.Component<any, IState> {
       if (msg.type === MessageType.REQUEST) {
         const flow = new Flow(msg)
         this.flowMgr.add(flow)
-        this.setState({ flows: this.flowMgr.showList() })
+        this.setState({ flows: this.flowMgr.showList() }, () => {
+          if (this.pageBottom && this.autoScore) this.pageBottom.scrollIntoView({ behavior: 'auto' })
+        })
       }
       else if (msg.type === MessageType.REQUEST_BODY) {
         const flow = this.flowMgr.get(msg.id)
@@ -97,6 +104,18 @@ class App extends React.Component<any, IState> {
     }
   }
 
+  initScrollMonitor() {
+    if (!this.pageBottom) return
+
+    const watcher = scrollMonitor.create(this.pageBottom)
+    watcher.enterViewport(() => {
+      this.autoScore = true
+    })
+    watcher.exitViewport(() => {
+      this.autoScore = false
+    })
+  }
+
   renderFlow() {
     const { flow, flowTab } = this.state
     if (!flow) return null
@@ -274,6 +293,12 @@ class App extends React.Component<any, IState> {
         </Table>
 
         {this.renderFlow()}
+
+        <div ref={el => {
+          if (this.pageBottom) return
+          this.pageBottom = el
+          this.initScrollMonitor()
+        }} style={{ height: '0px', visibility: 'hidden' }}>bottom</div>
       </div>
     )
   }
diff --git a/addon/web/client/src/types/scrollmonitor.d.ts b/addon/web/client/src/types/scrollmonitor.d.ts
new file mode 100644
index 0000000..1843cb5
--- /dev/null
+++ b/addon/web/client/src/types/scrollmonitor.d.ts
@@ -0,0 +1,3 @@
+declare module 'scrollmonitor' {
+  export function create(el: HTMLElement): any
+}
diff --git a/addon/web/client/yarn.lock b/addon/web/client/yarn.lock
index 3336c9b..cb2e1cf 100644
--- a/addon/web/client/yarn.lock
+++ b/addon/web/client/yarn.lock
@@ -9832,6 +9832,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scrollmonitor@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/scrollmonitor/-/scrollmonitor-1.2.4.tgz#823d04cc1574aa3b71de7cc70ef91ebe633344a0"
+  integrity sha512-HBQpeZVAYETbNk0DAmi+X4hdTQMk5WRa/Udez9o8yC8GcRiPDgBxyEdV9g9Su/TWOuUeVfVGfNcyboEyzkte4Q==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"