From fe5e8966a53f9042b32e17f2feea1fba6ad7da58 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sat, 27 Sep 2014 11:04:03 +0200 Subject: [PATCH] added shortcuts to select previous / next color in palette --- src/js/controller/PalettesListController.js | 45 ++++++++++++++++--- .../controller/dialogs/DialogsController.js | 3 +- src/js/service/CurrentColorsService.js | 36 ++++++++------- src/js/service/keyboard/CheatsheetService.js | 6 +-- src/js/service/keyboard/KeycodeTranslator.js | 4 +- src/js/service/keyboard/ShortcutService.js | 6 +++ src/js/utils/FrameUtils.js | 8 ++-- src/templates/dialogs/create-palette.html | 20 +++------ src/templates/palettes-list.html | 2 +- 9 files changed, 84 insertions(+), 46 deletions(-) diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js index 3a848256..1f9e33ef 100644 --- a/src/js/controller/PalettesListController.js +++ b/src/js/controller/PalettesListController.js @@ -39,6 +39,10 @@ $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); + + pskl.app.shortcutService.addShortcuts(['>', 'shift+>'], this.selectNextColor_.bind(this)); + pskl.app.shortcutService.addShortcut('<', this.selectPreviousColor_.bind(this)); + this.fillPaletteList(); this.updateFromUserSettings(); this.fillColorListContainer(); @@ -58,8 +62,8 @@ var colors = this.getSelectedPaletteColors_(); if (colors.length > 0) { - var html = colors.map(function (color) { - return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color}); + var html = colors.map(function (color, index) { + return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color, index : index}); }.bind(this)).join(''); this.colorListContainer_.innerHTML = html; @@ -76,10 +80,13 @@ } }; + ns.PalettesListController.prototype.selectPalette = function (paletteId) { + pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId); + }; + ns.PalettesListController.prototype.getSelectedPaletteColors_ = function () { var colors = []; - var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE); - var palette = this.paletteService.getPaletteById(paletteId); + var palette = this.getSelectedPalette_(); if (palette) { colors = palette.getColors(); } @@ -91,8 +98,34 @@ return colors; }; - ns.PalettesListController.prototype.selectPalette = function (paletteId) { - pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId); + ns.PalettesListController.prototype.getSelectedPalette_ = function () { + var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE); + return this.paletteService.getPaletteById(paletteId); + }; + + ns.PalettesListController.prototype.selectNextColor_ = function () { + this.selectColor_(this.getCurrentColorIndex_() + 1); + }; + + ns.PalettesListController.prototype.selectPreviousColor_ = function () { + this.selectColor_(this.getCurrentColorIndex_() - 1); + }; + + ns.PalettesListController.prototype.getCurrentColorIndex_ = function () { + var currentIndex = 0; + var selectedColor = document.querySelector('.' + PRIMARY_COLOR_CLASSNAME); + if (selectedColor) { + currentIndex = parseInt(selectedColor.dataset.colorIndex, 10); + } + return currentIndex; + }; + + ns.PalettesListController.prototype.selectColor_ = function (index) { + var colors = this.getSelectedPaletteColors_(); + var color = colors[index]; + if (color) { + $.publish(Events.SELECT_PRIMARY_COLOR, [color]); + } }; ns.PalettesListController.prototype.onUserSettingsChange_ = function (evt, name, value) { diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js index 0d8008bf..eac69e4d 100644 --- a/src/js/controller/dialogs/DialogsController.js +++ b/src/js/controller/dialogs/DialogsController.js @@ -27,7 +27,8 @@ $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this)); $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this)); - pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'create-palettes')); + pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'create-palette')); + this.dialogWrapper_.classList.add('animated'); }; diff --git a/src/js/service/CurrentColorsService.js b/src/js/service/CurrentColorsService.js index 169a67bc..11a02536 100644 --- a/src/js/service/CurrentColorsService.js +++ b/src/js/service/CurrentColorsService.js @@ -9,21 +9,23 @@ this.colorSorter = new pskl.service.color.ColorSorter(); this.paletteService = pskl.app.paletteService; - - this.framesColorsCache_ = {}; }; ns.CurrentColorsService.prototype.init = function () { $.subscribe(Events.PISKEL_RESET, this.onPiskelUpdated_.bind(this)); $.subscribe(Events.TOOL_RELEASED, this.onPiskelUpdated_.bind(this)); - $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); + $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this)); }; - ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () { - var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE); - var palette = this.paletteService.getPaletteById(paletteId); + ns.CurrentColorsService.prototype.getCurrentColors = function () { + return this.currentColors; + }; - return palette.id === Constants.CURRENT_COLORS_PALETTE_ID; + ns.CurrentColorsService.prototype.setCurrentColors = function (colors) { + if (colors.join('') !== this.currentColors.join('')) { + this.currentColors = colors; + $.publish(Events.CURRENT_COLORS_UPDATED); + } }; ns.CurrentColorsService.prototype.onUserSettingsChange_ = function (evt, name, value) { @@ -34,16 +36,19 @@ } }; - ns.CurrentColorsService.prototype.getCurrentColors = function () { - return this.currentColors; - }; - ns.CurrentColorsService.prototype.onPiskelUpdated_ = function (evt) { if (this.isCurrentColorsPaletteSelected_()) { this.updateCurrentColors_(); } }; + ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () { + var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE); + var palette = this.paletteService.getPaletteById(paletteId); + + return palette.id === Constants.CURRENT_COLORS_PALETTE_ID; + }; + ns.CurrentColorsService.prototype.updateCurrentColors_ = function () { var layers = this.piskelController.getLayers(); var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);}); @@ -61,22 +66,21 @@ // limit the array to the max colors to display var colorsArray = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED); - this.currentColors = this.colorSorter.sort(colorsArray); + var currentColors = this.colorSorter.sort(colorsArray); - // TODO : only fire if there was a change - $.publish(Events.CURRENT_COLORS_UPDATED); + this.setCurrentColors(currentColors); }; ns.CurrentColorsService.prototype.getFrameColors_ = function (frame) { var frameColors = {}; frame.forEachPixel(function (color, x, y) { - var hexColor = this.toHexColor_(color); + var hexColor = this.toHexString_(color); frameColors[hexColor] = true; }.bind(this)); return frameColors; }; - ns.CurrentColorsService.prototype.toHexColor_ = function (color) { + ns.CurrentColorsService.prototype.toHexString_ = function (color) { if (color === Constants.TRANSPARENT_COLOR) { return color; } else { diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index f2194c1e..d319784c 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/src/js/service/keyboard/CheatsheetService.js @@ -11,8 +11,7 @@ throw 'cheatsheetEl_ DOM element could not be retrieved'; } this.initMarkup_(); - pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this)); - pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this)); + pskl.app.shortcutService.addShortcuts(['?', 'shift+?'], this.toggleCheatsheet_.bind(this)); var link = $('.cheatsheet-link'); link.click(this.toggleCheatsheet_.bind(this)); @@ -107,7 +106,8 @@ this.toDescriptor_('N', 'Create new frame'), this.toDescriptor_('shift + N', 'Duplicate selected frame'), this.toDescriptor_('shift + ?', 'Open/Close this popup'), - this.toDescriptor_('alt + P', 'Open the Palette Manager'), + this.toDescriptor_('alt + P', 'Create a Palette'), + this.toDescriptor_('</>', 'Select previous/next palette color'), this.toDescriptor_('alt + O', 'Toggle Onion Skin'), this.toDescriptor_('alt + L', 'Toggle Layer Preview') ]; diff --git a/src/js/service/keyboard/KeycodeTranslator.js b/src/js/service/keyboard/KeycodeTranslator.js index 23269a20..a9e352ad 100644 --- a/src/js/service/keyboard/KeycodeTranslator.js +++ b/src/js/service/keyboard/KeycodeTranslator.js @@ -7,7 +7,9 @@ 40 : "down", 46 : "del", 189 : "-", - 187 : "+" + 187 : "+", + 188 : "<", + 190 : ">" }; var ns = $.namespace('pskl.service.keyboard'); diff --git a/src/js/service/keyboard/ShortcutService.js b/src/js/service/keyboard/ShortcutService.js index bc0f77b3..960deb18 100644 --- a/src/js/service/keyboard/ShortcutService.js +++ b/src/js/service/keyboard/ShortcutService.js @@ -35,6 +35,12 @@ } }; + ns.ShortcutService.prototype.addShortcuts = function (keys, callback) { + keys.forEach(function (key) { + this.addShortcut(key, callback); + }.bind(this)); + }; + ns.ShortcutService.prototype.removeShortcut = function (rawKey) { var parsedKey = this.parseKey_(rawKey.toLowerCase()); diff --git a/src/js/utils/FrameUtils.js b/src/js/utils/FrameUtils.js index ae71a1c9..a2094d43 100644 --- a/src/js/utils/FrameUtils.js +++ b/src/js/utils/FrameUtils.js @@ -83,9 +83,9 @@ * @param {String} strColor2 color under * @return {String} the composite color */ - mergePixels_ : function (strColor1, strColor2, globalOpacity1) { - var col1 = pskl.utils.FrameUtils.toRgba_(strColor1); - var col2 = pskl.utils.FrameUtils.toRgba_(strColor2); + mergePixels__ : function (strColor1, strColor2, globalOpacity1) { + var col1 = pskl.utils.FrameUtils.toRgba__(strColor1); + var col2 = pskl.utils.FrameUtils.toRgba__(strColor2); if (typeof globalOpacity1 == 'number') { col1 = JSON.parse(JSON.stringify(col1)); col1.a = globalOpacity1 * col1.a; @@ -105,7 +105,7 @@ * @param {String} c color as a string * @return {Object} {r:Number,g:Number,b:Number,a:Number} */ - toRgba_ : function (c) { + toRgba__ : function (c) { if (colorCache[c]) { return colorCache[c]; } diff --git a/src/templates/dialogs/create-palette.html b/src/templates/dialogs/create-palette.html index a644f98a..eb8c26ea 100644 --- a/src/templates/dialogs/create-palette.html +++ b/src/templates/dialogs/create-palette.html @@ -28,33 +28,33 @@
H - +
S - +
V - +

R - +
G - +
B - +
@@ -67,14 +67,6 @@ - -