mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

improved current colors sort

Browse Source
This commit is contained in:
juliandescottes 2014-09-25 00:13:23 +02:00
parent 6583d3d560
commit ac08775406
3 changed files with 112 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/js/service/CurrentColorsService.js
View File

@ -7,6 +7,8 @@
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.getFrameColors_.bind(this));
this.colorSorter = new pskl.service.color.ColorSorter();
this.framesColorsCache_ = {};
};
@ -28,11 +30,11 @@
return frameColors;
};
ns.CurrentColorsService.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 frameColors = this.cachedFrameProcessor.get(f);
Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
@ -44,60 +46,14 @@
delete colors[Constants.TRANSPARENT_COLOR];
// limit the array to the max colors to display
this.currentColors = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
this.colorsHslMap = {};
this.currentColors.forEach(function (color) {
this.colorsHslMap[color] = window.tinycolor(color).toHsl();
}.bind(this));
// sort by most frequent color
this.currentColors = this.currentColors.sort();
this.currentColors = this.currentColors.sort(this.sortColors_.bind(this));
var colorsArray = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
this.currentColors = this.colorSorter.sort(colorsArray);
console.log(this.currentColors);
// TODO : only fire if there was a change
$.publish(Events.CURRENT_COLORS_UPDATED);
};
var LOW_SAT = 0.1;
var LOW_LUM = 0.1;
var HI_LUM = 0.9;
ns.CurrentColorsService.prototype.sortColors_ = function (c1, c2) {
var hsl1 = this.colorsHslMap[c1];
var hsl2 = this.colorsHslMap[c2];
if (hsl1.l < LOW_LUM || hsl2.l < LOW_LUM) {
return this.compareValues_(hsl1.l, hsl2.l);
} else if (hsl1.l > HI_LUM || hsl2.l > HI_LUM) {
return this.compareValues_(hsl2.l, hsl1.l);
} else if (hsl1.s < LOW_SAT || hsl2.s < LOW_SAT) {
return this.compareValues_(hsl1.s, hsl2.s);
} else {
var hDiff = Math.abs(hsl1.h - hsl2.h);
var sDiff = Math.abs(hsl1.s - hsl2.s);
var lDiff = Math.abs(hsl1.l - hsl2.l);
if (hDiff < 10) {
if (sDiff > lDiff) {
return this.compareValues_(hsl1.s, hsl2.s);
} else {
return this.compareValues_(hsl1.l, hsl2.l);
}
} else {
return this.compareValues_(hsl1.h, hsl2.h);
}
}
};
ns.CurrentColorsService.prototype.compareValues_ = function (v1, v2) {
if (v1 > v2) {
return 1;
} else if (v1 < v2) {
return -1;
}
return 0;
};
ns.CurrentColorsService.prototype.toHexColor_ = function (color) {
if (color === Constants.TRANSPARENT_COLOR) {
return color;

105
src/js/service/color/ColorSorter.js Normal file
View File

@ -0,0 +1,105 @@
(function () {
var ns = $.namespace('pskl.service.color');
var LOW_SAT = 0.3;
var LOW_LUM = 0.1;
var HI_LUM = 0.9;
var HUE_STEP = 36;
var HUE_BAGS = 10;
var HUE_BOUNDS = [];
for (var i = 0 ; i < HUE_BAGS ; i++) {
HUE_BOUNDS.push(i * HUE_STEP);
}
ns.ColorSorter = function () {
this.colorsHslMap_ = {};
};
ns.ColorSorter.prototype.sort = function (colors) {
this.colorsHslMap_ = {};
colors.forEach(function (color) {
this.colorsHslMap_[color] = window.tinycolor(color).toHsl();
}.bind(this));
// sort by most frequent color
var darkColors = colors.filter(function (c) {
var hsl = this.colorsHslMap_[c];
return hsl.l <= LOW_LUM;
}.bind(this));
var brightColors = colors.filter(function (c) {
var hsl = this.colorsHslMap_[c];
return hsl.l >= HI_LUM;
}.bind(this));
var desaturatedColors = colors.filter(function (c) {
var hsl = this.colorsHslMap_[c];
return hsl.s <= LOW_SAT;
}.bind(this));
darkColors = this.sortOnHslProperty_(darkColors, 'l');
brightColors = this.sortOnHslProperty_(brightColors, 'l');
desaturatedColors = this.sortOnHslProperty_(desaturatedColors, 'h');
var sortedColors = darkColors.concat(brightColors).concat(desaturatedColors);
var regularColors = colors.filter(function (c) {
return sortedColors.indexOf(c) === -1;
});
var regularColorsBags = [];
for (var i = 0 ; i < HUE_BOUNDS.length ; i++) {
var hue = HUE_BOUNDS[i];
var bagColors = regularColors.filter(function (color) {
var hsl = this.colorsHslMap_[color];
return (hsl.h >= hue && hsl.h < hue + HUE_STEP);
}.bind(this));
regularColorsBags[i] = this.sortRegularColors_(bagColors);
}
return Array.prototype.concat.apply(sortedColors, regularColorsBags);
};
ns.ColorSorter.prototype.sortRegularColors_ = function (colors) {
var sortedColors = colors.sort(function (c1, c2) {
var hsl1 = this.colorsHslMap_[c1];
var hsl2 = this.colorsHslMap_[c2];
var hDiff = Math.abs(hsl1.h - hsl2.h);
var sDiff = Math.abs(hsl1.s - hsl2.s);
var lDiff = Math.abs(hsl1.l - hsl2.l);
if (hDiff < 10) {
if (sDiff > lDiff) {
return this.compareValues_(hsl1.s, hsl2.s);
} else {
return this.compareValues_(hsl1.l, hsl2.l);
}
} else {
return this.compareValues_(hsl1.h, hsl2.h);
}
}.bind(this));
return sortedColors;
};
ns.ColorSorter.prototype.sortOnHslProperty_ = function (colors, property) {
return colors.sort(function (c1, c2) {
var hsl1 = this.colorsHslMap_[c1];
var hsl2 = this.colorsHslMap_[c2];
return this.compareValues_(hsl1[property], hsl2[property]);
}.bind(this));
};
ns.ColorSorter.prototype.compareValues_ = function (v1, v2) {
if (v1 > v2) {
return 1;
} else if (v1 < v2) {
return -1;
}
return 0;
};
})();

1
src/piskel-script-list.js
View File

@ -122,6 +122,7 @@
"js/service/BackupService.js",
"js/service/BeforeUnloadService.js",
"js/service/HistoryService.js",
"js/service/color/ColorSorter.js",
"js/service/palette/CurrentColorsPalette.js",
"js/service/palette/PaletteService.js",
"js/service/palette/PaletteTxtReader.js",