Merge pull request #75 from Elius94:Elius94/issue74

[Feature]: Added fitHeight to all layouts

README.md

@@ -80,6 +80,7 @@ const layoutOptions = {
     direction: 'vertical', // Set to 'horizontal' to enable horizontal layout (only for "double" layout)
     boxColor: 'yellow', // The color of the box
     boxStyle: 'bold', // The style of the box (bold)
+    fitHeight: true, // Set to false to disable the auto height fit [default: false] (since v3.2.0 - **NEW!**)
 }
 ```
 
@@ -383,6 +384,7 @@ In the "layoutOptions" provided to the ConsoleManager, we can set the layout:
  - direction: Set to 'horizontal' to enable horizontal layout (only for "double" layout)
  - boxColor: The color of the box (default: 'yellow')
  - boxStyle: The style of the box (default: 'bold')
+ - fitHeight: Set to false to disable the auto height fit [default: false] (since v3.2.0 - **NEW!**)
 
  To draw multiple pages, we need to use the setPage or setPages methods:
 

docs/Box.md

@@ -65,4 +65,14 @@
 | config | [<code>BoxConfig</code>](#BoxConfig) | <p>The configuration of the box.</p> |
 
 **Example**  
-```tsconst box = new Box({   id: "box",   x: 0,   y: 0,   width: 10,   height: 5,   style: { boxed: true, color: "red", label: "Box" } })box.setContent(new InPageWidgetBuilder(5).addText("Hello World!"))```
+```ts
+const box = new Box({ 
+  id: "box", 
+  x: 0, 
+  y: 0, 
+  width: 10, 
+  height: 5, 
+  style: { boxed: true, color: "red", label: "Box" } 
+})
+box.setContent(new InPageWidgetBuilder(5).addText("Hello World!"))
+```

docs/Button.md

@@ -98,19 +98,21 @@
 | config | [<code>ButtonConfig</code>](#ButtonConfig) | <p>The configuration object</p> |
 
 **Example**  
-```jsnew Button({
-        id: "btnRun", 
-        text: "Run me!", 
-        x: 21, 
-        y: 18,
-        style: {
-            color: "magentaBright",
-            bold: true,
-            italic: true,
-            borderColor: "green"
-        },
-        onRelease: () => {
-            GUI.log("Button clicked!")
-        },
-        draggable: true,
-    })```
+```js
+new Button({
+        id: "btnRun", 
+        text: "Run me!", 
+        x: 21, 
+        y: 18,
+        style: {
+            color: "magentaBright",
+            bold: true,
+            italic: true,
+            borderColor: "green"
+        },
+        onRelease: () => {
+            GUI.log("Button clicked!")
+        },
+        draggable: true,
+    })
+```

docs/ButtonPopup.md

@@ -78,7 +78,20 @@
 | config | [<code>ButtonPopupConfig</code>](#ButtonPopupConfig) | <p>The configuration of the popup.</p> |
 
 **Example**  
-```tsconst popup = new ButtonPopup({ id: "popup1",  title: "Choose the option",  buttons: ["YES", "NO", "?"],}) popup.show() // show the popuppopup.on("confirm", () => { console.log("User confirmed")})popup.on("cancel", () => { console.log("User canceled")})```
+```ts
+const popup = new ButtonPopup({
+ id: "popup1", 
+ title: "Choose the option", 
+ buttons: ["YES", "NO", "?"],
+}) 
+popup.show() // show the popup
+popup.on("confirm", () => {
+ console.log("User confirmed")
+})
+popup.on("cancel", () => {
+ console.log("User canceled")
+})
+```
 <a name="ButtonPopup+keyListener"></a>
 
 ### buttonPopup.keyListener(_str, key)

docs/ConfirmPopup.md

