Merge branch 'main' into v3.6.0

README.md

@@ -620,8 +620,7 @@ The final frames are then converted back to a GIF but in the process, the time d
 Modules that do not work:
 1. ColorBar (Will get fixed upon fixing overlay as this is a meta module which uses overlay)
 2. FisheyeGL
-4. Overlay
+3. Overlay
-5. Text Overlay (Almost fixed)
+4. Blend
-6. Blend
+5. Histogram
-7. Histogram
+6. WebGL Distort
-8. WebGL Distort

examples/demo.css

@@ -44,7 +44,6 @@ body > .container-fluid {
 .panel {
   margin-left: 20px;
   margin-right: 20px;
-  min-width:400px;
 }
 
 .mouse {
@@ -66,7 +65,6 @@ body > .container-fluid {
   border-radius: 8px;
   text-align: center;
   color: #444;
-  min-width:300px;
 }
 
 .dropzone input {
@@ -156,6 +154,13 @@ body > .container-fluid {
   margin: 0px 0px 0px 10px;
   width: 250px;
 }
+
+@media(max-width: 768px) {
+    #dropzone {
+      margin: 0 0% 30px;
+    }
+}
+
 #dwnld {
   max-width: 500px;
   margin: 20px auto;

examples/demo.js

@@ -340,6 +340,7 @@ window.onload = function () {
       else
         step.imgElement.src = url;
       insertPreview.updatePreviews(url, document.querySelector('#addStep'));
+      DefaultHtmlStepUi(sequencer).updateDimensions(step);
     }
   });
 

examples/index.html

@@ -60,7 +60,7 @@
 
   <div class="container-fluid">
 
-    <header class="text-center" style="min-width: 450px">
+    <header class="text-center">
       <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
       <p>
         A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original

package-lock.json

