From 3258f0a3838ab9005c686d55f47fa6fc4caa9de3 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 16 Mar 2014 21:25:20 +0100 Subject: [PATCH 1/4] Updating README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e309d682..dd52bf32 100644 --- a/README.md +++ b/README.md @@ -30,18 +30,18 @@ Integrated in **[piskelapp.com](http://piskelapp.com)**, you can share everythin Piskel supports the following browsers : * **Chrome** (latest) * **Firefox** (latest) -* **Internet** Explorer 10+ +* **Internet Explorer** 10+ -... and a fairly recent computer. +... and a fairly recent computer. -We don't plan/want/could be forced into supporting older IEs. For Opera and Safari, we've just never tested them but the gap shouldn't be huge. +We don't plan/want/could be forced into supporting older IEs. For Opera and Safari, we've never tested them but the gap shouldn't be huge. ## Built with The Piskel editor is purely build in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites. We also use the following **libraries** : -* [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker +* [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker * [gifjs](http://jnordberg.github.io/gif.js/) : generate animated GIFs in javascript, using webworkers * [jquery](http://jquery.com/) : used sporadically in the application * [bootstrap-tooltip](http://getbootstrap.com/javascript/#tooltips) : nice tooltips @@ -51,11 +51,11 @@ As well as some **icons** from the [Noun Project](http://thenounproject.com/) : * (and probably one or two others) -## Contributing ? +## Contributing ? Help is always welcome ! -* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/juliandescottes/piskel/issues). +* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/juliandescottes/piskel/issues). * **Participate** : Have a look at the [wiki](https://github.com/juliandescottes/piskel/wiki) to set up the development environment ## Licensing From c38300392e7c79cfcd2bf5b858de00d0deff2dcd Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 16 Mar 2014 22:09:48 +0100 Subject: [PATCH 2/4] Updating README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dd52bf32..dc650933 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ We don't plan/want/could be forced into supporting older IEs. For Opera and Safa ## Built with -The Piskel editor is purely build in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites. +The Piskel editor is purely built in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites. We also use the following **libraries** : * [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker From 9ae01cb0742765a1f379ba7674eb7fcd24231c81 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 16 Mar 2014 22:46:43 +0100 Subject: [PATCH 3/4] feature : change grid size * removed SHOW_GRID boolean, replaced with GRID_WIDTH * gridEnabled on a frame is now infered from the grid width setting * updated template to use a select to pick the grid size --- src/js/Constants.js | 1 - .../settings/ApplicationSettingsController.js | 16 +++++------ src/js/rendering/AbstractRenderer.js | 4 +-- src/js/rendering/CompositeRenderer.js | 8 +++--- src/js/rendering/frame/CachedFrameRenderer.js | 2 +- src/js/rendering/frame/FrameRenderer.js | 27 +++++++++++-------- src/js/rendering/layer/LayersRenderer.js | 2 +- src/js/service/SavedStatusService.js | 2 +- src/js/utils/ImageResizer.js | 8 +++++- src/js/utils/UserSettings.js | 5 ++-- src/templates/settings/application.html | 9 ++++++- 11 files changed, 49 insertions(+), 35 deletions(-) diff --git a/src/js/Constants.js b/src/js/Constants.js index 67be1167..d3af0d98 100644 --- a/src/js/Constants.js +++ b/src/js/Constants.js @@ -47,7 +47,6 @@ var Constants = { IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload', IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/', - GRID_STROKE_WIDTH: 1, ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0', LEFT_BUTTON : 0, diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js index 27183642..4364005f 100644 --- a/src/js/controller/settings/ApplicationSettingsController.js +++ b/src/js/controller/settings/ApplicationSettingsController.js @@ -13,20 +13,18 @@ .find('.background-picker[data-background-class=' + backgroundClass + ']') .addClass('selected'); - // Initial state for grid display: - var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID); - $('#show-grid').prop('checked', show_grid); - - // Handle grid display changes: - $('#show-grid').change(this.onShowGridClick.bind(this)); + // Grid display and size + var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH); + $('#grid-width').val(gridWidth); + $('#grid-width').change(this.onGridWidthChange.bind(this)); // Handle canvas background changes: $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this)); }; - ns.ApplicationSettingsController.prototype.onShowGridClick = function (evt) { - var checked = $('#show-grid').prop('checked'); - pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked); + ns.ApplicationSettingsController.prototype.onGridWidthChange = function (evt) { + var width = $('#grid-width').val(); + pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10)); }; ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) { diff --git a/src/js/rendering/AbstractRenderer.js b/src/js/rendering/AbstractRenderer.js index 6254ee39..af21b9f7 100644 --- a/src/js/rendering/AbstractRenderer.js +++ b/src/js/rendering/AbstractRenderer.js @@ -7,8 +7,8 @@ ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION; - ns.AbstractRenderer.prototype.setGridEnabled = Constants.ABSTRACT_FUNCTION; - ns.AbstractRenderer.prototype.isGridEnabled = Constants.ABSTRACT_FUNCTION; + ns.AbstractRenderer.prototype.setGridWidth = Constants.ABSTRACT_FUNCTION; + ns.AbstractRenderer.prototype.getGridWidth = Constants.ABSTRACT_FUNCTION; ns.AbstractRenderer.prototype.setZoom = Constants.ABSTRACT_FUNCTION; ns.AbstractRenderer.prototype.getZoom = Constants.ABSTRACT_FUNCTION; diff --git a/src/js/rendering/CompositeRenderer.js b/src/js/rendering/CompositeRenderer.js index d5a770f4..91a7cb97 100644 --- a/src/js/rendering/CompositeRenderer.js +++ b/src/js/rendering/CompositeRenderer.js @@ -55,14 +55,14 @@ }; - ns.CompositeRenderer.prototype.setGridEnabled = function (b) { + ns.CompositeRenderer.prototype.setGridWidth = function (b) { this.renderers.forEach(function (renderer) { - renderer.setGridEnabled(b); + renderer.setGridWidth(b); }); }; - ns.CompositeRenderer.prototype.isGridEnabled = function () { - return this.getSampleRenderer_().isGridEnabled(); + ns.CompositeRenderer.prototype.getGridWidth = function () { + return this.getSampleRenderer_().getGridWidth(); }; ns.CompositeRenderer.prototype.getSampleRenderer_ = function () { diff --git a/src/js/rendering/frame/CachedFrameRenderer.js b/src/js/rendering/frame/CachedFrameRenderer.js index 58b3477d..e2306dd2 100644 --- a/src/js/rendering/frame/CachedFrameRenderer.js +++ b/src/js/rendering/frame/CachedFrameRenderer.js @@ -19,7 +19,7 @@ var size = this.getDisplaySize(); var serializedFrame = [ this.getZoom(), - this.isGridEnabled(), + this.getGridWidth(), offset.x, offset.y, size.width, size.height, frame.serialize() diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js index 7fe53e46..44c21da1 100644 --- a/src/js/rendering/frame/FrameRenderer.js +++ b/src/js/rendering/frame/FrameRenderer.js @@ -37,7 +37,6 @@ y : 0 }; - this.isGridEnabled_ = false; this.supportGridRendering = renderingOptions.supportGridRendering; this.classes = classes || []; @@ -56,7 +55,7 @@ this.displayCanvas = null; this.setDisplaySize(renderingOptions.width, renderingOptions.height); - this.setGridEnabled(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)); + this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH)); this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); @@ -137,12 +136,16 @@ this.offset.y = y; }; - ns.FrameRenderer.prototype.setGridEnabled = function (flag) { - this.isGridEnabled_ = flag && this.supportGridRendering; + ns.FrameRenderer.prototype.setGridWidth = function (value) { + this.gridWidth_ = value; }; - ns.FrameRenderer.prototype.isGridEnabled = function () { - return this.isGridEnabled_; + ns.FrameRenderer.prototype.getGridWidth = function () { + if (this.supportGridRendering) { + return this.gridWidth_; + } else { + return 0; + } }; ns.FrameRenderer.prototype.updateMargins_ = function () { @@ -165,10 +168,10 @@ }; ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) { - if(settingName == pskl.UserSettings.SHOW_GRID) { - this.setGridEnabled(settingValue); - } else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) { + if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) { this.updateBackgroundClass_(settingValue); + } else if (settingName == pskl.UserSettings.GRID_WIDTH) { + this.setGridWidth(settingValue); } }; @@ -247,8 +250,10 @@ context.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom); var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10; - if (this.isGridEnabled() || isIE10) { - var gridWidth = this.isGridEnabled() ? Constants.GRID_STROKE_WIDTH : 0; + + var gridWidth = this.getGridWidth(); + var isGridEnabled = gridWidth > 0; + if (isGridEnabled || isIE10) { var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth); context.drawImage(scaled, 0, 0); } else { diff --git a/src/js/rendering/layer/LayersRenderer.js b/src/js/rendering/layer/LayersRenderer.js index 69256309..cb0e2c76 100644 --- a/src/js/rendering/layer/LayersRenderer.js +++ b/src/js/rendering/layer/LayersRenderer.js @@ -27,7 +27,7 @@ var serializedRendering = [ this.getZoom(), - this.isGridEnabled(), + this.getGridWidth(), offset.x, offset.y, size.width, diff --git a/src/js/service/SavedStatusService.js b/src/js/service/SavedStatusService.js index e2445ef4..ac3d6a23 100644 --- a/src/js/service/SavedStatusService.js +++ b/src/js/service/SavedStatusService.js @@ -55,7 +55,7 @@ ns.SavedStatusService.prototype.onBeforeUnload = function (evt) { var piskel = this.piskelController_.piskel; if (piskel.isDirty_) { - var confirmationMessage = "Your Piskel seem to have unsaved changes"; + var confirmationMessage = "Your Piskel seems to have unsaved changes"; (evt || window.event).returnValue = confirmationMessage; return confirmationMessage; diff --git a/src/js/utils/ImageResizer.js b/src/js/utils/ImageResizer.js index 1734bb3c..ae805a6c 100644 --- a/src/js/utils/ImageResizer.js +++ b/src/js/utils/ImageResizer.js @@ -31,7 +31,7 @@ * @param {Number} margin gap to be displayed between pixels * @return {Canvas2d} the resized canvas */ - resizeNearestNeighbour : function (source, zoom, margin) { + resizeNearestNeighbour : function (source, zoom, margin, marginColor) { margin = margin || 0; var canvas = pskl.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height); var context = canvas.getContext('2d'); @@ -65,6 +65,12 @@ context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")"; context.fillRect(xOffset, yOffset, xRange-margin, yRange-margin); + if (margin && marginColor) { + context.fillStyle = marginColor; + context.fillRect(xOffset + xRange - margin, yOffset, margin, yRange); + context.fillRect(xOffset, yOffset + yRange - margin, xRange, margin); + } + yOffset += yRange; } yOffset = 0; diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 79c264cb..0c848734 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -2,12 +2,11 @@ var ns = $.namespace("pskl"); ns.UserSettings = { - - SHOW_GRID : 'SHOW_GRID', + GRID_WIDTH : 'GRID_WIDTH', CANVAS_BACKGROUND : 'CANVAS_BACKGROUND', KEY_TO_DEFAULT_VALUE_MAP_ : { - 'SHOW_GRID' : false, + 'GRID_WIDTH' : 0, 'CANVAS_BACKGROUND' : 'medium-canvas-background' }, diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html index b65def23..fa02b066 100644 --- a/src/templates/settings/application.html +++ b/src/templates/settings/application.html @@ -20,7 +20,14 @@
- + +
From 4b0b1a4bad9d109e4149f21191e62bfd9b7abec3 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 16 Mar 2014 22:53:10 +0100 Subject: [PATCH 4/4] doc : Updated JS Doc for ImageResizer --- src/js/utils/ImageResizer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/utils/ImageResizer.js b/src/js/utils/ImageResizer.js index ae805a6c..0e9d4749 100644 --- a/src/js/utils/ImageResizer.js +++ b/src/js/utils/ImageResizer.js @@ -29,6 +29,7 @@ * @param {Canvas2d} source original image to be resized, as a 2d canvas * @param {Number} zoom ratio between desired dim / source dim * @param {Number} margin gap to be displayed between pixels + * @param {String} color or the margin (will be transparent if not provided) * @return {Canvas2d} the resized canvas */ resizeNearestNeighbour : function (source, zoom, margin, marginColor) {