Added export attribute to layer.

src/css/toolbox-layers-list.css

@@ -85,6 +85,10 @@
   padding-right: 8px;
 }
 
+.layer-item-export {
+  padding-right: 8px;
+}
+
 .current-layer-item,
 .current-layer-item:hover {
   background : #333;

src/js/controller/LayersListController.js

@@ -118,6 +118,7 @@
     var isSelected = this.piskelController.getCurrentLayer() === layer;
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
       'layername' : layer.getName(),
+      'exported': layer.isExported() ? 'exported' : 'skipped',
       'layerindex' : index,
       'isselected:current-layer-item' : isSelected,
       'opacity': layer.getOpacity()
@@ -145,6 +146,10 @@
       var layer = this.piskelController.getLayerAt(parseInt(index, 10));
       var opacity = window.prompt('Set layer opacity (value between 0 and 1)', layer.getOpacity());
       this.piskelController.setLayerOpacityAt(index, opacity);
+    } else if (el.classList.contains('layer-item-export')) {
+      index = pskl.utils.Dom.getData(el, 'layerIndex');
+      var layer = this.piskelController.getLayerAt(parseInt(index, 10));
+      this.piskelController.setLayerExportedAt(index, !layer.isExported());
     }
   };
 

src/js/controller/piskel/PiskelController.js

@@ -213,6 +213,13 @@
     }
   };
 
+  ns.PiskelController.prototype.setLayerExportedAt = function (index, flag) {
+    var layer = this.getLayerByIndex(index);
+    if (layer) {
+      layer.setExported(flag);
+    }
+  };
+
   ns.PiskelController.prototype.mergeDownLayerAt = function (index) {
     var layer = this.getLayerByIndex(index);
     var downLayer = this.getLayerByIndex(index - 1);

src/js/controller/piskel/PublicPiskelController.js

@@ -37,6 +37,7 @@
     this.saveWrap_('moveLayerDown', true);
     this.saveWrap_('removeCurrentLayer', true);
     this.saveWrap_('setLayerOpacityAt', true);
+    this.saveWrap_('setLayerExportedAt', true);
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.PREVIOUS_FRAME, this.selectPreviousFrame.bind(this));

src/js/model/Layer.js

@@ -8,6 +8,7 @@
       this.name = name;
       this.frames = [];
       this.opacity = 1;
+      this.export = true;
     }
   };
 
@@ -46,6 +47,14 @@
     this.opacity = +opacity.toFixed(3);
   };
 
+  ns.Layer.prototype.isExported = function () {
+    return this.export;
+  };
+
+  ns.Layer.prototype.setExported = function (flag) {
+    this.export = flag;
+  };
+
   ns.Layer.prototype.isTransparent = function () {
     return this.opacity < 1;
   };

src/js/utils/LayerUtils.js

@@ -80,8 +80,10 @@
 
       var context = canvas.getContext('2d');
       layers.forEach(function (l) {
-        var render = ns.LayerUtils.renderFrameAt(l, index, preserveOpacity);
-        context.drawImage(render, 0, 0, width, height, 0, 0, width, height);
+        if (l.isExported()) {
+          var render = ns.LayerUtils.renderFrameAt(l, index, preserveOpacity);
+          context.drawImage(render, 0, 0, width, height, 0, 0, width, height);
+        }
       });
 
       return canvas;

src/js/utils/serialization/Deserializer.js

@@ -46,6 +46,9 @@
     var layer = new pskl.model.Layer(layerData.name);
     layer.setOpacity(layerData.opacity);
 
+    // By default each layer is exported
+    layer.setExported(typeof layerData.export === 'undefined' ? true : !!layerData.export);
+
     // Backward compatibility: if the layerData is not chunked but contains a single base64PNG,
     // create a fake chunk, expected to represent all frames side-by-side.
     if (typeof layerData.chunks === 'undefined' && layerData.base64PNG) {

src/js/utils/serialization/Serializer.js

@@ -39,6 +39,7 @@
       var layerToSerialize = {
         name : layer.getName(),
         opacity : layer.getOpacity(),
+        export: layer.isExported(),
         frameCount : frames.length
       };
 

src/templates/layers-list.html

@@ -37,6 +37,10 @@
     <li class="layer-item {{isselected:current-layer-item}}"
         data-layer-index="{{layerindex}}">
         <span class="layer-name" data-placement="top">{{layername}}</span>
+        <span class="layer-item-export {{exported:active}}"
+              title="Export layer" rel="tooltip" data-placement="top">
+          {{exported}}
+        </span>
         <span class="layer-item-opacity"
               title="Layer opacity" rel="tooltip" data-placement="top">
           {{opacity}}&#945;