bump tape-run to ^8.0.0

Bumps [jpegtran-bin](https://github.com/imagemin/jpegtran-bin) from 4.0.0 to 5.0.2.
- [Release notes](https://github.com/imagemin/jpegtran-bin/releases)
- [Commits](https://github.com/imagemin/jpegtran-bin/compare/v4.0.0...v5.0.2)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

.gitpod.dockerfile

@@ -0,0 +1,7 @@
+FROM gitpod/workspace-full
+
+USER root
+RUN sudo apt-get update && apt-get install -y apt-transport-https \
+ && sudo apt-get install -y \
+    xserver-xorg-dev libxext-dev libxi-dev build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config libglu1-mesa-dev freeglut3-dev mesa-common-dev \
+ && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/*

.gitpod.yml

@@ -1,3 +1,5 @@
+image:
+  file: .gitpod.dockerfile
 tasks:
   - init: npm run setup
     command: npm start

.travis.yml

@@ -1,8 +1,8 @@
 sudo: required
 language: node_js
 node_js:
-  - '8'
   - '10'
+  - '12'
 env:
   - CXX=g++-4.8
 before_script:

README.md

@@ -2,13 +2,18 @@ Image Sequencer
 ====
 
 [![Code of Conduct](https://img.shields.io/badge/code-of%20conduct-green.svg)](https://publiclab.org/conduct)
+[![npm version](https://badge.fury.io/js/image-sequencer.svg)](https://badge.fury.io/js/image-sequencer)
 [![Build Status](https://travis-ci.org/publiclab/image-sequencer.svg?branch=master)](https://travis-ci.org/publiclab/image-sequencer) [![Maintainability](https://api.codeclimate.com/v1/badges/5906996dd2e90aca6398/maintainability)](https://codeclimate.com/github/publiclab/image-sequencer/maintainability) [![Codecov](https://img.shields.io/codecov/c/github/publiclab/image-sequencer.svg?logo=codecov)](https://codecov.io/gh/publiclab/image-sequencer)
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/publiclab/image-sequencer/)
 
 - **Latest Stable Demo**: https://sequencer.publiclab.org
 - **Latest Beta Demo**: https://beta.sequencer.publiclab.org
 - **Stable Branch**: https://github.com/publiclab/image-sequencer/tree/stable/
 
+Begin running (and contributing to) this codebase immediately with [GitPod](https://gitpod.io) (this also opens the latest `main` branch code):
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/publiclab/image-sequencer)
+
 ## Why
 
 Image Sequencer is different from other image processing systems because it's _non-destructive_: instead of modifying the original image, it **creates a new image at each step in a sequence**. This is because it:

examples/index.html

@@ -218,7 +218,7 @@
           <h2>Need Help?</h2>
           <p>
             <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer/issues">Ask a question</a>
-            <a class="btn btn-default" href="https://publiclab.org/chat">Ask in our chatroom</a>
+            <a class="btn btn-default" href="https://gitter.im/publiclab/image-sequencer"  target="_blank">Ask in our chatroom </a>
           </p>
         </div>
         <div class="col-md-6">

examples/lib/defaultHtmlSequencerUi.js

@@ -28,7 +28,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
   function selectNewStepUi() {
     var m = $(addStepSel + ' select').val();
     if(!m) m = arguments[0];
-    $(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
+    else $(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
     $(addStepSel + ' #add-step-btn').prop('disabled', false);
   }
 

package.json

@@ -55,14 +55,14 @@
     "image-sequencer-invert": "^1.0.0",
     "imagejs": "0.0.9",
     "imagemin": "^7.0.1",
-    "imagemin-jpegtran": "^6.0.0",
-    "imagemin-pngquant": "^8.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-pngquant": "^9.0.1",
     "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
     "istanbul": "^0.4.5",
     "jasmine": "^3.4.0",
-    "jpegtran-bin": "^4.0.0",
+    "jpegtran-bin": "^5.0.2",
     "jquery": "^3.3.1",
-    "jsdom": "^15.0.0",
+    "jsdom": "^16.3.0",
     "jspdf": "^1.5.3",
     "jsqr": "^1.1.1",
     "lodash": "^4.17.11",
@@ -100,14 +100,14 @@
     "jasmine-core": "^3.3.0",
     "jasmine-jquery": "^2.1.1",
     "jasmine-spec-reporter": "^4.2.1",
-    "jest": "^25.1.0",
+    "jest": "^26.1.0",
     "jest-puppeteer": "^4.3.0",
     "lint-staged": "^10.0.3",
     "looks-same": "^7.0.0",
     "matchdep": "^2.0.0",
     "tap-spec": "^5.0.0",
     "tape": "^4.9.2",
-    "tape-run": "^7.0.0",
+    "tape-run": "^8.0.0",
     "uglify-es": "^3.3.7"
   },
   "husky": {

src/modules/EdgeDetect/EdgeUtils.js

@@ -14,10 +14,8 @@ const kernelx = [
     [ 1, 2, 1]
   ];
   
-let pixelsToBeSupressed = [];
-
 module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, useHysteresis) {
-  let angles = [], grads = [], strongEdgePixels = [], weakEdgePixels = [];
+  let angles = [], grads = [], strongEdgePixels = [], weakEdgePixels = [], pixelsToBeSupressed = [];
   
   for (var x = 0; x < pixels.shape[0]; x++) {
     grads.push([]);
@@ -34,8 +32,8 @@ module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, useHyst
       angles.slice(-1)[0].push(result.angle);
     }
   }
-  nonMaxSupress(pixels, grads, angles); // Non Maximum Suppression: Filter fine edges.
-  doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio, grads, strongEdgePixels, weakEdgePixels); // Double Threshold: Categorizes edges into strong and weak edges based on two thresholds.
+  nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed); // Non Maximum Suppression: Filter fine edges.
+  doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio, grads, strongEdgePixels, weakEdgePixels, pixelsToBeSupressed); // Double Threshold: Categorizes edges into strong and weak edges based on two thresholds.
   if(useHysteresis.toLowerCase() == 'true') hysteresis(strongEdgePixels, weakEdgePixels); // Optional Hysteresis (very slow) to minimize edges generated due to noise.
 
   strongEdgePixels.forEach(pixel => preserve(pixels, pixel)); // Makes the strong edges White.
@@ -144,7 +142,7 @@ const removeElem = (arr = [], elem) => { // Removes the specified element from t
 };
 
 // Non Maximum Supression without interpolation.
-function nonMaxSupress(pixels, grads, angles) {
+function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
   angles = angles.map((arr) => arr.map(convertToDegrees));
 
   for (let x = 0; x < pixels.shape[0]; x++) {
@@ -196,7 +194,7 @@ var convertToDegrees = radians => (radians * 180) / Math.PI;
 var findMaxInMatrix = arr => Math.max(...arr.map(el => el.map(val => val ? val : 0)).map(el => Math.max(...el)));
 
 // Applies the double threshold to the image.
-function doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio, grads, strongEdgePixels, weakEdgePixels) {
+function doubleThreshold(pixels, highThresholdRatio, lowThresholdRatio, grads, strongEdgePixels, weakEdgePixels, pixelsToBeSupressed) {
 
   const highThreshold = findMaxInMatrix(grads) * highThresholdRatio, // High Threshold relative to the strongest edge
     lowThreshold = highThreshold * lowThresholdRatio; // Low threshold relative to high threshold

src/modules/EdgeDetect/Module.js

@@ -16,7 +16,6 @@ module.exports = function edgeDetect(options, UI) {
 
   // The function which is called on every draw.
   function draw(input, callback, progressObj) {
-
     progressObj.stop(true);
     progressObj.overrideFlag = true;
 

test/ui-2/test/apply-button.test.js

@@ -0,0 +1,35 @@
+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('Apply Button Works', () => {
+  test('Apply Button is clicked', async () => {
+    await page.waitForSelector('.step');
+
+  
+    await page.click('[data-value=\'resize\']');
+    const Length1 = await page.evaluate(() => document.querySelectorAll('.step').length);
+    //Lets change the default value
+    expect(Length1).toBe(2);
+    // Let's check the source of the image output by the default values
+    const src1 = await page.evaluate(() => document.querySelectorAll('.step img')[1].src);
+    //Lets change the default value
+    await page.evaluate(() => document.querySelector('div[name="resize"] input').value = '');
+    await page.type('div[name="resize"] input', '50%');
+    //Wait for the apply button to get enabled then click
+    await page.waitForFunction('document.querySelector(".btn-save").disabled == false');
+    await page.$eval('.btn-save', elem => elem.click());
+    //Wait for the image to process with the new value
+    await page.waitForSelector('.load', {visible: false});
+    
+    //Let's check the source of the image output by the new values
+    const src2 = await page.evaluate(() => document.querySelectorAll('.step img')[1].src);
+    //Expect default and new image to be changed
+    expect(src1).not.toEqual(src2);
+    
+    
+  }, timeout);
+});