@@ -49,4 +49,13 @@
 | config | [<code>ConfirmPopupConfig</code>](#ConfirmPopupConfig) | <p>The configuration of the popup.</p> |
 
 **Example**  
-```tsconst popup = new ConfirmPopup({ id: "popup1",  title: "Are you shure",}) popup.show() // show the popuppopup.on("confirm", (answer) => { console.log(console.log(answer))})```
+```ts
+const popup = new ConfirmPopup({
+ id: "popup1", 
+ title: "Are you shure",
+}) 
+popup.show() // show the popup
+popup.on("confirm", (answer) => {
+ console.log(console.log(answer))
+})
+```

docs/Control.md

@@ -74,7 +74,33 @@ absolute position on the screen. It's a base class for all the controls (widgets
 | config | [<code>ControlConfig</code>](#ControlConfig) | <p>The configuration object for the control.</p> |
 
 **Example**  
-```tsconst widget1 = new InPageWidgetBuilder()widget1.addRow({ text: "┌────────┐", color: "yellow", style: "bold" })widget1.addRow({ text: "│ START! │", color: "yellow", style: "bold" })widget1.addRow({ text: "└────────┘", color: "yellow", style: "bold" })const button1 = new Control({   id: "btn1",   visible: false,   attributes: { x: 30, y: 18, width: 10, height: 3 },   children: widget1})button1.on("relativeMouse", (event) => {    // The relative mouse event is triggered with the mouse position relative to the widget    //console.log(`Mouse event: x: ${event.data.x}, y: ${event.data.y}`)    if (event.name === "MOUSE_LEFT_BUTTON_RELEASED") {        GUI.log("Button 1 clicked!")        if (valueEmitter) {            clearInterval(valueEmitter)            valueEmitter = null        } else {            valueEmitter = setInterval(frame, period)        }    }})button1.show()```
+```ts
+const widget1 = new InPageWidgetBuilder()
+widget1.addRow({ text: "┌────────┐", color: "yellow", style: "bold" })
+widget1.addRow({ text: "│ START! │", color: "yellow", style: "bold" })
+widget1.addRow({ text: "└────────┘", color: "yellow", style: "bold" })
+
+const button1 = new Control({
+   id: "btn1",
+   visible: false,
+   attributes: { x: 30, y: 18, width: 10, height: 3 },
+   children: widget1
+})
+button1.on("relativeMouse", (event) => {
+    // The relative mouse event is triggered with the mouse position relative to the widget
+    //console.log(`Mouse event: x: ${event.data.x}, y: ${event.data.y}`)
+    if (event.name === "MOUSE_LEFT_BUTTON_RELEASED") {
+        GUI.log("Button 1 clicked!")
+        if (valueEmitter) {
+            clearInterval(valueEmitter)
+            valueEmitter = null
+        } else {
+            valueEmitter = setInterval(frame, period)
+        }
+    }
+})
+button1.show()
+```
 <a name="Control+delete"></a>
 
 ### control.delete()
@@ -102,7 +128,9 @@ Inside this function are defined all the keys that can be pressed and the action
 **Kind**: instance method of [<code>Control</code>](#Control)  
 **Returns**: <code>InPageWidgetBuilder</code> - <p>The content of the Control.</p>  
 **Example**  
-```tsconst content = control.getContent()```
+```ts
+const content = control.getContent()
+```
 <a name="Control+focus"></a>
 
 ### control.focus() ⇒ [<code>Control</code>](#Control)

docs/CustomPopup.md

@@ -83,7 +83,12 @@
 | config | [<code>PopupConfig</code>](#PopupConfig) | <p>The configuration of the popup.</p> |
 
 **Example**  
-```tsconst popup = new CustomPopup({ id: "popup1", title: "See that values", content: new PageBuilder().addText("Hello world!"),}).show()
+```ts
+const popup = new CustomPopup({
+ id: "popup1",
+ title: "See that values",
+ content: new PageBuilder().addText("Hello world!"),
+}).show()
 <a name="CustomPopup+keyListener"></a>
 
 ### customPopup.keyListener(str, key)

docs/DoubleLayout.md

@@ -42,6 +42,7 @@
 | [page1Title] | <code>string</code> | <p>The title of the first page.</p> |
 | [page2Title] | <code>string</code> | <p>The title of the second page.</p> |
 | [pageRatio] | <code>Array.&lt;number&gt;</code> | <p>The ratio of the pages. (in horizontal direction)</p> |
+| [fitHeight] | <code>boolean</code> | <p>If the height of the pages should be the same.</p> |
 
 <a name="DoubleLayout"></a>
 

docs/FileSelectorPopup.md

@@ -86,7 +86,14 @@ The user can select a file or a directory and the popup will be closed.</p>
 | config | [<code>FileSelectorPopupConfig</code>](#FileSelectorPopupConfig) | <p>The configuration for the FileSelectorPopup class.</p> |
 
 **Example**  
-```tsconst popup = new FileSelectorPopup({ id: "popup1", title: "Choose the file", basePath: "./examples"}).show().on("confirm", (selected) => { console.log(selected)}) // show the popup and wait for the user to confirm
+```ts
+const popup = new FileSelectorPopup({
+ id: "popup1",
+ title: "Choose the file",
+ basePath: "./examples"
+}).show().on("confirm", (selected) => {
+ console.log(selected)
+}) // show the popup and wait for the user to confirm
 <a name="FileSelectorPopup+listDir"></a>
 
 ### fileSelectorPopup.listDir(dir) ⇒ <code>Promise.&lt;Array.&lt;object&gt;&gt;</code>

docs/LayoutManager.md

@@ -40,6 +40,7 @@
 | [direction] | <code>&quot;horizontal&quot;</code> \| <code>&quot;vertical&quot;</code> | <p>The direction of the layout.</p> |
 | [pageTitles] | <code>Array.&lt;string&gt;</code> | <p>The title of the first page.</p> |
 | [pageRatio] | <code>Array.&lt;number&gt;</code> | <p>The ratio of the pages. (in horizontal direction)</p> |
+| [fitHeight] | <code>boolean</code> | <p>If the height of the pages should be the same.</p> |
 
 <a name="LayoutManager"></a>
 

docs/OptionPopup.md

@@ -84,7 +84,14 @@
 | visible | <code>boolean</code> | <p>If the popup is visible. Default is false (make it appears using show()).</p> |
 
 **Example**  
-```tsconst popup = new OptionPopup({ id:"popup1",  title: "Choose the option",  options,  selected}).show().on("confirm", (option) => { console.log(option) }) // show the popup and wait for the user to confirm```
+```ts
+const popup = new OptionPopup({
+ id:"popup1", 
+ title: "Choose the option", 
+ options, 
+ selected
+}).show().on("confirm", (option) => { console.log(option) }) // show the popup and wait for the user to confirm
+```
 <a name="OptionPopup+keyListener"></a>
 
 ### optionPopup.keyListener(str, key)

docs/PageBuilder.md

@@ -44,7 +44,8 @@ It's a sort of collection of styled rows.</p>
 
 **Example**  
 ```js
-page.addRow({ text: 'Hello World', color: 'white' })page.addRow({ text: 'Hello World', color: 'white' }, { text: 'Hello World', color: 'white' })
+page.addRow({ text: 'Hello World', color: 'white' })
+page.addRow({ text: 'Hello World', color: 'white' }, { text: 'Hello World', color: 'white' })
 ```
 <a name="PageBuilder+addSpacer"></a>
 
@@ -59,7 +60,8 @@ page.addRow({ text: 'Hello World', color: 'white' })
page.addRow({ text: 'Hello
 
 **Example**  
 ```js
-page.addEmptyRow()page.addEmptyRow(2)
+page.addEmptyRow()
+page.addEmptyRow(2)
 ```
 <a name="PageBuilder+getContent"></a>
 

docs/ProgressBar.md

@@ -104,7 +104,79 @@
 | config | [<code>ProgressConfig</code>](#ProgressConfig) | <p>The configuration object for the progress bar</p> |
 
 **Example**  
-```js const pStyle = {     boxed: true,     showTitle: true,     showValue: true,     showPercentage: true,     showMinMax: false, } const p = new Progress({     id: "prog1",      x: 10, y: 2,     style: pStyle,      theme: "htop",     length: 25,     label: "Mem" }) const incr = setInterval(() => {     const value = p.getValue() + 0.25     p.setValue(value)     if (value >= p.getMax()) {         clearInterval(incr)     } }, 100) const p1Style = {     background: "bgBlack",     borderColor: "yellow",     color: "green",     boxed: true,     showTitle: true,     showValue: true,     showPercentage: true,     showMinMax: true, } const p1 = new Progress({     id: "prog1",      x: 10, y: 4,     style: pStyle,      theme: "precision",     length: 25,     label: "Precision" }) const incr1 = setInterval(() => {     const value = p1.getValue() + 0.25     p1.setValue(value)     if (value >= p1.getMax()) {         clearInterval(incr1)     } }, 100) const p2Style = {     background: "bgBlack",     borderColor: "yellow",     color: "magenta",     boxed: true,     showTitle: true,     showValue: true,     showPercentage: true,     showMinMax: true, } const p2 = new Progress({     id: "prog3",      x: 10, y: 6,     style: pStyle,      theme: "precision",     length: 25,     label: "Interactive",     direction: "vertical",     interactive: true, }) p2.on("valueChanged", (value) => {     console.log(`Value changed: ${value}`) })```
+```js
+ const pStyle = {
+     boxed: true,
+     showTitle: true,
+     showValue: true,
+     showPercentage: true,
+     showMinMax: false,
+ }
+ const p = new Progress({
+     id: "prog1", 
+     x: 10, y: 2,
+     style: pStyle, 
+     theme: "htop",
+     length: 25,
+     label: "Mem"
+ })
+ const incr = setInterval(() => {
+     const value = p.getValue() + 0.25
+     p.setValue(value)
+     if (value >= p.getMax()) {
+         clearInterval(incr)
+     }
+ }, 100)
+
+ const p1Style = {
+     background: "bgBlack",
+     borderColor: "yellow",
+     color: "green",
+     boxed: true,
+     showTitle: true,
+     showValue: true,
+     showPercentage: true,
+     showMinMax: true,
+ }
+ const p1 = new Progress({
+     id: "prog1", 
+     x: 10, y: 4,
+     style: pStyle, 
+     theme: "precision",
+     length: 25,
+     label: "Precision"
+ })
+ const incr1 = setInterval(() => {
+     const value = p1.getValue() + 0.25
+     p1.setValue(value)
+     if (value >= p1.getMax()) {
+         clearInterval(incr1)
+     }
+ }, 100)
+ const p2Style = {
+     background: "bgBlack",
+     borderColor: "yellow",
+     color: "magenta",
+     boxed: true,
+     showTitle: true,
+     showValue: true,
+     showPercentage: true,
+     showMinMax: true,
+ }
+ const p2 = new Progress({
+     id: "prog3", 
+     x: 10, y: 6,
+     style: pStyle, 
+     theme: "precision",
+     length: 25,
+     label: "Interactive",
+     direction: "vertical",
+     interactive: true,
+ })
+ p2.on("valueChanged", (value) => {
+     console.log(`Value changed: ${value}`)
+ })
+```
 <a name="drawingChars"></a>
 
 ## drawingChars : <code>Object</code>

docs/QuadLayout.md

@@ -47,6 +47,7 @@
 | [page3Title] | <code>string</code> | <p>The title of the third page.</p> |
 | [page4Title] | <code>string</code> | <p>The title of the fourth page.</p> |
 | [pageRatio] | <code>Array.&lt;number&gt;</code> | <p>The ratio of the pages.</p> |
+| [fitHeight] | <code>boolean</code> | <p>If the height of the pages should be the same.</p> |
 
 <a name="QuadLayout"></a>
 

docs/Screen.md

@@ -82,7 +82,7 @@ const screen = new Screen(process.stdout)
 
 **Example**  
 ```js
-screen.write({ text: 'Hello World', color: 'white' })
+screen.write({ text: 'Hello World', color: 'white' })
   screen.write({ text: 'Hello World', color: 'white' }, { text: 'Hello World', color: 'white' })
 ```
 <a name="Screen+cursorTo"></a>
@@ -170,7 +170,8 @@ screen.replaceAt('Hello Luca', 6, 'Elia') // returns 'Hello Elia'
 
 **Example**  
 ```js
-screen.mergeStyles([{ color: 'red', bg: 'black', italic: false, bold: false, index: [0, 5] }, { color: 'white', bg: 'black', italic: false, bold: false, index: [6, 10] }], [{ color: 'magenta', bg: 'black', italic: false, bold: false, index: [0, 30] }], 5, 15)returns [{ color: 'magenta', bg: 'black', italic: false, bold: false, index: [0, 4] }, { color: 'red', bg: 'black', italic: false, bold: false, index: [5, 10] }, { color: 'white', bg: 'black', italic: false, bold: false, index: [11, 15] }, { color: 'magenta', bg: 'black', italic: false, bold: false, index: [16, 30] }]
+screen.mergeStyles([{ color: 'red', bg: 'black', italic: false, bold: false, index: [0, 5] }, { color: 'white', bg: 'black', italic: false, bold: false, index: [6, 10] }], [{ color: 'magenta', bg: 'black', italic: false, bold: false, index: [0, 30] }], 5, 15)
+returns [{ color: 'magenta', bg: 'black', italic: false, bold: false, index: [0, 4] }, { color: 'red', bg: 'black', italic: false, bold: false, index: [5, 10] }, { color: 'white', bg: 'black', italic: false, bold: false, index: [11, 15] }, { color: 'magenta', bg: 'black', italic: false, bold: false, index: [16, 30] }]
 ```
 <a name="Screen+sortByIndex"></a>
 

docs/SingleLayout.md

@@ -36,6 +36,7 @@
 | [boxColor] | <code>ForegroundColorName</code> \| <code>HEX</code> \| <code>RGB</code> \| <code>&quot;&quot;</code> | <p>The color of the box taken from the chalk library.</p> |
 | [boxStyle] | <code>&quot;bold&quot;</code> | <p>If the border of the box should be bold.</p> |
 | [pageTitle] | <code>string</code> | <p>The title of the first page.</p> |
+| [fitHeight] | <code>boolean</code> | <p>If the height of the layout should be the same as the height of the screen.</p> |
 
 <a name="SingleLayout"></a>
 

docs/Utils.md

@@ -154,7 +154,8 @@ CM.truncate("Hello world", 5, true) // "Hello..."
 
 **Example**  
 ```js
-const simplifiedStyledElement = styledToSimplifiedStyled({ text: "Hello world", style: { color: "red", backgroundColor: "blue", bold: true, italic: true } })// returns { text: "Hello world", color: "red", backgroundColor: "blue", bold: true, italic: true }
+const simplifiedStyledElement = styledToSimplifiedStyled({ text: "Hello world", style: { color: "red", backgroundColor: "blue", bold: true, italic: true } })
+// returns { text: "Hello world", color: "red", backgroundColor: "blue", bold: true, italic: true }
 ```
 <a name="simplifiedStyledToStyled"></a>
 
@@ -170,7 +171,8 @@ const simplifiedStyledElement = styledToSimplifiedStyled({ text: "Hello world",
 
 **Example**  
 ```js
-const styledElement = simplifiedStyledToStyled({ text: "Hello world", color: "red", bold: true })// returns { text: "Hello world", style: { color: "red", bold: true } }
+const styledElement = simplifiedStyledToStyled({ text: "Hello world", color: "red", bold: true })
+// returns { text: "Hello world", style: { color: "red", bold: true } }
 ```
 <a name="visibleLength"></a>