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/app.js

@@ -93,9 +93,11 @@
 
     finishInitAppEngine_ : function () {
       if (pskl.framesheetData_ && pskl.framesheetData_.content) {
-        var piskel = pskl.utils.Serializer.createPiskel(pskl.framesheetData_.content);
-        pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
+        var deserializer = new pskl.utils.Deserializer(pskl.framesheetData_.content, function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
+        });
+        deserializer.deserialize();
       }
     },
 
@@ -156,10 +158,12 @@
       xhr.responseType = 'text';
       xhr.onload = function (e) {
         var res = JSON.parse(this.responseText);
-        var piskel = pskl.utils.Serializer.createPiskel(res.framesheet);
-        pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(res.fps);
-        $.publish(Events.HIDE_NOTIFICATION);
+        var deserializer = new pskl.utils.Deserializer(res.framesheet, function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          pskl.app.animationController.setFPS(res.fps);
+          $.publish(Events.HIDE_NOTIFICATION);
+        });
+        deserializer.deserialize();
       };
 
       xhr.onerror = function () {

js/controller/settings/ImportController.js

@@ -153,11 +153,15 @@
         var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
         var frame = pskl.utils.FrameUtils.createFromImage(image);
 
-        var piskel = pskl.utils.Serializer.createPiskel([frame]);
-        pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
-
-        this.reset_();
+        // TODO : juliandescottes : here we only want to create a layer from an array of frames, and create a new piskel using this layer
+        // we shouldn't use the deserializer for this ... it's only working because it's falling back to the old implementation
+        // bad, very bad
+        var deserializer = new pskl.utils.Deserializer([frame], function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
+          this.reset_();
+        }.bind(this));
+        deserializer.deserialize();
       }
     }
   };

js/service/LocalStorageService.js

@@ -45,8 +45,10 @@
    */
   ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
     var framesheet = JSON.parse(window.localStorage.snapShot);
-    var piskel = pskl.utils.Serializer.createPiskel(framesheet);
-    pskl.app.piskelController.setPiskel(piskel);
+    var deserializer = new pskl.utils.Deserializer(framesheet, function (piskel) {
+      pskl.app.piskelController.setPiskel(piskel);
+    });
+    deserializer.deserialize();
   };
 
   /**

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]]".
      */

piskel-script-list.js

@@ -19,6 +19,7 @@ exports.scripts = [
   "js/utils/LayerUtils.js",
   "js/utils/ImageResizer.js",
   "js/utils/PixelUtils.js",
+  "js/utils/Deserializer.js",
   "js/utils/Serializer.js",
   "js/utils/Template.js",
   "js/utils/UserSettings.js",