Issue #414: part2: serialize and deserialize layer opacity

src/js/utils/serialization/Deserializer.js

@@ -6,6 +6,7 @@
     this.data_ = data;
     this.callback_ = callback;
     this.piskel_ = null;
+    this.layers_ = [];
   };
 
   ns.Deserializer.deserialize = function (data, callback) {
@@ -36,9 +37,10 @@
     }
   };
 
-  ns.Deserializer.prototype.deserializeLayer = function (layerString) {
+  ns.Deserializer.prototype.deserializeLayer = function (layerString, index) {
     var layerData = JSON.parse(layerString);
     var layer = new pskl.model.Layer(layerData.name);
+    layer.setOpacity(layerData.opacity);
 
     // 1 - create an image to load the base64PNG representing the layer
     var base64PNG = layerData.base64PNG;
@@ -49,7 +51,7 @@
       // 5 - extract the frames from the loaded image
       var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(image, layerData.frameCount);
       // 6 - add each image to the layer
-      this.addFramesToLayer(frames, layer);
+      this.addFramesToLayer(frames, layer, index);
     }.bind(this);
 
     // 3 - set the source of the image
@@ -59,27 +61,30 @@
     return layer;
   };
 
-  ns.Deserializer.prototype.loadExpandedLayer = function (layerData) {
+  ns.Deserializer.prototype.loadExpandedLayer = function (layerData, index) {
     var layer = new pskl.model.Layer(layerData.name);
     var frames = layerData.grids.map(function (grid) {
       return pskl.model.Frame.fromPixelGrid(grid);
     });
-    this.addFramesToLayer(frames, layer);
+    this.addFramesToLayer(frames, layer, index);
 
     // 4 - return a pointer to the new layer instance
     return layer;
   };
 
-  ns.Deserializer.prototype.addFramesToLayer = function (frames, layer) {
+  ns.Deserializer.prototype.addFramesToLayer = function (frames, layer, index) {
     frames.forEach(layer.addFrame.bind(layer));
 
-    this.piskel_.addLayer(layer);
+    this.layers_[index] = layer;
     this.onLayerLoaded_();
   };
 
   ns.Deserializer.prototype.onLayerLoaded_ = function () {
     this.layersToLoad_ = this.layersToLoad_ - 1;
     if (this.layersToLoad_ === 0) {
+      this.layers_.forEach(function (layer) {
+        this.piskel_.addLayer(layer);
+      }.bind(this));
       this.callback_(this.piskel_);
     }
   };

src/js/utils/serialization/Serializer.js

@@ -25,6 +25,7 @@
       var renderer = new pskl.rendering.FramesheetRenderer(frames);
       var layerToSerialize = {
         name : layer.getName(),
+        opacity : layer.getOpacity(),
         frameCount : frames.length
       };
       if (expanded) {

test/js/utils/serialization/SerializerTest.js

@@ -0,0 +1,41 @@
+describe("Serialization/Deserialization test", function() {
+
+  beforeEach(function() {
+    pskl.app.piskelController = {
+      getFPS: function () {
+        return 1;
+      }
+    };
+  });
+  afterEach(function() {
+    delete pskl.app.piskelController;
+  });
+
+  it("serializes layer opacity", function(done) {
+    var descriptor = new pskl.model.piskel.Descriptor('piskelName', 'piskelDesc');
+    var piskel = new pskl.model.Piskel(1, 1, descriptor);
+
+    piskel.addLayer(new pskl.model.Layer('layer1'));
+    piskel.addLayer(new pskl.model.Layer('layer2'));
+    piskel.addLayer(new pskl.model.Layer('layer3'));
+
+    piskel.getLayerAt(0).setOpacity(0);
+    piskel.getLayerAt(1).setOpacity(0.3);
+    piskel.getLayerAt(2).setOpacity(0.9);
+
+    var frame = new pskl.model.Frame(1, 1);
+    piskel.getLayers().forEach(function (layer) {
+      layer.addFrame(frame);
+    });
+
+    var serializedPiskel = pskl.utils.Serializer.serializePiskel(piskel);
+
+    var deserializer = pskl.utils.serialization.Deserializer;
+    deserializer.deserialize(JSON.parse(serializedPiskel), function (p) {
+      expect(p.getLayerAt(0).getOpacity()).toBe(0);
+      expect(p.getLayerAt(1).getOpacity()).toBe(0.3);
+      expect(p.getLayerAt(2).getOpacity()).toBe(0.9);
+      done();
+    })
+  });
+});