Add comments for hiddenFrames feature

src/js/controller/FramesListController.js

@@ -116,7 +116,7 @@
       this.previewList.insertBefore(newtile, this.addFrameTile);
       this.updateScrollerOverflows();
     } else if (action == ACTION.TOGGLE) {
-      this.piskelController.toggleFrameAt(index);
+      this.piskelController.toggleFrameVisibilityAt(index);
     }
 
     this.flagForRedraw_();

src/js/controller/piskel/PiskelController.js

@@ -146,6 +146,7 @@
       l.removeFrameAt(index);
     });
 
+    // Update the array of hidden frames since some hidden indexes might have shifted.
     this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (hiddenIndex) {
       if (hiddenIndex > index) {
         return hiddenIndex - 1;
@@ -169,7 +170,11 @@
     this.onFrameAddedAt_(index + 1);
   };
 
-  ns.PiskelController.prototype.toggleFrameAt = function (index) {
+  /**
+   * Toggle frame visibility for the frame at the provided index.
+   * A visible frame will be included in the animated preview.
+   */
+  ns.PiskelController.prototype.toggleFrameVisibilityAt = function (index) {
     var hiddenFrames = this.piskel.hiddenFrames;
     if (hiddenFrames.indexOf(index) === -1) {
       hiddenFrames.push(index);
@@ -188,16 +193,24 @@
       l.moveFrame(fromIndex, toIndex);
     });
 
+    // Update the array of hidden frames since some hidden indexes might have shifted.
     this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (index) {
       if (index === fromIndex) {
         return toIndex;
       }
 
-      var direction = fromIndex < toIndex ? 1 : -1;
+      // All the frames between fromIndex and toIndex changed their index.
-      var max = Math.max(fromIndex, toIndex);
+      var isImpacted = index >= Math.min(fromIndex, toIndex) &&
-      var min = Math.min(fromIndex, toIndex);
+                       index <= Math.max(fromIndex, toIndex);
-      if (index >= min && index <= max) {
+      if (isImpacted) {
-        return index - direction;
+        if (fromIndex < toIndex) {
+          // If the frame moved to a higher index, all impacted frames had their index
+          // reduced by 1.
+          return index - 1;
+        } else {
+          // Otherwise, they had their index increased by 1.
+          return index + 1;
+        }
       }
     });
   };

src/js/controller/piskel/PublicPiskelController.js

@@ -37,7 +37,7 @@
     this.saveWrap_('moveLayerDown', true);
     this.saveWrap_('removeCurrentLayer', true);
     this.saveWrap_('setLayerOpacityAt', true);
-    this.saveWrap_('toggleFrameAt', true);
+    this.saveWrap_('toggleFrameVisibilityAt', true);
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.PREVIOUS_FRAME, this.selectPreviousFrame.bind(this));