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 ...)

diff

@@ -1,179 +0,0 @@
-diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js
-index 3fca048..3c94eaa 100644
---- a/js/controller/settings/ImportController.js
-+++ b/js/controller/settings/ImportController.js
-@@ -153,15 +153,12 @@
-         var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
-         var frame = pskl.utils.FrameUtils.createFromImage(image);
- 
--        // 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();
-+        var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
-+        var piskel = pskl.model.Piskel.fromLayers([layer]);
-+
-+        pskl.app.piskelController.setPiskel(piskel);
-+        pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
-+        this.reset_();
-       }
-     }
-   };
-diff --git a/js/model/Layer.js b/js/model/Layer.js
-index 0132e6a..464b1f9 100644
---- a/js/model/Layer.js
-+++ b/js/model/Layer.js
-@@ -10,6 +10,12 @@
-     }
-   };
- 
-+  ns.Layer.fromFrames = function (name, frames) {
-+    var layer = new ns.Layer(name);
-+    frames.forEach(layer.addFrame.bind(layer));
-+    return layer;
-+  };
-+
-   ns.Layer.prototype.getName = function () {
-     return this.name;
-   };
-diff --git a/js/model/Piskel.js b/js/model/Piskel.js
-index 7748408..223d618 100644
---- a/js/model/Piskel.js
-+++ b/js/model/Piskel.js
-@@ -21,6 +21,18 @@
-     }
-   };
- 
-+  ns.Piskel.fromLayers = function (layers) {
-+    var piskel = null;
-+    if (layers.length > 0 && layers[0].length() > 0) {
-+      var sampleFrame = layers[0].getFrameAt(0);
-+      piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight());
-+      layers.forEach(piskel.addLayer.bind(piskel));
-+    } else {
-+      throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument'
-+    }
-+    return piskel;
-+  };
-+
-   ns.Piskel.prototype.getLayers = function () {
-     return this.layers;
-   };
-diff --git a/js/utils/Deserializer.js b/js/utils/Deserializer.js
-index 5a248ba..56f64e4 100644
---- a/js/utils/Deserializer.js
-+++ b/js/utils/Deserializer.js
-@@ -41,9 +41,7 @@
-       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));
--      });
-+      frames.forEach(layer.addFrame.bind(layer));
- 
-       this.onLayerLoaded_();
-     }.bind(this);
-diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js
-index b20d84f..055c8ed 100644
---- a/js/utils/FrameUtils.js
-+++ b/js/utils/FrameUtils.js
-@@ -41,9 +41,9 @@
- 
-     createFromImageData : function (imageData, width, height) {
-       // Draw the zoomed-up pixels to a different canvas context
--      var frame = [];
-+      var grid = [];
-       for (var x = 0 ; x < width ; x++){
--        frame[x] = [];
-+        grid[x] = [];
-         for (var y = 0 ; y < height ; y++){
-           // Find the starting index in the one-dimensional image data
-           var i = (y * width + x)*4;
-@@ -52,13 +52,13 @@
-           var b = imageData[i+2];
-           var a = imageData[i+3];
-           if (a < 125) {
--            frame[x][y] = Constants.TRANSPARENT_COLOR;
-+            grid[x][y] = Constants.TRANSPARENT_COLOR;
-           } else {
--            frame[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
-+            grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
-           }
-         }
-       }
--      return frame;
-+      return pskl.model.Frame.fromPixelGrid(grid);
-     },
- 
-     /**
-diff --git a/js/utils/Serializer.js b/js/utils/Serializer.js
-index d103ad7..5841e6b 100644
---- a/js/utils/Serializer.js
-+++ b/js/utils/Serializer.js
-@@ -30,38 +30,6 @@
-       });
-     },
- 
--    deserializeLayer : function (layerString) {
--      var layerData = JSON.parse(layerString);
--      var layer = new pskl.model.Layer(layerData.name);
--      // TODO : nasty trick to keep the whole loading process lazily synchronous
--      // 1 - adding a fake frame so that the rendering can start
--      layer.addFrame(new pskl.model.Frame(32,32));
--
--      // 2 - create an image to load the base64PNG representing the layer
--      var base64PNG = layerData.base64PNG;
--      var image = new Image();
--
--      // 3 - attach the onload callback that will be triggered asynchronously
--      image.onload = function () {
--        // 6 - remove the fake frame
--        layer.removeFrameAt(0);
--
--        // 7 - extract the frames from the loaded image
--        var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
--
--        // 8 - add each image to the layer
--        frames.forEach(function (frame) {
--          layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
--        });
--      };
--
--      // 4 - set the source of the image
--      image.src = base64PNG;
--
--      // 5 - return a pointer to the new layer instance, which at this point contains a fake frame
--      return layer;
--    },
--
-     backwardDeserializer_v1 : function (data) {
-       var piskelData = data.piskel;
-       var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
-@@ -93,16 +61,12 @@
-     /**
-      * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
-      */
--    backwardDeserializer_ : function (frames) {
--      var layer = new pskl.model.Layer('Layer 1');
--      frames.forEach(function (frame) {
--        layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
-+    backwardDeserializer_ : function (pixelGrids) {
-+      var frames = pixelGrids.map(function (grid) {
-+        return pskl.model.Frame.fromPixelGrid(grid);
-       });
--      var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight();
--      var piskel = new pskl.model.Piskel(width, height);
--      piskel.addLayer(layer);
--
--      return piskel;
-+      var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
-+      return pskl.model.Piskel.fromLayers([layer]);
-     }
-   };
- })();

js/app.js

@@ -93,11 +93,10 @@
 
     finishInitAppEngine_ : function () {
       if (pskl.framesheetData_ && pskl.framesheetData_.content) {
-        var deserializer = new pskl.utils.Deserializer(pskl.framesheetData_.content, function (piskel) {
+        pskl.utils.serialization.Deserializer.deserialize(pskl.framesheetData_.content, function (piskel) {
           pskl.app.piskelController.setPiskel(piskel);
           pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
         });
-        deserializer.deserialize();
       }
     },
 
@@ -158,12 +157,11 @@
       xhr.responseType = 'text';
       xhr.onload = function (e) {
         var res = JSON.parse(this.responseText);
-        var deserializer = new pskl.utils.Deserializer(res.framesheet, function (piskel) {
+        pskl.utils.serialization.Deserializer.deserialize(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/service/LocalStorageService.js

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

js/utils/Serializer.js

@@ -1,72 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.utils');
-
-  var layersToLoad = 0;
-
-  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
-      });
-    },
-
-    backwardDeserializer_v1 : function (data) {
-      var piskelData = data.piskel;
-      var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
-
-      piskelData.layers.forEach(function (serializedLayer) {
-        var layer = pskl.utils.Serializer.deserializeLayer_v1(serializedLayer);
-        piskel.addLayer(layer);
-      });
-
-      return piskel;
-    },
-
-    deserializeLayer_v1 : function (layerString) {
-      var layerData = JSON.parse(layerString);
-      var layer = new pskl.model.Layer(layerData.name);
-      layerData.frames.forEach(function (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 pixelGrids : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
-     */
-    backwardDeserializer_ : function (pixelGrids) {
-      var frames = pixelGrids.map(function (grid) {
-        return pskl.model.Frame.fromPixelGrid(grid);
-      });
-      var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
-      return pskl.model.Piskel.fromLayers([layer]);
-    }
-  };
-})();

js/utils/serialization/Deserializer.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace('pskl.utils');
+  var ns = $.namespace('pskl.utils.serialization');
 
   ns.Deserializer = function (data, callback) {
     this.layersToLoad_ = 0;
@@ -8,23 +8,29 @@
     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_;
-    if (data.modelVersion == Constants.MODEL_VERSION) {
-      var piskelData = data.piskel;
-      this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
+    var piskelData = data.piskel;
+    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
 
-      this.layersToLoad_ = piskelData.layers.length;
+    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));
-    }
+    piskelData.layers.forEach(function (serializedLayer) {
+      var layer = this.deserializeLayer(serializedLayer);
+      this.piskel_.addLayer(layer);
+    }.bind(this));
   };
 
   ns.Deserializer.prototype.deserializeLayer = function (layerString) {

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);
+  };
+})();

piskel-script-list.js

@@ -19,10 +19,12 @@ 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",
+  "js/utils/serialization/Serializer.js",
+  "js/utils/serialization/Deserializer.js",
+  "js/utils/serialization/backward/Deserializer_v0.js",
+  "js/utils/serialization/backward/Deserializer_v1.js",
   "js/lib/jsColor_1_4_0/jscolor.js",
 
   // Application libraries-->