persist preview UI during import wizard

src/css/dialogs-import.css

@@ -13,14 +13,18 @@
 }
 
 .import-step-container {
+  display: flex;
   width: 100%;
   height: 100%;
-  padding: 10px;
   box-sizing: border-box;
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
   background: #444;
 }
 
+.import-step-content {
+  padding: 10px;
+}
+
 .import-step-buttons {
   position: absolute;
   bottom: 10px;
@@ -36,6 +40,10 @@
  * IMAGE IMPORT STEP
  */
 
+.import-image-container {
+  padding: 10px;
+}
+
 .import-image-loading {
   opacity: 0.3;
   pointer-events: none;
@@ -148,6 +156,14 @@
 
 .import-info {
   display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  max-width: 178px;
+  box-sizing: border-box;
+
+  padding: 10px;
+  border-right: 3px solid gold;
 }
 
 .import-preview canvas {
@@ -156,8 +172,7 @@
 }
 
 .import-meta {
-  width: 50%;
+  margin-top: 10px;
-  padding-left: 10px;
   box-sizing: border-box;
 
   /*center meta information horizontally*/
@@ -203,10 +218,6 @@
   color: #aaa;
 }
 
-.import-mode {
-  margin: 15px 0 20px 0;
-}
-
 .import-mode-title {
   margin-bottom: 10px
 }
@@ -228,10 +239,6 @@
 /**
  * ADJUST SIZE
  */
-.import-resize-info {
-  margin: 10px 0 20px 0;
-}
-
 .import-resize-anchor-info,
 .import-resize-option-label,
 .insert-mode-option-label {
@@ -242,6 +249,10 @@
   margin-bottom: 10px;
 }
 
+.import-resize-anchor {
+  margin-top: 20px;
+}
+
 .import-resize-option :checked + span {
   color: var(--highlight-color);
 }
@@ -255,9 +266,14 @@
  */
 
 .insert-mode-container {
+  margin-top: 20px;
   margin-bottom: 10px;
 }
 
-.insert-frame-container {
+.insert-frame-preview {
   margin: 10px 0;
 }
+
+.insert-frame-preview .frame-picker-wrapper {
+  height: 120px;
+}

src/js/controller/dialogs/importwizard/ImportWizard.js

@@ -52,6 +52,7 @@
     if (this.hasSingleImage_()) {
       this.wizard.goTo('IMAGE_IMPORT');
     } else if (this.hasSinglePiskelFile_()) {
+      // If a piskel file was provided we can directly go to
       pskl.utils.PiskelFileUtils.loadFromFile(this.mergeData.rawFiles[0],
         // onSuccess
         function (piskel) {
@@ -70,12 +71,12 @@
     }
   };
 
-  ns.ImportWizard.prototype.back = function (stepInstance) {
+  ns.ImportWizard.prototype.back = function () {
     this.wizard.back();
     this.wizard.getCurrentStep().instance.onShow();
   };
 
-  ns.ImportWizard.prototype.next = function (stepInstance) {
+  ns.ImportWizard.prototype.next = function () {
     var step = this.wizard.getCurrentStep();
 
     if (step.name === 'IMAGE_IMPORT') {
@@ -149,11 +150,7 @@
         this.piskelController.setPiskel(piskel);
         this.closeDialog();
       }
-    } else if (mode === ns.steps.SelectMode.MODES.NEW) {
-      console.log('import as new: not implemented yet');
     } else if (mode === ns.steps.SelectMode.MODES.MERGE) {
-      // Need to also fetch resize options
-      // and insert location option
       var merge = pskl.utils.MergeUtils.merge(this.piskelController.getPiskel(), piskel, {
         insertIndex: this.mergeData.insertIndex,
         insertMode: this.mergeData.insertMode,

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

@@ -38,6 +38,30 @@
     this.importController.back(this);
   };
 
-  ns.AbstractImportStep.prototype.onShow = Constants.EMPTY_FUNCTION;
+  ns.AbstractImportStep.prototype.onShow = function () {
+    var mergePiskel = this.mergeData.mergePiskel;
+    if (!mergePiskel) {
+      return;
+    }
+
+    if (!this.framePickerWidget) {
+      var framePickerContainer = this.container.querySelector('.import-preview');
+      this.framePickerWidget = new pskl.widgets.FramePicker(mergePiskel, framePickerContainer);
+      this.framePickerWidget.init();
+    } else if (this.framePickerWidget.piskel != mergePiskel) {
+      // If the piskel displayed by the frame picker is different from the previous one,
+      // refresh the widget.
+      this.framePickerWidget.piskel = mergePiskel;
+      this.framePickerWidget.setFrameIndex(1);
+    }
+
+    var metaHtml = pskl.utils.Template.getAndReplace('import-meta-content', {
+      name : mergePiskel.getDescriptor().name,
+      dimensions : pskl.utils.StringUtils.formatSize(mergePiskel.getWidth(), mergePiskel.getHeight()),
+      frames : mergePiskel.getFrameCount(),
+      layers : mergePiskel.getLayers().length
+    });
+    this.container.querySelector('.import-meta').innerHTML = metaHtml;
+  };
 
 })();

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

@@ -34,6 +34,7 @@
 
   ns.AdjustSize.prototype.onShow = function () {
     this.refresh_();
+    this.superclass.onShow.call(this);
   };
 
   ns.AdjustSize.prototype.refresh_ = function () {

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

@@ -15,13 +15,13 @@
   ns.InsertLocation.prototype.init = function () {
     this.superclass.init.call(this);
     this.framePreview = this.container.querySelector('.insert-frame-preview');
-    this.framePickerWidget = new pskl.widgets.FramePicker(
+    this.currentPiskelFramePickerWidget = new pskl.widgets.FramePicker(
       this.piskelController.getPiskel(), this.framePreview);
-    this.framePickerWidget.init();
+    this.currentPiskelFramePickerWidget.init();
 
     var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
-    this.framePickerWidget.setFrameIndex(currentFrameIndex + 1);
+    this.currentPiskelFramePickerWidget.setFrameIndex(currentFrameIndex + 1);
-    this.framePickerWidget.setFirstFrameIndex(0);
+    this.currentPiskelFramePickerWidget.setFirstFrameIndex(0);
 
     this.insertModeContainer = this.container.querySelector('.insert-mode-container');
     this.addEventListener(this.insertModeContainer, 'change', this.onInsertModeChange_);
@@ -33,25 +33,25 @@
     this.mergeData.insertMode = value;
 
     if (this.mergeData.insertMode === ns.InsertLocation.MODES.ADD) {
-      this.framePickerWidget.setFirstFrameIndex(0);
+      this.currentPiskelFramePickerWidget.setFirstFrameIndex(0);
     } else {
-      this.framePickerWidget.setFirstFrameIndex(1);
+      this.currentPiskelFramePickerWidget.setFirstFrameIndex(1);
     }
   };
 
   ns.InsertLocation.prototype.onShow = function () {
-    var count = this.mergeData.mergePiskel.getFrameCount();
+    // Nothing to do here!
-    this.container.querySelector('.insert-frames-count').innerText = count;
+    this.superclass.onShow.call(this);
   };
 
   ns.InsertLocation.prototype.onNextClick = function () {
-    var insertIndex = this.framePickerWidget.getFrameIndex();
+    var insertIndex = this.currentPiskelFramePickerWidget.getFrameIndex();
     this.mergeData.insertIndex = insertIndex;
     this.superclass.onNextClick.call(this);
   };
 
   ns.InsertLocation.prototype.destroy = function () {
-    this.framePickerWidget.destroy();
+    this.currentPiskelFramePickerWidget.destroy();
     this.superclass.destroy.call(this);
   };
 })();

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

@@ -6,7 +6,6 @@
   };
 
   ns.SelectMode.MODES = {
-    NEW : 'new',
     REPLACE : 'replace',
     MERGE : 'merge'
   };
@@ -25,6 +24,7 @@
 
   ns.SelectMode.prototype.onShow = function () {
     this.refresh_();
+    this.superclass.onShow.call(this);
   };
 
   ns.SelectMode.prototype.destroy = function () {
@@ -37,7 +37,6 @@
   ns.SelectMode.prototype.refresh_ = function () {
     var mergePiskel = this.mergeData.mergePiskel;
     if (mergePiskel) {
-      this.updateMergeFilePreview_();
       this.nextButton.removeAttribute('disabled');
     } else {
       this.nextButton.setAttribute('disabled', true);
@@ -52,32 +51,6 @@
     }
   };
 
-  ns.SelectMode.prototype.updateMergeFilePreview_ = function () {
-    var mergePiskel = this.mergeData.mergePiskel;
-
-    var previewFrame = pskl.utils.LayerUtils.mergeFrameAt(mergePiskel.getLayers(), 0);
-    var image = pskl.utils.FrameUtils.toImage(previewFrame);
-
-    if (!this.framePickerWidget) {
-      var framePickerContainer = this.container.querySelector('.import-preview');
-      this.framePickerWidget = new pskl.widgets.FramePicker(mergePiskel, framePickerContainer);
-      this.framePickerWidget.init();
-    } else if (this.framePickerWidget.piskel != mergePiskel) {
-      // If the piskel displayed by the frame picker is different from the previous one,
-      // refresh the widget.
-      this.framePickerWidget.piskel = mergePiskel;
-      this.framePickerWidget.setFrameIndex(1);
-    }
-
-    var metaHtml = pskl.utils.Template.getAndReplace('import-meta-content', {
-      name : mergePiskel.getDescriptor().name,
-      dimensions : pskl.utils.StringUtils.formatSize(mergePiskel.getWidth(), mergePiskel.getHeight()),
-      frames : mergePiskel.getFrameCount(),
-      layers : mergePiskel.getLayers().length
-    });
-    this.container.querySelector('.import-meta').innerHTML = metaHtml;
-  };
-
   ns.SelectMode.prototype.onImportModeChange_ = function () {
     this.mergeData.importMode = this.getSelectedMode_();
     this.refresh_();

src/templates/dialogs/import.html

@@ -9,8 +9,7 @@
 </script>
 
 <script type="text/template" id="import-image-import">
-<div class="import-step-container">
+<div class="import-step-container import-image-container">
-  <div>
   <form action="" method="POST" name="import-image-form">
     <div class="import-section">
       <span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
@@ -50,7 +49,6 @@
       <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
     </div>
   </form>
-  </div>
   <div class="import-step-buttons">
     <button class="import-cancel-button button">cancel</button>
     <button class="import-back-button button">back</button>
@@ -61,25 +59,21 @@
 
 <script type="text/template" id="import-select-mode">
 <div class="import-step-container">
-  <div class="import-mode-title">Preview the imported image</div>
   <div class="import-info">
     <div class="import-preview"></div>
     <div class="import-meta"></div>
   </div>
 
+  <div class="import-step-content">
     <div class="import-mode">
       <div class="import-mode-title">How do you want to import the new content?</div>
       <label class="import-mode-option">
         <input type="radio" checked="checked" name="import-mode" id="select-mode-replace" value="replace"/>
         <span>Replace your current sprite</span>
       </label>
-    <!-- label class="import-mode-option">
-      <input type="radio" name="import-mode" id="select-mode-new" value="new"/>
-      <span>Create a new sprite</span>
-    </label -->
       <label class="import-mode-option">
         <input type="radio" name="import-mode" id="select-mode-import" value="merge"/>
-      <span>Merge with your existing sprite</span>
+        <span>Merge with your current sprite</span>
       </label>
     </div>
 
@@ -89,12 +83,10 @@
       <button class="import-next-button button button-primary">next</button>
     </div>
   </div>
+</div>
 </script>
 
 <script type="text/template" id="import-meta-content">
-  <div class="import-meta-title">
-    <span class="import-meta-label">Imported content details</span>
-  </div>
   <div class="import-name">
     <span class="import-meta-label">Name</span>
     <span class="import-meta-value" title={{name}}>{{name}}</span>
@@ -115,6 +107,13 @@
 
 <script type="text/template" id="import-adjust-size">
 <div class="import-step-container">
+
+  <div class="import-info">
+    <div class="import-preview"></div>
+    <div class="import-meta"></div>
+  </div>
+
+  <div class="import-step-content">
     <div class="import-resize-info"></div>
     <div class="import-resize-anchor import-resize-section">
       <div class="import-resize-anchor-info"></div>
@@ -126,6 +125,7 @@
       <button class="import-next-button button button-primary">next</button>
     </div>
   </div>
+</div>
 </script>
 
 <script type="text/template" id="import-resize-bigger-partial">
@@ -159,10 +159,17 @@
 
 <script type="text/template" id="import-insert-location">
 <div class="import-step-container">
+  <div class="import-info">
+    <div class="import-preview"></div>
+    <div class="import-meta"></div>
+  </div>
+
+  <div class="import-step-content">
+    <div>Select a frame in your current sprite:</div>
+    <div class="insert-frame-preview"></div>
     <div class="insert-mode-container">
       <div class="insert-mode-option-label">
-      The imported animation contains <span class="insert-frames-count">X</span> frames.
+        How should the imported frames be inserted:
-      Select how the new frames should be inserted:
       </div>
       <label class="insert-mode-option">
         <input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/>
@@ -173,17 +180,13 @@
         <span>Insert in existing frames</span>
       </label>
     </div>
-  <div>Select the frame from which the new content will be added</div>
-  <div class="insert-frame-container">
-    <div class="insert-frame-preview"></div>
-    <div class="insert-frame-meta"></div>
-  </div>
     <div class="import-step-buttons">
       <button class="import-cancel-button button">cancel</button>
       <button class="import-back-button button">back</button>
       <button class="import-next-button button button-primary">import</button>
     </div>
   </div>
+</div>
 </script>
 
 <script type="text/template" id="import-invalid-file">