Issue 24 : Layers

!! NOT STABLE !!
Initial implementation. No UI update yet.
Check js/model/Piskel.js and js/model/Layer.js for an overview of the new
API.

Piskels can be saved on the existing service.

Previous piskels cannot be loaded. This should be fixed soon.

js/model/Frame.js

@@ -1,15 +1,28 @@
 (function () {
   var ns = $.namespace("pskl.model");
   
-  ns.Frame = function (pixels) {
-    this.pixels = pixels;
-    this.previousStates = [this.getPixels()];
-    this.stateIndex = 0;
+  ns.Frame = function (width, height) {
+    if (width && height) {
+      this.width = width;
+      this.height = height;
+
+      this.pixels = ns.Frame.createEmptyPixelGrid_(width, height);
+      this.previousStates = [this.getPixels()];
+      this.stateIndex = 0;
+    } else {
+      throw 'Bad arguments in pskl.model.Frame constructor : ' + width + ', ' + height;
+    }
   };
 
-  ns.Frame.createEmpty = function (width, height) {
-    var pixels = ns.Frame.createEmptyPixelGrid_(width, height);
-    return new ns.Frame(pixels);
+  ns.Frame.fromPixelGrid = function (pixels) {
+    if (pixels.length && pixels[0].length) {
+      var w = pixels.length, h = pixels[0].length;
+      var frame = new pskl.model.Frame(w, h);
+      frame.setPixels(pixels);
+      return frame;
+    } else {
+      throw 'Bad arguments in pskl.model.Frame.fromPixelGrid : ' + pixels;
+    }
   };
 
   ns.Frame.createEmptyPixelGrid_ = function (width, height) {
@@ -25,11 +38,13 @@
   };
 
   ns.Frame.createEmptyFromFrame = function (frame) {
-    return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
+    return new ns.Frame(frame.getWidth(), frame.getHeight());
   };
 
   ns.Frame.prototype.clone = function () {
-    return new ns.Frame(this.getPixels());
+    var clone = new ns.Frame(this.width, this.height);
+    clone.setPixels(this.getPixels());
+    return clone;
   };
 
   /**
@@ -46,8 +61,6 @@
     this.pixels = this.clonePixels_(pixels);
   };
 
-
-
   ns.Frame.prototype.clear = function () {
     var pixels = ns.Frame.createEmptyPixelGrid_(this.getWidth(), this.getHeight());
     this.setPixels(pixels);
@@ -77,12 +90,20 @@
     return this.pixels[col][row];
   };
 
+  ns.Frame.prototype.forEachPixel = function (callback) {
+    for (var col = 0 ; col < this.getWidth() ; col++) {
+      for (var row = 0 ; row < this.getHeight() ; row++) {
+        callback(this.getPixel(col, row), col, row);
+      }
+    }
+  };
+
   ns.Frame.prototype.getWidth = function () {
-    return this.pixels.length;
+    return this.width;
   };
 
   ns.Frame.prototype.getHeight = function () {
-    return this.pixels[0].length;
+    return this.height;
   };
 
   ns.Frame.prototype.containsPixel = function (col, row) {

js/model/FrameSheet.js

@@ -23,14 +23,14 @@
     this.frames.push(frame);
   };
 
-  ns.FrameSheet.prototype.getFrameCount = function () {
-    return this.frames.length;
-  };
-
   ns.FrameSheet.prototype.getCurrentFrame = function () {
     return this.frames[this.currentFrameIndex];
   };
 
+  ns.FrameSheet.prototype.getFrameCount = function () {
+    return this.frames.length;
+  };
+
   ns.FrameSheet.prototype.setCurrentFrameIndex = function (index) {
     this.currentFrameIndex = index;
     $.publish(Events.CURRENT_FRAME_SET, [this.getCurrentFrame()]);
@@ -101,7 +101,7 @@
 
   
   ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
-    return (index >= 0 && index < this.getFrameCount());
+    return (index >= 0 && index < this.frames.length);
   };
 
   ns.FrameSheet.prototype.getFrameByIndex = function(index) {
@@ -122,10 +122,9 @@
     }
     this.frames.splice(index, 1);
 
-    // Current frame index might not be valid anymore
-    if (!this.hasFrameAtIndex(this.currentFrameIndex)) {
-      // if not select last frame available
-      this.setCurrentFrameIndex(this.getFrameCount() - 1);
+    // Current frame index is impacted if the removed frame was before the current frame
+    if (this.currentFrameIndex >= index) {
+      this.setCurrentFrameIndex(this.currentFrameIndex - 1);
     }
 
     $.publish(Events.FRAMESHEET_RESET);

js/model/Layer.js

@@ -0,0 +1,82 @@
+(function () {
+  var ns = $.namespace('pskl.model');
+
+  ns.Layer = function (name) {
+    if (!name) {
+      throw 'Invalid arguments in Layer constructor : \'name\' is mandatory';
+    } else {
+      this.name = name;
+      this.frames = [];
+    }
+  };
+
+  ns.Layer.prototype.getName = function () {
+    return this.name;
+  };
+
+  ns.Layer.prototype.getFrames = function () {
+    return this.frames;
+  };
+
+  ns.Layer.prototype.getFrameAt = function (index) {
+    return this.frames[index];
+  };
+
+  ns.Layer.prototype.addFrame = function (frame) {
+    this.frames.push(frame);
+  };
+
+  ns.Layer.prototype.addFrameAt = function (frame, index) {
+    this.frames.splice(index, 0, frame);
+  };
+
+  ns.Layer.prototype.removeFrame = function (frame) {
+    var index = this.frames.indexOf(frame);
+    this.removeFrameAt(index);
+  };
+
+  ns.Layer.prototype.removeFrameAt = function (index) {
+    if (this.frames[index]) {
+      this.frames.splice(index, 1);
+    } else {
+      throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.length() + ')';
+    }
+  };
+
+  ns.Layer.prototype.moveFrame = function (fromIndex, toIndex) {
+    var frame = this.frames.splice(fromIndex, 1)[0];
+    this.frames.splice(toIndex, 0, frame);
+  };
+
+  ns.Layer.prototype.swapFramesAt = function (fromIndex, toIndex) {
+    var fromFrame = this.frames[fromIndex];
+    var toFrame = this.frames[toIndex];
+    if (fromFrame && toFrame) {
+      this.frames[toIndex] = fromFrame;
+      this.frames[fromIndex] = toFrame;
+    } else {
+      console.log('frames', this.frames);
+      console.log('fromIndex', fromIndex, 'toIndex', toIndex);
+      throw 'Frame not found in moveFrameAt';
+    }
+  };
+
+  ns.Layer.prototype.duplicateFrame = function (frame) {
+    var index = this.frames.indexOf(frame);
+    this.duplicateFrameAt();
+  };
+
+  ns.Layer.prototype.duplicateFrameAt = function (index) {
+    var frame = this.frames[index];
+    if (frame) {
+      var clone = frame.clone();
+      this.addFrameAt(clone, index);
+    } else {
+      throw 'Frame not found in duplicateFrameAt';
+    }
+  };
+
+  ns.Layer.prototype.length = function () {
+    return this.frames.length;
+  };
+})();

js/model/Piskel.js

@@ -0,0 +1,66 @@
+(function () {
+  var ns = $.namespace('pskl.model');
+
+  /**
+   * @constructor
+   * @param {Number} width
+   * @param {Number} height
+   */
+  ns.Piskel = function (width, height, fps) {
+    if (width && height && fps) {
+      /** @type {Array} */
+      this.layers = [];
+
+      /** @type {Number} */
+      this.fps = fps;
+
+      /** @type {Number} */
+      this.width = width;
+
+      /** @type {Number} */
+      this.height = height;
+    } else {
+      throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ",");
+    }
+  };
+
+  ns.Piskel.prototype.getLayers = function () {
+    return this.layers;
+  };
+
+  ns.Piskel.prototype.getHeight = function () {
+    return this.height;
+  };
+
+  ns.Piskel.prototype.getWidth = function () {
+    return this.width;
+  };
+
+  ns.Piskel.prototype.getFps = function () {
+    return this.fps;
+  };
+
+  ns.Piskel.prototype.getLayers = function () {
+    return this.layers;
+  };
+
+  ns.Piskel.prototype.getLayerAt = function (index) {
+    return this.layers[index];
+  };
+
+  ns.Piskel.prototype.addLayer = function (layer) {
+    this.layers.push(layer);
+  };
+
+  ns.Piskel.prototype.removeLayer = function (layer) {
+    var index = this.layers.indexOf(layer);
+    if (index != -1) {
+      this.layers.splice(index, 1);
+    }
+  };
+
+  ns.Piskel.prototype.removeLayerAt = function (index) {
+    this.layers.splice(index, 1);
+  };
+
+})();