mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-16 06:38:03 +08:00
* feat/color-picker: rework * feat(161) lint * feat(161) Remove response handlers * feat(161) fix rgb <-> hsv conversion * feat(161) inverse swatchs and add checkered bg * feat(161) remove temporary color assignment * feat(161) move cursor outside of the box * feat(161) @Keavon feedbacks * feat(161) lint * feat(161) fix opacity-picker color * feat(161) --saturation-picker-color
84 lines
1.7 KiB
TypeScript
84 lines
1.7 KiB
TypeScript
export interface RGB {
|
|
r: number;
|
|
g: number;
|
|
b: number;
|
|
a: number;
|
|
}
|
|
|
|
export interface HSV {
|
|
h: number;
|
|
s: number;
|
|
v: number;
|
|
a: number;
|
|
}
|
|
|
|
export function hsvToRgb(hsv: HSV): RGB {
|
|
let { h } = hsv;
|
|
const { s, v } = hsv;
|
|
h *= 6;
|
|
const i = Math.floor(h);
|
|
const f = h - i;
|
|
const p = v * (1 - s);
|
|
const q = v * (1 - f * s);
|
|
const t = v * (1 - (1 - f) * s);
|
|
const mod = i % 6;
|
|
const r = Math.round([v, q, p, p, t, v][mod]);
|
|
const g = Math.round([t, v, v, q, p, p][mod]);
|
|
const b = Math.round([p, p, t, v, v, q][mod]);
|
|
return { r, g, b, a: hsv.a };
|
|
}
|
|
|
|
export function rgbToHsv(rgb: RGB) {
|
|
const { r, g, b } = rgb;
|
|
const max = Math.max(r, g, b);
|
|
const min = Math.min(r, g, b);
|
|
const d = max - min;
|
|
const s = max === 0 ? 0 : d / max;
|
|
const v = max;
|
|
let h = 0;
|
|
if (max === min) {
|
|
h = 0;
|
|
} else {
|
|
switch (max) {
|
|
case r:
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
break;
|
|
case g:
|
|
h = (b - r) / d + 2;
|
|
break;
|
|
case b:
|
|
h = (r - g) / d + 4;
|
|
break;
|
|
default:
|
|
}
|
|
h /= 6;
|
|
}
|
|
return { h, s, v, a: rgb.a };
|
|
}
|
|
|
|
export function rgbToDecimalRgb(rgb: RGB) {
|
|
const r = rgb.r / 255;
|
|
const g = rgb.g / 255;
|
|
const b = rgb.b / 255;
|
|
return { r, g, b, a: rgb.a };
|
|
}
|
|
|
|
export function clamp(value: number, min = 0, max = 1) {
|
|
return Math.max(min, Math.min(value, max));
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export function isRGB(data: any): data is RGB {
|
|
if (typeof data !== "object" || data === null) return false;
|
|
return (
|
|
typeof data.r === "number" &&
|
|
!Number.isNaN(data.r) &&
|
|
typeof data.g === "number" &&
|
|
!Number.isNaN(data.g) &&
|
|
typeof data.b === "number" &&
|
|
!Number.isNaN(data.b) &&
|
|
typeof data.a === "number" &&
|
|
!Number.isNaN(data.a)
|
|
);
|
|
}
|