Ability to lock layers

src/css/font-icon.css

@@ -94,3 +94,11 @@
 .piskel-icon-arrow-down-thin:before {
   content: "\e60f";
 }
+
+.piskel-icon-lock-locked:before {
+  content: "\e98f";
+}
+
+.piskel-icon-lock-unlocked:before {
+  content: "\e990";
+}

src/css/toolbox-layers-list.css

@@ -86,6 +86,10 @@
   background : #222;
 }
 
+.layer-lock {
+  padding: 6px 0;
+}
+
 .layer-item-opacity {
   padding: 0 8px 0 8px;
   flex: 0 auto;

src/js/controller/DrawingController.js

@@ -137,6 +137,11 @@
   };
 
   ns.DrawingController.prototype.onTouchstart_ = function (event) {
+    var index = this.piskelController.getCurrentLayerIndex();
+    var layer = this.piskelController.getLayerByIndex(index);
+    if (layer.locked) {
+      return;
+    }
     this.onMousedown_(event);
   };
 
@@ -153,6 +158,11 @@
    * @private
    */
   ns.DrawingController.prototype.onMousedown_ = function (event) {
+    var index = this.piskelController.getCurrentLayerIndex();
+    var layer = this.piskelController.getLayerByIndex(index);
+    if (layer.locked) {
+      return;
+    }
     $.publish(Events.MOUSE_EVENT, [event, this]);
     var frame = this.piskelController.getCurrentFrame();
     var coords = this.getSpriteCoordinates(event.clientX, event.clientY);

src/js/controller/LayersListController.js

@@ -125,7 +125,8 @@
       'layername' : layer.getName(),
       'layerindex' : index,
       'isselected:current-layer-item' : isSelected,
-      'opacity' : layer.getOpacity()
+      'opacity' : layer.getOpacity(),
+      'locked' : layer.locked ? 'locked' : 'unlocked'
     });
     var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
     this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
@@ -181,6 +182,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-lock')) {
+      index = pskl.utils.Dom.getData(el, 'layerIndex');
+      var layer = this.piskelController.getLayerAt(parseInt(index, 10));
+      this.piskelController.setLayerLockedAt(index, layer.getLocked());
     }
   };
 

src/js/controller/drawing/DragHandler.js

@@ -25,6 +25,11 @@
    * @param {Number} y : y coordinate of the mouse event that initiated the drag
    */
   ns.DragHandler.prototype.startDrag = function (x, y) {
+    var index = this.piskelController.getCurrentLayerIndex();
+    var layer = this.piskelController.getLayerByIndex(index);
+    if (layer.locked) {
+      return;
+    }
     var coords = this.drawingController.getSpriteCoordinates(x, y);
     this.updateOrigin_(coords.x, coords.y);
   };

src/js/controller/piskel/PiskelController.js

@@ -284,9 +284,20 @@
     }
   };
 
+  ns.PiskelController.prototype.setLayerLockedAt = function (index, locked) {
+    var layer = this.getLayerByIndex(index);
+    if (layer) {
+      layer.setLocked(!locked);
+    }
+  };
+
   ns.PiskelController.prototype.mergeDownLayerAt = function (index) {
     var layer = this.getLayerByIndex(index);
     var downLayer = this.getLayerByIndex(index - 1);
+    if (layer.locked || downLayer.locked) {
+      window.console.error('Could not merge with later below. One of the layers is locked.');
+      return;
+    }
     if (layer && downLayer) {
       var mergedLayer = pskl.utils.LayerUtils.mergeLayers(layer, downLayer);
       this.removeLayerAt(index);

src/js/controller/piskel/PublicPiskelController.js

@@ -37,6 +37,7 @@
     this.saveWrap_('moveLayerDown', true);
     this.saveWrap_('removeCurrentLayer', true);
     this.saveWrap_('setLayerOpacityAt', true);
+    this.saveWrap_('setLayerLockedAt', true);
     this.saveWrap_('toggleFrameVisibilityAt', true);
 
     var shortcuts = pskl.service.keyboard.Shortcuts;

src/js/model/Layer.js

@@ -8,6 +8,7 @@
       this.name = name;
       this.frames = [];
       this.opacity = 1;
+      this.locked = false;
     }
   };
 
@@ -46,6 +47,17 @@
     this.opacity = +opacity.toFixed(3);
   };
 
+  ns.Layer.prototype.getLocked = function () {
+    return this.locked;
+  };
+
+  ns.Layer.prototype.setLocked = function (locked) {
+    if (typeof locked !== 'boolean') {
+      locked = false;
+    }
+    this.locked = locked;
+  };
+
   ns.Layer.prototype.isTransparent = function () {
     return this.opacity < 1;
   };

src/js/tools/ToolsHelper.js

@@ -16,6 +16,9 @@ ns.ToolsHelper = {
     var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
     var layers = useAllLayers ? pskl.app.piskelController.getLayers() : [pskl.app.piskelController.getCurrentLayer()];
     return layers.reduce(function (previous, layer) {
+      if (layer.locked) {
+        return previous;
+      }
       var frames = useAllFrames ? layer.getFrames() : [layer.getFrameAt(currentFrameIndex)];
       return previous.concat(frames);
     }, []);

src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js

@@ -79,6 +79,7 @@
         var dataUriLengthFirstHalf = arr16[currentIndex + 3];
         var dataUriLengthSecondHalf = arr16[currentIndex + 4];
         var dataUriLength = (dataUriLengthSecondHalf >>> 0) | (dataUriLengthFirstHalf << 16 >>> 0);
+        var locked = false;
 
         // Name
         var layerName = '';
@@ -97,6 +98,7 @@
 
         layer.name = layerName;
         layer.opacity = opacity;
+        layer.locked = locked;
         layer.frameCount = frameCount;
         layer.dataUri = dataUri;
         layers.push(layer);
@@ -128,6 +130,7 @@
         var nlayer = new pskl.model.Layer(layer.name);
         layer.model = nlayer;
         nlayer.setOpacity(layer.opacity);
+        nlayer.setLocked(layer.locked);
         piskel.addLayer(nlayer);
 
         loadLayerImage.bind(this, layer, callback)();

src/templates/layers-list.html

@@ -37,6 +37,9 @@ <h3 class="toolbox-title layers-title">Layers
     <li class="layer-item {{isselected:current-layer-item}}"
         data-layer-index="{{layerindex}}">
         <span class="layer-name" data-placement="top">{{layername}}</span>
+        <span class="layer-lock piskel-icon-lock-{{locked}}"
+            title="Layer {{locked}}" rel="tooltip" data-placement="top">
+        </span>
         <span class="layer-item-opacity"
               title="Layer opacity ({{opacity}})" rel="tooltip" data-placement="top">
             &#945;