@nsshunt/stsui 1.9.21 → 1.9.23

package/src/stsuiframe.ts

@@ -1,620 +0,0 @@
-import EventEmitter from 'events'
-
-// https://github.com/yaronn/blessed-contrib
-//var contrib = require('blessed-contrib');
-import blessed from 'blessed';
-
-import 'colors';
-
-import { v4 as uuidv4 } from 'uuid';
-
-import * as stsBlessed from './index'
-import * as MenuBar from './menubar'
-
-export type menuOptions = MenuBar.MenuBarOptions[]
-
-export interface widget {
-    widget: string // Name of the blessed widget
-    options: stsBlessed.elementOptions // blessed widget options - used in the constructor of the blessed widget
-}
-
-export interface widgets {
-    [widgetName: string]: widget
-}
-
-export interface panel {
-    id: string,
-    pos?: {
-        row: number,
-        col: number,
-        rowSpan: number,
-        colSpan: number
-    },
-    // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-    data: any
-    panelHeader: string,
-    widgets: widgets
-}
-
-export interface panels {
-    [panelId: string]: panel
-}
-
-export interface gridData {
-	title: string
-	grid: { rows: number, cols: number },
-	menu: menuOptions,
-	panels: panels
-}
-
-export interface renderPanelCb {
-	(box: stsBlessed.box, panel: panel): void
-}
-
-export interface boxPos {
-	top: number,
-	left: number,
-	width: number,
-	height: number
-}
-
-export interface uiBox {
-	box: stsBlessed.box, // blessed box
-	boxHeader: stsBlessed.listbar // blessed box
-}
-
-export interface uiBoxes {
-	[key: string]: uiBox
-}
-
-export class STSUIFrame extends EventEmitter {
-    private uiBoxes:uiBoxes = { }; // { box: <<blessed box>>, boxHeader: <<blessed box>> }
-    private screen: stsBlessed.screen | null = null;
-    #cursor = 0; // panel index with the complete model data.
-    #renderPanelFn: renderPanelCb | null = null;
-    private screenHeaderText = '...';
-
-    private minRows = 1;
-    private minCols = 1;
-    private minWidth = 40;
-    private minHeight = 7;
-
-    #cursorInfo: stsBlessed.box | null = null;
-    private sortInfo: stsBlessed.box | null = null; // Current sort mode UI box control
-    private screenHeader: stsBlessed.box | null = null;
-
-    private uidata: gridData;
-
-    /**
-     * 
-     * @param {*} data The screen layout data. Schema: { title: <str>,
-     *   grid: { rows: <int>, cols: <int> }, 
-     *   panels: [ { id: <str>, pos: { row: <int>, col: <int>, rowSpan: <int>, colSpan: <int> }, 
-     *      template: <handlebars func>, widgets: { [ { <prop_name>: <blessed widget> } ] } } ] }
-     */
-    constructor(data: gridData, renderPanelFn: renderPanelCb | null = null) {
-        super();
-        this.uidata = data;
-        this.#renderPanelFn = renderPanelFn;
-        this.SetupUI();
-    }
-
-    /**
-     * 
-     * @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: panel): boxPos | null => {
-        // Calculate the position and dimensions for this UI element
-
-        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; // Allow for any menu items
-        }
-        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);
-
-        // Allow for a top offset if a top menu is present
-        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: boxPos = {
-            top: (pos.row * rowHeight) + topoffset,
-            left: pos.col * colWidth,
-            width: colWidth * pos.colSpan,
-            height: rowHeight * pos.rowSpan
-        }
-
-        // Now check if this panel is on the far right and if so adjust for a perfect fit
-
-        if ((pos.col + pos.colSpan) === cols) {
-            //if (pos.col === (cols - 1)) {
-            boxPos.width = screenWidth - (pos.col * colWidth);
-        }
-
-        // Now check if this panel is on the bottom and if so adjust for a perfect fit
-        if ((pos.row + pos.rowSpan) === rows) {
-            boxPos.height = screenHeight - (pos.row * rowHeight);
-        }
-
-        return boxPos;
-    }
-
-    #UpdateUIBoxPos = (panel: panel, uiBox: uiBox): void => {
-        const pos: boxPos | null = 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) as stsBlessed.element;
-                    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
-     */
-    #ReSize = (): void => {
-        for (const [, value] of Object.entries(this.uiBoxes)) {
-            this.#UpdateUIBoxPos(value.box.get('panel') as panel, value);
-        }
-    }
-
-    #UpdatePanelPosition = (panel: panel, row: number, col: number, uiBox: uiBox): void => {
-        // Update the panel position within the current screen view
-        panel.pos = { row: row, col: col, rowSpan: 1, colSpan: 1 };
-        this.#UpdateUIBoxPos(panel, uiBox);
-        uiBox.boxHeader.setContent(panel.panelHeader);
-    }
-
-    /**
-     * 
-     * Setup all panels
-     */
-    #SetupPanels(): void {
-        if (!this.screen) {
-            return;
-        }
-
-        const panelKeys = Object.keys(this.uidata.panels);
-
-        // Check for deleted 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: uiBox | null = this.uiBoxes[uiBoxIds[i]];
-                if (typeof uiBox !== 'undefined') {
-                    this.screen.remove(uiBox.boxHeader);
-                    this.screen.remove(uiBox.box);
-                    uiBox = null;
-                    delete this.uiBoxes[uiBoxIds[i]];
-                }
-            }
-        }
-
-        const touched: Record<string, boolean> = { };
-
-        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);
-
-            // Get the panel for this position within the grid
-            const panel: panel = this.uidata.panels[panelKeys[gridPos]];
-            if (typeof panel !== 'undefined') {
-                if (typeof this.uiBoxes[panel.id] === 'undefined') {
-                    // Update the panel position within the current screen view
-                    panel.pos = { row: row, col: col, rowSpan: 1, colSpan: 1 };
-
-                    const calculatedBoxPos = this.#CalcBoxPos(panel);
-                    if (!calculatedBoxPos) {
-                        return
-                    }
-                    const { top, left, width, height } = this.#CalcBoxPos(panel) as boxPos;
-
-                    // Create the UI box
-                    const box: stsBlessed.box = blessed.box({
-                        parent: this.screen,
-                        top: top,
-                        left: left,
-                        width: width,
-                        height: height,
-                        style:
-                        {
-                            bg: '#101010' // was gray
-                            ,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: stsBlessed.listbar = blessed.box({
-                        parent: this.screen,
-                        top: 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 bolt, italics, etc.
-                    });
-
-                    this.uiBoxes[panel.id] = { box: box, boxHeader: boxHeader };
-
-                    boxHeader.setIndex(-1);
-
-                    // https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback
-                    box.on('click', () => {
-                        //this.emit('click', box.data.panel);
-                        this.emit('click', box.get('panel') as panel);
-                    });
-
-                    if (typeof panel.widgets !== 'undefined' && panel.widgets !== null) {
-                        for (const [, value] of Object.entries(panel.widgets)) {
-                            // Create a fresh copy of the options for this widget instance.
-                            // If this is not done, all widgets will use the same options object and will not be able
-                            // to update screen elements individually.
-                            const widgetoptions = {...value.options};
-
-                            // Ensure that we always show at least 2 lines of log data even if this means we position over the top of
-                            // elements above this position.
-                            if (widgetoptions.top && (widgetoptions.top >= (box.height - 3))) {
-                                widgetoptions.top = box.height - 4;
-                            }
-                            const widget: stsBlessed.element = blessed[value.widget].call(this, widgetoptions);
-                            widget.set('id', uuidv4());
-                            box.append(widget);
-                            box.set(value.widget, widget); // Set the user data for this widget. This allows the handlebars template access via the name from the box object.
-                        }
-                    }
-
-                    // The entire panel is accessible using the _panel property.
-                    // This is so that the model is accessible from within the handlebars templates.
-                    // Access to a named widget can be done using box._panel.widgets[name] or box._panel.widgets.name
-                    box.set('panel', panel);
-
-                    this.uiBoxes[panel.id].box = box;
-
-                    touched[panel.id] = true;
-                } else {
-                    //@@ need to hide previous positions
-                    //@@ and show ones that are visible
-                    this.#UpdatePanelPosition(panel, row, col, this.uiBoxes[panel.id]);
-
-                    touched[panel.id] = true;
-                    //this.#uiBox[panel.id].box.show();
-                }
-
-                // Render the uiBox with the renderPanelFn using the panel as the utility including the model
-                if (this.#renderPanelFn) {
-                    this.#renderPanelFn(this.uiBoxes[panel.id].box, panel);
-                }
-            }
-        }
-
-        for (const [key, ] of Object.entries(this.uiBoxes)) {
-            if (typeof touched[key] === 'undefined') {
-                this.uiBoxes[key].box.hide();
-                this.uiBoxes[key].boxHeader.hide();
-            } else {
-                this.uiBoxes[key].box.show();
-                this.uiBoxes[key].boxHeader.show();
-            }
-        }
-
-    }
-
-    get gridData(): gridData {
-        return this.uidata;
-    }
-
-    set gridData(gridData: gridData) {
-        this.uidata = gridData;
-        this.#SetupPanels();
-        this.UpdateCursorInfo();
-        this.Render();
-    }
-
-    get gridDataPanels(): panels {
-        return this.uidata.panels;
-    }
-
-    set gridDataPanels(gridDataPanels: panels) {
-        this.uidata.panels = gridDataPanels;
-        this.#SetupPanels();
-        this.UpdateCursorInfo();
-        this.Render();
-    }
-
-    // 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 = (): void => {
-        this.DestroyUI();
-
-        if (this.screen === null) {
-            // Create a screen object.
-            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.MenuBar(this.screen, data.menu[i]);
-            }
-        }
-
-        // Allow the serrvice to terminate by pressing Control-C.
-        this.screen.key(['C-c'], (): void => {
-            this.DestroyUI();
-            this.emit('exit');
-            // Cleanly shutdown the main process. Exit code success (> 0 is exit in error state)
-            //setTimeout(() => process.kill(process.pid), 0);
-        });
-
-        this.screen.key(['escape'], (): void => {
-            this.emit('escape');
-            // Cleanly shutdown the main process. Exit code success (> 0 is exit in error state)
-            //setTimeout(() => process.kill(process.pid), 0);
-        });
-
-        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);
-
-        // Render the screen.
-        this.Render();
-    }
-
-    UpdateCursorInfo = (): void => {
-        if (this.#cursorInfo) {
-            this.#cursorInfo.setContent(`Cursor: ${this.#cursor} / ${this.TotalPanelNumber}`);
-        }
-    }
-
-    UpdateSortInfo = (sortMode: string): void => {
-        if (this.sortInfo) {
-            this.sortInfo.setContent(`Sort: ${sortMode}`);
-        }
-    }
-
-    UpdateScreenHeader = (screenHeaderText: string): void => {
-        this.screenHeaderText = screenHeaderText;
-        if (this.screenHeader) {
-            this.screenHeader.setContent(`[ ${screenHeaderText} ]`);
-        }
-    }
-
-    get rows(): number {
-        return this.uidata.grid.rows;
-    }
-
-    get cols(): number {
-        return this.uidata.grid.cols;
-    }
-
-    IncRows = (): void => {
-        if (this.screen && (this.screen.height / (this.uidata.grid.rows+1) > this.minHeight)) {
-            this.uidata.grid.rows++;
-            this.CheckCursor();
-            this.#UpdateUI();
-        }
-    }
-
-    DecRows = (): void => {
-        if (this.uidata.grid.rows > this.minRows) {
-            this.uidata.grid.rows--;
-            this.CheckCursor();
-            this.#UpdateUI();
-        }
-    }
-
-    IncCols = (): void => {
-        if (this.screen && (this.screen.width / (this.uidata.grid.cols+1) > this.minWidth)) {
-            this.uidata.grid.cols++;
-            this.CheckCursor();
-            this.#UpdateUI();
-        }
-    }
-
-    DecCols = (): void => {
-        if (this.uidata.grid.cols > this.minCols) {
-            this.uidata.grid.cols--;
-            this.CheckCursor();
-            this.#UpdateUI();
-        }
-    }
-
-    get ScreenCells(): number {
-        return this.uidata.grid.cols * this.uidata.grid.rows;
-    }
-
-    get TotalPanelNumber(): number {
-        return Object.keys(this.uidata.panels).length;
-    }
-
-    CheckCursor = (): void => {
-        if (this.#cursor > (this.TotalPanelNumber - this.ScreenCells)) {
-            this.#cursor = this.TotalPanelNumber - this.ScreenCells;
-            if (this.#cursor < 0) {
-                this.#cursor = 0;
-            }
-        }
-        this.UpdateCursorInfo();
-    }
-
-    NextPage = (): void => {
-        const endpos = this.TotalPanelNumber - this.ScreenCells;
-        if (this.#cursor < endpos) {
-            this.#cursor += this.ScreenCells;
-            if (this.#cursor > endpos) {
-                this.#cursor = endpos;
-            }
-            this.#UpdateUI();
-        }
-    }
-
-    PrevPage = (): void => {
-        if (this.#cursor > 0) {
-            this.#cursor -= this.ScreenCells;
-            if (this.#cursor < 0) {
-                this.#cursor = 0;
-            }
-            this.#UpdateUI();
-        }
-    }
-
-    #UpdateUI(): void {
-        this.SetupUI();
-
-        //@@ fix screen render - should not need to blow entire screen away ...
-        //this.#SetupPanels();
-        //this.UpdateCursorInfo();
-        //this.Render();
-    }
-
-    Exit = (): void => {
-        this.DestroyUI();
-        this.emit('exit');
-    }
-
-    /**
-     * 
-     */
-    DestroyUI = (): void => {
-        // Destroy the screen and disable UI log processing
-        if (this.screen !== null) {
-            this.uiBoxes = { };
-            this.screen.destroy();
-            this.screen = null;
-        }
-    }
-
-    /**
-     * Render the screen.
-     */
-    Render = (): void => {
-        if (this.screen) {
-            this.screen.render();
-        }
-    }
-}