Issue 24 : Layers

!! NOT STABLE !!
Initial implementation. No UI update yet.
Check js/model/Piskel.js and js/model/Layer.js for an overview of the new
API.

Piskels can be saved on the existing service.

Previous piskels cannot be loaded. This should be fixed soon.

js/utils/FrameUtils.js

@@ -0,0 +1,22 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.FrameUtils = {
+    merge : function (frames) {
+      var merged = frames[0].clone();
+      var w = merged.getWidth(), h = merged.getHeight();
+      for (var i = 1 ; i < frames.length ; i++) {
+        pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
+      }
+      return merged;
+    },
+
+    mergeFrames_ : function (frameA, frameB) {
+      frameB.forEachPixel(function (p, col, row) {
+        if (p != Constants.TRANSPARENT_COLOR) {
+          frameA.setPixel(col, row, p);
+        }
+      });
+    }
+  };
+})();

js/utils/Serializer.js

@@ -0,0 +1,64 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+  ns.Serializer = {
+    serializePiskel : function (piskel) {
+      var serializedLayers = piskel.getLayers().map(function (l) {
+        return pskl.utils.Serializer.serializeLayer(l);
+      });
+      return JSON.stringify({
+        modelVersion : Constants.MODEL_VERSION,
+        piskel : {
+          height : piskel.getHeight(),
+          width : piskel.getWidth(),
+          fps : piskel.getFps(),
+          layers : serializedLayers
+        }
+      });
+    },
+
+    serializeLayer : function (layer) {
+      var serializedFrames = layer.getFrames().map(function (f) {
+        return f.serialize();
+      });
+      return JSON.stringify({
+        name : layer.getName(),
+        frames : serializedFrames
+      });
+    },
+
+    deserializePiskel : function (json) {
+      var data = JSON.parse(json);
+      if (data.modelVersion == Constants.MODEL_VERSION) {
+        var pData = data.piskel;
+        var layers = pData.layers.map(function (serializedLayer) {
+          return pskl.utils.Serializer.deserializeLayer(serializedLayer);
+        }); 
+        var piskel = new pskl.model.Piskel(pData.width, pData.height, pData.fps);
+        layers.forEach(function (layer) {
+          piskel.addLayer(layer);
+        });
+        return piskel;
+      } else {
+        //  pre-layer implementation adapter
+      }
+    },
+
+    deserializeLayer : function (json) {
+      var lData = JSON.parse(json);
+      var frames = lData.frames.map(function (serializedFrame) {
+        return pskl.utils.Serializer.deserializeFrame(serializedFrame);
+      });
+
+      var layer = new pskl.model.Layer(lData.name);
+      frames.forEach(function (frame) {
+        layer.addFrame(frame);
+      });
+      return layer;
+    },
+
+    deserializeFrame : function (json) {
+      var framePixelGrid = JSON.parse(json);
+      return pskl.model.Frame.fromPixelGrid(framePixelGrid);
+    }
+  };
+})();