Added frame toggling for preview

src/css/frames-list.css

@@ -135,6 +135,10 @@
   cursor: default;
 }
 
+.preview-tile .tile-overlay.tile-count.toggled {
+  background-color: rgba(111, 215, 0, 0.6);
+}
+
 .preview-tile .tile-overlay.delete-frame-action {
    top: 0;
    right: 0;

src/js/controller/FramesListController.js

@@ -5,7 +5,8 @@
     SELECT : 'select',
     CLONE : 'clone',
     DELETE : 'delete',
-    NEW_FRAME : 'newframe'
+    NEW_FRAME : 'newframe',
+    TOGGLE: 'toggle'
   };
 
   ns.FramesListController = function (piskelController, container) {
@@ -114,6 +115,9 @@
       this.tiles.push(newtile);
       this.previewList.insertBefore(newtile, this.addFrameTile);
       this.updateScrollerOverflows();
+    } else if (action == ACTION.TOGGLE) {
+      var frame = this.piskelController.getCurrentLayer().getFrameAt(index);
+      frame.toggled = !frame.toggled;
     }
 
     this.flagForRedraw_();
@@ -127,10 +131,19 @@
       // Remove selected class
       this.tiles[i].classList.remove('selected');
 
+      // Remove toggle class
+      this.tiles[i].querySelector('.tile-count').classList.remove('toggled');
+
       // Update tile numbers
       this.tiles[i].setAttribute('data-tile-number', i);
       this.tiles[i].querySelector('.tile-count').innerHTML = (i + 1);
 
+      // Update toggle
+      var frame = this.piskelController.getCurrentLayer().getFrameAt(i);
+      if (frame.toggled) {
+        this.tiles[i].querySelector('.tile-count').classList.add('toggled');
+      }
+
       // Check if any tile is updated
       var hash = this.piskelController.getCurrentLayer().getFrameAt(i).getHash();
       if (this.tiles[i].getAttribute('data-tile-hash') !== hash) {
@@ -290,8 +303,12 @@
     previewTileRoot.appendChild(dndHandle);
 
     // Add tile count
-    var tileCount = document.createElement('div');
+    var tileCount = document.createElement('button');
-    tileCount.className = 'tile-overlay tile-count';
+    tileCount.setAttribute('rel', 'tooltip');
+    tileCount.setAttribute('title', 'Toggle for preview');
+    tileCount.setAttribute('data-tile-number', tileNumber);
+    tileCount.setAttribute('data-tile-action', ACTION.TOGGLE);
+    tileCount.className = 'tile-overlay tile-count toggle-frame-action';
     tileCount.innerHTML = tileNumber + 1;
     previewTileRoot.appendChild(tileCount);
 

src/js/controller/piskel/PiskelController.js

@@ -158,6 +158,29 @@
     });
   };
 
+  ns.PiskelController.prototype.getFrames = function () {
+    var layer = this.getCurrentLayer();
+    return layer.getFrames();
+  };
+
+  ns.PiskelController.prototype.getToggledFrameIndexes = function () {
+    var frameIndexes = this.getFrames()
+    /* Replace each frame with its index
+       or -1 if it's not toggled */
+    .map(
+      function(frame, idx) {
+        var idx;
+        idx += 1;
+        return (frame.toggled) ? idx - 1 : -1;
+      })
+    /* Filter out untoggled frames */
+    .filter(
+      function(frame) {
+        return frame >= 0;
+      });
+    return frameIndexes;
+  };
+
   ns.PiskelController.prototype.getFrameCount = function () {
     return this.piskel.getFrameCount();
   };

src/js/controller/preview/PreviewController.js

@@ -281,12 +281,14 @@
       return this.piskelController.getCurrentFrameIndex();
     } else {
       var index = Math.floor(this.elapsedTime / (1000 / this.fps));
-      if (!this.piskelController.hasFrameAt(index)) {
+      var frameIndexes = this.piskelController.getToggledFrameIndexes();
+      if (frameIndexes.length <= index) {
         this.elapsedTime = 0;
-        index = 0;
+        index = (frameIndexes.length) ? frameIndexes[0] : this.piskelController.getCurrentFrameIndex();
-      }
         return index;
       }
+      return frameIndexes[index];
+    }
   };
 
   /**

src/js/model/Frame.js

@@ -9,6 +9,7 @@
       this.version = 0;
       this.pixels = ns.Frame.createEmptyPixelGrid_(width, height);
       this.stateIndex = 0;
+      this.toggled = true;
     } else {
       throw 'Bad arguments in pskl.model.Frame constructor : ' + width + ', ' + height;
     }