added FrameUtils unit tests

src/js/controller/piskel/PiskelController.js

@@ -158,7 +158,7 @@
 
   ns.PiskelController.prototype.getFrameCount = function () {
     var layer = this.piskel.getLayerAt(0);
-    return layer.length();
+    return layer.size();
   };
 
   ns.PiskelController.prototype.setCurrentFrameIndex = function (index) {

src/js/model/Layer.js

@@ -56,7 +56,7 @@
     if (this.frames[index]) {
       this.frames.splice(index, 1);
     } else {
-      throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.length() + ')';
+      throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.size() + ')';
     }
   };
 
@@ -93,7 +93,7 @@
     }
   };
 
-  ns.Layer.prototype.length = function () {
+  ns.Layer.prototype.size = function () {
     return this.frames.length;
   };
 

src/js/model/Piskel.js

@@ -33,7 +33,7 @@
    */
   ns.Piskel.fromLayers = function (layers, descriptor) {
     var piskel = null;
-    if (layers.length > 0 && layers[0].length() > 0) {
+    if (layers.length > 0 && layers[0].size() > 0) {
       var sampleFrame = layers[0].getFrameAt(0);
       piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
       layers.forEach(piskel.addLayer.bind(piskel));

src/js/utils/FrameUtils.js

@@ -2,6 +2,14 @@
   var ns = $.namespace('pskl.utils');
   var colorCache = {};
   ns.FrameUtils = {
+    toImage : function (frame, zoom, bgColor) {
+      zoom = zoom || 1;
+      bgColor = bgColor || Constants.TRANSPARENT_COLOR;
+      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
+      canvasRenderer.drawTransparentAs(bgColor);
+      return canvasRenderer.render();
+    },
+
     merge : function (frames) {
       var merged = null;
       if (frames.length) {
@@ -28,6 +36,66 @@
       return pskl.utils.FrameUtils.createFromImage(resizedImage);
     },
 
+    /*
+     * Create a pskl.model.Frame from an Image object.
+     * Transparent pixels will either be converted to completely opaque or completely transparent pixels.
+     * @param  {Image} image source image
+     * @return {pskl.model.Frame} corresponding frame
+     */
+    createFromImage : function (image) {
+      var w = image.width,
+        h = image.height;
+      var canvas = pskl.CanvasUtils.createCanvas(w, h);
+      var context = canvas.getContext('2d');
+
+      context.drawImage(image, 0,0,w,h,0,0,w,h);
+      var imgData = context.getImageData(0,0,w,h).data;
+      return pskl.utils.FrameUtils.createFromImageData_(imgData, w, h);
+    },
+
+    createFromImageData_ : function (imageData, width, height) {
+      // Draw the zoomed-up pixels to a different canvas context
+      var grid = [];
+      for (var x = 0 ; x < width ; 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;
+          var r = imageData[i  ];
+          var g = imageData[i+1];
+          var b = imageData[i+2];
+          var a = imageData[i+3];
+          if (a < 125) {
+            grid[x][y] = Constants.TRANSPARENT_COLOR;
+          } else {
+            grid[x][y] = pskl.utils.FrameUtils.rgbToHex_(r,g,b);
+          }
+        }
+      }
+      return pskl.model.Frame.fromPixelGrid(grid);
+    },
+
+    /**
+     * Convert a rgb(Number, Number, Number) color to hexadecimal representation
+     * @param  {Number} r red value, between 0 and 255
+     * @param  {Number} g green value, between 0 and 255
+     * @param  {Number} b blue value, between 0 and 255
+     * @return {String} hex representation of the color '#ABCDEF'
+     */
+    rgbToHex_ : function (r, g, b) {
+      return "#" + this.componentToHex_(r) + this.componentToHex_(g) + this.componentToHex_(b);
+    },
+
+    /**
+     * Convert a color component (as a Number between 0 and 255) to its string hexa representation
+     * @param  {Number} c component value, between 0 and 255
+     * @return {String} eg. '0A'
+     */
+    componentToHex_ : function (c) {
+      var hex = c.toString(16);
+      return hex.length == 1 ? "0" + hex : hex;
+    },
+
     /**
      * Alpha compositing using porter duff algorithm :
      * http://en.wikipedia.org/wiki/Alpha_compositing
@@ -36,9 +104,9 @@
      * @param  {String} strColor2 color under
      * @return {String} the composite color
      */
-    mergePixels : function (strColor1, strColor2, globalOpacity1) {
+    mergePixels_ : function (strColor1, strColor2, globalOpacity1) {
-      var col1 = pskl.utils.FrameUtils.toRgba(strColor1);
+      var col1 = pskl.utils.FrameUtils.toRgba_(strColor1);
-      var col2 = pskl.utils.FrameUtils.toRgba(strColor2);
+      var col2 = pskl.utils.FrameUtils.toRgba_(strColor2);
       if (typeof globalOpacity1 == 'number') {
         col1 = JSON.parse(JSON.stringify(col1));
         col1.a = globalOpacity1 * col1.a;
@@ -58,7 +126,7 @@
      * @param  {String} c color as a string
      * @return {Object} {r:Number,g:Number,b:Number,a:Number}
      */
-    toRgba : function (c) {
+    toRgba_ : function (c) {
       if (colorCache[c]) {
         return colorCache[c];
       }
@@ -97,74 +165,6 @@
       }
       colorCache[c] = color;
       return color;
-    },
-
-    /*
-     * Create a pskl.model.Frame from an Image object.
-     * Transparent pixels will either be converted to completely opaque or completely transparent pixels.
-     * @param  {Image} image source image
-     * @return {pskl.model.Frame} corresponding frame
-     */
-    createFromImage : function (image) {
-      var w = image.width,
-        h = image.height;
-      var canvas = pskl.CanvasUtils.createCanvas(w, h);
-      var context = canvas.getContext('2d');
-
-      context.drawImage(image, 0,0,w,h,0,0,w,h);
-      var imgData = context.getImageData(0,0,w,h).data;
-      return pskl.utils.FrameUtils.createFromImageData(imgData, w, h);
-    },
-
-    createFromImageData : function (imageData, width, height) {
-      // Draw the zoomed-up pixels to a different canvas context
-      var grid = [];
-      for (var x = 0 ; x < width ; 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;
-          var r = imageData[i  ];
-          var g = imageData[i+1];
-          var b = imageData[i+2];
-          var a = imageData[i+3];
-          if (a < 125) {
-            grid[x][y] = Constants.TRANSPARENT_COLOR;
-          } else {
-            grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
-          }
-        }
-      }
-      return pskl.model.Frame.fromPixelGrid(grid);
-    },
-
-    /**
-     * Convert a rgb(Number, Number, Number) color to hexadecimal representation
-     * @param  {Number} r red value, between 0 and 255
-     * @param  {Number} g green value, between 0 and 255
-     * @param  {Number} b blue value, between 0 and 255
-     * @return {String} hex representation of the color '#ABCDEF'
-     */
-    rgbToHex : function (r, g, b) {
-      return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
-    },
-
-    /**
-     * Convert a color component (as a Number between 0 and 255) to its string hexa representation
-     * @param  {Number} c component value, between 0 and 255
-     * @return {String} eg. '0A'
-     */
-    componentToHex : function (c) {
-      var hex = c.toString(16);
-      return hex.length == 1 ? "0" + hex : hex;
-    },
-
-    toImage : function (frame, zoom, bgColor) {
-      zoom = zoom || 1;
-      bgColor = bgColor || Constants.TRANSPARENT_COLOR;
-      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
-      canvasRenderer.drawTransparentAs(bgColor);
-      return canvasRenderer.render();
     }
   };
 })();

src/js/utils/LayerUtils.js

@@ -8,20 +8,20 @@
      * @param  {Image} image source image
      * @return {pskl.model.Frame} corresponding frame
      */
-    createFromImage : function (image, frameCount) {
+    createLayerFromSpritesheet : function (image, frameCount) {
-      var w = image.width,
+      var width = image.width,
-        h = image.height,
+        height = image.height,
-        frameWidth = w / frameCount;
+        frameWidth = width / frameCount;
 
-      var canvas = pskl.CanvasUtils.createCanvas(w, h);
+      var canvas = pskl.CanvasUtils.createCanvas(frameWidth, height);
       var context = canvas.getContext('2d');
 
-      context.drawImage(image, 0,0,w,h,0,0,w,h);
       // Draw the zoomed-up pixels to a different canvas context
       var frames = [];
       for (var i = 0 ; i < frameCount ; i++) {
-        var imgData = context.getImageData(frameWidth*i,0,frameWidth,h).data;
+        context.clearRect(0, 0 , frameWidth, height);
-        var frame = pskl.utils.FrameUtils.createFromImageData(imgData, frameWidth, h);
+        context.drawImage(image, frameWidth * i, 0, frameWidth, height, 0, 0, frameWidth, height);
+        var frame = pskl.utils.FrameUtils.createFromImage(canvas);
         frames.push(frame);
       }
       return frames;

src/js/utils/serialization/Deserializer.js

@@ -47,7 +47,7 @@
     // 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);
+      var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(image, layerData.frameCount);
       // 6 - add each image to the layer
       this.addFramesToLayer(frames, layer);
     }.bind(this);

test/js/utils/FrameUtilsTest.js

@@ -0,0 +1,145 @@
+describe("FrameUtils suite", function() {
+  var black = '#000000';
+  var red = '#ff0000';
+  var transparent = Constants.TRANSPARENT_COLOR;
+
+  it("merges 2 frames", function () {
+    var frame1 = pskl.model.Frame.fromPixelGrid([
+      [black, transparent],
+      [transparent, black]
+    ]);
+
+    var frame2 = pskl.model.Frame.fromPixelGrid([
+      [transparent, red],
+      [red, transparent]
+    ]);
+
+    var mergedFrame = pskl.utils.FrameUtils.merge([frame1, frame2]);
+    expect(mergedFrame.getPixel(0,0)).toBe(black);
+    expect(mergedFrame.getPixel(0,1)).toBe(red);
+    expect(mergedFrame.getPixel(1,0)).toBe(red);
+    expect(mergedFrame.getPixel(1,1)).toBe(black);
+  });
+
+  it("returns same frame when merging single frame", function () {
+    var frame1 = pskl.model.Frame.fromPixelGrid([
+      [black, transparent],
+      [transparent, black]
+    ]);
+
+    var mergedFrame = pskl.utils.FrameUtils.merge([frame1]);
+    expect(mergedFrame.getPixel(0,0)).toBe(black);
+    expect(mergedFrame.getPixel(0,1)).toBe(transparent);
+    expect(mergedFrame.getPixel(1,0)).toBe(transparent);
+    expect(mergedFrame.getPixel(1,1)).toBe(black);
+  });
+
+  var checkPixelsColor = function (frame, pixels, color) {
+    pixels.forEach(function (pixel) {
+      var pixelColor = frame.getPixel(pixel[0], pixel[1]);
+      expect(pixelColor).toBe(color);
+    });
+  };
+
+  it ("converts an image to a frame", function () {
+    var frame1 = pskl.model.Frame.fromPixelGrid([
+      [black, transparent],
+      [transparent, black]
+    ]);
+
+    var image = pskl.utils.FrameUtils.toImage(frame1);
+    expect(image.width).toBe(2);
+    expect(image.height).toBe(2);
+
+    var biggerImage = pskl.utils.FrameUtils.toImage(frame1, 3);
+    expect(biggerImage.width).toBe(6);
+    expect(biggerImage.height).toBe(6);
+
+    var biggerFrame = pskl.utils.FrameUtils.createFromImage(biggerImage);
+
+    checkPixelsColor(biggerFrame, [
+      [0,0],[0,1],[0,2],
+      [1,0],[1,1],[1,2],
+      [2,0],[2,1],[2,2],
+      [3,3],[3,4],[3,5],
+      [4,3],[4,4],[4,5],
+      [5,3],[5,4],[5,5]
+    ], black);
+
+    checkPixelsColor(biggerFrame, [
+      [0,3],[0,4],[0,5],
+      [1,3],[1,4],[1,5],
+      [2,3],[2,4],[2,5],
+      [3,0],[3,1],[3,2],
+      [4,0],[4,1],[4,2],
+      [5,0],[5,1],[5,2]
+    ], transparent);
+  });
+
+  it ("[LayerUtils] creates a layer from a simple spritesheet", function () {
+    var frame = pskl.model.Frame.fromPixelGrid([
+      [black, red],
+      [red, black],
+      [black, black],
+      [red, red]
+    ]);
+    var spritesheet = pskl.utils.FrameUtils.toImage(frame);
+
+    var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(spritesheet, 4);
+    expect(frames.length).toBe(4);
+
+    expect(frames[0].getPixel(0,0)).toBe(black);
+    expect(frames[0].getPixel(0,1)).toBe(red);
+
+    expect(frames[1].getPixel(0,0)).toBe(red);
+    expect(frames[1].getPixel(0,1)).toBe(black);
+
+    expect(frames[2].getPixel(0,0)).toBe(black);
+    expect(frames[2].getPixel(0,1)).toBe(black);
+
+    expect(frames[3].getPixel(0,0)).toBe(red);
+    expect(frames[3].getPixel(0,1)).toBe(red);
+
+  });
+
+  // it("starts at -1", function() {
+  //   historyService = createMockHistoryService();
+  //   expect(historyService.currentIndex).toBe(-1);
+  // });
+
+  // it("is at 0 after init", function() {
+  //   historyService = createMockHistoryService();
+  //   historyService.init();
+  //   expect(historyService.currentIndex).toBe(0);
+  // });
+
+  // it("stores a piskel snapshot after 5 SAVE", function () {
+  //   // BEFORE
+  //   var SNAPSHOT_PERIOD_BACKUP = pskl.service.HistoryService.SNAPSHOT_PERIOD;
+  //   pskl.service.HistoryService.SNAPSHOT_PERIOD = 5;
+
+  //   historyService = createMockHistoryService();
+  //   historyService.init();
+
+  //   sendSaveEvents(pskl.service.HistoryService.REPLAY).times(5);
+
+  //   expect(historyService.currentIndex).toBe(5);
+
+  //   expect(getLastState().piskel).toBe(SERIALIZED_PISKEL);
+
+  //   sendSaveEvents(pskl.service.HistoryService.REPLAY).times(4);
+
+  //   sendSaveEvents(pskl.service.HistoryService.REPLAY_NO_SNAPSHOT).once();
+  //   expect(getLastState().piskel).toBeUndefined();
+
+  //   sendSaveEvents(pskl.service.HistoryService.REPLAY_NO_SNAPSHOT).once();
+  //   expect(getLastState().piskel).toBeUndefined();
+
+  //   sendSaveEvents(pskl.service.HistoryService.REPLAY).once();
+  //   expect(getLastState().piskel).toBe(SERIALIZED_PISKEL);
+
+  //   // AFTER
+  //   pskl.service.HistoryService.SNAPSHOT_PERIOD = SNAPSHOT_PERIOD_BACKUP;
+
+  // })
+});