Move hidden frames info to Piskel model

src/js/controller/piskel/PiskelController.js

@@ -122,6 +122,16 @@
       l.addFrameAt(this.createEmptyFrame_(), index);
     }.bind(this));
 
+    this.onFrameAddedAt_(index);
+  };
+
+  ns.PiskelController.prototype.onFrameAddedAt_ = function (index) {
+    this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (hiddenIndex) {
+      if (hiddenIndex >= index) {
+        return hiddenIndex + 1;
+      }
+    });
+
     this.setCurrentFrameIndex(index);
   };
 
@@ -135,6 +145,13 @@
     this.getLayers().forEach(function (l) {
       l.removeFrameAt(index);
     });
+
+    this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (hiddenIndex) {
+      if (hiddenIndex > index) {
+        return hiddenIndex - 1;
+      }
+    });
+
     // Current frame index is impacted if the removed frame was before the current frame
     if (this.currentFrameIndex >= index && this.currentFrameIndex > 0) {
       this.setCurrentFrameIndex(this.currentFrameIndex - 1);
@@ -149,40 +166,52 @@
     this.getLayers().forEach(function (l) {
       l.duplicateFrameAt(index);
     });
-    this.setCurrentFrameIndex(index + 1);
+    this.onFrameAddedAt_(index + 1);
   };
 
   ns.PiskelController.prototype.toggleFrameAt = function (index) {
-    this.getLayers().forEach(function (l) {
-      l.toggleFrameAt(index);
-    });
+    var hiddenFrames = this.piskel.hiddenFrames;
+    if (hiddenFrames.indexOf(index) === -1) {
+      hiddenFrames.push(index);
+    } else {
+      hiddenFrames = hiddenFrames.filter(function (i) {
+        return i !== index;
+      });
+    }
+
+    // Keep the hiddenFrames array sorted.
+    this.piskel.hiddenFrames = hiddenFrames.sort();
   };
 
   ns.PiskelController.prototype.moveFrame = function (fromIndex, toIndex) {
     this.getLayers().forEach(function (l) {
       l.moveFrame(fromIndex, toIndex);
     });
+
+    this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (index) {
+      if (index === fromIndex) {
+        return toIndex;
+      }
+
+      var direction = fromIndex < toIndex ? 1 : -1;
+      var max = Math.max(fromIndex, toIndex);
+      var min = Math.min(fromIndex, toIndex);
+      if (index >= min && index <= max) {
+        return index - direction;
+      }
+    });
   };
 
   ns.PiskelController.prototype.hasVisibleFrameAt = function (index) {
-    var frame = this.getCurrentLayer().getFrameAt(index);
-    return frame ? frame.isVisible() : false;
+    return this.piskel.hiddenFrames.indexOf(index) === -1;
   };
 
   ns.PiskelController.prototype.getVisibleFrameIndexes = function () {
-    var frameIndexes = this.getCurrentLayer().getFrames()
-    /* Replace each frame with its index
-       or -1 if it's not visible */
-    .map(
-      function(frame, idx) {
-        return (frame.visible) ? idx : -1;
-      })
-    /* Filter out invisible frames */
-    .filter(
-      function(index) {
-        return index >= 0;
-      });
-    return frameIndexes;
+    return this.getCurrentLayer().getFrames().map(function (frame, index) {
+      return index;
+    }).filter(function (index) {
+      return this.piskel.hiddenFrames.indexOf(index) === -1;
+    }.bind(this));
   };
 
   ns.PiskelController.prototype.getFrameCount = function () {

src/js/model/Frame.js

@@ -9,7 +9,6 @@
       this.version = 0;
       this.pixels = ns.Frame.createEmptyPixelGrid_(width, height);
       this.stateIndex = 0;
-      this.visible = true;
     } else {
       throw 'Bad arguments in pskl.model.Frame constructor : ' + width + ', ' + height;
     }
@@ -152,12 +151,4 @@
   ns.Frame.prototype.isSameSize = function (otherFrame) {
     return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
   };
