fix : reduce piskel model size : ImportController

+ ImportController is no longer relying on the deserializer to build a
  piskel instance
+ Static builders have been added to Piskel and Layer to help easily
  create new instances from existing elements

diff

@@ -0,0 +1,179 @@
+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/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
+        var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
-        // we shouldn't use the deserializer for this ... it's only working because it's falling back to the old implementation
+        var piskel = pskl.model.Piskel.fromLayers([layer]);
-        // bad, very bad
+
-        var deserializer = new pskl.utils.Deserializer([frame], function (piskel) {
+        pskl.app.piskelController.setPiskel(piskel);
-          pskl.app.piskelController.setPiskel(piskel);
+        pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
-          pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
+        this.reset_();
-          this.reset_();
-        }.bind(this));
-        deserializer.deserialize();
       }
     }
   };

js/model/Layer.js

@@ -10,6 +10,19 @@
     }
   };
 
+  /**
+   * Create a Layer instance from an already existing set a Frames
+   * @static
+   * @param  {String} name layer's name
+   * @param  {Array<pskl.model.Frame>} frames should all have the same dimensions
+   * @return {pskl.model.Layer}
+   */
+  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;
   };

js/model/Piskel.js

@@ -21,6 +21,24 @@
     }
   };
 
+  /**
+   * Create a piskel instance from an existing set of (non empty) layers
+   * Layers should all be synchronized : same number of frames, same dimensions
+   * @param  {Array<pskl.model.Layer>} layers
+   * @return {pskl.model.Piskel}
+   */
+  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;
   };

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) {
+      frames.forEach(layer.addFrame.bind(layer));
-        layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
-      });
 
       this.onLayerLoaded_();
     }.bind(this);

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);
     },
 
     /**

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);
@@ -91,18 +59,14 @@
     },
 
     /**
-     * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
+     * Deserialize old piskel framesheets. Initially piskels were stored as arrays of pixelGrids : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
      */
-    backwardDeserializer_ : function (frames) {
+    backwardDeserializer_ : function (pixelGrids) {
-      var layer = new pskl.model.Layer('Layer 1');
+      var frames = pixelGrids.map(function (grid) {
-      frames.forEach(function (frame) {
+        return pskl.model.Frame.fromPixelGrid(grid);
-        layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
       });
-      var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight();
+      var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
-      var piskel = new pskl.model.Piskel(width, height);
+      return pskl.model.Piskel.fromLayers([layer]);
-      piskel.addLayer(layer);
-
-      return piskel;
     }
   };
 })();