From 637fa051091a5d9a494ead302f18782549280471 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 7 May 2014 00:43:28 +0200 Subject: [PATCH] Feature : Current colors palette Created dynamic palette displaying currently used colors. This palette is now selected by default. New service UsedColorsService created. Listens to PISKEL_RESET and TOOL_RELEASED and keeps track of the list of current colors. Still need to : - improve sorting of colors - allow to clone the current color palette as a custom palette - add proper getter in UsedColorService to get the list of current colors Also I hardcoded a max-height for the palettes-list as I found no better way of handling the case of palettes containing many colors. Maybe should add a limit to the number of colors handled by this automatic palette. --- src/css/toolbox-palettes-list.css | 8 +++- src/js/Constants.js | 2 + src/js/Events.js | 4 +- src/js/app.js | 5 ++- src/js/controller/PalettesListController.js | 32 +++++++++++---- src/js/service/UsedColorsService.js | 45 +++++++++++++++++++++ src/js/utils/UserSettings.js | 2 +- src/piskel-script-list.js | 1 + src/templates/palettes-list.html | 17 ++++---- 9 files changed, 96 insertions(+), 20 deletions(-) create mode 100644 src/js/service/UsedColorsService.js diff --git a/src/css/toolbox-palettes-list.css b/src/css/toolbox-palettes-list.css index 7aa0f837..cee267ad 100644 --- a/src/css/toolbox-palettes-list.css +++ b/src/css/toolbox-palettes-list.css @@ -14,7 +14,8 @@ } .palettes-list-colors { - overflow:hidden; + overflow: auto; + max-height: 160px; } .palettes-list-color { @@ -35,6 +36,11 @@ height : 32px; } +.palettes-list-has-scrollbar .palettes-list-color, +.palettes-list-has-scrollbar .palettes-list-color div{ + width: 29px +} + .palettes-list-color.primary:before, .palettes-list-color.secondary:before { content: ""; diff --git a/src/js/Constants.js b/src/js/Constants.js index 405565f7..ecc9c7aa 100644 --- a/src/js/Constants.js +++ b/src/js/Constants.js @@ -20,6 +20,8 @@ var Constants = { TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)', NO_PALETTE_ID : '__no-palette', + CURRENT_PALETTE_ID : '__current-colors', + MANAGE_PALETTE_ID : '__manage-palettes', // Used for Spectrum input PREFERRED_COLOR_FORMAT : 'rgb', diff --git a/src/js/Events.js b/src/js/Events.js index 97d84028..4c943a70 100644 --- a/src/js/Events.js +++ b/src/js/Events.js @@ -45,5 +45,7 @@ var Events = { SHOW_NOTIFICATION: "SHOW_NOTIFICATION", HIDE_NOTIFICATION: "HIDE_NOTIFICATION", - ZOOM_CHANGED : "ZOOM_CHANGED" + ZOOM_CHANGED : "ZOOM_CHANGED", + + CURRENT_COLORS_UPDATED : "CURRENT_COLORS_UPDATED" }; \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index e98101d3..bc5d8299 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -39,7 +39,10 @@ this.paletteController = new pskl.controller.PaletteController(); this.paletteController.init(); - this.palettesListController = new pskl.controller.PalettesListController(); + this.usedColorsService = new pskl.service.UsedColorsService(this.piskelController); + this.usedColorsService.init(); + + this.palettesListController = new pskl.controller.PalettesListController(this.paletteController, this.usedColorsService); this.palettesListController.init(); this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController); diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js index 39918c41..e9ff1a4f 100644 --- a/src/js/controller/PalettesListController.js +++ b/src/js/controller/PalettesListController.js @@ -1,8 +1,9 @@ (function () { var ns = $.namespace('pskl.controller'); - ns.PalettesListController = function () { - + ns.PalettesListController = function (paletteController, usedColorService) { + this.usedColorService = usedColorService; + this.paletteController = paletteController; }; ns.PalettesListController.prototype.init = function () { @@ -16,6 +17,7 @@ this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this)); $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this)); + $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this)); $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'primary')); $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'secondary')); @@ -39,15 +41,29 @@ ns.PalettesListController.prototype.fillColorListContainer = function () { var html = ''; - + var colors = []; var palette = this.getSelectedPalette(); if (palette) { - html = palette.colors.map(function (color) { - return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color}); - }.bind(this)).join(''); + colors = palette.colors; + } else if (this.colorPaletteSelect_.value === Constants.CURRENT_PALETTE_ID) { + colors = this.usedColorService.currentColors; } + html = colors.map(function (color) { + return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color}); + }.bind(this)).join(''); + this.colorListContainer_.innerHTML = html; + + this.onColorUpdated('primary', null, this.paletteController.getPrimaryColor()); + this.onColorUpdated('secondary', null, this.paletteController.getSecondaryColor()); + + var hasScrollbar = colors.length > 20; + if (hasScrollbar && !pskl.utils.UserAgent.isChrome) { + this.colorListContainer_.classList.add('palettes-list-has-scrollbar'); + } else { + this.colorListContainer_.classList.remove('palettes-list-has-scrollbar'); + } }; ns.PalettesListController.prototype.getSelectedPalette = function (evt) { @@ -67,7 +83,7 @@ ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) { var paletteId = this.colorPaletteSelect_.value; - if (paletteId === '__manage-palettes') { + if (paletteId === Constants.PALETTE_MANAGE_ID) { $.publish(Events.DIALOG_DISPLAY, 'manage-palettes'); this.selectPaletteFromUserSettings(); } else { @@ -112,6 +128,8 @@ this.removeClass_('secondary', '.palettes-list-color'); colorContainer.classList.add('secondary'); colorContainer.classList.remove('primary'); + } else { + throw 'No type provided for color update. Expecting "primary" or "secondary"'; } }; diff --git a/src/js/service/UsedColorsService.js b/src/js/service/UsedColorsService.js new file mode 100644 index 00000000..bb97691e --- /dev/null +++ b/src/js/service/UsedColorsService.js @@ -0,0 +1,45 @@ +(function () { + var ns = $.namespace('pskl.service'); + + ns.UsedColorsService = function (piskelController) { + this.piskelController = piskelController; + this.currentColors = []; + this.framesColorsCache_ = {}; + }; + + ns.UsedColorsService.prototype.init = function () { + $.subscribe(Events.PISKEL_RESET, this.onPiskelUpdated_.bind(this)); + $.subscribe(Events.TOOL_RELEASED, this.onPiskelUpdated_.bind(this)); + }; + + ns.UsedColorsService.prototype.onPiskelUpdated_ = function (evt) { + var layers = this.piskelController.getLayers(); + var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);}); + var colors = {}; + frames.forEach(function (f) { + var frameHash = f.getHash(); + if (!this.framesColorsCache_[frameHash]) { + var frameColors = {}; + f.forEachPixel(function (color, x, y) { + frameColors[color] = true; + }); + this.framesColorsCache_[frameHash] = frameColors; + } + Object.keys(this.framesColorsCache_[frameHash]).forEach(function (color) { + colors[color] = true; + }); + }.bind(this)); + delete colors[Constants.TRANSPARENT_COLOR]; + this.currentColors = Object.keys(colors); + this.currentColors = this.currentColors.sort(function (c1, c2) { + if (c1 < c2) { + return -1; + } else if (c1 > c2) { + return 1; + } else { + return 0; + } + }); + $.publish(Events.CURRENT_COLORS_UPDATED, colors); + }; +})(); \ No newline at end of file diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 59c6455f..c200a346 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -9,7 +9,7 @@ KEY_TO_DEFAULT_VALUE_MAP_ : { 'GRID_WIDTH' : 0, 'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background', - 'SELECTED_PALETTE' : Constants.NO_PALETTE_ID + 'SELECTED_PALETTE' : Constants.CURRENT_PALETTE_ID }, /** diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 26eb3d22..a11eb57b 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -106,6 +106,7 @@ "js/service/keyboard/KeycodeTranslator.js", "js/service/keyboard/CheatsheetService.js", "js/service/ImageUploadService.js", + "js/service/UsedColorsService.js", // Tools "js/drawingtools/BaseTool.js", diff --git a/src/templates/palettes-list.html b/src/templates/palettes-list.html index d3c1e470..8cc447e5 100644 --- a/src/templates/palettes-list.html +++ b/src/templates/palettes-list.html @@ -2,19 +2,18 @@

Palettes

+ -