diff --git a/src/css/font-icon.css b/src/css/font-icon.css
index f771603a..61a3e096 100644
--- a/src/css/font-icon.css
+++ b/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";
+}
diff --git a/src/css/fonts/icomoon.eot b/src/css/fonts/icomoon.eot
index f5314adf..a700c4dd 100644
Binary files a/src/css/fonts/icomoon.eot and b/src/css/fonts/icomoon.eot differ
diff --git a/src/css/fonts/icomoon.svg b/src/css/fonts/icomoon.svg
index bafc0fee..0a487cd2 100644
--- a/src/css/fonts/icomoon.svg
+++ b/src/css/fonts/icomoon.svg
@@ -6,23 +6,25 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/css/fonts/icomoon.ttf b/src/css/fonts/icomoon.ttf
index 5ae72b63..03c369e3 100644
Binary files a/src/css/fonts/icomoon.ttf and b/src/css/fonts/icomoon.ttf differ
diff --git a/src/css/fonts/icomoon.woff b/src/css/fonts/icomoon.woff
index a9d1e6c2..a0b6f013 100644
Binary files a/src/css/fonts/icomoon.woff and b/src/css/fonts/icomoon.woff differ
diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index bcd06b8f..3f7be438 100644
--- a/src/css/toolbox-layers-list.css
+++ b/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;
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 96e32be4..841c0fee 100644
--- a/src/js/controller/LayersListController.js
+++ b/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());
}
};
diff --git a/src/js/controller/piskel/PiskelController.js b/src/js/controller/piskel/PiskelController.js
index 3e2fe419..ae34643f 100644
--- a/src/js/controller/piskel/PiskelController.js
+++ b/src/js/controller/piskel/PiskelController.js
@@ -284,6 +284,13 @@
}
};
+ 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);
diff --git a/src/js/controller/piskel/PublicPiskelController.js b/src/js/controller/piskel/PublicPiskelController.js
index a3a86cfe..4187d507 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_('setLayerLockedAt', true);
this.saveWrap_('toggleFrameVisibilityAt', true);
var shortcuts = pskl.service.keyboard.Shortcuts;
diff --git a/src/js/model/Layer.js b/src/js/model/Layer.js
index 0dba5340..d3f1cece 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.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;
};
diff --git a/src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js b/src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js
index 2ba9bd8b..41745aca 100644
--- a/src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js
+++ b/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)();
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index e6628076..11e6c8b8 100644
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -37,6 +37,9 @@
{{layername}}
+
+
α