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