From 95cd5a2776e8a4fafc6d5abc984affb4e2a83cd8 Mon Sep 17 00:00:00 2001
From: Jan Zipek <menxmenx@gmail.com>
Date: Thu, 17 May 2018 16:55:13 +0200
Subject: [PATCH] Added export attribute to layer.

---
 src/css/toolbox-layers-list.css                    | 4 ++++
 src/js/controller/LayersListController.js          | 5 +++++
 src/js/controller/piskel/PiskelController.js       | 7 +++++++
 src/js/controller/piskel/PublicPiskelController.js | 1 +
 src/js/model/Layer.js                              | 9 +++++++++
 src/js/utils/LayerUtils.js                         | 6 ++++--
 src/js/utils/serialization/Deserializer.js         | 3 +++
 src/js/utils/serialization/Serializer.js           | 1 +
 src/templates/layers-list.html                     | 4 ++++
 9 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index b03e861c..a0e4f8dc 100644
--- a/src/css/toolbox-layers-list.css
+++ b/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;
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 9ad1dc3a..4e11b342 100644
--- a/src/js/controller/LayersListController.js
+++ b/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());
     }
   };
 
diff --git a/src/js/controller/piskel/PiskelController.js b/src/js/controller/piskel/PiskelController.js
index aa111e3a..716f4b75 100644
--- a/src/js/controller/piskel/PiskelController.js
+++ b/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);
diff --git a/src/js/controller/piskel/PublicPiskelController.js b/src/js/controller/piskel/PublicPiskelController.js
index f18f54c1..1e95e100 100644
--- a/src/js/controller/piskel/PublicPiskelController.js
+++ b/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));
diff --git a/src/js/model/Layer.js b/src/js/model/Layer.js
index 0dba5340..0559f7ad 100644
--- a/src/js/model/Layer.js
+++ b/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;
   };
diff --git a/src/js/utils/LayerUtils.js b/src/js/utils/LayerUtils.js
index 6affb34d..716c5281 100644
--- a/src/js/utils/LayerUtils.js
+++ b/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;
diff --git a/src/js/utils/serialization/Deserializer.js b/src/js/utils/serialization/Deserializer.js
index f8f532c6..4fe97601 100644
--- a/src/js/utils/serialization/Deserializer.js
+++ b/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) {
diff --git a/src/js/utils/serialization/Serializer.js b/src/js/utils/serialization/Serializer.js
index 553e2ae2..ca517dd3 100644
--- a/src/js/utils/serialization/Serializer.js
+++ b/src/js/utils/serialization/Serializer.js
@@ -39,6 +39,7 @@
       var layerToSerialize = {
         name : layer.getName(),
         opacity : layer.getOpacity(),
+        export: layer.isExported(),
         frameCount : frames.length
       };
 
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index 88ecdd6c..fb483693 100644
--- a/src/templates/layers-list.html
+++ b/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;