Fixed canvas ordering, fixed FPS during local import

src/css/style.css

@@ -158,9 +158,9 @@ body {
  */
 .canvas.layers-below-canvas  {z-index:  7;}
 .canvas.drawing-canvas       {z-index:  8;}
-.canvas.layers-above-canvas  {z-index:  9;}
-.canvas.onion-skin-canvas    {z-index: 10;}
-.canvas.canvas-overlay       {z-index: 11;}
+.canvas.canvas-overlay       {z-index:  9;}
+.canvas.onion-skin-canvas    {z-index:  10;}
+.canvas.layers-above-canvas  {z-index:  11;}
 
 
 

src/js/app.js

@@ -172,3 +172,4 @@
     }
   };
 })();
+

src/js/rendering/layer/LayersRenderer.js

@@ -14,6 +14,8 @@
     this.add(this.aboveRenderer);
 
     this.serializedRendering = '';
+
+    $.subscribe(Events.PISKEL_RESET, this.flush.bind(this));
   };
 
   pskl.utils.inherit(pskl.rendering.layer.LayersRenderer, pskl.rendering.CompositeRenderer);

src/js/service/LocalStorageService.js

@@ -20,10 +20,16 @@
   ns.LocalStorageService.prototype.load = function(name) {
     var piskelString = this.getPiskel(name);
     var key = this.getKey_(name);
+    var serializedPiskel = JSON.parse(piskelString);
+    // FIXME : should be moved to deserializer
+    // Deserializer should call callback with descriptor + fps information
+    var fps = serializedPiskel.piskel.fps;
+    var description = serializedPiskel.piskel.description;
 
-    pskl.utils.serialization.Deserializer.deserialize(JSON.parse(piskelString), function (piskel) {
-      piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, key.description, true));
+    pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
+      piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, description, true));
       pskl.app.piskelController.setPiskel(piskel);
+      pskl.app.animationController.setFPS(fps);
     });
   };
 

src/js/snippets.js

@@ -0,0 +1,43 @@
+(function () {
+  var flipFrame = function (frame, horizontal, vertical) {
+    var clone = frame.clone();
+    var w = frame.getWidth();
+    var h = frame.getHeight();
+    clone.forEachPixel(function (color, x, y) {
+      if (horizontal) {
+        x = w-x-1;
+      }
+      if (vertical) {
+        y = h-y-1;
+      }
+      frame.pixels[x][y] = color;
+    });
+    frame.version++;
+  };
+
+  window.flip = function (horizontal, vertical) {
+    var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
+    var layers = pskl.app.piskelController.getLayers();
+    layers.forEach(function (layer) {
+      flipFrame(layer.getFrameAt(currentFrameIndex), horizontal, vertical);
+    });
+    $.publish(Events.PISKEL_RESET);
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.SNAPSHOT
+    });
+  };
+
+  window.copyToAll = function () {
+    var ref = pskl.app.piskelController.getCurrentFrame();
+    var layer = pskl.app.piskelController.getCurrentLayer();
+    layer.getFrames().forEach(function (frame) {
+      if (frame !==  ref) {
+        frame.setPixels(ref.getPixels());
+      }
+    });
+    $.publish(Events.PISKEL_RESET);
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.SNAPSHOT
+    });
+  };
+})();

src/piskel-script-list.js

@@ -138,5 +138,7 @@
   "js/drawingtools/ColorPicker.js",
   "js/drawingtools/ColorSwap.js",
   // Application controller and initialization
-  "js/app.js"
+  "js/app.js",
+  // Bonus features !!
+  "js/snippets.js"
 ];