Feature : merge layers

Added feature to merge a layer with the layer below
Done at #jsconfeu2014 :)

New icon in icons : merge-icon.png
TODO : reorder the icons folder, it's waaaaaaay too messy !!

src/css/icons.css

@@ -8,3 +8,7 @@
 .action-icon.edit-icon {
   background-image: url('../img/tools/pen.png');
 }
+
+.action-icon.merge-icon {
+  background-image: url('../img/merge-icon.png');
+}

src/css/toolbox-layers-list.css

@@ -46,22 +46,34 @@
   cursor : pointer;
 }
 
-.layer-item .edit-icon {
+.layer-item .edit-icon, .layer-item .merge-icon {
   float: right;
-  width: 30px;
-  background-size: 12px;
   opacity: 0;
   transition : opacity 0.2s;
 }
 
-.layer-item:hover .edit-icon {
+.layer-item:hover .edit-icon, .layer-item:hover .merge-icon {
   opacity : 0.6;
 }
 
-.layer-item:hover .edit-icon:hover {
+.layer-item:hover .edit-icon:hover, .layer-item:hover .merge-icon:hover {
   opacity : 1;
 }
 
+.layer-item .edit-icon {
+  width: 25px;
+  background-size: 12px;
+}
+
+.layer-item .merge-icon {
+  width: 18px;
+  background-size: 16px;
+}
+
+.layer-item:last-child .merge-icon {
+  display : none;
+}
+
 .layer-item:hover {
   background : #222;
 }

src/js/controller/LayersListController.js

@@ -67,6 +67,9 @@
     } else if (el.classList.contains('edit-icon')) {
       index = el.parentNode.dataset.layerIndex;
       this.renameLayerAt_(index);
+    } else if (el.classList.contains('merge-icon')) {
+      index = el.parentNode.dataset.layerIndex;
+      this.mergeDownLayerAt_(index);
     }
   };
 
@@ -79,6 +82,11 @@
     }
   };
 
+  ns.LayersListController.prototype.mergeDownLayerAt_ = function (index) {
+    this.piskelController.mergeDownLayerAt(index);
+    this.renderLayerList_();
+  };
+
   ns.LayersListController.prototype.onButtonClick_ = function (button) {
     var action = button.getAttribute('data-action');
     if (action == 'up') {

src/js/controller/piskel/PiskelController.js

@@ -205,6 +205,18 @@
     }
   };
 
+  ns.PiskelController.prototype.mergeDownLayerAt = function (index) {
+    var layer = this.getLayerByIndex(index);
+    var downLayer = this.getLayerByIndex(index-1);
+    if (layer && downLayer) {
+      var mergedLayer = pskl.utils.LayerUtils.mergeLayers(layer, downLayer);
+      this.removeLayerAt(index);
+      this.piskel.addLayerAt(mergedLayer, index);
+      this.removeLayerAt(index-1);
+      this.selectLayer(mergedLayer);
+    }
+  };
+
   ns.PiskelController.prototype.generateLayerName_ = function () {
     var name = "Layer " + this.layerIdCounter;
     while (this.hasLayerForName_(name)) {

src/js/controller/piskel/PublicPiskelController.js

@@ -99,6 +99,12 @@
     $.publish(Events.PISKEL_RESET);
   };
 
+  ns.PublicPiskelController.prototype.mergeDownLayerAt = function (index) {
+    this.raiseSaveStateEvent_(this.piskelController.mergeDownLayerAt, [index]);
+    this.piskelController.mergeDownLayerAt(index);
+    $.publish(Events.PISKEL_RESET);
+  };
+
   ns.PublicPiskelController.prototype.moveLayerUp = function () {
     this.raiseSaveStateEvent_(this.piskelController.moveLayerUp, []);
     this.piskelController.moveLayerUp();

src/js/model/Piskel.js

@@ -73,6 +73,10 @@
     this.layers.push(layer);
   };
 
+  ns.Piskel.prototype.addLayerAt = function (layer, index) {
+    this.layers.splice(index, 0, layer);
+  };
+
   ns.Piskel.prototype.moveLayerUp = function (layer) {
     var index = this.layers.indexOf(layer);
     if (index > -1 && index < this.layers.length-1) {

src/js/utils/LayerUtils.js

@@ -25,6 +25,18 @@
         frames.push(frame);
       }
       return frames;
+    },
+
+    mergeLayers : function (layerA, layerB) {
+      var framesA = layerA.getFrames();
+      var framesB = layerB.getFrames();
+      var mergedFrames = [];
+      framesA.forEach(function (frame, index) {
+        var otherFrame = framesB[index];
+        mergedFrames.push(pskl.utils.FrameUtils.merge([otherFrame, frame]));
+      });
+      var mergedLayer = pskl.model.Layer.fromFrames(layerA.getName(), mergedFrames);
+      return mergedLayer;
     }
   };
 

src/templates/layers-list.html

@@ -13,7 +13,8 @@
   </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>
+      <span class="action-icon edit-icon" title="Edit layer name" rel="tooltip" data-placement="top">&nbsp;</span>
+      <span class="action-icon merge-icon" title="Merge with layer below" rel="tooltip" data-placement="top">&nbsp;</span>
     </li>
   </script>
   <ul class="layers-list"></ul>