image drop proto

css/piskel-style-packaged-2014-07-12-12-20.css

@@ -977,11 +977,11 @@ body {
   color:gold;
 }
 
-.tools-tooltip-modifier {
+.tools-tooltip-descriptor {
   color:#999;
 }
 
-.tools-tooltip-modifier-button {
+.tools-tooltip-descriptor-button {
   padding:2px;
   border:1px Solid #999;
   font-size:0.8em;

index.html

@@ -28,11 +28,11 @@
   <!-- do not delete, do not move :) -->
   <!--body-main-start-->
   <div id="main-wrapper" class="main-wrapper">
-    <iframe src="templates-2014-07-09-12-49/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+    <iframe src="templates-2014-07-12-12-20/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
 
     <div id="column-wrapper" class="column-wrapper">
       <div class='column left-column'>
-        <iframe src="templates-2014-07-09-12-49/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-12-12-20/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
       </div>
 
       <div class='column main-column'>
@@ -42,25 +42,25 @@
       </div>
 
       <div class="column right-column">
-        <iframe src="templates-2014-07-09-12-49/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates-2014-07-09-12-49/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates-2014-07-09-12-49/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-12-12-20/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-12-12-20/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-12-12-20/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="pull-bottom cursor-coordinates"></div>
       </div>
     </div>
 
     <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
       <div class="sticky-section-wrap">
-        <iframe src="templates-2014-07-09-12-49/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-12-12-20/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="drawer vertical-centerer">
           <div class="drawer-content" id="drawer-container">
-            <iframe src="templates-2014-07-09-12-49/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates-2014-07-09-12-49/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates-2014-07-09-12-49/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates-2014-07-09-12-49/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates-2014-07-09-12-49/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates-2014-07-09-12-49/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates-2014-07-09-12-49/settings/export-png.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-12-12-20/settings/export-png.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>
       </div>
@@ -69,11 +69,11 @@
 
   <div id="dialog-container-wrapper">
     <div id="dialog-container">
-      <iframe src="templates-2014-07-09-12-49/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates-2014-07-12-12-20/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
     </div>
   </div>
 
-  <iframe src="templates-2014-07-09-12-49/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  <iframe src="templates-2014-07-12-12-20/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <!--body-main-end-->
   <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
   <!-- do not delete, do not move :) -->

js/piskel-packaged-2014-07-12-12-20.js

@@ -11973,7 +11973,8 @@ if (typeof Function.prototype.bind !== "function") {
     isIE : /MSIE/i.test( ua ),
     isIE11 : /trident/i.test( ua ),
     isChrome : /Chrome/i.test( ua ),
-    isFirefox : /Firefox/i.test( ua )
+    isFirefox : /Firefox/i.test( ua ),
+    isMac : /Mac/.test( ua )
   };
 
   ns.UserAgent.version = (function () {
@@ -12661,15 +12662,19 @@ if (typeof Function.prototype.bind !== "function") {
   };
 })();;(function () {
   var ns = $.namespace("pskl.utils");
+  var templates = {};
 
   ns.Template = {
     get : function (templateId) {
-      var template = document.getElementById(templateId);
-      if (template) {
-        return template.innerHTML;
-      } else {
-        console.error("Could not find template for id :", templateId);
+      if (!templates[templateId]) {
+        var template = document.getElementById(templateId);
+        if (template) {
+          templates[templateId] = template.innerHTML;
+        } else {
+          console.error("Could not find template for id :", templateId);
+        }
       }
+      return templates[templateId];
     },
 
     createFromHTML : function (html) {
@@ -16136,7 +16141,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
 
     pskl.app.shortcutService.addShortcut('ctrl+V', this.paste.bind(this));
-    pskl.app.shortcutService.addShortcut('ctrl+shift+V', this.pasteOpaqueOnly.bind(this));
     pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
     pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
     pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
@@ -16209,13 +16213,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
   };
 
   ns.SelectionManager.prototype.paste = function() {
-    if(this.currentSelection && this.currentSelection.hasPastedContent) {
-      var pixels = this.currentSelection.pixels;
-      this.pastePixels(pixels);
-    }
-  };
-
-  ns.SelectionManager.prototype.pasteOpaqueOnly = function() {
     if(this.currentSelection && this.currentSelection.hasPastedContent) {
       var pixels = this.currentSelection.pixels;
       var opaquePixels = pixels.filter(function (p) {
@@ -18430,7 +18427,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
       toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
       toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
       toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
-      toDescriptor('colorSwap', 'F', new pskl.drawingtools.ColorSwap()),
+      toDescriptor('colorSwap', 'A', new pskl.drawingtools.ColorSwap()),
       toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
       toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
       toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),
@@ -18551,19 +18548,10 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     return pskl.utils.Template.replace(tpl, {
       cssclass : classList.join(' '),
       toolid : toolId,
-      title : this.getTooltipText_(tool)
+      title : tool.instance.getTooltipText(tool.shortcut)
     });
   };
 
-  ns.ToolController.prototype.getTooltipText_ = function (tool) {
-    var shortcutMarkup = "<span class='tools-tooltip-shortcut'>("+tool.shortcut+")</span>";
-    if (tool.instance.helpText.indexOf('{{shortcut}}') !== -1) {
-      return tool.instance.helpText.replace('{{shortcut}}', shortcutMarkup);
-    } else {
-      return tool.instance.helpText + ' ' + shortcutMarkup;
-    }
-  };
-
   ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
     for(var i = 0 ; i < this.tools.length ; i++) {
       pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
@@ -20853,7 +20841,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
   };
 
   ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
-    return this.isMac_() ? evt.metaKey : evt.ctrlKey;
+    return pskl.utils.UserAgent.isMac ? evt.metaKey : evt.ctrlKey;
   };
 
   ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
@@ -20863,10 +20851,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
   ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
     return evt.altKey;
   };
-
-  ns.ShortcutService.prototype.isMac_ = function () {
-    return navigator.appVersion.indexOf("Mac") != -1;
-  };
 })();;(function () {
   var specialKeys = {
     191 : "?",
@@ -20951,6 +20935,9 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
   };
 
   ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
+    if (pskl.utils.UserAgent.isMac) {
+      shortcut = shortcut.replace('ctrl', 'cmd');
+    }
     return {
       'shortcut' : shortcut,
       'description' : description,
@@ -20980,7 +20967,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
 
   ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
     var descriptors = pskl.app.toolController.tools.map(function (tool) {
-      return this.toDescriptor_(tool.shortcut, tool.instance.helpText, 'tool-icon ' + tool.instance.toolId);
+      return this.toDescriptor_(tool.shortcut, tool.instance.getHelpText(), 'tool-icon ' + tool.instance.toolId);
     }.bind(this));
 
     this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');
@@ -21102,6 +21089,75 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     // TODO : only fire if there was a change
     $.publish(Events.CURRENT_COLORS_UPDATED, colors);
   };
+})();;(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.ImageDropperService = function (piskelController, drawingAreaContainer) {
+    this.piskelController = piskelController;
+    this.drawingAreaContainer = drawingAreaContainer;
+  };
+
+  ns.ImageDropperService.prototype.init = function () {
+    document.body.addEventListener('drop', this.onFileDrop.bind(this), false);
+    document.body.addEventListener('dragover', this.onFileDragOver.bind(this), false);
+  };
+
+  ns.ImageDropperService.prototype.onFileDrop = function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // FIXME : Ahah this is horrible
+    this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event);
+
+    var files = event.dataTransfer.files;
+
+    for (var i = 0; i < files.length ; i++) {
+      var file = files[i];
+      var isImage = file.type.indexOf('image') === 0;
+      if (isImage) {
+        this.readImageFile_(file);
+      }
+    }
+  };
+
+  ns.ImageDropperService.prototype.onFileDragOver = function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+  };
+
+
+  ns.ImageDropperService.prototype.readImageFile_ = function (imageFile) {
+    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
+  };
+
+  ns.ImageDropperService.prototype.processImageSource_ = function (imageSource) {
+    this.importedImage_ = new Image();
+    this.importedImage_.onload = this.onImageLoaded_.bind(this);
+    this.importedImage_.src = imageSource;
+  };
+
+  ns.ImageDropperService.prototype.onImageLoaded_ = function () {
+    var frame = pskl.utils.FrameUtils.createFromImage(this.importedImage_);
+    var currentFrame = this.piskelController.getCurrentFrame();
+
+    var xCoord = this.coords_.x - Math.floor(frame.width/2);
+    var yCoord = this.coords_.y - Math.floor(frame.height/2);
+    xCoord = Math.max(0, xCoord);
+    yCoord = Math.max(0, yCoord);
+    currentFrame.forEachPixel(function (color, x, y) {
+      var fColor = frame.getPixel(x-xCoord, y-yCoord);
+      if (fColor && fColor != Constants.TRANSPARENT_COLOR) {
+        currentFrame.setPixel(x, y, fColor);
+      }
+    });
+
+    $.publish(Events.PISKEL_RESET);
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.SNAPSHOT
+    });
+  };
+
 })();;/**
  * @provide pskl.drawingtools.BaseTool
  *
@@ -21147,7 +21203,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
       try {
         overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
       } catch (e) {
-        console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
+        window.console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
       }
       this.highlightedPixelRow = null;
       this.highlightedPixelCol = null;
@@ -21162,11 +21218,45 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     });
   };
 
+  ns.BaseTool.prototype.getHelpText = function() {
+    return this.shortHelpText || this.helpText;
+  };
+
+  ns.BaseTool.prototype.getTooltipText = function(shortcut) {
+    var tpl = pskl.utils.Template.get('drawing-tool-tooltip-container-template');
+
+    var descriptors = "";
+    if (Array.isArray(this.tooltipDescriptors)) {
+      this.tooltipDescriptors.forEach(function (descriptor) {
+        descriptors += this.getTooltipDescription(descriptor);
+      }.bind(this));
+    }
+
+    return pskl.utils.Template.replace(tpl, {
+      helptext : this.getHelpText(),
+      shortcut : shortcut,
+      descriptors : descriptors
+    });
+  };
+
+  ns.BaseTool.prototype.getTooltipDescription = function(descriptor) {
+    var tpl;
+    if (descriptor.key) {
+      tpl = pskl.utils.Template.get('drawing-tool-tooltip-descriptor-template');
+      descriptor.key = descriptor.key.toUpperCase();
+      if (pskl.utils.UserAgent.isMac) {
+        descriptor.key = descriptor.key.replace('CTRL', 'CMD');
+      }
+    } else {
+      tpl = pskl.utils.Template.get('drawing-tool-tooltip-descriptor-simple-template');
+    }
+    return pskl.utils.Template.replace(tpl, descriptor);
+  };
 
   ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
 
   /**
-   * Bresenham line algorihtm: Get an array of pixels from
+   * Bresenham line algorithm: Get an array of pixels from
    * start and end coordinates.
    *
    * http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
@@ -21216,6 +21306,10 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     // Shapes's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
+
+    this.tooltipDescriptors = [
+      {key : 'shift', description : 'Keep 1 to 1 ratio'}
+    ];
   };
 
   pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);
@@ -21412,13 +21506,12 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     this.superclass.constructor.call(this);
     this.toolId = "tool-lighten";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Lighten {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Darken</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Apply only once per pixel</span><br/>",
-      "</div>"
-    ].join("");
+    this.helpText = "Lighten";
+
+    this.tooltipDescriptors = [
+      {key : 'ctrl', description : 'Darken'},
+      {key : 'shift', description : 'Apply only once per pixel'}
+    ];
 
     this.resetUsedPixels_();
   };
@@ -21439,7 +21532,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     var frameColor = frame.getPixel(col, row);
     var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
 
-    var isDarken = event.ctrlKey || event.cmdKey;
+    var isDarken = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
     var isSinglePass = event.shiftKey;
 
     var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
@@ -21481,15 +21574,12 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     this.superclass.constructor.call(this);
 
     this.toolId = "tool-vertical-mirror-pen";
-    this.helpText = "Vertical Mirror pen (CTRL for Horizontal, SHIFT for both)";
+    this.helpText = "Vertical Mirror pen";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Vertical Mirror pen {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Use horizontal axis</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Use horizontal and vertical axis</span><br/>",
-      "</div>"
-    ].join("");
+    this.tooltipDescriptors = [
+      {key : 'ctrl', description : 'Use horizontal axis'},
+      {key : 'shift', description : 'Use horizontal and vertical axis'}
+    ];
   };
 
   pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
@@ -21514,11 +21604,12 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     var mirroredCol = this.getSymmetricCol_(col, frame);
     var mirroredRow = this.getSymmetricRow_(row, frame);
 
-    if (!event.ctrlKey) {
+    var hasCtrlKey = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
+    if (!hasCtrlKey) {
       this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
     }
 
-    if (event.shiftKey || event.ctrlKey) {
+    if (event.shiftKey || hasCtrlKey) {
       this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
     }
 
@@ -21712,12 +21803,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
 
     this.toolId = "tool-rectangle";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Rectangle tool {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Keep 1 to 1 ratio</span><br/>",
-      "</div>"
-    ].join("");
+    this.shortHelpText = "Rectangle tool";
   };
 
   pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
@@ -21743,12 +21829,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
 
     this.toolId = "tool-circle";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Circle tool {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Keep 1 to 1 ratio</span><br/>",
-      "</div>"
-    ].join("");
+    this.helpText = "Circle tool";
   };
 
   pskl.utils.inherit(ns.Circle, ns.ShapeTool);
@@ -21881,6 +21962,12 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     this.startRow = null;
 
     this.selection = null;
+
+    this.tooltipDescriptors = [
+      {description : "Drag the selection to move it. You may switch to other layers and frames."},
+      {key : 'ctrl+c', description : 'Copy the selected area'},
+      {key : 'ctrl+v', description : 'Paste the copied area'}
+    ];
   };
 
   pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
@@ -22030,14 +22117,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
   ns.RectangleSelect = function() {
     this.toolId = "tool-rectangle-select";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Rectangle selection {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'>Drag the selection to move it. You may switch to other layers and frames.</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+C</span>Copy the selected area</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+V</span>Paste the copied area</span><br/>",
-      "</div>"
-    ].join("");
+    this.helpText = "Rectangle selection";
 
     ns.BaseSelect.call(this);
     this.hasSelection = false;
@@ -22097,14 +22177,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
   ns.ShapeSelect = function() {
     this.toolId = "tool-shape-select";
 
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Shape selection {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'>Drag the selection to move it. You may switch to other layers and frames.</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+C</span>Copy the selected area</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+V</span>Paste the copied area</span><br/>",
-      "</div>"
-    ].join("");
+    this.helpText = "Shape selection";
 
     ns.BaseSelect.call(this);
   };
@@ -22169,13 +22242,13 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
 
   ns.ColorSwap = function() {
     this.toolId = "tool-colorswap";
-    this.helpText = [
-      "<div class='tools-tooltip-container'>",
-      "Paint all pixels of the same color {{shortcut}}<br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Apply to all layers</span><br/>",
-      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Apply to all frames</span><br/>",
-      "</div>"
-    ].join("");
+
+    this.helpText = "Paint all pixels of the same color";
+
+    this.tooltipDescriptors = [
+      {key : 'ctrl', description : 'Apply to all layers'},
+      {key : 'shift', description : 'Apply to all frames'}
+    ];
   };
 
   pskl.utils.inherit(ns.ColorSwap, ns.BaseTool);
@@ -22187,7 +22260,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
 
-      var allLayers = event.ctrlKey;
+      var allLayers = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
       var allFrames = event.shiftKey;
 
       this.swapColors(sampledColor, color, allLayers, allFrames);
@@ -22325,6 +22398,9 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
       this.beforeUnloadService = new pskl.service.BeforeUnloadService(this.piskelController);
       this.beforeUnloadService.init();
 
+      this.imageDropperService = new pskl.service.ImageDropperService(this.piskelController, $('#drawing-canvas-container').get(0));
+      this.imageDropperService.init();
+
 
       if (this.isAppEngineVersion) {
         this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);

piskel-boot-0.1.0.js

@@ -1,6 +1,6 @@
 (function () {
 
-  var version = '-2014-07-09-12-49';
+  var version = '-2014-07-12-12-20';
   var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
   if (versionHasNotBeenReplaced)  {
     version = '';

templates-2014-07-08-08-06/drawing-tools.html

@@ -1,34 +0,0 @@
-<div class="sticky-section left-sticky-section" id="tool-section">
-  <div class="sticky-section-wrap">
-    <div class="vertical-centerer">
-      <script type="text/template" id="drawing-tool-item-template">
-        <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
-      </script>
-      <ul id="tools-container" class="tools-wrapper"></ul>
-      <div class="palette-wrapper">
-        <div
-          class="tool-icon tool-color-picker"
-          title="Primary - left mouse button"
-          rel="tooltip"
-          data-placement="right"
-        >
-          <input id="color-picker" class="color" type="text"/>
-        </div>
-        <div
-          class="tool-icon tool-color-picker"
-          title="Secondary - right mouse button"
-          rel="tooltip"
-          data-placement="right"
-        >
-          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
-        </div>
-        <div
-          class="swap-colors-icon"
-          title="Swap colors (X)"
-          rel="tooltip"
-          data-placement="right"
-        ></div>
-      </div>
-    </div>
-  </div>
-</div>

templates-2014-07-09-12-49/cheatsheet.html

@@ -1,24 +0,0 @@
-<div id="cheatsheet-wrapper" style="display:none">
-  <div class="cheatsheet-container">
-    <div class="cheatsheet-section">
-      <h3>Tool shortcuts</h3>
-      <ul class="cheatsheet-tool-shortcuts"></ul>
-    </div>
-    <div class="cheatsheet-section">
-      <h3>Misc shortcuts</h3>
-      <ul class="cheatsheet-misc-shortcuts"></ul>
-    </div>
-    <div class="cheatsheet-section">
-      <h3>Selection shortcuts</h3>
-      <ul class="cheatsheet-selection-shortcuts"></ul>
-    </div>
-  </div>
-</div>
-<span class="cheatsheet-link">Keyboard shortcuts</a>
-<script type="text/template" id="cheatsheet-shortcut-template">
-  <li class="cheatsheet-shortcut">
-    <div class="cheatsheet-icon {{shortcutIcon}}"></div>
-    <span class="cheatsheet-key">{{shortcutKey}}</span>
-    <span class="cheatsheet-description">{{shortcutDescription}}</span>
-  </li>
-</script>

templates-2014-07-09-12-49/dialogs/manage-palettes.html

@@ -1,57 +0,0 @@
-<div class="palette-manager-wrapper">
-  <h3 class="palette-manager-head">
-    Palette manager
-    <span class="palette-manager-close">X</span>
-  </h3>
-  <div class="palette-manager-body">
-    <div class="palette-manager-drawer">
-      <div class="palette-manager-actions">
-        <button type="button" class="palette-manager-actions-button button " data-action="create">Create</button>
-        <button type="button" class="palette-manager-actions-button button " data-action="save-all">Save all</button>
-      </div>
-      <ul class="palette-manager-list">
-      </ul>
-    </div>
-    <div class="palette-manager-details">
-      <div class="palette-manager-details-head"></div>
-      <div class="palette-manager-details-body"></div>
-    </div>
-  </div>
-</div>
-
-<script type="text/template" id="palette-details-head-template">
-  <span class="palette-manager-details-head-name">{{name}}</span>
-  <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
-  <div class="palette-manager-details-head-actions">
-    <button class="palette-manager-palette-button button button-primary" {{save:disabled}} data-action="save" type="button">Save</button>
-    <button class="palette-manager-palette-button button " {{revert:disabled}} data-action="revert" type="button">Revert</button>
-    <button class="palette-manager-palette-button button " {{delete:disabled}} data-action="delete" type="button">Delete</button>
-  </div>
-</script>
-
-<script type="text/template" id="palette-color-card-template">
-  <div class="palette-manager-color-card" data-color-id="{{colorId}}">
-    <span class="palette-manager-delete-card" title="remove this color">X</span>
-    <div class="palette-manager-color-square" style="background-color:{{hex}}"></div>
-    <div class="palette-manager-color-details allow-user-select">
-      <ul>
-        <li>{{hex}}</li>
-        <li>{{rgb}}</li>
-        <li>{{hsl}}</li>
-      </ul>
-    </div>
-  </div>
-</script>
-
-<script type="text/template" id="palette-new-color-template">
-  <div class="palette-manager-color-card {{classname}}">
-    <div class="palette-manager-color-square">Add</div>
-    <div class="palette-manager-color-details">
-      <ul>
-        <li>Hex</li>
-        <li>RGB</li>
-        <li>HSL</li>
-      </ul>
-    </div>
-  </div>
-</script>

templates-2014-07-09-12-49/drawing-tools.html

@@ -1,34 +0,0 @@
-<div class="sticky-section left-sticky-section" id="tool-section">
-  <div class="sticky-section-wrap">
-    <div class="vertical-centerer">
-      <script type="text/template" id="drawing-tool-item-template">
-        <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
-      </script>
-      <ul id="tools-container" class="tools-wrapper"></ul>
-      <div class="palette-wrapper">
-        <div
-          class="tool-icon tool-color-picker"
-          title="Primary - left mouse button"
-          rel="tooltip"
-          data-placement="right"
-        >
-          <input id="color-picker" class="color" type="text"/>
-        </div>
-        <div
-          class="tool-icon tool-color-picker"
-          title="Secondary - right mouse button"
-          rel="tooltip"
-          data-placement="right"
-        >
-          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
-        </div>
-        <div
-          class="swap-colors-icon"
-          title="Swap colors (X)"
-          rel="tooltip"
-          data-placement="right"
-        ></div>
-      </div>
-    </div>
-  </div>
-</div>

templates-2014-07-09-12-49/frames-list.html

@@ -1,7 +0,0 @@
-<div id="preview-list-wrapper" class="preview-list-wrapper">
-  <div id="preview-list-scroller" class="preview-list-scroller">
-    <ul class="preview-list" id="preview-list"></ul>
-  </div>
-  <div class="top-overflow"></div>
-  <div class="bottom-overflow"></div>
-</div>

templates-2014-07-09-12-49/layers-list.html

@@ -1,20 +0,0 @@
-<div class="toolbox-container layers-list-container">
-  <h3 class="toolbox-title layers-title">Layers
-    <div title="Toggle layer preview (alt+L)"
-         rel="tooltip"
-         data-placement="top"
-         class="layers-toggle-preview piskel-icon-eye"></div>
-  </h3>
-  <div class="toolbox-button-container layers-button-container">
-    <button class="button toolbox-button" data-action="add"  >Add</button>
-    <button class="button toolbox-button" data-action="delete"  >Delete</button>
-    <button class="button toolbox-button layers-button-arrow" data-action="up"   >&#8593;</button>
-    <button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
-  </div>
-  <script type="text/template" id="layer-item-template">
-    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
-      <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
-    </li>
-  </script>
-  <ul class="layers-list"></ul>
-</div>

templates-2014-07-09-12-49/palettes-list.html

@@ -1,19 +0,0 @@
-<div class="toolbox-container palettes-list-container">
-  <h3 class="toolbox-title palettes-title" style="overflow:hidden">
-    <span style="line-height:24px ">Palettes</span>
-    <select class="palettes-list-select">
-      <option value="__current-colors">Current colors</option>
-      <option value="__manage-palettes">Create custom palettes</option>
-      <optgroup class="palettes-list-select-group" label="Custom palettes">
-      </optgroup>
-    </select>
-  </h3>
-  <div class="palettes-list-colors"></div>
-  <script type="text/template" id="palette-color-template">
-    <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
-      <div data-color="{{color}}" style="background:{{color}}"></div>
-    </div>
-  </script>
-</div>
-
-

templates-2014-07-09-12-49/preview.html

@@ -1,13 +0,0 @@
-<div id="animated-preview-container" class="preview-container">
-  <div id="animated-preview-canvas-container" class="canvas-container">
-    <div class="canvas-background"></div>
-  </div>
-  <div>
-    <div title="Toggle onion skin (alt+O)"
-         rel="tooltip"
-         data-placement="bottom"
-         class="piskel-icon-onion preview-toggle-onion-skin"></div>
-    <span id="display-fps" class="display-fps"></span>
-    <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
-  </div>
-</div>

templates-2014-07-09-12-49/settings.html

@@ -1,52 +0,0 @@
-<div class="vertical-centerer">
-  <div
-    data-setting="save"
-    class="tool-icon save-icon"
-    title="Save to gallery"
-    rel="tooltip" data-placement="left" >
-  </div>
-
-  <div
-    data-setting="user"
-    class="tool-icon gear-icon"
-    title="Preferences"
-    rel="tooltip" data-placement="left">
-  </div>
-
-  <div
-    data-setting="resize"
-    class="tool-icon resize-icon"
-    title="Resize"
-    rel="tooltip" data-placement="left">
-  </div>
-
-  <div
-    data-setting="import"
-    class="tool-icon import-icon"
-    title="Import an existing picture"
-    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
-    data-setting="png"
-    class="tool-icon upload-cloud-icon"
-    title="Export Spritesheet"
-    rel="tooltip" data-placement="left">
-    <span class="label">SHEET</span>
-  </div>
-</div>

templates-2014-07-09-12-49/settings/application.html

@@ -1,38 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Canvas settings:
-  </div>
-  <div class="settings-item">
-    <label>Background:</label>
-    <div id="background-picker-wrapper" class="background-picker-wrapper">
-      <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
-            rel="tooltip" data-placement="bottom" title="light / high contrast">
-      </div>
-      <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
-            rel="tooltip" data-placement="bottom" title="medium / high contrast">
-      </div>
-      <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
-            rel="tooltip" data-placement="bottom" title="medium / low contrast">
-      </div>
-      <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
-            rel="tooltip" data-placement="bottom" title="dark / low contrast">
-      </div>
-    </div>
-  </div>
-  <div class="settings-item">
-    <label for="grid-width">Grid :</label>
-    <select id="grid-width">
-      <option value="0">Disabled</option>
-      <option value="1">Enabled - 1px wide</option>
-      <option value="2">Enabled - 2px wide</option>
-      <option value="3">Enabled - 3px wide</option>
-      <option value="4">Enabled - 4px wide</option>
-    </select>
-  </div>
-
-  <!-- <div class="settings-item">
-    <label for="tiled-preview">Display tiled preview :</label>
-    <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
-  </div> -->
-</div>
-

templates-2014-07-09-12-49/settings/export-gif.html

@@ -1,22 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Export to Animated GIF
-  </div>
-  <div class="settings-item">
-    <form action="" method="POST" class="gif-export-form">
-      <label>Select resolution:</label>
-      <script type="text/template" id="gif-export-radio-template">
-          <label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
-          {{label}}</label>
-      </script>
-      <div class="gif-export-radio-group"></div>
-
-      <button type="button" class="button button-primary gif-download-button">Download GIF</button>
-      <button type="button" class="button button gif-upload-button">Export online</button>
-    </form>
-    <span class="gif-export-progress-status"></span>
-    <div class="gif-export-progress-bar"></div>
-    <div class="gif-export-preview"></div>
-    <div class="gif-upload-status"></div>
-  </div>
-</div>

templates-2014-07-09-12-49/settings/export-png.html

@@ -1,23 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Export Spritesheet as PNG
-  </div>
-  <div class="settings-item">
-    <span>Preview : </span>
-    <div class="png-export-preview"></div>
-    <div class="png-export-radio-group"></div>
-    <button type="button" class="button button-primary png-download-button">Download PNG</button>
-    <button type="button" class="button png-upload-button">Export online</button>
-    <!-- <input type="button" class="button png-download-button" value="Download" /> -->
-    <div class="png-upload-status"></div>
-  </div>
-  <div class="settings-title">
-    Export Spritesheet as ZIP
-  </div>
-  <div class="settings-item">
-    <span class="settings-description">A ZIP archive will be created with one PNG file per frame.</span>
-    <div>
-      <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
-    </div>
-  </div>
-</div>

templates-2014-07-09-12-49/settings/import.html

@@ -1,34 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Import Picture
-  </div>
-  <div class="settings-item">
-    <form action="" method="POST" name="import-form">
-      <div class="import-section">
-        <span class="import-section-title  import-section-title-small">File :</span>
-        <button type="button" class="button  button-primary file-input-button">Browse</button>
-        <span class="file-input-status"></span>
-        <input style="display:none"
-          type="file" name="file-upload-input"
-          value="file" accept="image/*"/>
-      </div>
-      <div class="import-section import-section-disabled">
-        <span class="import-section-title  import-section-title-small" style="vertical-align:top">Info :</span>
-        <div class="import-section-preview"></div>
-      </div>
-      <div class="import-section import-section-disabled">
-        <span class="import-section-title  import-section-title-small">Size :</span>
-        <input type="text" disabled="disabled" class="textfield import-size-field" name="resize-width"/>x
-        <input type="text" disabled="disabled" class="textfield import-size-field" name="resize-height"/>
-      </div>
-      <div class="import-section import-section-disabled">
-        <span class="import-section-title">Smooth resize :</span>
-        <input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox" value="1"/>
-      </div>
-      <input type="submit" name="import-submit" disabled="disabled" class="button button-primary import-button" value="Import" />
-
-      <span class="settings-description" style="margin-top:5px;">Animated GIFs will be split in several frames. Other images will be imported as a single-frame.</span>
-
-    </form>
-  </div>
-</div>

templates-2014-07-09-12-49/settings/localstorage.html

@@ -1,31 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Restore previous session
-  </div>
-  <div class="settings-item previous-session">
-  </div>
-  <div class="settings-title">
-    Browse Local Piskels
-  </div>
-  <div class="settings-item">
-    <table class="local-piskels-list">
-      <tbody></tbody>
-    </table>
-  </div>
-  <script type="text/template" id="local-storage-item-template">
-    <tr class="local-piskel-item">
-      <td class="local-piskel-name">{{name}}</td>
-      <td class="local-piskel-save-date">{{date}}</td>
-      <td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
-      <td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
-    </tr>
-  </script>
-  <script type="text/template" id="previous-session-info-template">
-    <div>
-      Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
-      <div style="margin-top:10px;">
-        <button type="button" class="button  button-primary restore-session-button">Restore</button>
-      </div>
-    </div>
-  </script>
-</div>

templates-2014-07-09-12-49/settings/resize.html

@@ -1,20 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Resize drawing area
-  </div>
-  <div class="settings-item">
-    <form action="" method="POST" name="resize-form">
-      <div class="resize-section">
-        <span class="resize-section-title  resize-section-title-small">Size :</span>
-        <input type="text" class="textfield resize-size-field" name="resize-width"/>x
-        <input type="text" class="textfield resize-size-field" name="resize-height"/>
-      </div>
-      <div class="resize-section">
-        <span class="resize-section-title  resize-section-title-small">Resize canvas content : </span>
-        <input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
-      </div>
-      <input type="submit" class="button button-primary resize-button" value="Resize" />
-      <input type="button" class="button resize-cancel-button" value="Cancel" />
-    </form>
-  </div>
-</div>

templates-2014-07-09-12-49/settings/save.html

@@ -1,23 +0,0 @@
-<div class="settings-section">
-  <div class="settings-title">Save</div>
-  <div class="settings-item">
-    <form action="" method="POST" name="save-form">
-      <div class="settings-form-section">
-        <label class="row">Title : </label>
-        <input id="save-name" type="text" class="save-field textfield"/>
-      </div>
-      <div class="settings-form-section">
-        <label class="row">Description :</label>
-        <textarea id="save-description" class="save-field textfield" placeholder="Your piskel in a few words"></textarea>
-      </div>
-      <div class="settings-form-section">
-        <label class="row">
-          Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
-        </label>
-      </div>
-      <input type="submit" class="button button-primary" id="save-cloud-button" value="Upload" />
-      <input type="button" class="button" id="save-local-button" value="Local save" />
-      <div id="save-status" class="status"></div>
-    </form>
-  </div>
-</div>

templates-2014-07-12-12-20/drawing-tools.html

@@ -0,0 +1,63 @@
+<div class="sticky-section left-sticky-section" id="tool-section">
+  <div class="sticky-section-wrap">
+    <div class="vertical-centerer">
+      <ul id="tools-container" class="tools-wrapper">
+        <!-- Drawing tools will be inserted here -->
+      </ul>
+      <div class="palette-wrapper">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Primary - left mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
+          <input id="color-picker" class="color" type="text"/>
+        </div>
+        <div
+          class="tool-icon tool-color-picker"
+          title="Secondary - right mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
+          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
+        </div>
+        <div
+          class="swap-colors-icon"
+          title="Swap colors (X)"
+          rel="tooltip"
+          data-placement="right"
+        ></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Templates -->
+
+  <!-- Drawing tool icon-button -->
+  <script type="text/template" id="drawing-tool-item-template">
+    <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
+  </script>
+
+  <!-- Drawing tool tooltip container -->
+  <script type="text/template" id="drawing-tool-tooltip-container-template">
+    <div class='tools-tooltip-container'>
+      <div>{{helptext}} <span class='tools-tooltip-shortcut'>({{shortcut}})</span></div>
+      {{descriptors}}
+    </div>
+  </script>
+
+  <!-- Drawing tool tooltip line for modifier -->
+  <script type="text/template" id="drawing-tool-tooltip-descriptor-template">
+    <div class='tools-tooltip-descriptor'>
+      <span class='tools-tooltip-descriptor-button'>{{key}}</span>
+      {{description}}
+    </div>
+  </script>
+
+  <!-- Drawing tool tooltip line -->
+  <script type="text/template" id="drawing-tool-tooltip-descriptor-simple-template">
+    <div class='tools-tooltip-descriptor'>
+      {{description}}
+    </div>
+  </script>
+</div>