Elius94/issue41

[Elius94]

Changed Layouts

The application instance needs to output the content through a layout class.
In the "layoutOptions" provided to the ConsoleManager, we can set the layout:

• boxed: Set to true to enable boxed layout mode (default: true)
  "boxed"
  "not boxed"
• showTitle: Set to false to hide titles (default: true, on title per page)
• changeFocusKey: The key or the combination that will change the focus between the pages of the layout (default: 'ctrl+l')
• type: Can be "single", "double" or "quad" to choose the layout type (default: "double")
  "single"
  "double"
  "quad"
• direction: Set to 'horizontal' to enable horizontal layout (only for "double" layout)
  "horizontal" example
• boxColor: The color of the box (default: 'yellow')
• boxStyle: The style of the box (default: 'bold')

To draw multiple pages, we need to use the setPage or setPages methods:

GUI.setPage(p, 0) // Add the first page without explicit name (default: application title)

const p1 = new PageBuilder()
p1.addRow({ text: "SECOND PAGE", color: "green" })

const P2 = new PageBuilder()
P2.addRow({ text: "THIRD PAGE", color: "cyan" })

GUI.setPage(p1, 1, "Top Right")
GUI.setPage(P2, 2, "Bottom Left")

// Or if we want to add the pages in the same order (only one render):
GUI.setPages([p, p1, P2], ["App Title", "Top Right", "Bottom Left"])

If we are in quad layout mode or double horizontal layout, we can change the aspect ratio of the layout rows by pressing the "left" and "right" keys:

If you are using the quad layout mode the arrow keys will change the aspect ratio of the layout selected row (the top or the bottom row, depending on the selected page)