Merge branch 'main' into codeowners

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

.github/config.yml

@@ -4,27 +4,22 @@
 
 # Comment to be posted to on first time issues
 newIssueWelcomeComment: |
- Thanks for opening your first issue here! This space is [protected by our Code of Conduct](https://publiclab.org/conduct) - and we're here to help.
- Please follow the issue template to help us help you 👍🎉😄
- If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can [make a gif](https://www.cockos.com/licecap/) too!
- Don't forget to join our [PublicLab Gitter channel](https://gitter.im/publiclab/publiclab) and our [ImageSequencer Gitter Channel](https://gitter.im/publiclab/image-sequencer) for some brainstorming discussions. 
+  Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄
+  If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can [make a gif](https://www.cockos.com/licecap/) too!
 # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
 
 # Comment to be posted to on PRs from first time contributors in your repository
 newPRWelcomeComment: |
- Thanks for opening this pull request! This space is [protected by our Code of Conduct](https://publiclab.org/conduct).
+ Thanks for opening this pull request!
  There may be some errors, **but don't worry!** We're here to help! 👍🎉😄
- Also please refer (https://github.com/publiclab/image-sequencer/blob/main/README.md) for installation help.
 # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
 
 # Comment to be posted to on pull requests merged by a first time user
 firstPRMergeComment: |
  Congrats on merging your first pull request! 🙌🎉⚡️ 
- Your code will be published to https://beta.sequencer.publiclab.org in a day or two. Please test out your work on this testing server and report back with a comment that all has gone well!
- In the meantime, can you tell us your Twitter handle so we can thank you properly also do join our weekly check-in to share your this week goal and the awesome work you did 😃. 
- Please find the link **pinned in the issue section**
- Now that you've completed this, you can help someone else take their first step! Try looking at this list of `first-timers-only` issues, and see if someone else is waiting for feedback, or even stuck! 😕
- People often get stuck at the same steps, so you might be able to help someone get unstuck, or help lead them to some documentation that'd help. Reach out and be encouraging and friendly! 😄 🎉  
+ Your code will be published to https://beta.sequencer.publiclab.org in a day or two. 
+ In the meantime, can you tell us your Twitter handle so we can thank you properly?
+ Now that you've completed this, you can help someone else take their first step!
  See: [Public Lab's coding community!](https://code.publiclab.org)
 
 # It is recommended to include as many gifs and emojis as possible

README.md

@@ -620,7 +620,8 @@ 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
-3. Overlay
-4. Blend
-5. Histogram
-6. WebGL Distort
+4. Overlay
+5. Text Overlay (Almost fixed)
+6. Blend
+7. Histogram
+8. WebGL Distort

examples/demo.css

@@ -1,8 +1,12 @@
 /* https://github.com/theleagueof/league-spartan */
 @font-face {
   font-family: 'League Spartan';
-  src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'),
-       url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff');
+  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
+  src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
+       url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
   font-weight: bold;
   font-style: normal;
 }
@@ -40,6 +44,7 @@ body > .container-fluid {
 .panel {
   margin-left: 20px;
   margin-right: 20px;
+  min-width:400px;
 }
 
 .mouse {
@@ -61,6 +66,7 @@ body > .container-fluid {
   border-radius: 8px;
   text-align: center;
   color: #444;
+  min-width:300px;
 }
 
 .dropzone input {
@@ -150,13 +156,6 @@ 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;
@@ -325,7 +324,7 @@ a.name-header{
   position: fixed;
   right: 2%;
   top: 5%;
-  color: gray;
+  color: lightgray;
 }
 /* Non float rightward alignment*/
 .right {

examples/demo.js

@@ -340,7 +340,6 @@ 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">
+    <header class="text-center" style="min-width: 450px">
       <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

examples/sw.js

@@ -1,4 +1,4 @@
-const staticCacheName = 'image-sequencer-static-v3.6.0';
+const staticCacheName = 'image-sequencer-static-v3.5.1';
 self.addEventListener('install', event => {
   console.log('Attempting to install service worker');
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-sequencer",
-  "version": "3.6.0",
+  "version": "3.5.1",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "src/ImageSequencer.js",
   "scripts": {

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.x, 'y': options.y || defaults.y, 'offset': -4 }  }
+      { 'name': 'overlay', 'options': { 'x': options.x || defaults.h, 'y': options.y || defaults.y, 'offset': -4 } }
     ];
   }, {
     infoJson: require('./info.json')

src/modules/Crop/Module.js

@@ -29,13 +29,11 @@ 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,13 +110,10 @@ function sobelFilter(pixels, x, y) {
  * @returns {Number} Category number of the given angle
  */
 function categorizeAngle(angle){
-  const pi = Math.PI;
-  angle = angle > 0 ? angle : pi - Math.abs(angle); // Diagonally flip the angle if it is negative (since edge remains the same)
-
-  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;
+  if ((angle >= -22.5 && angle <= 22.5) || (angle < -157.5 && angle >= -180)) return 1;
+  else if ((angle >= 22.5 && angle <= 67.5) || (angle < -112.5 && angle >= -157.5)) return 2;
+  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;
 
   /* Category Map
   * 1 => E-W
@@ -146,6 +143,8 @@ 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++) {
 
@@ -158,7 +157,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]);
@@ -182,6 +181,15 @@ 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,3 +1,6 @@
+const imagejs = require('imagejs'),
+  pixelSetter = require('../../util/pixelSetter'),
+  ndarray = require('ndarray');
 /*
  * Resize the image by given percentage value
  */
@@ -16,7 +19,44 @@ module.exports = function Resize(options, UI) {
     const step = this;
 
     function extraManipulation(pixels) {
-      return require('./Resize')(pixels, options);
+      // Value above 100% scales up, and below 100% scales down
+      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

@@ -1,44 +0,0 @@
-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;
-};