use image name as piskel name for image import

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

@@ -57,6 +57,9 @@
   };
 
   ns.ImageImport.prototype.createPiskelFromImage = function () {
+    var name = this.extractFileNameFromPath_(this.file_.name);
+    // Remove extension from filename.
+    name = name.replace(/\.[a-zA-Z]+$/, '');
     return new Promise(function (resolve, reject) {
       pskl.app.importService.newPiskelFromImage(
         this.importedImage_,
@@ -68,7 +71,8 @@
               this.resizeHeight.value : this.sanitizeInputValue_(this.frameSizeY, 1),
           frameOffsetX: this.sanitizeInputValue_(this.frameOffsetX, 0),
           frameOffsetY: this.sanitizeInputValue_(this.frameOffsetY, 0),
-          smoothing: !!this.smoothResize.checked
+          smoothing: !!this.smoothResize.checked,
+          name: name
         },
         resolve
       );

src/js/service/ImportService.js

@@ -28,24 +28,28 @@
   /**
    * Given an image object and some options, create a new Piskel and open it
    * for editing.
-   * @param {!Image} image
-   * @param {!Object} options
-   * @param {!string} options.importType - 'single' if not spritesheet
-   * @param {!number} options.frameSizeX
-   * @param {!number} options.frameSizeY
-   * @param {number} [options.frameOffsetX] only used in spritesheet imports.
-   * @param {number} [options.frameOffsetY] only used in spritesheet imports.
-   * @param {!boolean} options.smoothing
-   * @param {function} [onComplete]
+   * @param {Image} image
+   * @param {Object} options
+   *        - {String}  importType 'single' if not spritesheet
+   *        - {String}  name
+   *        - {Boolean} smoothing
+   *        - {Number}  frameSizeX
+   *        - {Number}  frameSizeY
+   *        - {Number}  frameOffsetX (only used in spritesheet imports)
+   *        - {Number}  frameOffsetY (only used in spritesheet imports)
+   * @param {Function} onComplete
+   *        Callback called when the new piskel has been created, with the new piskel
+   *        as single argument.
    */
   ns.ImportService.prototype.newPiskelFromImage = function (image, options, onComplete) {
     onComplete = onComplete || Constants.EMPTY_FUNCTION;
     var importType = options.importType;
+    var name = options.name;
+    var smoothing = options.smoothing;
     var frameSizeX = options.frameSizeX;
     var frameSizeY = options.frameSizeY;
     var frameOffsetX = options.frameOffsetX;
     var frameOffsetY = options.frameOffsetY;
-    var smoothing = options.smoothing;
 
     var gifLoader = new window.SuperGif({
       gif: image
@@ -60,11 +64,11 @@
         var piskel;
         if (importType === 'single' || images.length > 1) {
           // Single image import or animated gif
-          piskel = this.createPiskelFromImages_(images, frameSizeX, frameSizeY, smoothing);
+          piskel = this.createPiskelFromImages_(images, name, frameSizeX, frameSizeY, smoothing);
         } else {
           // Spritesheet
           var frameImages = this.createImagesFromSheet_(images[0], frameSizeX, frameSizeY, frameOffsetX, frameOffsetY);
-          piskel = this.createPiskelFromImages_(frameImages, frameSizeX, frameSizeY, smoothing);
+          piskel = this.createPiskelFromImages_(frameImages, name, frameSizeX, frameSizeY, smoothing);
         }
         onComplete(piskel);
       }.bind(this),
@@ -72,11 +76,11 @@
         var piskel;
         if (importType === 'single') {
           // Single image
-          piskel = this.createPiskelFromImages_([image], frameSizeX, frameSizeY, smoothing);
+          piskel = this.createPiskelFromImages_([image], name, frameSizeX, frameSizeY, smoothing);
         } else {
           // Spritesheet
           var frameImages = this.createImagesFromSheet_(image, frameSizeX, frameSizeY, frameOffsetX, frameOffsetY);
-          piskel = this.createPiskelFromImages_(frameImages, frameSizeX, frameSizeY, smoothing);
+          piskel = this.createPiskelFromImages_(frameImages, name, frameSizeX, frameSizeY, smoothing);
         }
         onComplete(piskel);
       }.bind(this)
@@ -111,11 +115,12 @@
    * @param {!boolean} smoothing
    * @private
    */
-  ns.ImportService.prototype.createPiskelFromImages_ = function (images,
+  ns.ImportService.prototype.createPiskelFromImages_ = function (images, name,
       frameSizeX, frameSizeY, smoothing) {
+    name = name || 'Imported piskel';
     var frames = this.createFramesFromImages_(images, frameSizeX, frameSizeY, smoothing);
     var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
-    var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
+    var descriptor = new pskl.model.piskel.Descriptor(name, '');
     return pskl.model.Piskel.fromLayers([layer], Constants.DEFAULT.FPS, descriptor);
   };
 

src/templates/dialogs/import.html

@@ -89,7 +89,7 @@
 <script type="text/template" id="import-meta-content">
   <div class="import-name">
     <span class="import-meta-label">Name</span>
-    <span class="import-meta-value" title={{name}}>{{name}}</span>
+    <span class="import-meta-value" title="{{name}}">{{name}}</span>
   </div>
   <div class="import-dimensions">
     <span class="import-meta-label">Dimensions</span>