diff --git a/diff b/diff new file mode 100644 index 00000000..4da927ae --- /dev/null +++ b/diff @@ -0,0 +1,179 @@ +diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js +index 3fca048..3c94eaa 100644 +--- a/js/controller/settings/ImportController.js ++++ b/js/controller/settings/ImportController.js +@@ -153,15 +153,12 @@ + var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing); + var frame = pskl.utils.FrameUtils.createFromImage(image); + +- // TODO : juliandescottes : here we only want to create a layer from an array of frames, and create a new piskel using this layer +- // we shouldn't use the deserializer for this ... it's only working because it's falling back to the old implementation +- // bad, very bad +- var deserializer = new pskl.utils.Deserializer([frame], function (piskel) { +- pskl.app.piskelController.setPiskel(piskel); +- pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); +- this.reset_(); +- }.bind(this)); +- deserializer.deserialize(); ++ var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]); ++ var piskel = pskl.model.Piskel.fromLayers([layer]); ++ ++ pskl.app.piskelController.setPiskel(piskel); ++ pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); ++ this.reset_(); + } + } + }; +diff --git a/js/model/Layer.js b/js/model/Layer.js +index 0132e6a..464b1f9 100644 +--- a/js/model/Layer.js ++++ b/js/model/Layer.js +@@ -10,6 +10,12 @@ + } + }; + ++ ns.Layer.fromFrames = function (name, frames) { ++ var layer = new ns.Layer(name); ++ frames.forEach(layer.addFrame.bind(layer)); ++ return layer; ++ }; ++ + ns.Layer.prototype.getName = function () { + return this.name; + }; +diff --git a/js/model/Piskel.js b/js/model/Piskel.js +index 7748408..223d618 100644 +--- a/js/model/Piskel.js ++++ b/js/model/Piskel.js +@@ -21,6 +21,18 @@ + } + }; + ++ ns.Piskel.fromLayers = function (layers) { ++ var piskel = null; ++ if (layers.length > 0 && layers[0].length() > 0) { ++ var sampleFrame = layers[0].getFrameAt(0); ++ piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight()); ++ layers.forEach(piskel.addLayer.bind(piskel)); ++ } else { ++ throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument' ++ } ++ return piskel; ++ }; ++ + ns.Piskel.prototype.getLayers = function () { + return this.layers; + }; +diff --git a/js/utils/Deserializer.js b/js/utils/Deserializer.js +index 5a248ba..56f64e4 100644 +--- a/js/utils/Deserializer.js ++++ b/js/utils/Deserializer.js +@@ -41,9 +41,7 @@ + var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount); + + // 6 - add each image to the layer +- frames.forEach(function (frame) { +- layer.addFrame(pskl.model.Frame.fromPixelGrid(frame)); +- }); ++ frames.forEach(layer.addFrame.bind(layer)); + + this.onLayerLoaded_(); + }.bind(this); +diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js +index b20d84f..055c8ed 100644 +--- a/js/utils/FrameUtils.js ++++ b/js/utils/FrameUtils.js +@@ -41,9 +41,9 @@ + + createFromImageData : function (imageData, width, height) { + // Draw the zoomed-up pixels to a different canvas context +- var frame = []; ++ var grid = []; + for (var x = 0 ; x < width ; x++){ +- frame[x] = []; ++ grid[x] = []; + for (var y = 0 ; y < height ; y++){ + // Find the starting index in the one-dimensional image data + var i = (y * width + x)*4; +@@ -52,13 +52,13 @@ + var b = imageData[i+2]; + var a = imageData[i+3]; + if (a < 125) { +- frame[x][y] = Constants.TRANSPARENT_COLOR; ++ grid[x][y] = Constants.TRANSPARENT_COLOR; + } else { +- frame[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b); ++ grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b); + } + } + } +- return frame; ++ return pskl.model.Frame.fromPixelGrid(grid); + }, + + /** +diff --git a/js/utils/Serializer.js b/js/utils/Serializer.js +index d103ad7..5841e6b 100644 +--- a/js/utils/Serializer.js ++++ b/js/utils/Serializer.js +@@ -30,38 +30,6 @@ + }); + }, + +- deserializeLayer : function (layerString) { +- var layerData = JSON.parse(layerString); +- var layer = new pskl.model.Layer(layerData.name); +- // TODO : nasty trick to keep the whole loading process lazily synchronous +- // 1 - adding a fake frame so that the rendering can start +- layer.addFrame(new pskl.model.Frame(32,32)); +- +- // 2 - create an image to load the base64PNG representing the layer +- var base64PNG = layerData.base64PNG; +- var image = new Image(); +- +- // 3 - attach the onload callback that will be triggered asynchronously +- image.onload = function () { +- // 6 - remove the fake frame +- layer.removeFrameAt(0); +- +- // 7 - extract the frames from the loaded image +- var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount); +- +- // 8 - add each image to the layer +- frames.forEach(function (frame) { +- layer.addFrame(pskl.model.Frame.fromPixelGrid(frame)); +- }); +- }; +- +- // 4 - set the source of the image +- image.src = base64PNG; +- +- // 5 - return a pointer to the new layer instance, which at this point contains a fake frame +- return layer; +- }, +- + backwardDeserializer_v1 : function (data) { + var piskelData = data.piskel; + var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height); +@@ -93,16 +61,12 @@ + /** + * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]". + */ +- backwardDeserializer_ : function (frames) { +- var layer = new pskl.model.Layer('Layer 1'); +- frames.forEach(function (frame) { +- layer.addFrame(pskl.model.Frame.fromPixelGrid(frame)); ++ backwardDeserializer_ : function (pixelGrids) { ++ var frames = pixelGrids.map(function (grid) { ++ return pskl.model.Frame.fromPixelGrid(grid); + }); +- var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight(); +- var piskel = new pskl.model.Piskel(width, height); +- piskel.addLayer(layer); +- +- return piskel; ++ var layer = pskl.model.Layer.fromFrames('Layer 1', frames); ++ return pskl.model.Piskel.fromLayers([layer]); + } + }; + })(); diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js index 3fca0487..3c94eaa5 100644 --- a/js/controller/settings/ImportController.js +++ b/js/controller/settings/ImportController.js @@ -153,15 +153,12 @@ var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing); var frame = pskl.utils.FrameUtils.createFromImage(image); - // TODO : juliandescottes : here we only want to create a layer from an array of frames, and create a new piskel using this layer - // we shouldn't use the deserializer for this ... it's only working because it's falling back to the old implementation - // bad, very bad - var deserializer = new pskl.utils.Deserializer([frame], function (piskel) { - pskl.app.piskelController.setPiskel(piskel); - pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); - this.reset_(); - }.bind(this)); - deserializer.deserialize(); + var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]); + var piskel = pskl.model.Piskel.fromLayers([layer]); + + pskl.app.piskelController.setPiskel(piskel); + pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); + this.reset_(); } } }; diff --git a/js/model/Layer.js b/js/model/Layer.js index 0132e6a6..3725622b 100644 --- a/js/model/Layer.js +++ b/js/model/Layer.js @@ -10,6 +10,19 @@ } }; + /** + * Create a Layer instance from an already existing set a Frames + * @static + * @param {String} name layer's name + * @param {Array} frames should all have the same dimensions + * @return {pskl.model.Layer} + */ + ns.Layer.fromFrames = function (name, frames) { + var layer = new ns.Layer(name); + frames.forEach(layer.addFrame.bind(layer)); + return layer; + }; + ns.Layer.prototype.getName = function () { return this.name; }; diff --git a/js/model/Piskel.js b/js/model/Piskel.js index 7748408f..77e7f261 100644 --- a/js/model/Piskel.js +++ b/js/model/Piskel.js @@ -21,6 +21,24 @@ } }; + /** + * Create a piskel instance from an existing set of (non empty) layers + * Layers should all be synchronized : same number of frames, same dimensions + * @param {Array} layers + * @return {pskl.model.Piskel} + */ + ns.Piskel.fromLayers = function (layers) { + var piskel = null; + if (layers.length > 0 && layers[0].length() > 0) { + var sampleFrame = layers[0].getFrameAt(0); + piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight()); + layers.forEach(piskel.addLayer.bind(piskel)); + } else { + throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument'; + } + return piskel; + }; + ns.Piskel.prototype.getLayers = function () { return this.layers; }; diff --git a/js/utils/Deserializer.js b/js/utils/Deserializer.js index 5a248bab..56f64e4f 100644 --- a/js/utils/Deserializer.js +++ b/js/utils/Deserializer.js @@ -41,9 +41,7 @@ var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount); // 6 - add each image to the layer - frames.forEach(function (frame) { - layer.addFrame(pskl.model.Frame.fromPixelGrid(frame)); - }); + frames.forEach(layer.addFrame.bind(layer)); this.onLayerLoaded_(); }.bind(this); diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js index b20d84fa..055c8edd 100644 --- a/js/utils/FrameUtils.js +++ b/js/utils/FrameUtils.js @@ -41,9 +41,9 @@ createFromImageData : function (imageData, width, height) { // Draw the zoomed-up pixels to a different canvas context - var frame = []; + var grid = []; for (var x = 0 ; x < width ; x++){ - frame[x] = []; + grid[x] = []; for (var y = 0 ; y < height ; y++){ // Find the starting index in the one-dimensional image data var i = (y * width + x)*4; @@ -52,13 +52,13 @@ var b = imageData[i+2]; var a = imageData[i+3]; if (a < 125) { - frame[x][y] = Constants.TRANSPARENT_COLOR; + grid[x][y] = Constants.TRANSPARENT_COLOR; } else { - frame[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b); + grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b); } } } - return frame; + return pskl.model.Frame.fromPixelGrid(grid); }, /** diff --git a/js/utils/Serializer.js b/js/utils/Serializer.js index d103ad77..cab86bc4 100644 --- a/js/utils/Serializer.js +++ b/js/utils/Serializer.js @@ -30,38 +30,6 @@ }); }, - deserializeLayer : function (layerString) { - var layerData = JSON.parse(layerString); - var layer = new pskl.model.Layer(layerData.name); - // TODO : nasty trick to keep the whole loading process lazily synchronous - // 1 - adding a fake frame so that the rendering can start - layer.addFrame(new pskl.model.Frame(32,32)); - - // 2 - create an image to load the base64PNG representing the layer - var base64PNG = layerData.base64PNG; - var image = new Image(); - - // 3 - attach the onload callback that will be triggered asynchronously - image.onload = function () { - // 6 - remove the fake frame - layer.removeFrameAt(0); - - // 7 - extract the frames from the loaded image - var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount); - - // 8 - add each image to the layer - frames.forEach(function (frame) { - layer.addFrame(pskl.model.Frame.fromPixelGrid(frame)); - }); - }; - - // 4 - set the source of the image - image.src = base64PNG; - - // 5 - return a pointer to the new layer instance, which at this point contains a fake frame - return layer; - }, - backwardDeserializer_v1 : function (data) { var piskelData = data.piskel; var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height); @@ -91,18 +59,14 @@ }, /** - * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]". + * Deserialize old piskel framesheets. Initially piskels were stored as arrays of pixelGrids : "[[pixelGrid],[pixelGrid],[pixelGrid]]". */ - backwardDeserializer_ : function (frames) { - var layer = new pskl.model.Layer('Layer 1'); - frames.forEach(function (frame) { - layer.addFrame(pskl.model.Frame.fromPixelGrid(frame)); + backwardDeserializer_ : function (pixelGrids) { + var frames = pixelGrids.map(function (grid) { + return pskl.model.Frame.fromPixelGrid(grid); }); - var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight(); - var piskel = new pskl.model.Piskel(width, height); - piskel.addLayer(layer); - - return piskel; + var layer = pskl.model.Layer.fromFrames('Layer 1', frames); + return pskl.model.Piskel.fromLayers([layer]); } }; })();