fix : reduce piskel model size

+ moved Serializer and Deserializer to utils.serialization package
+ put all backward code in utils.serialization.backward
+ added static method on Deserializer to make its usage similar to other
  utils in the package
- still not happy with the names used in Deserializer classes
  (deserializer.deserialize ...)

js/utils/serialization/Deserializer.js

@@ -0,0 +1,68 @@
+(function () {
+  var ns = $.namespace('pskl.utils.serialization');
+
+  ns.Deserializer = function (data, callback) {
+    this.layersToLoad_ = 0;
+    this.data_ = data;
+    this.callback_ = callback;
+    this.piskel_ = null;
+  };
+
+  ns.Deserializer.deserialize = function (data, callback) {
+    var deserializer;
+    if (data.modelVersion == Constants.MODEL_VERSION) {
+      deserializer = new ns.Deserializer(data, callback);
+    } else if (data.modelVersion == 1) {
+      deserializer = new ns.backward.Deserializer_v1(data, callback);
+    } else {
+      deserializer = new ns.backward.Deserializer_v0(data, callback);
+    }
+    deserializer.deserialize();
+  };
+
+  ns.Deserializer.prototype.deserialize = function () {
+    var data = this.data_;
+    var piskelData = data.piskel;
+    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
+
+    this.layersToLoad_ = piskelData.layers.length;
+
+    piskelData.layers.forEach(function (serializedLayer) {
+      var layer = this.deserializeLayer(serializedLayer);
+      this.piskel_.addLayer(layer);
+    }.bind(this));
+  };
+
+  ns.Deserializer.prototype.deserializeLayer = function (layerString) {
+    var layerData = JSON.parse(layerString);
+    var layer = new pskl.model.Layer(layerData.name);
+
+    // 1 - create an image to load the base64PNG representing the layer
+    var base64PNG = layerData.base64PNG;
+    var image = new Image();
+
+    // 2 - attach the onload callback that will be triggered asynchronously
+    image.onload = function () {
+      // 5 - extract the frames from the loaded image
+      var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
+
+      // 6 - add each image to the layer
+      frames.forEach(layer.addFrame.bind(layer));
+
+      this.onLayerLoaded_();
+    }.bind(this);
+
+    // 3 - set the source of the image
+    image.src = base64PNG;
+
+    // 4 - return a pointer to the new layer instance
+    return layer;
+  };
+
+  ns.Deserializer.prototype.onLayerLoaded_ = function () {
+    this.layersToLoad_ = this.layersToLoad_ - 1;
+    if (this.layersToLoad_ === 0) {
+      this.callback_(this.piskel_);
+    }
+  };
+})();

js/utils/serialization/Serializer.js

@@ -0,0 +1,31 @@
+(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(),
+          layers : serializedLayers
+        }
+      });
+    },
+
+    serializeLayer : function (layer) {
+      var frames = layer.getFrames();
+      var renderer = new pskl.rendering.FramesheetRenderer(frames);
+      var base64PNG = renderer.renderAsCanvas().toDataURL();
+
+      return JSON.stringify({
+        name : layer.getName(),
+        base64PNG : base64PNG,
+        frameCount : frames.length
+      });
+    }
+  };
+})();

js/utils/serialization/backward/Deserializer_v0.js

@@ -0,0 +1,18 @@
+(function () {
+  var ns = $.namespace('pskl.utils.serialization.backward');
+
+  ns.Deserializer_v0 = function (data, callback) {
+    this.data_ = data;
+    this.callback_ = callback;
+  };
+
+  ns.Deserializer_v0.prototype.deserialize = function () {
+    var pixelGrids = this.data_;
+    var frames = pixelGrids.map(function (grid) {
+      return pskl.model.Frame.fromPixelGrid(grid);
+    });
+    var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
+
+    this.callback_(pskl.model.Piskel.fromLayers([layer]));
+  };
+})();

js/utils/serialization/backward/Deserializer_v1.js

@@ -0,0 +1,36 @@
+(function () {
+  var ns = $.namespace('pskl.utils.serialization.backward');
+
+  ns.Deserializer_v1 = function (data, callback) {
+    this.callback_ = callback;
+    this.data_ = data;
+  };
+
+  ns.Deserializer_v1.prototype.deserialize = function () {
+    var piskelData = this.data_.piskel;
+    var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
+
+    piskelData.layers.forEach(function (serializedLayer) {
+      var layer = this.deserializeLayer(serializedLayer);
+      piskel.addLayer(layer);
+    }.bind(this));
+
+    this.callback_(piskel);
+  };
+
+  ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) {
+    var layerData = JSON.parse(layerString);
+    var layer = new pskl.model.Layer(layerData.name);
+    layerData.frames.forEach(function (serializedFrame) {
+      var frame = this.deserializeFrame(serializedFrame);
+      layer.addFrame(frame);
+    }.bind(this));
+
+    return layer;
+  };
+
+  ns.Deserializer_v1.prototype.deserializeFrame = function (frameString) {
+    var framePixelGrid = JSON.parse(frameString);
+    return pskl.model.Frame.fromPixelGrid(framePixelGrid);
+  };
+})();