cha0s/avocado
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opt: colors

Browse Source
This commit is contained in:
cha0s 2022-03-30 06:47:12 -05:00
parent d7c64241ef
commit 812c5e45e0
1 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/color/src/traits/colorized.js
View File

@ -20,14 +20,20 @@ export default (flecks) => {
return class Colorized extends decorate(Trait) { return class Colorized extends decorate(Trait) {
constructor(...args) {
super(...args);
this.$$rgbChanged = false;
this.$$hsvChanged = false;
this.$$hsv = [0, 0, 0];
}
get blue() { get blue() {
return this.state.blue; return this.state.blue;
} }
set blue(blue) { set blue(blue) {
this.wrapRgbSet(() => { super.blue = blue;
super.blue = blue; this.$$rgbChanged = true;
});
} }
static defaultState() { static defaultState() {
@ -43,17 +49,22 @@ export default (flecks) => {
} }
set green(green) { set green(green) {
this.wrapRgbSet(() => { super.green = green;
super.green = green; this.$$rgbChanged = true;
});
} }
get hue() { get hue() {
return rgb2hsv([this.red, this.green, this.blue])[0]; return this.$$hsv[0];
} }
set hue(hue) { set hue(hue) {
this.wrapHsvSet(0, hue); this.$$hsv[0] = hue;
this.$$hsvChanged = true;
}
async load(json) {
await super.load(json);
this.$$hsv = rgb2hsv([this.state.red, this.state.green, this.state.blue]);
} }
get red() { get red() {
@ -61,47 +72,41 @@ export default (flecks) => {
} }
set red(red) { set red(red) {
this.wrapRgbSet(() => { super.red = red;
super.red = red; this.$$rgbChanged = true;
});
} }
get saturation() { get saturation() {
return rgb2hsv([this.red, this.green, this.blue])[1]; return this.$$hsv[1];
} }
set saturation(saturation) { set saturation(saturation) {
this.wrapHsvSet(1, saturation); this.$$hsv[1] = saturation;
this.$$hsvChanged = true;
}
tick() {
// RGB takes priority...
if (this.$$rgbChanged) {
this.$$hsv = rgb2hsv([this.state.red, this.state.green, this.state.blue]);
}
else if (this.$$hsvChanged) {
[this.red, this.green, this.blue] = hsv2rgb(this.$$hsv);
}
else {
return;
}
this.$$hsvChanged = false;
this.$$rgbChanged = false;
} }
get value() { get value() {
return rgb2hsv([this.red, this.green, this.blue])[2]; return this.$$hsv[2];
} }
set value(value) { set value(value) {
this.wrapHsvSet(2, value); this.$$hsv[2] = value;
} this.$$hsvChanged = true;
wrapHsvSet(i, nv) {
const hsv = rgb2hsv([this.red, this.green, this.blue]);
const keys = ['hue', 'saturation', 'value'];
if (nv !== hsv[i]) {
hsv[i] = nv;
[this.red, this.green, this.blue] = hsv2rgb(hsv);
this.entity.emit(`${keys[i]}Changed`);
}
}
wrapRgbSet(fn) {
const o = rgb2hsv([this.red, this.green, this.blue]);
fn();
const n = rgb2hsv([this.red, this.green, this.blue]);
['hue', 'saturation', 'value'].forEach((key, i) => {
if (n[i] !== o[i]) {
this.entity.emit(`${key}Changed`);
}
});
} }
}; };