Add ranged input for overlay module. (#1459)

* add ranged input for overlay module

* fix bug

* change input type to integer

* Add tests

* Add tests

Co-authored-by: Harsh Khandeparkar <34770591+HarshKhandeparkar@users.noreply.github.com>
Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

src/modules/Overlay/Module.js

@@ -4,6 +4,11 @@ module.exports = function Dynamic(options, UI, util) {
   options.x = options.x || defaults.x;
   options.y = options.y || defaults.y;
 
+  if(options.step.inBrowser && !options.noUI && sequencer.getSteps().length < 2)
+    options.offset = -1;
+
+  if (options.step.inBrowser && !options.noUI) var ui = require('./Ui.js')(options.step, UI);
+
   var output;
 
   // This function is called on every draw.
@@ -62,6 +67,13 @@ module.exports = function Dynamic(options, UI, util) {
         step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
       }
 
+      function modifiedCallback() {
+        if (options.step.inBrowser && !options.noUI) {
+          ui.setup();
+        }
+        callback();
+      }
+
       // run PixelManipulation on first Image pixels
       return require('../_nomodule/PixelManipulation.js')(baseStepOutput, {
         output: output,
@@ -70,7 +82,7 @@ module.exports = function Dynamic(options, UI, util) {
         format: baseStepOutput.format,
         image: baseStepImage,
         inBrowser: options.inBrowser,
-        callback: callback,
+        callback: modifiedCallback,
         useWasm:options.useWasm
       });
     });

src/modules/Overlay/Ui.js

@@ -0,0 +1,19 @@
+module.exports = function OverlayModuleUi(step, ui) {
+
+  function setup() {
+    var steps = sequencer.getSteps();
+    steps.forEach(function (_step, index) {
+      if(_step.options && step.options.number === _step.options.number) {
+        if(index === 1){
+          step.ui.querySelector('input[type=range]').value = -1;
+          step.ui.querySelector('input[type=range]').min = -1;
+        }else
+          step.ui.querySelector('input[type=range]').min = -index;
+      }
+    });
+  }
+
+  return {
+    setup: setup
+  };
+};

src/modules/Overlay/info.json

@@ -15,7 +15,10 @@
         "offset": {
             "type": "integer",
             "desc": "offset to the output of the step on which the output of the last step is overlayed",
-            "default": -2
+            "default": -2,
+            "min": -2,
+            "max": -1,
+            "step": 1
         }
     },
     "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#overlay-module"

test/ui-2/test/OverlayInput.test.js

@@ -0,0 +1,46 @@
+const timeout = process.env.SLOWMO ? 30000 : 10000;
+const fs = require('fs');
+beforeAll(async () => {
+  path = fs.realpathSync('file://../examples/index.html');
+  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
+});
+
+describe('Overlay Ranged input', () => {
+  test('Overlay Ranged input is working properly', async () => {
+    // Wait for .step to load
+    await page.waitForSelector('.step');
+    try {
+      // Click and select step input field.
+      await page.click('input[type=select-one]');
+      // Select Overlay module.
+      await page.click('[data-value=\'overlay\']');
+
+      // Click the Add step button.
+      await page.waitForSelector('#add-step-btn');
+      await page.click('#add-step-btn');
+
+      // Check to see if Overlay ranged input is present.
+      await page.waitForSelector('input[type=range]');
+
+      // Get the value of ranged input of First Overlay Step.
+      const rangeValue = await page.evaluate(() => document.querySelectorAll('input[type=range]')[0].value);
+      expect(rangeValue).toEqual('-1');
+
+      // Again click #add-step to add second Overlay step.
+      await page.click('[data-value=\'overlay\']');
+      await page.waitForSelector('#add-step-btn');
+      await page.click('#add-step-btn');
+
+      // Check to see if Second Overlay ranged input is present.
+      await page.waitForSelector('input[type=range]');
+      // Get the value of ranged input of second Overlay Step.
+      const rangeValueAfter = await page.evaluate(() => document.querySelectorAll('input[type=range]')[1].value);
+
+      // Check if second Overlay ranged input has value -2.
+      expect(rangeValueAfter).toEqual('-2');
+    } catch (error) {
+      console.log(error);
+    }
+
+  }, timeout);
+});