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 @@
+
-