diff --git a/src/css/frames-list.css b/src/css/frames-list.css index b658a26b..6658029b 100644 --- a/src/css/frames-list.css +++ b/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; diff --git a/src/js/controller/FramesListController.js b/src/js/controller/FramesListController.js index 9ff4a644..34e05ccb 100644 --- a/src/js/controller/FramesListController.js +++ b/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'); - tileCount.className = 'tile-overlay tile-count'; + var tileCount = document.createElement('button'); + 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); diff --git a/src/js/controller/piskel/PiskelController.js b/src/js/controller/piskel/PiskelController.js index aa111e3a..851f835c 100644 --- a/src/js/controller/piskel/PiskelController.js +++ b/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(); }; diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js index 1ac2df09..3c8cc7e3 100644 --- a/src/js/controller/preview/PreviewController.js +++ b/src/js/controller/preview/PreviewController.js @@ -281,11 +281,13 @@ 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 index; + return frameIndexes[index]; } }; diff --git a/src/js/model/Frame.js b/src/js/model/Frame.js index 827d6898..6187b385 100644 --- a/src/js/model/Frame.js +++ b/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; }