diff --git a/src/js/controller/piskel/PiskelController.js b/src/js/controller/piskel/PiskelController.js index a49b9ce..b43341f 100644 --- a/src/js/controller/piskel/PiskelController.js +++ b/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 () { diff --git a/src/js/model/Frame.js b/src/js/model/Frame.js index da57197..827d689 100644 --- a/src/js/model/Frame.js +++ b/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; - }; })(); diff --git a/src/js/model/Layer.js b/src/js/model/Layer.js index 8988827..0dba534 100644 --- a/src/js/model/Layer.js +++ b/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; }; diff --git a/src/js/model/Piskel.js b/src/js/model/Piskel.js index 629eb12..3519836 100644 --- a/src/js/model/Piskel.js +++ b/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, ','); } diff --git a/src/js/utils/serialization/Deserializer.js b/src/js/utils/serialization/Deserializer.js index bcb3c26..ac8ae9b 100644 --- a/src/js/utils/serialization/Deserializer.js +++ b/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_); } }; diff --git a/src/js/utils/serialization/Serializer.js b/src/js/utils/serialization/Serializer.js index f95f02d..5e8aae6 100644 --- a/src/js/utils/serialization/Serializer.js +++ b/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, } }); }, diff --git a/src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js b/src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js index 9506e0c..2ba9bd8 100644 --- a/src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js +++ b/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++; diff --git a/src/js/utils/serialization/arraybuffer/ArrayBufferSerializer.js b/src/js/utils/serialization/arraybuffer/ArrayBufferSerializer.js index 0b3d249..4c1b3be 100644 --- a/src/js/utils/serialization/arraybuffer/ArrayBufferSerializer.js +++ b/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(