From 019df61cdcf20771f3545d6aaf27152f1e7f9e40 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Thu, 20 Sep 2012 23:01:49 +0200 Subject: [PATCH 1/2] Fixed layout issue when hovering on non 32x32 tile previews --- css/preview-film-section.css | 13 +++++++++---- js/controller/PreviewFilmController.js | 10 ++++++++-- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/css/preview-film-section.css b/css/preview-film-section.css index f6836592..ffef1946 100644 --- a/css/preview-film-section.css +++ b/css/preview-film-section.css @@ -39,8 +39,7 @@ } .preview-tile .tile-action { - display: none; - float: right; + display: block; cursor: pointer; width: 30px; height: 30px; @@ -50,8 +49,14 @@ border: none; } -.preview-tile:hover .tile-action { - display: block; +.preview-tile .tile-action-container { + float: right; + visibility : hidden; + overflow: hidden; +} + +.preview-tile:hover .tile-action-container { + visibility : visible; } .preview-tile .tile-action.duplicate-frame-action { diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index d4b4e4f0..469b0356 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -181,11 +181,15 @@ previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber)); + var actionContainer = document.createElement("DIV"); + actionContainer.className = "tile-action-container"; + var canvasPreviewDuplicateAction = document.createElement("button"); canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip'); canvasPreviewDuplicateAction.setAttribute('data-placement', 'right'); canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame'); - canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action" + canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action"; + actionContainer.appendChild(canvasPreviewDuplicateAction); canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber)); @@ -196,7 +200,6 @@ currentFrameRenderer.init(currentFrame); previewTileRoot.appendChild(canvasContainer); - previewTileRoot.appendChild(canvasPreviewDuplicateAction); if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) { var canvasPreviewDeleteAction = document.createElement("button"); @@ -206,8 +209,11 @@ canvasPreviewDeleteAction.className = "tile-action delete-frame-action" canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber)); previewTileRoot.appendChild(canvasPreviewDeleteAction); + actionContainer.appendChild(canvasPreviewDeleteAction); } + previewTileRoot.appendChild(actionContainer); + return previewTileRoot; }; From c7a8233adc6946cdb14d5e47d09e276665313815 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Thu, 20 Sep 2012 23:57:26 +0200 Subject: [PATCH 2/2] Saving and reading FPS from model --- js/Constants.js | 2 +- js/controller/AnimatedPreviewController.js | 8 +++-- js/controller/DrawingController.js | 26 +++++++------- js/model/Frame.js | 4 +++ js/model/FrameSheet.js | 41 +++++++++++++--------- js/piskel.js | 4 ++- 6 files changed, 53 insertions(+), 32 deletions(-) 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..d6c71ee3 100644 --- a/js/model/Frame.js +++ b/js/model/Frame.js @@ -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(); };