fix : reduce piskel model size

+ piskel deserialization is now clearly asynchronous
+ added utils.Deserializer (not a singleton though, more a builder/loader)
+ utils.Deserializer constructor expects a callback
+ when all layers are loaded and piskel is ready, the callback provided by
  the client is called with piskel as the first argument
- Deserializer doesn't fit in the utils package, which should be reserved
  to singletons : can move it to service as a PiskelLoaderService, and
  Deserializer could remain with only the purely static methods
- ImportController is realying on the Deserializer to build a Piskel but
  it shouldn't. Find a way to mutualize the code necessary to create a
  Piskel from an array of pskl.model.Frame
- still cleanup to do in app.js
- comments to add as well

js/utils/Deserializer.js

@@ -0,0 +1,64 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.Deserializer = function (data, callback) {
+    this.layersToLoad_ = 0;
+    this.data_ = data;
+    this.callback_ = callback;
+    this.piskel_ = null;
+  };
+
+  ns.Deserializer.prototype.deserialize = function () {
+    var data = this.data_;
+    if (data.modelVersion == Constants.MODEL_VERSION) {
+      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));
+    } else if (data.modelVersion == 1) {
+      this.callback_(pskl.utils.Serializer.backwardDeserializer_v1(data));
+    } else {
+      this.callback_(pskl.utils.Serializer.backwardDeserializer_(data));
+    }
+  };
+
+  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(function (frame) {
+        layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
+      });
+
+      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/Serializer.js

@@ -30,29 +30,6 @@
       });
     },
 
-    /**
-     * @param  {Object} data JSON.parse of a serialized piskel
-     * @return {pskl.model.Piskel} a piskel
-     */
-    createPiskel : function (data) {
-      var piskel = null;
-      if (data.modelVersion == Constants.MODEL_VERSION) {
-        var piskelData = data.piskel;
-        piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
-
-        piskelData.layers.forEach(function (serializedLayer) {
-          var layer = pskl.utils.Serializer.deserializeLayer(serializedLayer);
-          piskel.addLayer(layer);
-        });
-      } else if (data.modelVersion == 1) {
-        piskel = pskl.utils.Serializer.backwardDeserializer_v1(data);
-      } else {
-        piskel = pskl.utils.Serializer.backwardDeserializer_(data);
-      }
-
-      return piskel;
-    },
-
     deserializeLayer : function (layerString) {
       var layerData = JSON.parse(layerString);
       var layer = new pskl.model.Layer(layerData.name);
@@ -85,11 +62,6 @@
       return layer;
     },
 
-    deserializeFrame : function (frameString) {
-      var framePixelGrid = JSON.parse(frameString);
-      return pskl.model.Frame.fromPixelGrid(framePixelGrid);
-    },
-
     backwardDeserializer_v1 : function (data) {
       var piskelData = data.piskel;
       var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
@@ -106,13 +78,18 @@
       var layerData = JSON.parse(layerString);
       var layer = new pskl.model.Layer(layerData.name);
       layerData.frames.forEach(function (serializedFrame) {
-        var frame = pskl.utils.Serializer.deserializeFrame(serializedFrame);
+        var frame = pskl.utils.Serializer.deserializeFrame_v1(serializedFrame);
         layer.addFrame(frame);
       });
 
       return layer;
     },
 
+    deserializeFrame_v1 : function (frameString) {
+      var framePixelGrid = JSON.parse(frameString);
+      return pskl.model.Frame.fromPixelGrid(framePixelGrid);
+    },
+
     /**
      * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
      */