javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: color refactoring

Browse Source
This commit is contained in:
Martin Guillon
2021-08-22 14:20:35 +02:00
parent 394209e3f6
commit 2184e2692f
1 changed files with 31 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/core/color/color-common.ts
View File

@ -247,8 +247,7 @@ export class Color implements definition.Color {
*
*/
public toHsl() {
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
return { ...rgbToHsl(this.r, this.g, this.b), a: this.a };
}
/**
@ -256,10 +255,10 @@ export class Color implements definition.Color {
*
*/
public toHslString() {
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
const h = Math.round(hsl.h * 360),
s = Math.round(hsl.s * 100),
l = Math.round(hsl.l * 100);
const hsl = rgbToHsl(this.r, this.g, this.b);
const h = Math.round(hsl.h),
s = Math.round(hsl.s),
l = Math.round(hsl.l);
const a = this.a;
return a == 255 ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + (a / 255).toFixed(2) + ')';
}
@ -269,8 +268,7 @@ export class Color implements definition.Color {
*
*/
public toHsv() {
const hsv = rgbToHsv(this.r / 255, this.g / 255, this.b / 255);
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
return { ...rgbToHsv(this.r, this.g, this.b), a: this.a };
}
/**
@ -278,7 +276,7 @@ export class Color implements definition.Color {
*
*/
public toHsvString() {
const hsv = rgbToHsv(this.r / 255, this.g / 255, this.b / 255);
const hsv = rgbToHsv(this.r, this.g, this.b);
const h = Math.round(hsv.h * 360),
s = Math.round(hsv.s * 100),
v = Math.round(hsv.v * 100);
@ -302,10 +300,8 @@ export class Color implements definition.Color {
*/
public desaturate(amount: number) {
amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.s -= amount / 100;
hsl.s = Math.min(1, Math.max(0, hsl.s));
return Color.fromHSL(this.a, hsl.h * 360, hsl.s * 100, hsl.l * 100);
const hsl = rgbToHsl(this.r, this.g, this.b);
return Color.fromHSL(this.a, hsl.h, Math.min(100, Math.max(0, hsl.s - amount)), hsl.l);
}
/**
@ -315,10 +311,8 @@ export class Color implements definition.Color {
*/
public saturate(amount: number) {
amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.s += amount / 100;
hsl.s = Math.min(1, Math.max(0, hsl.s));
return Color.fromHSL(this.a, hsl.h * 360, hsl.s * 100, hsl.l * 100);
const hsl = rgbToHsl(this.r, this.g, this.b);
return Color.fromHSL(this.a, hsl.h, Math.min(100, Math.max(0, hsl.s + amount)), hsl.l);
}
/**
@ -336,10 +330,8 @@ export class Color implements definition.Color {
*/
public lighten(amount: number) {
amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.l += amount / 100;
hsl.l = Math.min(1, Math.max(0, hsl.l));
return Color.fromHSL(this.a, hsl.h * 360, hsl.s * 100, hsl.l * 100);
const hsl = rgbToHsl(this.r, this.g, this.b);
return Color.fromHSL(this.a, hsl.h, hsl.s, Math.min(100, Math.max(0, hsl.l + amount)));
}
/**
@ -362,8 +354,8 @@ export class Color implements definition.Color {
*/
public darken(amount: number) {
amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
return Color.fromHSL(this.a, hsl.h * 360, hsl.s * 100, Math.min(100, Math.max(0, hsl.l * 100 - amount)));
const hsl = rgbToHsl(this.r, this.g, this.b);
return Color.fromHSL(this.a, hsl.h, hsl.s, Math.min(100, Math.max(0, hsl.l - amount)));
}
/**
@ -469,11 +461,11 @@ function argbFromHsvOrHsva(value: string): number {
// `rgbToHsl`
// Converts an RGB color value to HSL.
// *Assumes:* r, g, and b are contained in [0, 1]
// *Returns:* { h, s, l } in [0,1]
// *Assumes:* r, g, and b are contained in [0, 255]
// *Returns:* { h, s, l } in [0,360] and [0,100]
function rgbToHsl(r, g, b) {
const max = Math.max(r, g, b),
min = Math.min(r, g, b);
const max = Math.max(r, g, b) / 255,
min = Math.min(r, g, b) / 255;
let h, s;
const l = (max + min) / 2;
@ -484,20 +476,20 @@ function rgbToHsl(r, g, b) {
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
h = (g - b) / 255 / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
h = (b - r) / 255 / d + 2;
break;
case b:
h = (r - g) / d + 4;
h = (r - g) / 255 / d + 4;
break;
}
h /= 6;
}
return { h: h, s: s, l: l };
return { h: h * 360, s: s * 100, l: l * 100 };
}
function hue2rgb(p, q, t) {
@ -533,11 +525,11 @@ function hslToRgb(h1, s1, l1) {
// `rgbToHsv`
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 1]
// *Returns:* { h, s, v } in [0,1]
// *Assumes:* r, g, and b are contained in the set [0, 255]
// *Returns:* { h, s, v } in [0,360] and [0,100]
function rgbToHsv(r, g, b) {
const max = Math.max(r, g, b),
min = Math.min(r, g, b);
const max = Math.max(r, g, b) / 255,
min = Math.min(r, g, b) / 255;
let h;
const v = max;
@ -549,18 +541,18 @@ function rgbToHsv(r, g, b) {
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
h = (g - b) / 255 / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
h = (b - r) / 255 / d + 2;
break;
case b:
h = (r - g) / d + 4;
h = (r - g) / 255 / d + 4;
break;
}
h /= 6;
}
return { h: h, s: s, v: v };
return { h: h * 360, s: s * 100, v: v * 100 };
}
// `hsvToRgb`