added frames counter when importing them

Author: JeffVenancius

src/js/controller/dialogs/importwizard/steps/ImageImport.js

@@ -26,6 +26,8 @@
     this.resizeHeight = this.container.querySelector('[name=resize-height]');
     this.smoothResize =  this.container.querySelector('[name=smooth-resize-checkbox]');
 
+    this.framesH = this.container.querySelector('[name=frames-h]');
+    this.framesV = this.container.querySelector('[name=frames-v]');
     this.frameSizeX = this.container.querySelector('[name=frame-size-x]');
     this.frameSizeY = this.container.querySelector('[name=frame-size-y]');
     this.frameOffsetX = this.container.querySelector('[name=frame-offset-x]');
@@ -34,6 +36,8 @@
     this.addEventListener(this.singleImportType, 'change', this.onImportTypeChange_);
     this.addEventListener(this.sheetImportType, 'change', this.onImportTypeChange_);
 
+    this.addEventListener(this.framesH, 'keyup', this.onFrameInputKeyUp_);
+    this.addEventListener(this.framesV, 'keyup', this.onFrameInputKeyUp_);
     this.addEventListener(this.resizeWidth, 'keyup', this.onResizeInputKeyUp_);
     this.addEventListener(this.resizeHeight, 'keyup', this.onResizeInputKeyUp_);
     this.addEventListener(this.frameSizeX, 'keyup', this.onFrameInputKeyUp_);
@@ -73,6 +77,10 @@
       this.importedImage_,
       {
         importType: this.getImportType_(),
+        framesH: this.getImportType_() === 'single' ?
+          1 : this.sanitizeInputValue_(this.frameSizeX, 1),
+        frameV: this.getImportType_() === 'single' ?
+          1 : this.sanitizeInputValue_(this.frameSizeY, 1),
         frameSizeX: this.getImportType_() === 'single' ?
           this.resizeWidth.value : this.sanitizeInputValue_(this.frameSizeX, 1),
         frameSizeY: this.getImportType_() === 'single' ?
@@ -110,10 +118,34 @@
 
   ns.ImageImport.prototype.onFrameInputKeyUp_ = function (evt) {
     if (this.importedImage_) {
+      var targetName = evt.originalTarget.name;
+      if (!targetName.includes('offset')) {
+        this.synchronizeDivisions(targetName);
+      }
       this.synchronizeFrameFields_(evt.target.value);
     }
   };
 
+  ns.ImageImport.prototype.synchronizeDivisions = function (targetName) {
+    var divideBy = (targetName === 'frames-h' || targetName === 'frame-size-x') ?
+      this.importedImage_.width : this.importedImage_.height;
+
+    switch (targetName) {
+      case 'frames-h':
+        this.frameSizeX.value = Math.floor(divideBy / this.sanitizeInputValue_(this.framesH, 0));
+        break;
+      case 'frame-size-x':
+        this.framesH.value = Math.floor(divideBy / this.sanitizeInputValue_(this.frameSizeX, 1));
+        break;
+      case 'frames-v':
+        this.frameSizeY.value = Math.floor(divideBy / this.sanitizeInputValue_(this.framesV, 1));
+        break;
+      case 'frame-size-y':
+        this.framesV.value = Math.floor(divideBy / this.sanitizeInputValue_(this.frameSizeY, 1));
+        break;
+    }
+  };
+
   ns.ImageImport.prototype.synchronizeResizeFields_ = function (value, from) {
     value = parseInt(value, 10);
     if (isNaN(value)) {
@@ -139,6 +171,8 @@
     }
 
     // Parse the frame input values
+    var framesH = this.sanitizeInputValue_(this.framesH, 1);
+    var framesV = this.sanitizeInputValue_(this.framesV, 1);
     var frameSizeX = this.sanitizeInputValue_(this.frameSizeX, 1);
     var frameSizeY = this.sanitizeInputValue_(this.frameSizeY, 1);
     var frameOffsetX = this.sanitizeInputValue_(this.frameOffsetX, 0);
@@ -187,6 +221,8 @@
     this.resizeWidth.value = w;
     this.resizeHeight.value = h;
 
+    this.framesH.value = 1;
+    this.framesV.value = 1;
     this.frameSizeX.value = w;
     this.frameSizeY.value = h;
     this.frameOffsetX.value = 0;

src/templates/dialogs/import.html

@@ -38,6 +38,11 @@ <h3 class="dialog-head">
         Import as spritesheet
       </label>
     </div>
+    <div class="import-section import-subsection">
+      <span class="dialog-section-title">frames</span>
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="frames-h"/>x
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="frames-v"/>
+    </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Frame size</span>
       <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-x"/>x