move fps info from preview controller to piskel model

src/js/Events.js

@@ -59,6 +59,7 @@ var Events = {
   AFTER_SAVING_PISKEL: 'AFTER_SAVING_PISKEL',
 
   FRAME_SIZE_CHANGED : 'FRAME_SIZE_CHANGED',
+  FPS_CHANGED : 'FPS_CHANGED',
 
   SELECTION_CREATED: 'SELECTION_CREATED',
   SELECTION_MOVE_REQUEST: 'SELECTION_MOVE_REQUEST',

src/js/app.js

@@ -19,8 +19,9 @@
       this.shortcutService.init();
 
       var size = pskl.UserSettings.get(pskl.UserSettings.DEFAULT_SIZE);
+      var fps = Constants.DEFAULT.FPS;
       var descriptor = new pskl.model.piskel.Descriptor('New Piskel', '');
-      var piskel = new pskl.model.Piskel(size.width, size.height, descriptor);
+      var piskel = new pskl.model.Piskel(size.width, size.height, fps, descriptor);
 
       var layer = new pskl.model.Layer('Layer 1');
       var frame = new pskl.model.Frame(size.width, size.height);
@@ -177,16 +178,13 @@
 
     loadPiskel_ : function (piskelData) {
       var serializedPiskel = piskelData.piskel;
-      pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel, extra) {
+      pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
         pskl.app.piskelController.setPiskel(piskel);
         $.publish(Events.PISKEL_SAVED);
-        var fps = extra.fps;
         if (piskelData.descriptor) {
           // Backward compatibility for v2 or older
           piskel.setDescriptor(piskelData.descriptor);
-          fps = piskelData.fps;
         }
-        pskl.app.previewController.setFPS(fps);
       });
     },
 

src/js/controller/piskel/PiskelController.js

@@ -35,15 +35,16 @@
     return this.piskel.getWidth();
   };
 
-  /**
-   * TODO : this should be removed
-   * FPS should be stored in the Piskel model and not in the
-   * previewController
-   * Then piskelController should be able to return this information
-   * @return {Number} Frames per second for the current animation
-   */
   ns.PiskelController.prototype.getFPS = function () {
-    return pskl.app.previewController.getFPS();
+    return this.piskel.fps;
+  };
+
+  ns.PiskelController.prototype.setFPS = function (fps) {
+    if (typeof fps !== 'number') {
+      return;
+    }
+    this.piskel.fps = fps;
+    $.publish(Events.FPS_CHANGED);
   };
 
   ns.PiskelController.prototype.getLayers = function () {

src/js/controller/preview/PreviewController.js

@@ -21,23 +21,12 @@
     this.lastRenderTime = 0;
     this.renderFlag = true;
 
-    /**
-     * !! WARNING !! ALL THE INITIALISATION BELOW SHOULD BE MOVED TO INIT()
-     * IT WILL STAY HERE UNTIL WE CAN REMOVE SETFPS (see comment below)
-     */
     this.fpsRangeInput = document.querySelector('#preview-fps');
     this.fpsCounterDisplay = document.querySelector('#display-fps');
     this.openPopupPreview = document.querySelector('.open-popup-preview-button');
     this.originalSizeButton = document.querySelector('.original-size-button');
     this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
 
-    /**
-     * !! WARNING !! THIS SHOULD REMAIN HERE UNTIL, BECAUSE THE PREVIEW CONTROLLER
-     * IS THE SOURCE OF TRUTH AT THE MOMENT WHEN IT COMES TO FPSs
-     * IT WILL BE QUERIED BY OTHER OBJECTS SO DEFINE IT AS SOON AS POSSIBLE
-     */
-    this.setFPS(Constants.DEFAULT.FPS);
-
     this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(this.container);
     this.popupPreviewController = new ns.PopupPreviewController(piskelController);
   };
@@ -58,7 +47,10 @@
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
     $.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true));
+    $.subscribe(Events.FPS_CHANGED, this.updateFPS_.bind(this));
+    // On PISKEL_RESET, set the render flag and update the FPS input
     $.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true));
+    $.subscribe(Events.PISKEL_RESET, this.updateFPS_.bind(this));
 
     this.initTooltips_();
     this.popupPreviewController.init();
@@ -66,6 +58,7 @@
     this.updateZoom_();
     this.updateOnionSkinPreview_();
     this.updateOriginalSizeButton_();
+    this.updateFPS_();
     this.updateMaxFPS_();
     this.updateContainerDimensions_();
   };