-
-  ns.Frame.prototype.toggleVisibility = function () {
-    this.visible = !this.visible;
-  };
-
-  ns.Frame.prototype.isVisible = function () {
-    return this.visible;
-  };
 })();

src/js/model/Layer.js

@@ -110,15 +110,6 @@
     }
   };
 
-  ns.Layer.prototype.toggleFrameAt = function (index) {
-    var frame = this.frames[index];
-    if (frame) {
-      frame.toggleVisibility();
-    } else {
-      console.error('Frame not found in toggleFrameAt (at %s)', index);
-    }
-  };
-
   ns.Layer.prototype.size = function () {
     return this.frames.length;
   };

src/js/model/Piskel.js

@@ -16,6 +16,7 @@
       this.descriptor = descriptor;
       this.savePath = null;
       this.fps = fps;
+      this.hiddenFrames = [];
     } else {
       throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ',');
     }

src/js/utils/serialization/Deserializer.js

@@ -74,13 +74,8 @@
       image.src = chunk.base64PNG;
       return deferred.promise;
     })).then(function () {
-      var hiddenFrames = this.hiddenFrames;
       frames.forEach(function (frame) {
         layer.addFrame(frame);
-        var currentIndex = layer.getFrames().length - 1;
-        if (hiddenFrames.indexOf(currentIndex) != -1) {
-          frame.visible = false;
-        }
       });
       this.layers_[index] = layer;
       this.onLayerLoaded_();
@@ -98,6 +93,7 @@
       this.layers_.forEach(function (layer) {
         this.piskel_.addLayer(layer);
       }.bind(this));
+      this.piskel_.hiddenFrames = this.hiddenFrames;
       this.callback_(this.piskel_);
     }
   };

src/js/utils/serialization/Serializer.js

@@ -21,15 +21,6 @@
       var serializedLayers = piskel.getLayers().map(function (l) {
         return pskl.utils.serialization.Serializer.serializeLayer(l);
       });
-      var frames = piskel.getLayerAt(0).getFrames();
-      var hiddenFrames = frames.map(function (frame, index) {
-        if (frame.visible) {
-          return -1;
-        }
-        return index;
-      }).filter(function (frameIndex) {
-        return frameIndex !== -1;
-      });
 
       return JSON.stringify({
         modelVersion : Constants.MODEL_VERSION,
@@ -40,7 +31,7 @@
           height : piskel.getHeight(),
           width : piskel.getWidth(),
           layers : serializedLayers,
-          hiddenFrames : hiddenFrames,
+          hiddenFrames : piskel.hiddenFrames,
         }
       });
     },

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

@@ -104,6 +104,7 @@
 
       var descriptor = new pskl.model.piskel.Descriptor(descriptorName, descriptorDescription);
       var piskel = new pskl.model.Piskel(width, height, fps, descriptor);
+      piskel.hiddenFrames = hiddenFrames;
       var loadedLayers = 0;
 
       var loadLayerImage = function(layer, cb) {
@@ -112,10 +113,6 @@
           var frames = pskl.utils.FrameUtils.createFramesFromSpritesheet(this, layer.frameCount);
           frames.forEach(function (frame) {
             layer.model.addFrame(frame);
-            var currentIndex = layer.model.getFrames().length - 1;
-            if (hiddenFrames.indexOf(currentIndex) != -1) {
-              frame.visible = false;
-            }
           });
 
           loadedLayers++;

src/js/utils/serialization/arraybuffer/ArrayBufferSerializer.js

@@ -102,14 +102,7 @@
       }
 
       var frames = pskl.app.piskelController.getLayerAt(0).getFrames();
-      var hiddenFrames = frames.map(function (frame, index) {
-        if (frame.visible) {
-          return -1;
-        }
-        return index;
-      }).filter(function (frameIndex) {
-        return frameIndex !== -1;
-      });
+      var hiddenFrames = piskel.hiddenFrames;
       var serializedHiddenFrames = hiddenFrames.join('-');
 
       var bytes = ns.ArrayBufferSerializer.calculateRequiredBytes(