cleanup

src/js/controller/settings/SettingsController.js

@@ -10,7 +10,7 @@
       template : 'templates/settings/resize.html',
       controller : ns.ResizeController
     },
-    'png' : {
+    'export' : {
       template : 'templates/settings/export.html',
       controller : ns.ImageExportController
     },

src/js/service/FileDropperService.js

@@ -4,6 +4,7 @@
   ns.FileDropperService = function (piskelController, drawingAreaContainer) {
     this.piskelController = piskelController;
     this.drawingAreaContainer = drawingAreaContainer;
+    this.dropPosition_ = null;
   };
 
   ns.FileDropperService.prototype.init = function () {
@@ -21,8 +22,10 @@
     event.preventDefault();
     event.stopPropagation();
 
-
+    this.dropPosition_ = {
-    this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event.clientX, event.clientY);
+      x : event.clientX,
+      y : event.clientY
+    };
 
     var files = event.dataTransfer.files;
     for (var i = 0; i < files.length ; i++) {
@@ -55,23 +58,13 @@
   };
 
   ns.FileDropperService.prototype.onImageLoaded_ = function () {
-    var frame = pskl.utils.FrameUtils.createFromImage(this.importedImage_);
+    var droppedFrame = pskl.utils.FrameUtils.createFromImage(this.importedImage_);
     var currentFrame = this.piskelController.getCurrentFrame();
 
-    var xCoord = this.coords_.x - Math.floor(frame.width/2);
+    var dropCoordinates = this.adjustDropPosition_(this.dropPosition_, droppedFrame);
-    var yCoord = this.coords_.y - Math.floor(frame.height/2);
-    xCoord = Math.max(0, xCoord);
-    yCoord = Math.max(0, yCoord);
 
-    if (frame.width <= currentFrame.width) {
-      xCoord = Math.min(xCoord, currentFrame.width - frame.width);
-    }
-
-    if (frame.height <= currentFrame.height) {
-      yCoord = Math.min(yCoord, currentFrame.height - frame.height);
-    }
     currentFrame.forEachPixel(function (color, x, y) {
-      var fColor = frame.getPixel(x-xCoord, y-yCoord);
+      var fColor = droppedFrame.getPixel(x-dropCoordinates.x, y-dropCoordinates.y);
       if (fColor && fColor != Constants.TRANSPARENT_COLOR) {
         currentFrame.setPixel(x, y, fColor);
       }
@@ -83,4 +76,28 @@
     });
   };
 
+  ns.FileDropperService.prototype.adjustDropPosition_ = function (position, droppedFrame) {
+    var framePosition = pskl.app.drawingController.getSpriteCoordinates(position.x, position.y);
+
+    var xCoord = framePosition.x - Math.floor(droppedFrame.width/2);
+    var yCoord = framePosition.y - Math.floor(droppedFrame.height/2);
+
+    xCoord = Math.max(0, xCoord);
+    yCoord = Math.max(0, yCoord);
+
+    var currentFrame = this.piskelController.getCurrentFrame();
+    if (droppedFrame.width <= currentFrame.width) {
+      xCoord = Math.min(xCoord, currentFrame.width - droppedFrame.width);
+    }
+
+    if (droppedFrame.height <= currentFrame.height) {
+      yCoord = Math.min(yCoord, currentFrame.height - droppedFrame.height);
+    }
+
+    return {
+      x : xCoord,
+      y : yCoord
+    };
+  };
+
 })();

src/templates/settings.html

@@ -23,7 +23,7 @@
   </div>
 
   <div
-    data-setting="png"
+    data-setting="export"
     class="tool-icon export-icon"
     title="Export as Image, as Spritesheet<br/>or as Animated GIF"
     rel="tooltip" data-placement="left">
@@ -35,19 +35,5 @@
     title="Import an existing image,<br/>an animated GIF or a .piskel file"
     rel="tooltip" data-placement="left">
   </div>
-<!--
-  <div
-    data-setting="localstorage"
-    class="tool-icon local-storage-icon"
-    title="Browse piskels saved locally"
-    rel="tooltip" data-placement="left">
-  </div> -->
 
-  <!-- <div
-    data-setting="gif"
-    class="tool-icon upload-cloud-icon"
-    title="Export Animation"
-    rel="tooltip" data-placement="left">
-    <span class="label">ANIM</span>
-  </div> -->
 </div>