npm - @nsshunt/stsui - Versions diffs - 1.11.24 → 1.11.25 - Mend

@nsshunt/stsui 1.11.24 → 1.11.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/stsui.mjs CHANGED Viewed

@@ -1,21 +1,9 @@
-var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _cursor, _renderPanelFn, _cursorInfo, _CalcBoxPos, _UpdateUIBoxPos, _ReSize, _UpdatePanelPosition, _STSUIFrame_instances, SetupPanels_fn, UpdateUI_fn;
 import EventEmitter from "node:events";
 import blessed from "blessed";
 class MenuBar {
+  listb = null;
   // options := { screen: <blessed screen>, top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <call back func> } ] }
   constructor(screen, options) {
-    __publicField(this, "listb", null);
     const compoptions = {
       parent: screen,
       left: 0,
@@ -62,6 +50,23 @@ class MenuBar {
   }
 }
 class STSUIFrame extends EventEmitter {
+  //export class STSUIFrame {
+  uiBoxes = {};
+  // { box: <<blessed box>>, boxHeader: <<blessed box>> }
+  screen = null;
+  #cursor = 0;
+  // panel index with the complete model data.
+  #renderPanelFn = null;
+  screenHeaderText = "...";
+  minRows = 1;
+  minCols = 1;
+  minWidth = 40;
+  minHeight = 7;
+  #cursorInfo = null;
+  sortInfo = null;
+  // Current sort mode UI box control
+  screenHeader = null;
+  uidata;
   /**
    *
    * @param {*} data The screen layout data. Schema: { title: <str>,
@@ -71,353 +76,254 @@ class STSUIFrame extends EventEmitter {
    */
   constructor(data, renderPanelFn = null) {
     super();
-    __privateAdd(this, _STSUIFrame_instances);
-    //export class STSUIFrame {
-    __publicField(this, "uiBoxes", {});
-    // { box: <<blessed box>>, boxHeader: <<blessed box>> }
-    __publicField(this, "screen", null);
-    __privateAdd(this, _cursor, 0);
-    // panel index with the complete model data.
-    __privateAdd(this, _renderPanelFn, null);
-    __publicField(this, "screenHeaderText", "...");
-    __publicField(this, "minRows", 1);
-    __publicField(this, "minCols", 1);
-    __publicField(this, "minWidth", 40);
-    __publicField(this, "minHeight", 7);
-    __privateAdd(this, _cursorInfo, null);
-    __publicField(this, "sortInfo", null);
-    // Current sort mode UI box control
-    __publicField(this, "screenHeader", null);
-    __publicField(this, "uidata");
-    /**
-     *
-     * @param {number} position The index (0 based) for the panel item to be calculated
-     * @returns object with top, left, width and height correctly set
-     */
-    __privateAdd(this, _CalcBoxPos, (panel) => {
-      if (!this.screen) return null;
-      if (!panel.pos) return null;
-      let screenHeight = this.screen.height;
-      if (this.uidata.menu !== null) {
-        screenHeight -= this.uidata.menu.length;
-      }
-      const screenWidth = this.screen.width;
-      const rows = this.uidata.grid.rows;
-      const cols = this.uidata.grid.cols;
-      const pos = panel.pos;
-      const colWidth = Math.floor(screenWidth / cols);
-      const rowHeight = Math.floor(screenHeight / rows);
-      let topoffset = 0;
-      if (this.uidata.menu !== null) {
-        for (const [, value] of Object.entries(this.uidata.menu)) {
-          if (value.top === true) {
-            topoffset = 1;
-            break;
-          }
+    this.uidata = data;
+    this.#renderPanelFn = renderPanelFn;
+    this.SetupUI();
+  }
+  get blessed() {
+    return blessed;
+  }
+  /**
+   *
+   * @param {number} position The index (0 based) for the panel item to be calculated
+   * @returns object with top, left, width and height correctly set
+   */
+  #CalcBoxPos = (panel) => {
+    if (!this.screen) return null;
+    if (!panel.pos) return null;
+    let screenHeight = this.screen.height;
+    if (this.uidata.menu !== null) {
+      screenHeight -= this.uidata.menu.length;
+    }
+    const screenWidth = this.screen.width;
+    const rows = this.uidata.grid.rows;
+    const cols = this.uidata.grid.cols;
+    const pos = panel.pos;
+    const colWidth = Math.floor(screenWidth / cols);
+    const rowHeight = Math.floor(screenHeight / rows);
+    let topoffset = 0;
+    if (this.uidata.menu !== null) {
+      for (const [, value] of Object.entries(this.uidata.menu)) {
+        if (value.top === true) {
+          topoffset = 1;
+          break;
         }
       }
-      const boxPos = {
-        top: pos.row * rowHeight + topoffset,
-        left: pos.col * colWidth,
-        width: colWidth * pos.colSpan,
-        height: rowHeight * pos.rowSpan
-      };
-      if (pos.col + pos.colSpan === cols) {
-        boxPos.width = screenWidth - pos.col * colWidth;
-      }
-      if (pos.row + pos.rowSpan === rows) {
-        boxPos.height = screenHeight - pos.row * rowHeight;
-      }
-      return boxPos;
-    });
-    __privateAdd(this, _UpdateUIBoxPos, (panel, uiBox) => {
-      const pos = __privateGet(this, _CalcBoxPos).call(this, panel);
-      if (!pos) {
-        return;
-      }
-      uiBox.box.top = pos.top;
-      uiBox.box.left = pos.left;
-      uiBox.box.width = pos.width;
-      uiBox.box.height = pos.height;
-      uiBox.boxHeader.top = pos.top;
-      uiBox.boxHeader.left = pos.left + 2;
-      if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
-        for (const [, value] of Object.entries(panel.widgets)) {
-          if (value.widget === "log") {
-            const widget = uiBox.box.get(value.widget);
-            if (widget.position.top >= uiBox.box.height - 4) {
-              widget.position.top = uiBox.box.height - 4;
-            } else {
-              if (value.options.top) {
-                widget.position.top = value.options.top;
-              }
+    }
+    const boxPos = {
+      top: pos.row * rowHeight + topoffset,
+      left: pos.col * colWidth,
+      width: colWidth * pos.colSpan,
+      height: rowHeight * pos.rowSpan
+    };
+    if (pos.col + pos.colSpan === cols) {
+      boxPos.width = screenWidth - pos.col * colWidth;
+    }
+    if (pos.row + pos.rowSpan === rows) {
+      boxPos.height = screenHeight - pos.row * rowHeight;
+    }
+    return boxPos;
+  };
+  #UpdateUIBoxPos = (panel, uiBox) => {
+    const pos = this.#CalcBoxPos(panel);
+    if (!pos) {
+      return;
+    }
+    uiBox.box.top = pos.top;
+    uiBox.box.left = pos.left;
+    uiBox.box.width = pos.width;
+    uiBox.box.height = pos.height;
+    uiBox.boxHeader.top = pos.top;
+    uiBox.boxHeader.left = pos.left + 2;
+    if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
+      for (const [, value] of Object.entries(panel.widgets)) {
+        if (value.widget === "log") {
+          const widget = uiBox.box.get(value.widget);
+          if (widget.position.top >= uiBox.box.height - 4) {
+            widget.position.top = uiBox.box.height - 4;
+          } else {
+            if (value.options.top) {
+              widget.position.top = value.options.top;
             }
           }
         }
       }
-    });
-    /**
-     * ReSize the grid layout
-     */
-    __privateAdd(this, _ReSize, () => {
-      for (const [, value] of Object.entries(this.uiBoxes)) {
-        __privateGet(this, _UpdateUIBoxPos).call(this, value.box.get("panel"), value);
-      }
-    });
-    __privateAdd(this, _UpdatePanelPosition, (panel, row, col, uiBox) => {
-      panel.pos = { row, col, rowSpan: 1, colSpan: 1 };
-      __privateGet(this, _UpdateUIBoxPos).call(this, panel, uiBox);
-      uiBox.boxHeader.setContent(panel.panelHeader);
-    });
-    /*
-    ClickEx(panel: any) {
-        //@@ override in sub-class
     }
-    */
-    __publicField(this, "CreateWidget", (widgetName, widgetoptions) => {
-      const widget = blessed[widgetName].call(this, widgetoptions);
-      return widget;
-    });
-    __publicField(this, "SetupWidgets", (box, panel, parent, blessedWidgets) => {
-      for (const [blessedWidgetKey, blessedWidgetDetails] of Object.entries(blessedWidgets)) {
-        const widgetoptions = { ...blessedWidgetDetails.options };
-        if (box) {
-          if (widgetoptions.top && widgetoptions.top >= box.height - 3) {
-            widgetoptions.top = box.height - 4;
-          }
-        }
-        const widget = blessed[blessedWidgetDetails.widget].call(this, widgetoptions);
-        widget.set("id", blessedWidgetDetails.id);
-        parent.append(widget);
-        parent.set(blessedWidgetDetails.widget, widget);
-        parent.set(`__blessedWidgetKey__${blessedWidgetKey}`, widget);
-        if (blessedWidgetDetails.events) {
-          for (const [eventName, eventDetails] of Object.entries(blessedWidgetDetails.events)) {
-            widget.on(eventName, () => {
-              eventDetails.cb(panel, widget, parent);
-            });
-          }
-        }
-        this.emit("widgetsetup", box, panel, widget);
-        if (blessedWidgetDetails.children) {
-          this.SetupWidgets(null, panel, widget, blessedWidgetDetails.children);
-        }
-      }
-    });
-    /*
-        ExitEx() {
-            //@@ override in sub-class
-        }
-        EscapeEx() {
-            //@@ override in sub-class
+  };
+  /**
+   * ReSize the grid layout
+   */
+  #ReSize = () => {
+    for (const [, value] of Object.entries(this.uiBoxes)) {
+      this.#UpdateUIBoxPos(value.box.get("panel"), value);
+    }
+  };
+  #UpdatePanelPosition = (panel, row, col, uiBox) => {
+    panel.pos = { row, col, rowSpan: 1, colSpan: 1 };
+    this.#UpdateUIBoxPos(panel, uiBox);
+    uiBox.boxHeader.setContent(panel.panelHeader);
+  };
+  /*
+  ClickEx(panel: any) {
+      //@@ override in sub-class
+  }
+  */
+  CreateWidget = (widgetName, widgetoptions) => {
+    const widget = blessed[widgetName].call(this, widgetoptions);
+    return widget;
+  };
+  CreateWidgetEx(widgetName, widgetoptions) {
+    const widget = blessed[widgetName].call(this, widgetoptions);
+    return widget;
+  }
+  SetupWidgets = (box, panel, parent, blessedWidgets) => {
+    for (const [blessedWidgetKey, blessedWidgetDetails] of Object.entries(blessedWidgets)) {
+      const widgetoptions = { ...blessedWidgetDetails.options };
+      if (box) {
+        if (widgetoptions.top && widgetoptions.top >= box.height - 3) {
+          widgetoptions.top = box.height - 4;
         }
-        */
-    // https://www.npmjs.com/package/blessed
-    // data:= { title: <str>,
-    //      grid: { rows: <int>, cols: <int> },
-    //      menu: [ { top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <func> } ] } ]
-    //      panels: [ { id: <str>, pos: { row: <int>, col: <int>, rowSpan: <int>, colSpan: <int> }, template: <str> } ] }
-    /**
-     *
-     * @param {*} data UI Data
-     */
-    __publicField(this, "SetupUI", () => {
-      this.DestroyUI();
-      if (this.screen === null) {
-        this.screen = blessed.screen({
-          smartCSR: true
-        });
-      }
-      if (!this.screen) {
-        return;
       }
-      const data = this.uidata;
-      this.screen.title = data.title;
-      this.screen.on("resize", () => {
-        __privateGet(this, _ReSize).call(this);
-        this.Render();
-      });
-      if (data.menu !== null) {
-        for (let i = 0; i < data.menu.length; i++) {
-          new MenuBar(this.screen, data.menu[i]);
+      const widget = blessed[blessedWidgetDetails.widget].call(this, widgetoptions);
+      widget.set("id", blessedWidgetDetails.id);
+      parent.append(widget);
+      parent.set(blessedWidgetDetails.widget, widget);
+      parent.set(`__blessedWidgetKey__${blessedWidgetKey}`, widget);
+      if (blessedWidgetDetails.events) {
+        for (const [eventName, eventDetails] of Object.entries(blessedWidgetDetails.events)) {
+          widget.on(eventName, () => {
+            eventDetails.cb(panel, widget, parent);
+          });
         }
       }
-      this.screen.key(["C-c"], () => {
-        this.DestroyUI();
-        this.emit("exit");
-      });
-      this.screen.key(["escape"], () => {
-        this.emit("escape");
-      });
-      __privateMethod(this, _STSUIFrame_instances, SetupPanels_fn).call(this);
-      __privateSet(this, _cursorInfo, blessed.box({
-        parent: this.screen,
-        bottom: 0,
-        right: 0,
-        width: "shrink",
-        height: 1,
-        style: {
-          bg: "gray",
-          fg: "white"
-        },
-        keys: false,
-        // Do not allow default key handling for this box
-        mouse: false,
-        content: "",
-        tags: true
-        // Allow style in-line tags such as bolt, italics, etc.
-      }));
-      this.sortInfo = blessed.box({
-        parent: this.screen,
-        top: 0,
-        right: 0,
-        width: "shrink",
-        height: 1,
-        style: {
-          bg: "gray",
-          fg: "white"
-        },
-        keys: false,
-        // Do not allow default key handling for this box
-        mouse: false,
-        content: "",
-        tags: true
-        // Allow style in-line tags such as bolt, italics, etc.
-      });
-      this.screenHeader = blessed.box({
-        parent: this.screen,
-        top: 0,
-        left: "center",
-        width: "shrink",
-        height: 1,
-        style: {
-          bg: "gray",
-          fg: "white"
-        },
-        keys: false,
-        // Do not allow default key handling for this box
-        mouse: false,
-        content: `[ ... ]`,
-        tags: true
-        // Allow style in-line tags such as bolt, italics, etc.
-      });
-      this.UpdateCursorInfo();
-      this.UpdateSortInfo("Default");
-      this.UpdateScreenHeader(this.screenHeaderText);
-      this.Render();
-    });
-    __publicField(this, "UpdateCursorInfo", () => {
-      if (__privateGet(this, _cursorInfo)) {
-        __privateGet(this, _cursorInfo).setContent(`Cursor: ${__privateGet(this, _cursor)} / ${this.TotalPanelNumber}`);
+      this.emit("widgetsetup", box, panel, widget);
+      if (blessedWidgetDetails.children) {
+        this.SetupWidgets(null, panel, widget, blessedWidgetDetails.children);
       }
-    });
-    __publicField(this, "UpdateSortInfo", (sortMode) => {
-      if (this.sortInfo) {
-        this.sortInfo.setContent(`Sort: ${sortMode}`);
-      }
-    });
-    __publicField(this, "UpdateScreenHeader", (screenHeaderText) => {
-      this.screenHeaderText = screenHeaderText;
-      if (this.screenHeader) {
-        this.screenHeader.setContent(`[ ${screenHeaderText} ]`);
-      }
-    });
-    __publicField(this, "IncRows", () => {
-      if (this.screen && this.screen.height / (this.uidata.grid.rows + 1) > this.minHeight) {
-        this.uidata.grid.rows++;
-        this.CheckCursor();
-        __privateMethod(this, _STSUIFrame_instances, UpdateUI_fn).call(this);
-      }
-    });
-    __publicField(this, "DecRows", () => {
-      if (this.uidata.grid.rows > this.minRows) {
-        this.uidata.grid.rows--;
-        this.CheckCursor();
-        __privateMethod(this, _STSUIFrame_instances, UpdateUI_fn).call(this);
-      }
-    });
-    __publicField(this, "IncCols", () => {
-      if (this.screen && this.screen.width / (this.uidata.grid.cols + 1) > this.minWidth) {
-        this.uidata.grid.cols++;
-        this.CheckCursor();
-        __privateMethod(this, _STSUIFrame_instances, UpdateUI_fn).call(this);
-      }
-    });
-    __publicField(this, "DecCols", () => {
-      if (this.uidata.grid.cols > this.minCols) {
-        this.uidata.grid.cols--;
-        this.CheckCursor();
-        __privateMethod(this, _STSUIFrame_instances, UpdateUI_fn).call(this);
-      }
-    });
-    __publicField(this, "CheckCursor", () => {
-      if (__privateGet(this, _cursor) > this.TotalPanelNumber - this.ScreenCells) {
-        __privateSet(this, _cursor, this.TotalPanelNumber - this.ScreenCells);
-        if (__privateGet(this, _cursor) < 0) {
-          __privateSet(this, _cursor, 0);
+    }
+  };
+  /**
+   *
+   * Setup all panels
+   */
+  #SetupPanels() {
+    if (!this.screen) {
+      return;
+    }
+    const panelKeys = Object.keys(this.uidata.panels);
+    const uiBoxIds = Object.keys(this.uiBoxes);
+    for (let i = 0; i < uiBoxIds.length; i++) {
+      if (typeof this.uidata.panels[uiBoxIds[i]] === "undefined") {
+        let uiBox = this.uiBoxes[uiBoxIds[i]];
+        if (typeof uiBox !== "undefined") {
+          this.emit("preremovebox", uiBox.box, uiBox.box.get("panel"));
+          this.screen.remove(uiBox.boxHeader);
+          this.screen.remove(uiBox.box);
+          uiBox = null;
+          delete this.uiBoxes[uiBoxIds[i]];
         }
       }
-      this.UpdateCursorInfo();
-    });
-    __publicField(this, "NextPage", () => {
-      const endpos = this.TotalPanelNumber - this.ScreenCells;
-      if (__privateGet(this, _cursor) < endpos) {
-        __privateSet(this, _cursor, __privateGet(this, _cursor) + this.ScreenCells);
-        if (__privateGet(this, _cursor) > endpos) {
-          __privateSet(this, _cursor, endpos);
+    }
+    const touched = {};
+    for (let i = 0; i < this.uidata.grid.cols * this.uidata.grid.rows; i++) {
+      const gridPos = this.#cursor + i;
+      const col = i % this.uidata.grid.cols;
+      const row = Math.floor(i / this.uidata.grid.cols);
+      const panel = this.uidata.panels[panelKeys[gridPos]];
+      if (typeof panel !== "undefined") {
+        if (typeof this.uiBoxes[panel.id] === "undefined") {
+          panel.pos = { row, col, rowSpan: 1, colSpan: 1 };
+          const calculatedBoxPos = this.#CalcBoxPos(panel);
+          if (!calculatedBoxPos) {
+            return;
+          }
+          const { top, left, width, height } = this.#CalcBoxPos(panel);
+          const box = blessed.box({
+            parent: this.screen,
+            top,
+            left,
+            width,
+            height,
+            style: {
+              bg: "#101010",
+              fg: "white"
+            },
+            border: {
+              type: "line"
+            },
+            keys: false,
+            // Do not allow default key handling for this box
+            tags: true
+            // Allow style in-line tags such as bolt, italics, etc.
+          });
+          const boxHeader = blessed.box({
+            parent: this.screen,
+            top,
+            left: left + 2,
+            width: "shrink",
+            height: 1,
+            style: {
+              bg: "gray",
+              fg: "white"
+            },
+            keys: false,
+            // Do not allow default key handling for this box
+            mouse: false,
+            content: panel.panelHeader,
+            tags: true
+            // Allow style in-line tags such as bold, italics, etc.
+          });
+          this.uiBoxes[panel.id] = { box, boxHeader };
+          boxHeader.setIndex(-1);
+          box.on("click", () => {
+            this.emit("click", box.get("panel"));
+          });
+          box.on("destroy", () => {
+            this.emit("destroy", box, panel);
+          });
+          box.on("remove", () => {
+            this.emit("remove", box, panel);
+          });
+          box.on("detach", () => {
+            this.emit("detach", box, panel);
+          });
+          box.set("panel", panel);
+          this.uiBoxes[panel.id].box = box;
+          this.emit("boxsetup", box, panel);
+          if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
+            this.SetupWidgets(box, panel, box, panel.widgets);
+            this.emit("widgetsetupcomplete", box, panel, panel.widgets);
+          }
+          touched[panel.id] = true;
+        } else {
+          this.#UpdatePanelPosition(panel, row, col, this.uiBoxes[panel.id]);
+          touched[panel.id] = true;
         }
-        __privateMethod(this, _STSUIFrame_instances, UpdateUI_fn).call(this);
-      }
-    });
-    __publicField(this, "PrevPage", () => {
-      if (__privateGet(this, _cursor) > 0) {
-        __privateSet(this, _cursor, __privateGet(this, _cursor) - this.ScreenCells);
-        if (__privateGet(this, _cursor) < 0) {
-          __privateSet(this, _cursor, 0);
+        if (this.#renderPanelFn) {
+          this.#renderPanelFn(this.uiBoxes[panel.id].box, panel);
         }
-        __privateMethod(this, _STSUIFrame_instances, UpdateUI_fn).call(this);
       }
-    });
-    __publicField(this, "Exit", () => {
-      this.DestroyUI();
-      this.emit("exit");
-    });
-    /**
-     *
-     */
-    __publicField(this, "DestroyUI", () => {
-      if (this.screen !== null) {
-        this.uiBoxes = {};
-        this.screen.destroy();
-        this.screen = null;
-      }
-    });
-    /**
-     * Render the screen.
-     */
-    __publicField(this, "Render", () => {
-      if (this.screen) {
-        this.screen.render();
+    }
+    for (const [key] of Object.entries(this.uiBoxes)) {
+      const box = this.uiBoxes[key].box;
+      const panel = box.get("panel");
+      if (typeof touched[key] === "undefined") {
+        box.hide();
+        this.uiBoxes[key].boxHeader.hide();
+        this.emit("boxhide", this.uiBoxes[key].box, panel, panel.widgets);
+      } else {
+        box.show();
+        this.uiBoxes[key].boxHeader.show();
+        this.emit("boxshow", this.uiBoxes[key].box, panel, panel.widgets);
       }
-    });
-    this.uidata = data;
-    __privateSet(this, _renderPanelFn, renderPanelFn);
-    this.SetupUI();
-  }
-  get blessed() {
-    return blessed;
-  }
-  CreateWidgetEx(widgetName, widgetoptions) {
-    const widget = blessed[widgetName].call(this, widgetoptions);
-    return widget;
+    }
   }
   get gridData() {
     return this.uidata;
   }
   set gridData(gridData) {
     this.uidata = gridData;
-    __privateMethod(this, _STSUIFrame_instances, SetupPanels_fn).call(this);
+    this.#SetupPanels();
     this.UpdateCursorInfo();
     this.Render();
   }
@@ -426,153 +332,226 @@ class STSUIFrame extends EventEmitter {
   }
   set gridDataPanels(gridDataPanels) {
     this.uidata.panels = gridDataPanels;
-    __privateMethod(this, _STSUIFrame_instances, SetupPanels_fn).call(this);
+    this.#SetupPanels();
     this.UpdateCursorInfo();
     this.Render();
   }
+  /*
+      ExitEx() {
+          //@@ override in sub-class
+      }
+      EscapeEx() {
+          //@@ override in sub-class
+      }
+      */
+  // https://www.npmjs.com/package/blessed
+  // data:= { title: <str>,
+  //      grid: { rows: <int>, cols: <int> },
+  //      menu: [ { top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <func> } ] } ]
+  //      panels: [ { id: <str>, pos: { row: <int>, col: <int>, rowSpan: <int>, colSpan: <int> }, template: <str> } ] }
+  /**
+   *
+   * @param {*} data UI Data
+   */
+  SetupUI = () => {
+    this.DestroyUI();
+    if (this.screen === null) {
+      this.screen = blessed.screen({
+        smartCSR: true
+      });
+    }
+    if (!this.screen) {
+      return;
+    }
+    const data = this.uidata;
+    this.screen.title = data.title;
+    this.screen.on("resize", () => {
+      this.#ReSize();
+      this.Render();
+    });
+    if (data.menu !== null) {
+      for (let i = 0; i < data.menu.length; i++) {
+        new MenuBar(this.screen, data.menu[i]);
+      }
+    }
+    this.screen.key(["C-c"], () => {
+      this.DestroyUI();
+      this.emit("exit");
+    });
+    this.screen.key(["escape"], () => {
+      this.emit("escape");
+    });
+    this.#SetupPanels();
+    this.#cursorInfo = blessed.box({
+      parent: this.screen,
+      bottom: 0,
+      right: 0,
+      width: "shrink",
+      height: 1,
+      style: {
+        bg: "gray",
+        fg: "white"
+      },
+      keys: false,
+      // Do not allow default key handling for this box
+      mouse: false,
+      content: "",
+      tags: true
+      // Allow style in-line tags such as bolt, italics, etc.
+    });
+    this.sortInfo = blessed.box({
+      parent: this.screen,
+      top: 0,
+      right: 0,
+      width: "shrink",
+      height: 1,
+      style: {
+        bg: "gray",
+        fg: "white"
+      },
+      keys: false,
+      // Do not allow default key handling for this box
+      mouse: false,
+      content: "",
+      tags: true
+      // Allow style in-line tags such as bolt, italics, etc.
+    });
+    this.screenHeader = blessed.box({
+      parent: this.screen,
+      top: 0,
+      left: "center",
+      width: "shrink",
+      height: 1,
+      style: {
+        bg: "gray",
+        fg: "white"
+      },
+      keys: false,
+      // Do not allow default key handling for this box
+      mouse: false,
+      content: `[ ... ]`,
+      tags: true
+      // Allow style in-line tags such as bolt, italics, etc.
+    });
+    this.UpdateCursorInfo();
+    this.UpdateSortInfo("Default");
+    this.UpdateScreenHeader(this.screenHeaderText);
+    this.Render();
+  };
+  UpdateCursorInfo = () => {
+    if (this.#cursorInfo) {
+      this.#cursorInfo.setContent(`Cursor: ${this.#cursor} / ${this.TotalPanelNumber}`);
+    }
+  };
+  UpdateSortInfo = (sortMode) => {
+    if (this.sortInfo) {
+      this.sortInfo.setContent(`Sort: ${sortMode}`);
+    }
+  };
+  UpdateScreenHeader = (screenHeaderText) => {
+    this.screenHeaderText = screenHeaderText;
+    if (this.screenHeader) {
+      this.screenHeader.setContent(`[ ${screenHeaderText} ]`);
+    }
+  };
   get rows() {
     return this.uidata.grid.rows;
   }
   get cols() {
     return this.uidata.grid.cols;
   }
+  IncRows = () => {
+    if (this.screen && this.screen.height / (this.uidata.grid.rows + 1) > this.minHeight) {
+      this.uidata.grid.rows++;
+      this.CheckCursor();
+      this.#UpdateUI();
+    }
+  };
+  DecRows = () => {
+    if (this.uidata.grid.rows > this.minRows) {
+      this.uidata.grid.rows--;
+      this.CheckCursor();
+      this.#UpdateUI();
+    }
+  };
+  IncCols = () => {
+    if (this.screen && this.screen.width / (this.uidata.grid.cols + 1) > this.minWidth) {
+      this.uidata.grid.cols++;
+      this.CheckCursor();
+      this.#UpdateUI();
+    }
+  };
+  DecCols = () => {
+    if (this.uidata.grid.cols > this.minCols) {
+      this.uidata.grid.cols--;
+      this.CheckCursor();
+      this.#UpdateUI();
+    }
+  };
   get ScreenCells() {
     return this.uidata.grid.cols * this.uidata.grid.rows;
   }
   get TotalPanelNumber() {
     return Object.keys(this.uidata.panels).length;
   }
-  get mainScreen() {
-    return this.screen;
-  }
-}
-_cursor = new WeakMap();
-_renderPanelFn = new WeakMap();
-_cursorInfo = new WeakMap();
-_CalcBoxPos = new WeakMap();
-_UpdateUIBoxPos = new WeakMap();
-_ReSize = new WeakMap();
-_UpdatePanelPosition = new WeakMap();
-_STSUIFrame_instances = new WeakSet();
-/**
- *
- * Setup all panels
- */
-SetupPanels_fn = function() {
-  if (!this.screen) {
-    return;
-  }
-  const panelKeys = Object.keys(this.uidata.panels);
-  const uiBoxIds = Object.keys(this.uiBoxes);
-  for (let i = 0; i < uiBoxIds.length; i++) {
-    if (typeof this.uidata.panels[uiBoxIds[i]] === "undefined") {
-      let uiBox = this.uiBoxes[uiBoxIds[i]];
-      if (typeof uiBox !== "undefined") {
-        this.emit("preremovebox", uiBox.box, uiBox.box.get("panel"));
-        this.screen.remove(uiBox.boxHeader);
-        this.screen.remove(uiBox.box);
-        uiBox = null;
-        delete this.uiBoxes[uiBoxIds[i]];
+  CheckCursor = () => {
+    if (this.#cursor > this.TotalPanelNumber - this.ScreenCells) {
+      this.#cursor = this.TotalPanelNumber - this.ScreenCells;
+      if (this.#cursor < 0) {
+        this.#cursor = 0;
       }
     }
-  }
-  const touched = {};
-  for (let i = 0; i < this.uidata.grid.cols * this.uidata.grid.rows; i++) {
-    const gridPos = __privateGet(this, _cursor) + i;
-    const col = i % this.uidata.grid.cols;
-    const row = Math.floor(i / this.uidata.grid.cols);
-    const panel = this.uidata.panels[panelKeys[gridPos]];
-    if (typeof panel !== "undefined") {
-      if (typeof this.uiBoxes[panel.id] === "undefined") {
-        panel.pos = { row, col, rowSpan: 1, colSpan: 1 };
-        const calculatedBoxPos = __privateGet(this, _CalcBoxPos).call(this, panel);
-        if (!calculatedBoxPos) {
-          return;
-        }
-        const { top, left, width, height } = __privateGet(this, _CalcBoxPos).call(this, panel);
-        const box = blessed.box({
-          parent: this.screen,
-          top,
-          left,
-          width,
-          height,
-          style: {
-            bg: "#101010",
-            fg: "white"
-          },
-          border: {
-            type: "line"
-          },
-          keys: false,
-          // Do not allow default key handling for this box
-          tags: true
-          // Allow style in-line tags such as bolt, italics, etc.
-        });
-        const boxHeader = blessed.box({
-          parent: this.screen,
-          top,
-          left: left + 2,
-          width: "shrink",
-          height: 1,
-          style: {
-            bg: "gray",
-            fg: "white"
-          },
-          keys: false,
-          // Do not allow default key handling for this box
-          mouse: false,
-          content: panel.panelHeader,
-          tags: true
-          // Allow style in-line tags such as bold, italics, etc.
-        });
-        this.uiBoxes[panel.id] = { box, boxHeader };
-        boxHeader.setIndex(-1);
-        box.on("click", () => {
-          this.emit("click", box.get("panel"));
-        });
-        box.on("destroy", () => {
-          this.emit("destroy", box, panel);
-        });
-        box.on("remove", () => {
-          this.emit("remove", box, panel);
-        });
-        box.on("detach", () => {
-          this.emit("detach", box, panel);
-        });
-        box.set("panel", panel);
-        this.uiBoxes[panel.id].box = box;
-        this.emit("boxsetup", box, panel);
-        if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
-          this.SetupWidgets(box, panel, box, panel.widgets);
-          this.emit("widgetsetupcomplete", box, panel, panel.widgets);
-        }
-        touched[panel.id] = true;
-      } else {
-        __privateGet(this, _UpdatePanelPosition).call(this, panel, row, col, this.uiBoxes[panel.id]);
-        touched[panel.id] = true;
+    this.UpdateCursorInfo();
+  };
+  NextPage = () => {
+    const endpos = this.TotalPanelNumber - this.ScreenCells;
+    if (this.#cursor < endpos) {
+      this.#cursor += this.ScreenCells;
+      if (this.#cursor > endpos) {
+        this.#cursor = endpos;
       }
-      if (__privateGet(this, _renderPanelFn)) {
-        __privateGet(this, _renderPanelFn).call(this, this.uiBoxes[panel.id].box, panel);
+      this.#UpdateUI();
+    }
+  };
+  PrevPage = () => {
+    if (this.#cursor > 0) {
+      this.#cursor -= this.ScreenCells;
+      if (this.#cursor < 0) {
+        this.#cursor = 0;
       }
+      this.#UpdateUI();
     }
+  };
+  #UpdateUI() {
+    this.SetupUI();
   }
-  for (const [key] of Object.entries(this.uiBoxes)) {
-    const box = this.uiBoxes[key].box;
-    const panel = box.get("panel");
-    if (typeof touched[key] === "undefined") {
-      box.hide();
-      this.uiBoxes[key].boxHeader.hide();
-      this.emit("boxhide", this.uiBoxes[key].box, panel, panel.widgets);
-    } else {
-      box.show();
-      this.uiBoxes[key].boxHeader.show();
-      this.emit("boxshow", this.uiBoxes[key].box, panel, panel.widgets);
+  Exit = () => {
+    this.DestroyUI();
+    this.emit("exit");
+  };
+  /**
+   *
+   */
+  DestroyUI = () => {
+    if (this.screen !== null) {
+      this.uiBoxes = {};
+      this.screen.destroy();
+      this.screen = null;
+    }
+  };
+  /**
+   * Render the screen.
+   */
+  Render = () => {
+    if (this.screen) {
+      this.screen.render();
     }
+  };
+  get mainScreen() {
+    return this.screen;
   }
-};
-UpdateUI_fn = function() {
-  this.SetupUI();
-};
+}
 export {
   MenuBar,
   STSUIFrame