diff --git a/all.html b/all.html new file mode 100644 index 00000000..85471c58 --- /dev/null +++ b/all.html @@ -0,0 +1,39 @@ + + + + All piskels + + + + + \ No newline at end of file diff --git a/js/Constants.js b/js/Constants.js index fdaaaa95..ce0d8add 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -25,7 +25,7 @@ var Constants = { /* * Default entry point for piskel web service: */ - PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com', + PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com', GRID_STROKE_WIDTH: 1, GRID_STROKE_COLOR: "lightgray" diff --git a/js/controller/AnimatedPreviewController.js b/js/controller/AnimatedPreviewController.js index df8db021..b2825b00 100644 --- a/js/controller/AnimatedPreviewController.js +++ b/js/controller/AnimatedPreviewController.js @@ -22,8 +22,12 @@ }; ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) { - this.fps = parseInt($("#preview-fps")[0].value, 10); - $("#display-fps").html(this.fps + " FPS") + this.setFPS(parseInt($("#preview-fps")[0].value, 10)); + }; + + ns.AnimatedPreviewController.prototype.setFPS = function (fps) { + this.fps = fps; + $("#display-fps").html(this.fps + " FPS"); }; ns.AnimatedPreviewController.prototype.render = function (delta) { diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index 3509ef2f..94069b9e 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -55,7 +55,7 @@ $(window).resize($.proxy(this.startDPIUpdateTimer_, this)); $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this)); - $.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this)); + $.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this)); }; ns.DrawingController.prototype.initMouseBehavior = function() { @@ -133,8 +133,8 @@ }; /** - * @private - */ + * @private + */ ns.DrawingController.prototype.onMouseup_ = function (event) { if(this.isClicked || this.isRightClicked) { // A mouse button was clicked on the drawing canvas before this mouseup event, @@ -159,8 +159,8 @@ }, /** - * @private - */ + * @private + */ ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) { var canvasPageOffset = this.container.offset(); return { @@ -170,16 +170,16 @@ }; /** - * @private - */ + * @private + */ ns.DrawingController.prototype.getSpriteCoordinates = function(event) { var coords = this.getRelativeCoordinates(event.clientX, event.clientY); return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords); }; /** - * @private - */ + * @private + */ ns.DrawingController.prototype.getCurrentColor_ = function () { if(this.isRightClicked) { return this.secondaryColor; @@ -189,8 +189,8 @@ }; /** - * @private - */ + * @private + */ ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) { event.preventDefault(); event.stopPropagation(); @@ -207,6 +207,9 @@ var frame = this.framesheet.getCurrentFrame(); var serializedFrame = frame.serialize(); if (this.serializedFrame != serializedFrame) { + if (!frame.isSameSize(this.overlayFrame)) { + this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame); + } this.serializedFrame = serializedFrame; this.renderer.render(frame); } @@ -258,7 +261,6 @@ */ ns.DrawingController.prototype.updateDPI_ = function() { var dpi = this.calculateDPI_(); - console.log("dpi", dpi); this.renderer.updateDPI(dpi); this.overlayRenderer.updateDPI(dpi); this.forceRendering_(); diff --git a/js/model/Frame.js b/js/model/Frame.js index 17652313..f1624db0 100644 --- a/js/model/Frame.js +++ b/js/model/Frame.js @@ -2,7 +2,7 @@ var ns = $.namespace("pskl.model"); ns.Frame = function (pixels) { - this.pixels = this.clonePixels_(pixels); + this.pixels = pixels; this.previousStates = [this.getPixels()]; this.stateIndex = 0; }; @@ -111,4 +111,8 @@ this.setPixels(this.previousStates[this.stateIndex]); } }; + + ns.Frame.prototype.isSameSize = function (otherFrame) { + return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth(); + }; })(); \ No newline at end of file diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js index 2b5d93ff..1672c530 100644 --- a/js/model/FrameSheet.js +++ b/js/model/FrameSheet.js @@ -64,32 +64,41 @@ }; /** - * Load a framesheet from a string that might have been persisted in db / localstorage + * Load a framesheet from a model that might have been persisted in db / localstorage * Overrides existing frames. * @param {String} serialized */ ns.FrameSheet.prototype.deserialize = function (serialized) { try { - var frameConfigurations = JSON.parse(serialized); - this.frames = []; - for (var i = 0 ; i < frameConfigurations.length ; i++) { - var frameCfg = frameConfigurations[i]; - this.addFrame(new ns.Frame(frameCfg)); - } - - if (this.hasFrameAtIndex(0)) { - this.height = this.getFrameByIndex(0).getHeight(); - this.width = this.getFrameByIndex(0).getWidth(); - this.setCurrentFrameIndex(0); - $.publish(Events.FRAME_SIZE_CHANGED); - } - - $.publish(Events.FRAMESHEET_RESET); + this.load(JSON.parse(serialized)); } catch (e) { throw "Could not load serialized framesheet : " + e.message } }; + + /** + * Load a framesheet from a model that might have been persisted in db / localstorage + * Overrides existing frames. + * @param {String} serialized + */ + ns.FrameSheet.prototype.load = function (framesheet) { + this.frames = []; + for (var i = 0 ; i < framesheet.length ; i++) { + var frameCfg = framesheet[i]; + this.addFrame(new ns.Frame(frameCfg)); + } + + if (this.hasFrameAtIndex(0)) { + this.height = this.getFrameByIndex(0).getHeight(); + this.width = this.getFrameByIndex(0).getWidth(); + this.setCurrentFrameIndex(0); + $.publish(Events.FRAME_SIZE_CHANGED); + } + + $.publish(Events.FRAMESHEET_RESET); + }; + ns.FrameSheet.prototype.hasFrameAtIndex = function(index) { return (index >= 0 && index < this.getFrameCount()); diff --git a/js/piskel.js b/js/piskel.js index 696f0b0f..67134a0c 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -128,7 +128,9 @@ $.namespace("pskl"); xhr.responseType = 'text'; xhr.onload = function(e) { - frameSheet.deserialize(this.responseText); + var res = JSON.parse(this.responseText); + frameSheet.load(res.framesheet); + piskel.animationController.setFPS(res.fps); $.publish(Events.HIDE_NOTIFICATION); piskel.finishInit(); };