Merge branch 'main' of https://github.com/Elius94/console-gui-tools

Elius94 · Apr 12, 2022 · 4eebda6 · 4eebda6
2 parents 2a17985 + 18218b0
commit 4eebda6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/examples/tcp_simulator.mjs b/examples/tcp_simulator.mjs
@@ -10,7 +10,7 @@ let period = 100
 
 let mode = 'random'
 
-const periodList = [10, 100, 250, 500, 1000, 2000, 5000, 10000]
+const periodList = [10, 100, 250, 500, 1000, 2000, 5000, 10000, 20000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000]
 const modeList = ["random", "linear"]
 
 const clientManager = new EventEmitter()

diff --git a/index.js b/index.js
@@ -261,6 +261,8 @@ class OptionPopup extends EventEmitter {
         this.options = options
         this.selected = selected
         this.visible = visible
+        this.marginTop = 4
+        this.startIndex = 0
         if (this.CM.widgetsCollection[this.id]) {
             this.CM.unRegisterWidget(this)
             const message = `OptionPopup ${this.id} already exists.`
@@ -270,13 +272,27 @@ class OptionPopup extends EventEmitter {
         this.CM.registerWiget(this)
     }
 
+    adaptOptions() {
+        return this.options.slice(this.startIndex, this.startIndex + this.CM.Terminal.rows - this.marginTop - 4)
+    }
+
     keyListner(str, key) {
         switch (key.name) {
             case 'down':
-                this.setSelected(this.options[(this.options.indexOf(this.selected) + 1) % this.options.length])
+                this.setSelected(this.options[(this.options.indexOf(this.selected) + 1) % this.options.length], false)
+                if (this.CM.Terminal.rows - this.marginTop - 4 < this.options.length) {
+                    if (this.selected === this.options[this.adaptOptions().length + this.startIndex]) {
+                        this.startIndex++
+                    }
+                } else {
+                    this.startIndex = 0
+                }
                 break
             case 'up':
-                this.setSelected(this.options[(this.options.indexOf(this.selected) - 1 + this.options.length) % this.options.length])
+                this.setSelected(this.options[(this.options.indexOf(this.selected) - 1 + this.options.length) % this.options.length], false)
+                if (this.startIndex > 0 && this.selected === this.adaptOptions()[0]) {
+                    this.startIndex--
+                }
                 break
             case 'return':
                 {
@@ -312,7 +328,7 @@ class OptionPopup extends EventEmitter {
         return this.selected
     }
 
-    setSelected(selected) {
+    setSelected(selected, refresh = true) {
         this.selected = selected
         this.CM.refresh()
         return this
@@ -353,6 +369,10 @@ class OptionPopup extends EventEmitter {
     }
 
     draw() {
+        // Change start index if selected is not in the adaptOptions return array
+        if (this.adaptOptions().indexOf(this.selected) === -1) {
+            this.startIndex = this.options.indexOf(this.selected) - this.adaptOptions().length + 1 > 0 ? this.options.indexOf(this.selected) - this.adaptOptions().length + 1 : 0
+        }
         const offset = 2
         const maxOptionsLength = this.options.map((o) => o.toString()).reduce((max, option) => Math.max(max, option.length), 0)
         const windowWidth = maxOptionsLength > this.title.length ? maxOptionsLength + (2 * offset) : this.title.length + (2 * offset)
@@ -373,13 +393,13 @@ class OptionPopup extends EventEmitter {
         footer += "┘\n"
 
         let content = ""
-        this.options.forEach((option, index) => {
+        this.adaptOptions().forEach((option, index) => {
             content += `│${option === this.selected ? "<" : " "} ${option}${option === this.selected ? " >" : "  "}${" ".repeat(windowWidth - option.toString().length - 4)}│\n`
         })
 
         const windowDesign = `${header}${content}${footer}`
         windowDesign.split('\n').forEach((line, index) => {
-            this.CM.Terminal.cursorTo(Math.round((this.CM.Terminal.columns / 2) - (windowWidth / 2)), 4 + index)
+            this.CM.Terminal.cursorTo(Math.round((this.CM.Terminal.columns / 2) - (windowWidth / 2)), this.marginTop + index)
             this.CM.Terminal.write(line)
         })
         return this