@@ -113,7 +106,7 @@
   ns.PreviewController.prototype.updateMaxFPS_ = function () {
     var maxFps = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
     this.fpsRangeInput.setAttribute('max', maxFps);
-    this.setFPS(Math.min(this.fps, maxFps));
+    this.piskelController.setFPS(Math.min(maxFps, this.piskelController.getFPS()));
   };
 
   ns.PreviewController.prototype.updateZoom_ = function () {
@@ -145,15 +138,17 @@
    * Event handler triggered on 'input' or 'change' events.
    */
   ns.PreviewController.prototype.onFpsRangeInputUpdate_ = function (evt) {
-    this.setFPS(parseInt(this.fpsRangeInput.value, 10));
+    var fps = parseInt(this.fpsRangeInput.value, 10);
+    this.piskelController.setFPS(fps);
     // blur only on 'change' events, as blurring on 'input' breaks on Firefox
     if (evt.type === 'change') {
       this.fpsRangeInput.blur();
     }
   };
 
-  ns.PreviewController.prototype.setFPS = function (fps) {
-    if (typeof fps === 'number') {
+  ns.PreviewController.prototype.updateFPS_ = function () {
+    var fps = this.piskelController.getFPS();
+    if (fps !== this.fps) {
       this.fps = fps;
       // reset
       this.fpsRangeInput.value = 0;
@@ -163,10 +158,6 @@
     }
   };
 
-  ns.PreviewController.prototype.getFPS = function () {
-    return this.fps;
-  };
-
   ns.PreviewController.prototype.render = function (delta) {
     this.elapsedTime += delta;
     var index = this.getNextIndex_(delta);

src/js/controller/settings/ImportController.js

@@ -79,9 +79,8 @@
 
   ns.ImportController.prototype.openPiskelFile_ = function (file) {
     if (this.isPiskel_(file)) {
-      pskl.utils.PiskelFileUtils.loadFromFile(file, function (piskel, extra) {
+      pskl.utils.PiskelFileUtils.loadFromFile(file, function (piskel) {
         pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.previewController.setFPS(extra.fps);
       });
       this.closeDrawer_();
     }

src/js/devtools/DrawingTestPlayer.js

@@ -46,7 +46,7 @@
 
   ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) {
     var descriptor = new pskl.model.piskel.Descriptor('TestPiskel', '');
-    var piskel = new pskl.model.Piskel(width, height, descriptor);
+    var piskel = new pskl.model.Piskel(width, height, 12, descriptor);
     var layer = new pskl.model.Layer('Layer 1');
     var frame = new pskl.model.Frame(width, height);
 

src/js/model/Piskel.js

@@ -8,21 +8,14 @@
    * @param {String} name
    * @param {String} description
    */
-  ns.Piskel = function (width, height, descriptor) {
+  ns.Piskel = function (width, height, fps, descriptor) {
     if (width && height && descriptor) {
-      /** @type {Array} */
       this.layers = [];
-
-      /** @type {Number} */
       this.width = width;
-
-      /** @type {Number} */
       this.height = height;
-
       this.descriptor = descriptor;
-
-      /** @type {String} */
       this.savePath = null;
+      this.fps = fps;
 
     } else {
       throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ',');
@@ -35,11 +28,11 @@
    * @param  {Array<pskl.model.Layer>} layers
    * @return {pskl.model.Piskel}
    */
-  ns.Piskel.fromLayers = function (layers, descriptor) {
+  ns.Piskel.fromLayers = function (layers, fps, descriptor) {
     var piskel = null;
     if (layers.length > 0 && layers[0].size() > 0) {
       var sampleFrame = layers[0].getFrameAt(0);
-      piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
+      piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), fps, descriptor);
       layers.forEach(piskel.addLayer.bind(piskel));
     } else {
       throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument';
@@ -59,6 +52,10 @@
     return this.width;
   };
 
+  ns.Piskel.prototype.getFPS = function () {
+    return this.fps;
+  };
+
   ns.Piskel.prototype.getLayers = function () {
     return this.layers;
   };

src/js/service/BackupService.js

@@ -26,7 +26,6 @@
     var info = {
       name : descriptor.name,
       description : descriptor.info,
-      fps : this.piskelController.getFPS(),
       date : Date.now(),
       hash : hash
     };
@@ -47,16 +46,11 @@
   };
 
   ns.BackupService.prototype.load = function() {
-
     var previousPiskel = window.localStorage.getItem('bkp.prev.piskel');
-    var previousInfo = window.localStorage.getItem('bkp.prev.info');
-
     previousPiskel = JSON.parse(previousPiskel);
-    previousInfo = JSON.parse(previousInfo);
 
     pskl.utils.serialization.Deserializer.deserialize(previousPiskel, function (piskel) {
       pskl.app.piskelController.setPiskel(piskel);
-      pskl.app.previewController.setFPS(previousInfo.fps);
     });
   };
 

src/js/service/FileDropperService.js

@@ -52,10 +52,9 @@
     pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
   };
 
-  ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel, extra) {
+  ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel) {
     if (window.confirm('This will replace your current animation')) {
       pskl.app.piskelController.setPiskel(piskel);
-      pskl.app.previewController.setFPS(extra.fps);
     }
   };
 

src/js/service/HistoryService.js

@@ -51,6 +51,7 @@
       action : action,
       frameIndex : action.state ? action.state.frameIndex : this.piskelController.currentFrameIndex,
       layerIndex : action.state ? action.state.layerIndex : this.piskelController.currentLayerIndex,
+      fps : this.piskelController.getFPS(),
       uuid: pskl.utils.Uuid.generate()
     };
 
@@ -182,6 +183,7 @@
   ns.HistoryService.prototype.setupState = function (state) {
     this.piskelController.setCurrentFrameIndex(state.frameIndex);
     this.piskelController.setCurrentLayerIndex(state.layerIndex);
+    this.piskelController.setFPS(state.fps);
   };
 
   ns.HistoryService.prototype.replayState = function (state) {

src/js/service/ImportService.js

@@ -101,10 +101,9 @@
     var frames = this.createFramesFromImages_(images, frameSizeX, frameSizeY, smoothing);
     var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
     var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
-    var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
+    var piskel = pskl.model.Piskel.fromLayers([layer], Constants.DEFAULT.FPS, descriptor);
 
     this.piskelController_.setPiskel(piskel);
-    this.previewController_.setFPS(Constants.DEFAULT.FPS);
   };
 
   /**

src/js/service/storage/DesktopStorageService.js

@@ -37,11 +37,10 @@
 
   ns.DesktopStorageService.prototype.load = function (savePath) {
     pskl.utils.FileUtilsDesktop.readFile(savePath).then(function (content) {
-      pskl.utils.PiskelFileUtils.decodePiskelFile(content, function (piskel, extra) {
+      pskl.utils.PiskelFileUtils.decodePiskelFile(content, function (piskel) {
         // store save path so we can re-save without opening the save dialog
         piskel.savePath = savePath;
         pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.previewController.setFPS(extra.fps);
       });
     });
   };

src/js/utils/serialization/Deserializer.js

@@ -28,7 +28,7 @@
     var description = piskelData.description || '';
 
     var descriptor = new pskl.model.piskel.Descriptor(name, description);
-    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
+    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, piskelData.fps, descriptor);
 
     this.layersToLoad_ = piskelData.layers.length;
     if (piskelData.expanded) {
@@ -85,7 +85,7 @@
       this.layers_.forEach(function (layer) {
         this.piskel_.addLayer(layer);
       }.bind(this));
-      this.callback_(this.piskel_, {fps: this.data_.piskel.fps});
+      this.callback_(this.piskel_);
     }
   };
 })();

src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js

@@ -90,7 +90,7 @@
       }
 
       var descriptor = new pskl.model.piskel.Descriptor(descriptorName, descriptorDescription);
-      var piskel = new pskl.model.Piskel(width, height, descriptor);
+      var piskel = new pskl.model.Piskel(width, height, fps, descriptor);
       var loadedLayers = 0;
 
       var loadLayerImage = function(layer, cb) {
@@ -103,7 +103,7 @@
 
           loadedLayers++;
           if (loadedLayers == layerCount) {
-            cb(piskel, {fps: fps});
+            cb(piskel);
           }
         };
         image.src = layer.dataUri;

src/js/utils/serialization/backward/Deserializer_v0.js

@@ -14,6 +14,6 @@
     var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
     var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
 
-    this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor), {fps: Constants.DEFAULTS.FPS});
+    this.callback_(pskl.model.Piskel.fromLayers([layer], Constants.DEFAULTS.FPS, descriptor));
   };
 })();

src/js/utils/serialization/backward/Deserializer_v1.js

@@ -9,14 +9,14 @@
   ns.Deserializer_v1.prototype.deserialize = function () {
     var piskelData = this.data_.piskel;
     var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
-    var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
+    var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, Constants.DEFAULTS.FPS, descriptor);
 
     piskelData.layers.forEach(function (serializedLayer) {
       var layer = this.deserializeLayer(serializedLayer);
       piskel.addLayer(layer);
     }.bind(this));
 
-    this.callback_(piskel, {fps: Constants.DEFAULTS.FPS});
+    this.callback_(piskel);
   };
 
   ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) {

test/js/service/HistoryServiceTest.js

@@ -22,7 +22,7 @@ describe("History Service suite", function() {
   };
 
   var createMockHistoryService = function () {
-    var mockPiskelController = { getPiskel : function () {} };
+    var mockPiskelController = { getPiskel : function () {}, getFPS : function () { return 12; } };
     var mockShortcutService = {
       registerShortcuts : function () {},
       registerShortcut : function () {}

test/js/utils/serialization/SerializerTest.js

@@ -13,7 +13,7 @@ describe("Serialization/Deserialization test", function() {
 
   it("serializes layer opacity", function(done) {
     var descriptor = new pskl.model.piskel.Descriptor('piskelName', 'piskelDesc');
-    var piskel = new pskl.model.Piskel(1, 1, descriptor);
+    var piskel = new pskl.model.Piskel(1, 1, 1, descriptor);
 
     piskel.addLayer(new pskl.model.Layer('layer1'));
     piskel.addLayer(new pskl.model.Layer('layer2'));