Fixes crop module bug (#1019)

* Fixes crop module bug * Fixes crop functionality * Add looks like test for crop module
publiclab · Apr 18, 2019 · 2be7a3d · 2be7a3d
1 parent 6fa8b1b
commit 2be7a3d
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 10 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -36,10 +36,13 @@
 <body>
 
   <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+
   <link rel="stylesheet" href="demo.css">
   <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
   <link href="../node_modules/selectize/dist/css/selectize.default.css" rel="stylesheet">
   <!-- for crop module: -->
+  <!-- for crop module: -->
+  <link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
   <link href="./selectize.default.css" rel="stylesheet">
   <link rel="stylesheet" href="demo.css">
 

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
@@ -206,7 +206,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $(input)
         .data('initValue', $(input).val())
         .data('hasChangedBefore', false)
-        .on('input', function() {
+        .on('input change' , function() {
           $(this)
             .focus()
             .data('hasChangedBefore',

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "src/ImageSequencer.js",
   "scripts": {
     "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
-    "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/canvas-resize.js test/core/modules/QR.js | tap-spec; browserify test/core/modules/image-sequencer.js test/core/modules/chain.js test/core/modules/meta-modules.js test/core/modules/replace.js test/core/modules/import-export.js test/core/modules/run.js test/core/modules/dynamic-imports.js test/core/util/parse-input.js test/core/modules/benchmark.js| tape-run --render=\"tap-spec\"",
+    "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/canvas-resize.js test/core/modules/QR.js test/core/modules/crop.js | tap-spec; browserify test/core/modules/image-sequencer.js test/core/modules/chain.js test/core/modules/meta-modules.js test/core/modules/replace.js test/core/modules/import-export.js test/core/modules/run.js test/core/modules/dynamic-imports.js test/core/util/parse-input.js test/core/modules/benchmark.js| tape-run --render=\"tap-spec\"",
     "test-ui": "jasmine test/spec/*.js",
     "setup": "npm i && npm i -g grunt grunt-cli && grunt build",
     "start": "grunt serve"

diff --git a/src/modules/Crop/Crop.js b/src/modules/Crop/Crop.js
@@ -21,14 +21,21 @@ module.exports = function Crop(input,options,callback) {
     for(var i = 0; i < w ; i++){
       backgroundArray = backgroundArray.concat([backgroundColor[0],backgroundColor[1],backgroundColor[2],backgroundColor[3]]);
     }
-    var newarray = new Uint8Array(4*w*h);
+    // var newarray = new Uint8Array(4*w*h);
+    var array = []
     for (var n = oy; n < oy + h; n++) {
+      var offsetValue = 4*w*n;
       if(n<ih){
-      newarray.set(pixels.data.slice(n*4*iw + ox, n*4*iw + ox + 4*w),4*w*(n-oy));
+        var start = n*4*iw + ox*4;
+        var end = n*4*iw + ox*4 + 4*w;
+        var pushArray = Array.from(pixels.data.slice(start, end ))
+        array.push.apply(array,pushArray);
       } else {
-        newarray.set(backgroundArray,4*w*(n-oy));
+        array.push.apply(array,backgroundArray);
       }
     }
+
+    var newarray = Uint8Array.from(array);
     pixels.data = newarray;
     pixels.shape = [w,h,4];
     pixels.stride[1] = 4*w;

diff --git a/src/modules/Crop/Ui.js b/src/modules/Crop/Ui.js
@@ -42,6 +42,7 @@ module.exports = function CropModuleUi(step, ui) {
           converted[2],
           converted[3]
         );
+        $($(imgEl()).parents()[3]).find("input").trigger("change")
       }
     });
   }
@@ -77,7 +78,7 @@ module.exports = function CropModuleUi(step, ui) {
   }
 
   function setOptions(x1, y1, width, height) {
-    let options = $($(imgEl()).parents()[2]).find("input");
+    let options = $($(imgEl()).parents()[3]).find("input");
     options[0].value = x1;
     options[1].value = y1;
     options[2].value = width;

diff --git a/src/modules/Crop/info.json b/src/modules/Crop/info.json
@@ -4,22 +4,22 @@
   "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {
     "x": {
-      "type": "integer",
+      "type": "string",
       "desc": "X-position (measured from left) from where cropping starts",
       "default": 0
     },
     "y": {
-      "type": "integer",
+      "type": "string",
       "desc": "Y-position (measured from top) from where cropping starts",
       "default": 0
     },
     "w": {
-      "type": "integer",
+      "type": "string",
       "desc": "Width of crop",
       "default": "(50%)"
     },
     "h": {
-      "type": "integer",
+      "type": "string",
       "desc": "Height of crop",
       "default": "(50%)"
     },

diff --git a/test/core/modules/crop.js b/test/core/modules/crop.js