Feature : undo redo including frame/layer actions

- Frame and Layer CRUD actions are now registered and can be cancelled
- Limited performance impact while drawing
- Improved frame cache invalidation

src/js/utils/core.js

@@ -49,7 +49,7 @@ if (typeof Function.prototype.bind !== "function") {
 
   ns.wrap = function (wrapper, wrappedObject) {
     for (var prop in wrappedObject) {
-      if (typeof wrappedObject[prop] === 'function') {
+      if (typeof wrappedObject[prop] === 'function' && typeof wrapper[prop] === 'undefined') {
         wrapper[prop] = wrappedObject[prop].bind(wrappedObject);
       }
     }

src/js/utils/serialization/Deserializer.js

@@ -29,39 +29,42 @@
     this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
 
     this.layersToLoad_ = piskelData.layers.length;
-
-    piskelData.layers.forEach(function (serializedLayer) {
-      this.deserializeLayer(serializedLayer);
-    }.bind(this));
+    if (piskelData.expanded) {
+      piskelData.layers.forEach(this.loadExpandedLayer.bind(this));
+    } else {
+      piskelData.layers.forEach(this.deserializeLayer.bind(this));
+    }
   };
 
   ns.Deserializer.prototype.deserializeLayer = function (layerString) {
-    var layerData = typeof layerString === "string" ? JSON.parse(layerString) : layerString;
+    var layerData = JSON.parse(layerString);
     var layer = new pskl.model.Layer(layerData.name);
 
-    var isCompressedLayer = !!layerData.base64PNG;
+    // 1 - create an image to load the base64PNG representing the layer
+    var base64PNG = layerData.base64PNG;
+    var image = new Image();
 
-    if (isCompressedLayer) {
-      // 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
-        this.addFramesToLayer(frames, layer);
-      }.bind(this);
-
-      // 3 - set the source of the image
-      image.src = base64PNG;
-    } else {
-      var frames = layerData.grids.map(function (grid) {
-        return pskl.model.Frame.fromPixelGrid(grid);
-      });
+    // 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
       this.addFramesToLayer(frames, layer);
-    }
+    }.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.loadExpandedLayer = function (layerData) {
+    var layer = new pskl.model.Layer(layerData.name);
+    var frames = layerData.grids.map(function (grid) {
+      return pskl.model.Frame.fromPixelGrid(grid);
+    });
+    this.addFramesToLayer(frames, layer);
 
     // 4 - return a pointer to the new layer instance
     return layer;

src/js/utils/serialization/Serializer.js

@@ -2,36 +2,34 @@
   var ns = $.namespace('pskl.utils');
 
   ns.Serializer = {
-    serializePiskel : function (piskel, compressed) {
+    serializePiskel : function (piskel, expanded) {
       var serializedLayers = piskel.getLayers().map(function (l) {
-        return pskl.utils.Serializer.serializeLayer(l, compressed);
+        return pskl.utils.Serializer.serializeLayer(l, expanded);
       });
       return JSON.stringify({
         modelVersion : Constants.MODEL_VERSION,
         piskel : {
           height : piskel.getHeight(),
           width : piskel.getWidth(),
-          layers : serializedLayers
+          layers : serializedLayers,
+          expanded : expanded
         }
       });
     },
 
-    serializeLayer : function (layer, compressed) {
-      if (compressed !== false) {
-        compressed = true;
-      }
+    serializeLayer : function (layer, expanded) {
       var frames = layer.getFrames();
       var renderer = new pskl.rendering.FramesheetRenderer(frames);
       var layerToSerialize = {
         name : layer.getName(),
         frameCount : frames.length
       };
-      if (compressed) {
-        layerToSerialize.base64PNG = renderer.renderAsCanvas().toDataURL();
-        return JSON.stringify(layerToSerialize);
-      } else {
+      if (expanded) {
         layerToSerialize.grids = frames.map(function (f) {return f.pixels;});
         return layerToSerialize;
+      } else {
+        layerToSerialize.base64PNG = renderer.renderAsCanvas().toDataURL();
+        return JSON.stringify(layerToSerialize);
       }
     }
   };