Feature #683: duplicate layer when SHIFT+CLICK on create layer button

src/js/controller/LayersListController.js

@@ -17,6 +17,7 @@
     this.rootEl.addEventListener('click', this.onClick_.bind(this));
     this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
 
+    this.initCreateLayerButton_();
     this.initToggleLayerPreview_();
 
     this.renderLayerList_();
@@ -45,6 +46,14 @@
     }
   };
 
+  ns.LayersListController.prototype.initCreateLayerButton_ = function () {
+    var tooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [
+      {key : 'shift', description : 'Clone current layer'}
+    ]);
+    var addButton = this.rootEl.querySelector('[data-action="add"]');
+    addButton.setAttribute('title', tooltip);
+  };
+
   ns.LayersListController.prototype.initToggleLayerPreview_ = function () {
     var descriptors = [{description : 'Opacity defined in PREFERENCES'}];
     var helpText = 'Preview all layers';
@@ -117,7 +126,7 @@
     var el = evt.target || evt.srcElement;
     var index;
     if (el.classList.contains('button')) {
-      this.onButtonClick_(el);
+      this.onButtonClick_(el, evt);
     } else if (el.classList.contains('layer-name')) {
       index = pskl.utils.Dom.getData(el, 'layerIndex');
       this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
@@ -145,14 +154,18 @@
     this.renderLayerList_();
   };
 
-  ns.LayersListController.prototype.onButtonClick_ = function (button) {
+  ns.LayersListController.prototype.onButtonClick_ = function (button, evt) {
     var action = button.getAttribute('data-action');
     if (action == 'up') {
       this.piskelController.moveLayerUp();
     } else if (action == 'down') {
       this.piskelController.moveLayerDown();
     } else if (action == 'add') {
+      if (evt.shiftKey) {
+        this.piskelController.duplicateCurrentLayer();
+      } else {
         this.piskelController.createLayer();
+      }
     } else if (action == 'delete') {
       this.piskelController.removeCurrentLayer();
     } else if (action == 'merge') {

src/js/controller/piskel/PiskelController.js

@@ -231,6 +231,13 @@
     return name;
   };
 
+  ns.PiskelController.prototype.duplicateCurrentLayer = function () {
+    var layer = this.getCurrentLayer();
+    var clone = pskl.utils.LayerUtils.clone(layer);
+    this.piskel.addLayer(clone);
+    this.setCurrentLayerIndex(this.piskel.getLayers().length - 1);
+  };
+
   ns.PiskelController.prototype.createLayer = function (name) {
     if (!name) {
       name = this.generateLayerName_();

src/js/controller/piskel/PublicPiskelController.js

@@ -31,6 +31,7 @@
     this.saveWrap_('duplicateFrameAt', true);
     this.saveWrap_('moveFrame', true);
     this.saveWrap_('createLayer', true);
+    this.saveWrap_('duplicateCurrentLayer', true);
     this.saveWrap_('mergeDownLayerAt', true);
     this.saveWrap_('moveLayerUp', true);
     this.saveWrap_('moveLayerDown', true);

src/js/utils/LayerUtils.js

@@ -2,6 +2,13 @@
   var ns = $.namespace('pskl.utils');
 
   ns.LayerUtils = {
+    clone : function (layer) {
+      var clonedFrames = layer.getFrames().map(function (frame) {
+        return frame.clone();
+      });
+      return pskl.model.Layer.fromFrames(layer.getName() + ' (clone)', clonedFrames);
+    },
+
     mergeLayers : function (layerA, layerB) {
       var framesA = layerA.getFrames();
       var framesB = layerB.getFrames();

src/templates/layers-list.html

@@ -7,7 +7,7 @@
   <div class="toolbox-buttons">
     <button data-action="add"
       class="button layers-button piskel-icon-plus"
-      title="Create a new layer" rel="tooltip" data-placement="top" ></button>
+      rel="tooltip" data-placement="top" ></button>
 
     <button data-action="up"
       class="button layers-button piskel-icon-arrow-up-fat"

test/js/utils/LayerUtilsTest.js

@@ -53,4 +53,30 @@ describe("LayerUtils test", function() {
       ['rgba(255,0,0,0.5)', B]
     ]);
   });
+
+  it("clones a layer", function() {
+    var grid1 = [
+      [B, T],
+      [T, B]
+    ];
+
+    var grid2 = [
+      [R, B],
+      [B, R]
+    ];
+
+    // when
+    var layer = new pskl.model.Layer('l1');
+    layer.addFrame(pskl.model.Frame.fromPixelGrid(grid1));
+    layer.addFrame(pskl.model.Frame.fromPixelGrid(grid2));
+
+    // then
+    var clone = pskl.utils.LayerUtils.clone(layer);
+    var clonedFrame = clone.getFrameAt(0);
+
+    // verify
+    frameEqualsGrid(clone.getFrameAt(0), grid1);
+    frameEqualsGrid(clone.getFrameAt(1), grid2);
+    expect(clone.getName()).toBe('l1 (clone)');
+  });
 });