@@ -687,14 +687,14 @@
       "dev": true
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.11.0",
+      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
-      "integrity": "sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==",
+      "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.10.4"
+        "@babel/plugin-transform-parameters": "^7.12.1"
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -805,47 +805,12 @@
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.10.5",
+      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz",
-      "integrity": "sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==",
+      "integrity": "sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==",
       "dev": true,
       "requires": {
-        "@babel/helper-get-function-arity": "^7.10.4",
         "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.4"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-          "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.4",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "lodash": {
-          "version": "4.17.19",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
-          "dev": true
-        }
       }
     },
     "@babel/runtime-corejs3": {
@@ -12554,9 +12519,9 @@
       }
     },
     "jsqr": {
-      "version": "1.2.0",
+      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.3.1.tgz",
-      "integrity": "sha512-wKcQS9QC2VHGk7aphWCp1RrFyC0CM6fMgC5prZZ2KV/Lk6OKNoCod9IR6bao+yx3KPY0gZFC5dc+h+KFzCI0Wg=="
+      "integrity": "sha512-zCTP6Qd/WwjrpuHFkJuXc5opRdKprUr7eI7+JCCtcetThJt45qptu82MWQ+eET+FtDrMo7+BYjo3iD0XIq1L9Q=="
     },
     "junk": {
       "version": "3.1.0",
@@ -12997,9 +12962,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
+      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.debounce": {
       "version": "4.0.8",

src/modules/Colorbar/Module.js

@@ -6,7 +6,7 @@ module.exports = require('../../util/createMetaModule.js')(
       { 'name': 'gradient', 'options': {} },
       { 'name': 'colormap', 'options': { colormap: options.colormap || defaults.colormap } },
       { 'name': 'crop', 'options': { 'y': 0, 'w': '100%', 'h': options.h || defaults.h } },
-      { 'name': 'overlay', 'options': { 'x': options.x || defaults.h, 'y': options.y || defaults.y, 'offset': -4 } }
+      { 'name': 'overlay', 'options': { 'x': options.x || defaults.x, 'y': options.y || defaults.y, 'offset': -4 }  }
     ];
   }, {
     infoJson: require('./info.json')

src/modules/Crop/Module.js

@@ -29,11 +29,13 @@ module.exports = function CropModule(options, UI) {
 
     options.step.input = input.src;
 
+    // We should do this via event/listener:
+    if (ui && ui.hide) ui.hide();
+
+
     function extraManipulation(pixels) {
       const newPixels = require('./Crop')(pixels, options, function() {
-        // We should do this via event/listener:
+        
-        if (ui && ui.hide) ui.hide();
-
         // Start custom UI setup (draggable UI)
         // Only once we have an input image
         if (setupComplete === false && options.step.inBrowser && !options.noUI) {

src/modules/EdgeDetect/EdgeUtils.js

@@ -13,10 +13,10 @@ const kernelx = [
     [ 0, 0, 0],
     [ 1, 2, 1]
   ];
-  
+
 module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, useHysteresis) {
   let angles = [], grads = [], strongEdgePixels = [], weakEdgePixels = [], pixelsToBeSupressed = [];
-  
+
   for (var x = 0; x < pixels.shape[0]; x++) {
     grads.push([]);
     angles.push([]);
@@ -110,10 +110,13 @@ function sobelFilter(pixels, x, y) {
  * @returns {Number} Category number of the given angle
  */
 function categorizeAngle(angle){
-  if ((angle >= -22.5 && angle <= 22.5) || (angle < -157.5 && angle >= -180)) return 1;
+  const pi = Math.PI;
-  else if ((angle >= 22.5 && angle <= 67.5) || (angle < -112.5 && angle >= -157.5)) return 2;
+  angle = angle > 0 ? angle : pi - Math.abs(angle); // Diagonally flip the angle if it is negative (since edge remains the same)
-  else if ((angle >= 67.5 && angle <= 112.5) || (angle < -67.5 && angle >= -112.5)) return 3;
+
-  else if ((angle >= 112.5 && angle <= 157.5) || (angle < -22.5 && angle >= -67.5)) return 4;
+  if (angle <= pi / 8 || angle > 7 * pi / 8) return 1;
+  else if (angle > pi / 8 && angle <= 3 * pi / 8) return 2;
+  else if (angle > 3 * pi / 8 && angle <= 5 * pi / 8) return 3;
+  else if (angle > 5 * pi / 8 && angle <= 7 * pi / 8) return 4;
 
   /* Category Map
   * 1 => E-W
@@ -143,8 +146,6 @@ const removeElem = (arr = [], elem) => { // Removes the specified element from t
 
 // Non Maximum Supression without interpolation.
 function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
-  angles = angles.map((arr) => arr.map(convertToDegrees));
-
   for (let x = 0; x < pixels.shape[0]; x++) {
     for (let y = 0; y < pixels.shape[1]; y++) {
 
@@ -157,7 +158,7 @@ function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
             pixelsToBeSupressed.push([x, y]);
           }
           break;
-          
+
         case 2:
           if (!((grads[x][y] >= grads[x + 1][y + 1]) && (grads[x][y] >= grads[x - 1][y - 1]))){
             pixelsToBeSupressed.push([x, y]);
@@ -181,15 +182,6 @@ function nonMaxSupress(pixels, grads, angles, pixelsToBeSupressed) {
   }
 }
 
-
-/**
- * @method convertToDegrees
- * @description Converts the given angle(in radians) to degrees.
- * @param {Number} radians Angle in radians
- * @returns {Number} Angle in degrees
- */
-var convertToDegrees = radians => (radians * 180) / Math.PI;
-
 // Finds the max value in a 2d array like grads.
 var findMaxInMatrix = arr => Math.max(...arr.map(el => el.map(val => val ? val : 0)).map(el => Math.max(...el)));
 

src/modules/Resize/Module.js

@@ -1,6 +1,3 @@
-const imagejs = require('imagejs'),
-  pixelSetter = require('../../util/pixelSetter'),
-  ndarray = require('ndarray');
 /*
  * Resize the image by given percentage value
  */
@@ -19,44 +16,7 @@ module.exports = function Resize(options, UI) {
     const step = this;
 
     function extraManipulation(pixels) {
-      // Value above 100% scales up, and below 100% scales down
+      return require('./Resize')(pixels, options);
-      const resize_value = parseInt(options.resize.slice(0, -1));
-
-      if (resize_value == 100) return pixels;
-
-
-      const new_width = Math.round(pixels.shape[0] * (resize_value / 100)),
-        new_height = Math.round(pixels.shape[1] * (resize_value / 100));
-
-      const bitmap = new imagejs.Bitmap({ width: pixels.shape[0], height: pixels.shape[1] });
-      
-      for (let x = 0; x < pixels.shape[0]; x++) {
-        for (let y = 0; y < pixels.shape[1]; y++) {
-          let r = pixels.get(x, y, 0),
-            g = pixels.get(x, y, 1),
-            b = pixels.get(x, y, 2),
-            a = pixels.get(x, y, 3);
-
-          bitmap.setPixel(x, y, r, g, b, a);
-        }
-      }
-
-      const resized = bitmap.resize({
-        width: new_width,
-        height: new_height,
-        algorithm: 'bicubicInterpolation'
-      });
-
-      const newPix = new ndarray([], [new_width, new_height, 4]);
-
-      for (let x = 0; x < new_width; x++) {
-        for (let y = 0; y < new_height; y++) {
-          const {r, g, b, a} = resized.getPixel(x, y);
-          pixelSetter(x, y, [r, g, b, a], newPix);
-        }
-      }
-
-      return newPix;
     }
 
     function output(image, datauri, mimetype, wasmSuccess) {

src/modules/Resize/Resize.js

@@ -0,0 +1,44 @@
+const imagejs = require('imagejs'),
+  pixelSetter = require('../../util/pixelSetter'),
+  ndarray = require('ndarray');
+module.exports = function Resize(pixels, options) {
+  const resize_value = parseInt(options.resize.slice(0, -1));
+
+  if (resize_value == 100) return pixels;
+
+  const new_width = Math.round(pixels.shape[0] * (resize_value / 100)),
+    new_height = Math.round(pixels.shape[1] * (resize_value / 100));
+
+  const bitmap = new imagejs.Bitmap({
+    width: pixels.shape[0],
+    height: pixels.shape[1]
+  });
+
+  for (let x = 0; x < pixels.shape[0]; x++) {
+    for (let y = 0; y < pixels.shape[1]; y++) {
+      let r = pixels.get(x, y, 0),
+        g = pixels.get(x, y, 1),
+        b = pixels.get(x, y, 2),
+        a = pixels.get(x, y, 3);
+
+      bitmap.setPixel(x, y, r, g, b, a);
+    }
+  }
+
+  const resized = bitmap.resize({
+    width: new_width,
+    height: new_height,
+    algorithm: 'bicubicInterpolation'
+  });
+
+  const newPix = new ndarray([], [new_width, new_height, 4]);
+
+  for (let x = 0; x < new_width; x++) {
+    for (let y = 0; y < new_height; y++) {
+      const { r, g, b, a } = resized.getPixel(x, y);
+      pixelSetter(x, y, [r, g, b, a], newPix);
+    }
+  }
+
+  return newPix;
+};

yarn.lock

@@ -151,13 +151,13 @@
   integrity sha512-dYmySMYnlus2jwl7JnnajAj11obRStZoW9cG04wh4ZuhozDn11tDUrhHcUZ9iuNHqALAhh60XqNaYXpvuuE/Gg==
 
 "@babel/plugin-proposal-object-rest-spread@^7.4.3":
-  version "7.11.0"
+  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz#bd81f95a1f746760ea43b6c2d3d62b11790ad0af"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
-  integrity sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==
+  integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-transform-parameters" "^7.10.4"
+    "@babel/plugin-transform-parameters" "^7.12.1"
 
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
@@ -236,12 +236,11 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-transform-parameters@^7.10.4":
+"@babel/plugin-transform-parameters@^7.12.1":
-  version "7.10.5"
+  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz#d2e963b038771650c922eff593799c96d853255d"
-  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
+  integrity sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/runtime-corejs3@^7.8.3":
@@ -6498,9 +6497,9 @@ jsprim@^1.2.2:
     verror "1.10.0"
 
 jsqr@^1.1.1:
-  version "1.2.0"
+  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.2.0.tgz#f93fc65fa7d1ded78b1bcb020fa044352b04261a"
+  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.3.1.tgz#515a766e58b00c80142f3a2dc4b8751100ceedcf"
-  integrity sha512-wKcQS9QC2VHGk7aphWCp1RrFyC0CM6fMgC5prZZ2KV/Lk6OKNoCod9IR6bao+yx3KPY0gZFC5dc+h+KFzCI0Wg==
+  integrity sha512-zCTP6Qd/WwjrpuHFkJuXc5opRdKprUr7eI7+JCCtcetThJt45qptu82MWQ+eET+FtDrMo7+BYjo3iD0XIq1L9Q==
 
 junk@^3.1.0:
   version "3.1.0"