Change dimension upon loading an Image through UI (#1395)

* Change dimension upon loading an Image

* Refactored changedimension

* Refactored changedimension

* Added Comments

* Added description

Co-authored-by: Harsh Khandeparkar <34770591+HarshKhandeparkar@users.noreply.github.com>
Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

examples/demo.js

@@ -312,6 +312,7 @@ window.onload = function () {
         step.imgElement.src = reader.result;
       
       insertPreview.updatePreviews(reader.result, document.querySelector('#addStep'));
+      DefaultHtmlStepUi(sequencer).updateDimensions(step);
     },
     onTakePhoto: function (url) {
       var step = sequencer.steps[0];

examples/lib/defaultHtmlStepUi.js

@@ -344,10 +344,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     $(function () {
       $('[data-toggle="tooltip"]').tooltip();
-      _sequencer.getImageDimensions(step.imgElement.src, function (dim) {
-        step.ui.querySelector('.' + step.name).attributes['data-original-title'].value = `<div style="text-align: center"><p>Image Width: ${dim.width}<br>Image Height: ${dim.height}</br></div>`;
-      });
-    })
+      updateDimensions(step);
+    });
 
     // Handle the wasm bolt display
 
@@ -357,6 +355,17 @@ function DefaultHtmlStepUi(_sequencer, options) {
     }
     else $step('.wasm-tooltip').fadeOut();
   }
+  /**
+   * @description Updates Dimension of the image 
+   * @param {Object} step  - Current Step
+   * @returns {void}
+   *  
+   */
+  function updateDimensions(step){
+    _sequencer.getImageDimensions(step.imgElement.src, function (dim) {
+      step.ui.querySelector('.' + step.name).attributes['data-original-title'].value = `<div style="text-align: center"><p>Image Width: ${dim.width}<br>Image Height: ${dim.height}</br></div>`;
+    });
+  }
 
   /**
    * @method imageHover
@@ -427,7 +436,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
     onRemove: onRemove,
     onDraw: onDraw,
     notify: notify,
-    imageHover: imageHover
+    imageHover: imageHover,
+    updateDimensions: updateDimensions
   };
 }