From 0db09433582cf188efe1fb82cf7165354f5f90fd Mon Sep 17 00:00:00 2001
From: aashna27 <aashna.mittal27@gmail.com>
Date: Mon, 22 Jul 2019 08:54:48 +0700
Subject: [PATCH] resize before loading previews (#1180)

* resize before loading previews

* min resize percentage calculated
---
 examples/lib/insertPreview.js | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/examples/lib/insertPreview.js b/examples/lib/insertPreview.js
index 6f95c0dd..46ba886e 100644
--- a/examples/lib/insertPreview.js
+++ b/examples/lib/insertPreview.js
@@ -23,7 +23,10 @@ function generatePreview(previewStepName, customValues, path, selector) {
       previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
     }
   }
-  previewSequencer.loadImage(path, loadPreview);
+  if(previewStepName === 'resize')
+    insertPreview(path);
+  else
+    previewSequencer.loadImage(path, loadPreview);
 }
 
 function updatePreviews(src, selector) {
@@ -44,11 +47,30 @@ function updatePreviews(src, selector) {
     }
   };
 
-  Object.keys(previewSequencerSteps).forEach(function (step, index) {
-    generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
-  });
+  var img = new Image();
+  img.onload = function(){
+    var height = img.height;
+    var width = img.width;
+
+    let percentage = (80 / height) * 100; //take the min resize value that fits the preview area => (new-width/orig_ht) - '80 as the preview area has 80*80 dimension
+    percentage = Math.max((80 / width) * 100, percentage); // make sure that one dimension doesn't resize greater, leading distorting preview-area fitting
+    percentage = Math.ceil(percentage);
+
+    var sequencer = ImageSequencer();
+
+    sequencer.loadImage(src, function(){
+      this.addSteps('resize', {['resize']: percentage + '%'});
+      this.run((src)=>{
+        Object.keys(previewSequencerSteps).forEach(function (step, index) {
+          generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
+        });
+      });
+    });
+  };
+  img.src = src;
 }
 
+
 module.exports = {
   generatePreview : generatePreview,
   updatePreviews : updatePreviews