Fix #27 Scroll in widgets, add scrollbar

Author: ajboni

HELP.md

@@ -12,4 +12,5 @@
 | Plugin Parameters Widget | -        | LEFT / RIGHT        | Change parameter value by default step               |
 | Plugin Parameters Widget | SHIFT    | LEFT / RIGHT        | Change parameter value by small step.                |
 | Plugin Parameters Widget | CTRL     | LEFT / RIGHT        | Change parameter value by big step.                  |
-| Plugin Parameters Widget | -        | PAGE_UP / PAGE_DOWN | Change parameter value by 1/5 of the maximum allowed |
+| Plugin Parameters Widget | -        | TODO                | Change parameter value by 1/5 of the maximum allowed |
+| Plugin Parameters Widget | -        | PAGE UP / PAGE DOWN | Scroll properties                                    |

README.md

@@ -54,7 +54,8 @@ Modify `.config.yaml` with your settings, more info [in the docs](https://ajboni
 | Plugin Parameters Widget | -        | LEFT / RIGHT        | Change parameter value by default step               |
 | Plugin Parameters Widget | SHIFT    | LEFT / RIGHT        | Change parameter value by small step.                |
 | Plugin Parameters Widget | CTRL     | LEFT / RIGHT        | Change parameter value by big step.                  |
-| Plugin Parameters Widget | -        | PAGE_UP / PAGE_DOWN | Change parameter value by 1/5 of the maximum allowed |
+| Plugin Parameters Widget | -        | TODO                | Change parameter value by 1/5 of the maximum allowed |
+| Plugin Parameters Widget | -        | PAGE UP / PAGE DOWN | Scroll properties                                    |
 
 # DEV
 

TODO.md

@@ -12,7 +12,7 @@ const LV2 = require("./lv2");
 const store = require("./store");
 const program = blessed.program();
 const screen = blessed.screen({
-  smartCSR: true,
+  //   smartCSR: true,
 });
 
 try {

src/app.js

@@ -12,16 +12,16 @@ const PluginControls = function (grid, x, y, xSpan, ySpan) {
     mouse: true,
     interactive: true,
     keys: true,
-
+    vi: true,
+    // alwaysScroll: true,
     padding: { left: 1, right: 1 },
-    mouse: true,
+
+    scrollable: true,
+    focusable: true,
     scrollbar: {
       ch: " ",
       inverse: true,
     },
-    scrollable: true,
-    focusable: true,
-
     style: {
       border: { fg: "#7ea87f" },
       focus: {
@@ -31,6 +31,14 @@ const PluginControls = function (grid, x, y, xSpan, ySpan) {
     },
   });
 
+  pluginControls.key(["pageup"], (c, x) => {
+    pluginControls.scroll(-pluginControls.height);
+  });
+
+  pluginControls.key(["pagedown"], (c, x) => {
+    pluginControls.scroll(pluginControls.height);
+  });
+
   pluginControls.key(["down"], (e, x) => {
     Layout.focusNext();
   });
@@ -66,7 +74,8 @@ const PluginControls = function (grid, x, y, xSpan, ySpan) {
           values[control.symbol],
           y,
           control,
-          plugin
+          plugin,
+          pluginControls
         );
         pluginControls.append(controlWidget);
         pluginControls.scrollable = true;
@@ -106,7 +115,7 @@ const PluginControls = function (grid, x, y, xSpan, ySpan) {
  * @param {pluginInstance} pluginInstance
  * @returns Returns the progress control blessed widget.
  */
-function progressControl(value, top, pluginControl, pluginInstance) {
+function progressControl(value, top, pluginControl, pluginInstance, parent) {
   const {
     comment,
     designation,
@@ -121,24 +130,22 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     units,
   } = pluginControl;
 
-  var box = blessed.box({
+  let box = blessed.box({
     interactive: false,
-    focusable: false,
+    focusable: true,
+
     top: top,
+    height: 3,
+    // bg: "green",
+    right: 2,
+    left: 2,
+    // alwaysScroll: true,
+    scrollable: true,
   });
 
   box.value = parseControlValue(pluginControl, value);
   const valuePercent = getControlValuePercent(pluginControl, box.value);
 
-  //    Control Label
-  var label = blessed.text({
-    content: shortName,
-    left: 1,
-    top: 1,
-    interactive: false,
-    focusable: false,
-  });
-
   //    Progress Widget
   var progress = blessed.progressbar({
     border: {
@@ -166,6 +173,18 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     right: "8",
     filled: parseInt(valuePercent.toString()),
     width: "65%",
+
+    // alwaysScroll: true,
+    scrollable: true,
+  });
+
+  //    Control Label
+  let label = blessed.text({
+    content: shortName,
+    left: 1,
+    top: 1,
+    // alwaysScroll: true,
+    scrollable: true,
   });
 
   const valueLabelValue = getControlValueLabel(
@@ -177,8 +196,8 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     content: valueLabelValue,
     right: 4,
     top: 1,
-    interactive: false,
-    focusable: false,
+    // alwaysScroll: true,
+    scrollable: true,
   });
 
   box.append(label);
@@ -225,6 +244,15 @@ function progressControl(value, top, pluginControl, pluginInstance) {
       "pagedown",
     ],
     function (e, keys) {
+      if (keys.name === "pageup") {
+        parent.scroll(-25);
+        return;
+      }
+      if (keys.name === "pagedown") {
+        parent.scroll(25);
+        return;
+      }
+
       let newValue = 0;
 
       // if it is a toggle button, just send 0 or 1
@@ -261,8 +289,8 @@ function progressControl(value, top, pluginControl, pluginInstance) {
 
         if (keys.shift) step /= 10;
         if (keys.ctrl) step *= 5;
-        if (keys.name === "pageup") step = -ranges.maximum / 5;
-        if (keys.name === "pagedown") step = ranges.maximum / 5;
+        // if (keys.name === "pageup") step = -ranges.maximum / 5;
+        // if (keys.name === "pagedown") step = ranges.maximum / 5;
         if (keys.name === "left") step = -step;
         newValue = box.value + step;
 

src/widgets/pluginControls.js

@@ -24,7 +24,6 @@ const PluginMonitor = function (grid, x, y, xSpan, ySpan) {
     scrollable: true,
     style: {
       border: { fg: "#7ea87f" },
-      scrollbar: true,
       focus: {
         border: { fg: "red" },
         //   enabled: false,
@@ -115,6 +114,8 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     interactive: false,
     focusable: false,
     top: top,
+    alwaysScroll: true,
+    scrollable: true,
   });
 
   box.value = parseControlValue(pluginControl, value);
@@ -127,6 +128,8 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     top: 1,
     interactive: false,
     focusable: false,
+    alwaysScroll: true,
+    scrollable: true,
   });
 
   //    Progress Widget
@@ -135,6 +138,8 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     focusable: false,
     keyable: false,
     keys: false,
+    alwaysScroll: true,
+    scrollable: true,
     border: {
       type: "bg",
       //   fg: "#882822",
@@ -173,6 +178,8 @@ function progressControl(value, top, pluginControl, pluginInstance) {
     top: 1,
     interactive: false,
     focusable: false,
+    alwaysScroll: true,
+    scrollable: true,
   });
 
   box.append(label);