Commit 0e869918 authored by Zéfling's avatar Zéfling 🎨
Browse files

Add more controls

parent 2279d49d
......@@ -99,8 +99,10 @@ export class Coloration {
* reinit to base color
*/
reset() {
this.calcColor = this.parseColor(this.color);
this.updateColor();
if (this.color) {
this.calcColor = this.parseColor(this.color);
this.updateColor();
}
}
/**
......@@ -121,25 +123,26 @@ export class Coloration {
* @returns Coloration
*/
maskColor(color: string, opacity: number = 1): Coloration {
if (this.calcColor) {
const baseColor = this.calcColor;
const additionalColor = this.parseColor(color);
const baseColor = this.calcColor;
const additionalColor = this.parseColor(color);
const lum = this.minmax(opacity, 0, 1);
const lum = this.minmax(opacity, 0, 1);
const R = baseColor.intColor >> 16;
const G = baseColor.intColor >> 8 & 0x00FF;
const B = baseColor.intColor & 0x0000FF;
const R = baseColor.intColor >> 16;
const G = baseColor.intColor >> 8 & 0x00FF;
const B = baseColor.intColor & 0x0000FF;
if (additionalColor.alpha) {
this.calcColor.alpha = this.minmax(baseColor.alpha + additionalColor.alpha, 0, 1);
if (additionalColor.alpha) {
this.calcColor.alpha = this.minmax(baseColor.alpha + additionalColor.alpha, 0, 1);
}
this.calcColor.intColor = this.rgbToInt(
Math.round(((additionalColor.intColor >> 16) - R) * lum) + R,
Math.round(((additionalColor.intColor >> 8 & 0x00FF) - G) * lum) + G,
Math.round(((additionalColor.intColor & 0x0000FF) - B) * lum) + B
);
this.updateColor();
}
this.calcColor.intColor = this.rgbToInt(
Math.round(((additionalColor.intColor >> 16) - R) * lum) + R,
Math.round(((additionalColor.intColor >> 8 & 0x00FF) - G) * lum) + G,
Math.round(((additionalColor.intColor & 0x0000FF) - B) * lum) + B
);
this.updateColor();
return this;
}
......@@ -149,46 +152,47 @@ export class Coloration {
* @returns Coloration
*/
addColor(colorData: ColorData) {
if (colorData.luminosity) {
this.changeLuminosity(colorData.luminosity);
}
if (colorData.maskColor) {
this.maskColor(colorData.maskColor, this.minmax(colorData.maskOpacity || 0, 0, 1));
}
if (colorData.r || colorData.g || colorData.b) {
if (colorData.r) {
this.rgb.r = this.minmax(this.rgb.r + (+colorData.r), 0, 255);
}
if (colorData.g) {
this.rgb.g = this.minmax(this.rgb.g + (+colorData.g), 0, 255);
if (this.calcColor) {
if (colorData.luminosity) {
this.changeLuminosity(colorData.luminosity);
}
if (colorData.b) {
this.rgb.b = this.minmax(this.rgb.b + (+colorData.b), 0, 255);
}
this.calcColor.intColor = this.rgbToInt(this.rgb.r, this.rgb.g, this.rgb.b);
this.updateColor();
}
if (colorData.h || colorData.s || colorData.v) {
if (colorData.h) {
this.hsv.h = (this.hsv.h + (+colorData.h) + 360) % 360;
if (colorData.maskColor) {
this.maskColor(colorData.maskColor, this.minmax(colorData.maskOpacity || 0, 0, 1));
}
if (colorData.s) {
this.hsv.s = this.minmax(this.hsv.s + (+colorData.s), 0, 100);
if (colorData.r || colorData.g || colorData.b) {
if (colorData.r) {
this.rgb.r = this.minmax(this.rgb.r + (+colorData.r), 0, 255);
}
if (colorData.g) {
this.rgb.g = this.minmax(this.rgb.g + (+colorData.g), 0, 255);
}
if (colorData.b) {
this.rgb.b = this.minmax(this.rgb.b + (+colorData.b), 0, 255);
}
this.calcColor.intColor = this.rgbToInt(this.rgb.r, this.rgb.g, this.rgb.b);
this.updateColor();
}
if (colorData.v) {
this.hsv.v = this.minmax(this.hsv.v + (+colorData.v), 0, 100);
if (colorData.h || colorData.s || colorData.v) {
if (colorData.h) {
this.hsv.h = (this.hsv.h + (+colorData.h) + 360) % 360;
}
if (colorData.s) {
this.hsv.s = this.minmax(this.hsv.s + (+colorData.s), 0, 100);
}
if (colorData.v) {
this.hsv.v = this.minmax(this.hsv.v + (+colorData.v), 0, 100);
}
this.calcColor.intColor = this.hsvToInt(this.hsv.h, this.hsv.s, this.hsv.v);
this.updateColor();
}
this.calcColor.intColor = this.hsvToInt(this.hsv.h, this.hsv.s, this.hsv.v);
this.updateColor();
}
if (colorData.alpha) {
this.hsv.a = this.rgb.a = this.calcColor.alpha = this.minmax(this.calcColor.alpha + (+colorData.alpha), 0, 1);
if (colorData.alpha) {
this.hsv.a = this.rgb.a = this.calcColor.alpha = this.minmax(this.calcColor.alpha + (+colorData.alpha), 0, 1);
}
}
return this;
}
......@@ -197,7 +201,7 @@ export class Coloration {
* @returns RGB
*/
getRGB(): RGB {
return this.value<RGB>(() => Object.assign({}, this.rgb));
return this.calcColor ? this.value<RGB>(() => Object.assign({}, this.rgb)) : null;
}
/**
......@@ -205,7 +209,7 @@ export class Coloration {
* @returns HSV
*/
getHSV(): HSV {
return this.value<HSV>(() => Object.assign({}, this.hsv));
return this.calcColor ? this.value<HSV>(() => Object.assign({}, this.hsv)) : null;
}
/**
......@@ -213,8 +217,10 @@ export class Coloration {
* @returns string of #HEX
*/
toHEX(): string {
return this.value<string>(() => '#' + (0x1000000 + this.calcColor.intColor).toString(16).slice(1))
+ (this.calcColor.alpha < 1 ? (0x100 + Math.round(this.calcColor.alpha * 256)).toString(16).slice(1) : '');
return this.calcColor ? this.value<string>(
() => '#' + (0x1000000 + this.calcColor.intColor).toString(16).slice(1)
+ (this.calcColor.alpha < 1 ? (0x100 + Math.round(this.calcColor.alpha * 256)).toString(16).slice(1) : '')
) : null;
}
/**
......@@ -222,9 +228,9 @@ export class Coloration {
* @returns string of HVL(H, S%, V%)
*/
toHSL(): string {
return this.value<string>(
return this.calcColor ? this.value<string>(
() => `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%${this.hsv.a < 1 ? ', ' + this.hsv.a : ''})`
);
) : null;
}
/**
......@@ -232,9 +238,9 @@ export class Coloration {
* @returns string of RGB(R, G, B)
*/
toRGB(): string {
return this.value<string>(
return this.calcColor ? this.value<string>(
() => `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}${this.rgb.a < 1 ? ', ' + this.rgb.a : ''})`
);
) : null;
}
/**
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment