diff --git a/js/app.js b/js/app.js index 3b76f30f..236063b0 100644 --- a/js/app.js +++ b/js/app.js @@ -93,9 +93,11 @@ finishInitAppEngine_ : function () { if (pskl.framesheetData_ && pskl.framesheetData_.content) { - var piskel = pskl.utils.Serializer.createPiskel(pskl.framesheetData_.content); - pskl.app.piskelController.setPiskel(piskel); - pskl.app.animationController.setFPS(pskl.framesheetData_.fps); + var deserializer = new pskl.utils.Deserializer(pskl.framesheetData_.content, function (piskel) { + pskl.app.piskelController.setPiskel(piskel); + pskl.app.animationController.setFPS(pskl.framesheetData_.fps); + }); + deserializer.deserialize(); } }, @@ -156,10 +158,12 @@ xhr.responseType = 'text'; xhr.onload = function (e) { var res = JSON.parse(this.responseText); - var piskel = pskl.utils.Serializer.createPiskel(res.framesheet); - pskl.app.piskelController.setPiskel(piskel); - pskl.app.animationController.setFPS(res.fps); - $.publish(Events.HIDE_NOTIFICATION); + var deserializer = new pskl.utils.Deserializer(res.framesheet, function (piskel) { + pskl.app.piskelController.setPiskel(piskel); + pskl.app.animationController.setFPS(res.fps); + $.publish(Events.HIDE_NOTIFICATION); + }); + deserializer.deserialize(); }; xhr.onerror = function () { diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js index 4a7e73cd..3fca0487 100644 --- a/js/controller/settings/ImportController.js +++ b/js/controller/settings/ImportController.js @@ -153,11 +153,15 @@ var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing); var frame = pskl.utils.FrameUtils.createFromImage(image); - var piskel = pskl.utils.Serializer.createPiskel([frame]); - pskl.app.piskelController.setPiskel(piskel); - pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); - - this.reset_(); + // 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(); } } }; diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js index 7f15243a..7f4d9ed8 100644 --- a/js/service/LocalStorageService.js +++ b/js/service/LocalStorageService.js @@ -45,8 +45,10 @@ */ ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() { var framesheet = JSON.parse(window.localStorage.snapShot); - var piskel = pskl.utils.Serializer.createPiskel(framesheet); - pskl.app.piskelController.setPiskel(piskel); + var deserializer = new pskl.utils.Deserializer(framesheet, function (piskel) { + pskl.app.piskelController.setPiskel(piskel); + }); + deserializer.deserialize(); }; /** diff --git a/js/utils/Deserializer.js b/js/utils/Deserializer.js new file mode 100644 index 00000000..5a248bab --- /dev/null +++ b/js/utils/Deserializer.js @@ -0,0 +1,64 @@ +(function () { + var ns = $.namespace('pskl.utils'); + + ns.Deserializer = function (data, callback) { + this.layersToLoad_ = 0; + this.data_ = data; + this.callback_ = callback; + this.piskel_ = null; + }; + + ns.Deserializer.prototype.deserialize = function () { + var data = this.data_; + if (data.modelVersion == Constants.MODEL_VERSION) { + var piskelData = data.piskel; + this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height); + + this.layersToLoad_ = piskelData.layers.length; + + piskelData.layers.forEach(function (serializedLayer) { + var layer = this.deserializeLayer(serializedLayer); + this.piskel_.addLayer(layer); + }.bind(this)); + } else if (data.modelVersion == 1) { + this.callback_(pskl.utils.Serializer.backwardDeserializer_v1(data)); + } else { + this.callback_(pskl.utils.Serializer.backwardDeserializer_(data)); + } + }; + + ns.Deserializer.prototype.deserializeLayer = function (layerString) { + var layerData = JSON.parse(layerString); + var layer = new pskl.model.Layer(layerData.name); + + // 1 - create an image to load the base64PNG representing the layer + var base64PNG = layerData.base64PNG; + var image = new Image(); + + // 2 - attach the onload callback that will be triggered asynchronously + image.onload = function () { + // 5 - extract the frames from the loaded image + 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)); + }); + + this.onLayerLoaded_(); + }.bind(this); + + // 3 - set the source of the image + image.src = base64PNG; + + // 4 - return a pointer to the new layer instance + return layer; + }; + + ns.Deserializer.prototype.onLayerLoaded_ = function () { + this.layersToLoad_ = this.layersToLoad_ - 1; + if (this.layersToLoad_ === 0) { + this.callback_(this.piskel_); + } + }; +})(); \ No newline at end of file diff --git a/js/utils/Serializer.js b/js/utils/Serializer.js index 6f04af3f..d103ad77 100644 --- a/js/utils/Serializer.js +++ b/js/utils/Serializer.js @@ -30,29 +30,6 @@ }); }, - /** - * @param {Object} data JSON.parse of a serialized piskel - * @return {pskl.model.Piskel} a piskel - */ - createPiskel : function (data) { - var piskel = null; - if (data.modelVersion == Constants.MODEL_VERSION) { - var piskelData = data.piskel; - piskel = new pskl.model.Piskel(piskelData.width, piskelData.height); - - piskelData.layers.forEach(function (serializedLayer) { - var layer = pskl.utils.Serializer.deserializeLayer(serializedLayer); - piskel.addLayer(layer); - }); - } else if (data.modelVersion == 1) { - piskel = pskl.utils.Serializer.backwardDeserializer_v1(data); - } else { - piskel = pskl.utils.Serializer.backwardDeserializer_(data); - } - - return piskel; - }, - deserializeLayer : function (layerString) { var layerData = JSON.parse(layerString); var layer = new pskl.model.Layer(layerData.name); @@ -85,11 +62,6 @@ return layer; }, - deserializeFrame : function (frameString) { - var framePixelGrid = JSON.parse(frameString); - return pskl.model.Frame.fromPixelGrid(framePixelGrid); - }, - backwardDeserializer_v1 : function (data) { var piskelData = data.piskel; var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height); @@ -106,13 +78,18 @@ var layerData = JSON.parse(layerString); var layer = new pskl.model.Layer(layerData.name); layerData.frames.forEach(function (serializedFrame) { - var frame = pskl.utils.Serializer.deserializeFrame(serializedFrame); + var frame = pskl.utils.Serializer.deserializeFrame_v1(serializedFrame); layer.addFrame(frame); }); return layer; }, + deserializeFrame_v1 : function (frameString) { + var framePixelGrid = JSON.parse(frameString); + return pskl.model.Frame.fromPixelGrid(framePixelGrid); + }, + /** * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]". */ diff --git a/piskel-script-list.js b/piskel-script-list.js index 80df9fa9..f4a02c4d 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -19,6 +19,7 @@ exports.scripts = [ "js/utils/LayerUtils.js", "js/utils/ImageResizer.js", "js/utils/PixelUtils.js", + "js/utils/Deserializer.js", "js/utils/Serializer.js", "js/utils/Template.js", "js/utils/UserSettings.js",