From 809737908cb70b646233d1450289ff586eb02818 Mon Sep 17 00:00:00 2001 From: Zoee Silcock Date: Wed, 28 Dec 2016 15:32:57 +0100 Subject: [PATCH 1/2] Add a setting for changing the color format shown in the color picker --- src/css/settings-application.css | 3 ++- .../settings/ApplicationSettingsController.js | 14 ++++++++++++++ src/js/lib/spectrum/spectrum.js | 3 ++- src/js/utils/UserSettings.js | 4 +++- src/templates/settings/application.html | 8 ++++++++ 5 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/css/settings-application.css b/src/css/settings-application.css index 341f08ff..5d0c9feb 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -54,7 +54,8 @@ text-align: center; } -.grid-width-select { +.grid-width-select, +.color-format-select { margin: 5px 5px 0 5px; } diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js index 92d6cd57..9c604a4f 100644 --- a/src/js/controller/settings/ApplicationSettingsController.js +++ b/src/js/controller/settings/ApplicationSettingsController.js @@ -39,6 +39,16 @@ maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS); this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_); + // Color format + var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT); + var colorFormatSelect = document.querySelector('.color-format-select'); + var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]'); + if (selectedColorFormatOption) { + selectedColorFormatOption.setAttribute('selected', 'selected'); + } + + this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_); + // Layer preview opacity var layerOpacityInput = document.querySelector('.layer-opacity-input'); layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY); @@ -63,6 +73,10 @@ pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width); }; + ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) { + pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value); + }; + ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) { pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked); }; diff --git a/src/js/lib/spectrum/spectrum.js b/src/js/lib/spectrum/spectrum.js index b60d3894..c0a65e78 100644 --- a/src/js/lib/spectrum/spectrum.js +++ b/src/js/lib/spectrum/spectrum.js @@ -671,7 +671,8 @@ // Update the text entry input as it changes happen if (opts.showInput) { - textInput.val(realColor.toString(format)); + var displayFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT); + textInput.val(realColor.toString(displayFormat)); } if (opts.showPalette) { diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 0e79be1a..1bcb995c 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -17,6 +17,7 @@ EXPORT_TAB: 'EXPORT_TAB', PEN_SIZE : 'PEN_SIZE', RESIZE_SETTINGS: 'RESIZE_SETTINGS', + COLOR_FORMAT: 'COLOR_FORMAT', KEY_TO_DEFAULT_VALUE_MAP_ : { 'GRID_WIDTH' : 0, 'MAX_FPS' : 24, @@ -39,7 +40,8 @@ maintainRatio : true, resizeContent : false, origin : 'TOPLEFT' - } + }, + COLOR_FORMAT: 'hex', }, /** diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html index e9189c38..1318791c 100644 --- a/src/templates/settings/application.html +++ b/src/templates/settings/application.html @@ -58,6 +58,14 @@ +
+ + +
+ From 2dea7faea0ecd5c39b46262da922a1445fe89628 Mon Sep 17 00:00:00 2001 From: Zoee Silcock Date: Thu, 29 Dec 2016 09:47:23 +0100 Subject: [PATCH 2/2] Workaround for incorrect frame selection after re-ordering on Firefox This commit is related to the following issue: #363 When a frame is dropped both `mouseup` and `click` events are triggered on Firefox. This is somwhat expected behaviour but other browsers do not trigger the `click` event. One would expect jquery-ui to work the same across all browsers but when they got a bug report they decided to not change anything: https://bugzilla.mozilla.org/show_bug.cgi?id=787944 The most comon workaround appears to be to use the `clone` helper in jquery-ui sortable. Unfortunately this doesn't work because the cloned frame doesn't keep the contents of the canvas. This seemed like the cleanest workaround, here are a few others: http://stackoverflow.com/questions/947195/jquery-ui-sortable-how-can-i-cancel-the-click-event-on-an-item-thats-dragged --- src/js/controller/FramesListController.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/js/controller/FramesListController.js b/src/js/controller/FramesListController.js index 0c690db0..b76c97f2 100644 --- a/src/js/controller/FramesListController.js +++ b/src/js/controller/FramesListController.js @@ -15,6 +15,7 @@ this.redrawFlag = true; this.regenerateDomFlag = true; + this.justDropped = false; this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor(); this.cachedFrameProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this)); @@ -104,7 +105,7 @@ this.container.get(0).removeChild(this.tiles[index]); this.tiles.splice(index, 1); this.updateScrollerOverflows(); - } else if (action === ACTION.SELECT) { + } else if (action === ACTION.SELECT && !this.justDropped) { this.piskelController.setCurrentFrameIndex(index); } else if (action === ACTION.NEW_FRAME) { this.piskelController.addFrame(); @@ -189,6 +190,7 @@ $('#preview-list').sortable({ placeholder: 'preview-tile preview-tile-drop-proxy', update: $.proxy(this.onUpdate_, this), + stop: $.proxy(this.onSortableStop_, this), items: '.preview-tile', axis: 'y', tolerance: 'pointer' @@ -211,6 +213,17 @@ this.flagForRedraw_(); }; + /** + * @private + */ + ns.FramesListController.prototype.onSortableStop_ = function (event, ui) { + this.justDropped = true; + + this.resizeTimer = window.setTimeout($.proxy(function() { + this.justDropped = false; + }, this), 200); + }; + /** * @private * TODO(vincz): clean this giant rendering function & remove listeners.