Stops loading of blend-module when offset unavailable

examples/demo.css

@@ -196,13 +196,16 @@ h1 {
   overflow: auto;
 }
 
+.no-border {
+  border: 0px;
+}
 
 .savesequencemsg{
   display: none;
   text-align: center;
   }
 
-#stepRemovedNotification {
+#offset-notification,#remove-notification {
   background-color: #808b96;
   padding:4px;
   color:white;
@@ -221,10 +224,6 @@ h1 {
   margin-top: 20px;
 }
 
-.no-border {
-  border: 0px;
-}
-
 .i-over {
   position: absolute;
   left: 15px;

examples/index.html

@@ -23,6 +23,7 @@
   <script src="lib/intermediateHtmlStepUi.js" charset="utf-8"></script>
   <script src="lib/cache.js" charset="utf-8"></script>
   <script src="demo.js" charset="utf-8"></script>
+  <script src="lib/notification.js" charset="utf-8"></script>
   <!-- for crop module: -->
   <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
   <script src="gifshot.js" type="text/javascript"></script>

examples/lib/defaultHtmlStepUi.js

@@ -7,17 +7,7 @@
 // The variable 'step' stores useful data like input and
 // output values, step information.
 // See documetation for more details.
-function stepRemovedNotify() {
-  if ($('#stepRemovedNotification').length == 0) {
-    var notification = document.createElement('span');
-    notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> Step Removed ';
-    notification.id = 'stepRemovedNotification';
 
-    $('body').append(notification);
-  }
-
-  $('#stepRemovedNotification').fadeIn(500).delay(200).fadeOut(500);
-}
 function DefaultHtmlStepUi(_sequencer, options) {
 
   options = options || {};
@@ -50,7 +40,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var tools =
       '<div class="collapse"><div class="tools btn-group">\
-       <button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\
+       <button confirm="Are you sure?" class="remove btn btn btn-default">\
          <i class="fa fa-trash"></i>\
        </button>\
        <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
@@ -140,6 +130,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         .appendChild(
           parser.parseFromString(tools, "text/html").querySelector("div")
         );
+      $(step.ui.querySelectorAll(".remove")).on('click', function() {onNotify('Step Removed','remove-notification')});  
       $(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
 
       // Insert the step's UI in the right place
@@ -157,7 +148,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
     }
     $(step.ui.querySelector(".toggle")).on("click", (e) => {
       var className = e.target.className;
-      console.log("ele "+element)
       if(className=="fa fa-caret-up"){
         $(step.ui.querySelectorAll(".collapse")).show();
         e.target.className="fa fa-caret-down";
@@ -291,11 +281,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
     return step.imgElement;
   }
 
+  function onNotify(msg,id){
+    if ($('#'+id).length == 0) {
+      var notification = document.createElement('span');
+      notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
+      notification.id = id;
+
+      $('body').append(notification);
+    }
+
+    $('#'+id).fadeIn(500).delay(200).fadeOut(500);
+  }
+
   return {
     getPreview: getPreview,
     onSetup: onSetup,
     onComplete: onComplete,
     onRemove: onRemove,
-    onDraw: onDraw
+    onDraw: onDraw, 
+    onNotify: onNotify
   }
 }

examples/lib/notification.js

@@ -0,0 +1,11 @@
+function produceNotification(msg) { 
+    if ($('#notification-styles').length == 0) {
+      var notification = document.createElement('span');
+      notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
+      notification.id = 'notification-styles';
+
+      $('body').append(notification);
+    }
+
+    $('#notification-styles').fadeIn(500).delay(200).fadeOut(500);
+  }

index.js

@@ -69,6 +69,9 @@ if (program.saveSequence) {
       for (var output in step.info.outputs) {
         console.log("[" + program.step + "]: " + output + " = " + step[output]);
       }
+    },
+    onNotify: function(msg) {
+      console.log('\x1b[36m%s\x1b[0m','🌟  '+msg);
     }
   });
 

src/modules/Blend/Module.js

@@ -24,6 +24,12 @@ module.exports = function Dynamic(options, UI, util) {
         // save first image's pixels
         var priorStep = this.getStep(options.offset);
 
+        if (priorStep.output === undefined) {
+            this.output = input;
+            UI.onNotify('Offset Unavailable','offset-notification');
+            callback();
+        } 
+
         getPixels(priorStep.output.src, function(err, pixels) {
             options.firstImagePixels = pixels;
 

src/ui/UserInterface.js

@@ -53,6 +53,10 @@ module.exports = function UserInterface(events = {}) {
     }
   }
 
+  events.onNotify = events.onNotify || function(msg) {
+     console.log(msg);
+  }
+
   return events;
 
 }