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 @@
  • {{layername}} + + {{exported}} + {{opacity}}α