@nsshunt/stsui 1.3.14 → 1.3.18

package/README.md

@@ -1 +1,2 @@
-# stsui
+# stsui
+# Test

package/menubar.js

@@ -2,11 +2,11 @@ var blessed = require('blessed');
 
 class MenuBar
 {
-    #listb = null;
+	#listb = null;
 
-    // options := { screen: <blessed screen>, top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <call back func> } ] }
-    constructor(screen, options)
-    {
+	// options := { screen: <blessed screen>, top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <call back func> } ] }
+	constructor(screen, options)
+	{
     	let compoptions = { };
 
     	if (options.top === true)
@@ -54,12 +54,12 @@ class MenuBar
     	}
     
     	this.#listb = blessed.listbar(compoptions);
-    }
+	}
 
-    get listbar()
-    {
+	get listbar()
+	{
     	return this.#listb;
-    }
+	}
 }
 
 module.exports = { MenuBar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsshunt/stsui",
-  "version": "1.3.14",
+  "version": "1.3.18",
   "description": "",
   "main": "stsui.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/nsshunt/stsui#readme",
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-private-methods": "^7.14.5",
-    "eslint": "^8.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-private-methods": "^7.16.0",
+    "eslint": "^8.3.0",
     "jest": "^27.3.1"
   },
   "dependencies": {

package/stsuiframe.js

@@ -9,16 +9,16 @@ const { v4: uuidv4 } = require('uuid');
  * 
  */
 class STSUIFrame extends EventEmitter {
-    #uiBox = {}; // { box: <<blessed box>>, boxHeader: <<blessed box>> }
-    #screen = null;
-    #uidata = null;
+	#uiBox = {}; // { box: <<blessed box>>, boxHeader: <<blessed box>> }
+	#screen = null;
+	#uidata = null;
 	#cursor = 0; // panel index with the complete model data.
 	#cursorInfo = null;
 	#renderPanelFn = null;
 	#screenHeaderText = '...';
 
-	#minRows = 2;
-	#minCols = 2;
+	#minRows = 1;
+	#minCols = 1;
 	#minWidth = 40;
 	#minHeight = 7;
 
@@ -39,12 +39,12 @@ class STSUIFrame extends EventEmitter {
     	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) => {
+	#CalcBoxPos = (panel) => {
     	// Calculate the position and dimensions for this UI element
 
     	let screenHeight = this.#screen.height;
@@ -91,7 +91,7 @@ class STSUIFrame extends EventEmitter {
     	}
 
     	return { top: top, left: left, width: width, height: height };
-    }
+	}
 
 	#UpdateUIBoxPos = (panel, uiBox) =>
 	{
@@ -120,14 +120,14 @@ class STSUIFrame extends EventEmitter {
 		}
 	};
 
-    /**
+	/**
      * ReSize the grid layout
      */
-    #ReSize = () => {
+	#ReSize = () => {
     	for (const [, value] of Object.entries(this.#uiBox)) {
     		this.#UpdateUIBoxPos(value.box.get('panel'), value);
     	}
-    }
+	}
 
 	#UpdatePanelPosition = (panel, row, col, uiBox) => {
 		// Update the panel position within the current screen view
@@ -136,11 +136,11 @@ class STSUIFrame extends EventEmitter {
 		uiBox.boxHeader.setContent(panel.panelHeader);
 	}
 
-    /**
+	/**
      * 
      * Setup all panels
      */
-    #SetupPanels() {
+	#SetupPanels() {
     	let panelKeys = Object.keys(this.#uidata.panels);
 
 		// Check for deleted panels
@@ -157,6 +157,8 @@ class STSUIFrame extends EventEmitter {
 			}
 		}
 
+		let touched = { };
+
     	for (let i=0; i < (this.#uidata.grid.cols * this.#uidata.grid.rows); i++)
     	{
     		let gridPos = this.#cursor + i;
@@ -244,49 +246,69 @@ class STSUIFrame extends EventEmitter {
     				box.set('panel', panel);
 
     				this.#uiBox[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.#uiBox[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
     			this.#renderPanelFn(this.#uiBox[panel.id].box, panel);
     		}
     	}
-    };
 
-    get gridData() {
+		for (const [key, ] of Object.entries(this.#uiBox)) {
+			if (typeof touched[key] === 'undefined')
+			{
+				this.#uiBox[key].box.hide();
+				this.#uiBox[key].boxHeader.hide();
+			} else {
+				this.#uiBox[key].box.show();
+				this.#uiBox[key].boxHeader.show();
+			}
+		}
+
+	}
+
+	get gridData() {
     	return this.#uidata;
-    }
+	}
 
-    set gridData(gridData) {
+	set gridData(gridData) {
     	this.#uidata = gridData;
     	this.#SetupPanels();
     	this.UpdateCursorInfo();
     	this.#screen.render();
-    }
+	}
 
-    get gridDataPanels() {
+	get gridDataPanels() {
     	return this.#uidata.panels;
-    }
+	}
 
-    set gridDataPanels(gridDataPanels) {
+	set gridDataPanels(gridDataPanels) {
     	this.#uidata.panels = gridDataPanels;
     	this.#SetupPanels();
     	this.UpdateCursorInfo();
     	this.#screen.render();
-    }
+	}
 
-    // https://www.npmjs.com/package/blessed
+	// 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> } ] }
-    /**
+	// 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 = () => {
+	SetupUI = () => {
     	this.DestroyUI();
 
     	if (this.#screen === null) {
@@ -384,7 +406,7 @@ class STSUIFrame extends EventEmitter {
 
     	// Render the screen.
     	this.#screen.render();
-    }
+	}
 
 	UpdateCursorInfo = () =>
 	{
@@ -402,6 +424,16 @@ class STSUIFrame extends EventEmitter {
 		this.#screenHeader.setContent(`[ ${screenHeaderText} ]`);
 	}
 
+	get rows()
+	{
+		return this.#uidata.grid.rows;
+	}
+
+	get cols()
+	{
+		return this.#uidata.grid.cols;
+	}
+
 	IncRows = () =>
 	{
 		if (this.#screen.height / (this.#uidata.grid.rows+1) > this.#minHeight)
@@ -503,24 +535,24 @@ class STSUIFrame extends EventEmitter {
 		this.emit('exit');
 	}
 
-    /**
+	/**
      * 
      */
-    DestroyUI = () => {
+	DestroyUI = () => {
     	// Destroy the screen and disable UI log processing
     	if (this.#screen !== null) {
     		this.#uiBox = { };
     		this.#screen.destroy();
     		this.#screen = null;
     	}
-    }
+	}
 
-    /**
+	/**
      * Render the screen.
      */
-    Render = () => {
+	Render = () => {
     	this.#screen.render();
-    }
+	}
 }
 
 module.exports = { STSUIFrame };