Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test @texet/color in chart render #152

Closed
wants to merge 1 commit into from
Closed

test @texet/color in chart render #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 79 additions & 65 deletions lib/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-ignore
import { convert, DisplayP3, isRGBInGamut, OKLCH, Rec2020 as Rec2020Texet, sRGB as sRGBTexet } from '@texel/color'
import {
type Color,
formatCss,
Expand Down Expand Up @@ -44,6 +46,23 @@ export let p3 = useMode(modeP3)
const GAMUT_MIN = -GAMUT_EPSILON
const GAMUT_MAX = 1 + GAMUT_EPSILON

const isInRGB = (color: Color):boolean => {
// @ts-ignore
let rgbProxyColor = convert([color.l, color.c, color.h], OKLCH, sRGBTexet)
return isRGBInGamut(rgbProxyColor, GAMUT_EPSILON)

}
const isInP3 = (color: Color):boolean => {
// @ts-ignore
let p3ProxyColor = convert([color.l, color.c, color.h], OKLCH, DisplayP3)
return isRGBInGamut(p3ProxyColor, GAMUT_EPSILON)
}

const isInRec2020 = (color: Color):boolean => {
// @ts-ignore
let Rec2020ProxyColor = convert([color.l, color.c, color.h], OKLCH, Rec2020Texet)
return isRGBInGamut(Rec2020ProxyColor, GAMUT_EPSILON)
}
export function inRGB(color: Color): boolean {
let { b, g, r } = rgb(color)
return (
Expand Down Expand Up @@ -213,41 +232,38 @@ export function generateGetSpace(
): GetSpace {
if (showP3 && showRec2020) {
return color => {
let proxyColor = getProxyColor(color)
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
return Space.sRGB
} else if (inP3(proxyColor)) {
} else if (isInP3(color)) {
return Space.P3
} else if (inRec2020(proxyColor)) {
} else if (isInRec2020(color)) {
return Space.Rec2020
} else {
return Space.Out
}
}
} else if (showP3 && !showRec2020) {
return color => {
let proxyColor = getProxyColor(color)
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
return Space.sRGB
} else if (inP3(proxyColor)) {
} else if(isInP3(color)) {
return Space.P3
} else {
return Space.Out
}
}
} else if (!showP3 && showRec2020) {
return color => {
let proxyColor = getProxyColor(color)
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
return Space.sRGB
} else if (inRec2020(proxyColor)) {
} else if (isInRec2020(color)) {
return Space.P3
} else {
return Space.Out
}
}
} else {
return color => (inRGB(color) ? Space.sRGB : Space.Out)
return color => (isInRGB(color) ? Space.sRGB : Space.Out)
}
}

Expand All @@ -271,39 +287,37 @@ export function generateGetPixel(
if (p3Support) {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorP3 = p3(proxyColor)
let colorP3 = convert([color.l, color.c, color.h], OKLCH, DisplayP3)
let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorP3.r),
Math.floor(255 * colorP3.g),
Math.floor(255 * colorP3.b)
Math.floor(255 * colorP3[0]),
Math.floor(255 * colorP3[1]),
Math.floor(255 * colorP3[2])
]
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
pixel[0] = Space.sRGB
} else if (inP3(colorP3)) {
} else if (isInP3(color)) {
pixel[0] = Space.P3
} else if (inRec2020(proxyColor)) {
} else if (isInRec2020(color)) {
pixel[0] = Space.Rec2020
}
return pixel
}
} else {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorSRGB = rgb(proxyColor)
let colorSRGB = convert([color.l, color.c, color.h], OKLCH, sRGBTexet)
let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorSRGB.r),
Math.floor(255 * colorSRGB.g),
Math.floor(255 * colorSRGB.b)
Math.floor(255 * colorSRGB[0]),
Math.floor(255 * colorSRGB[1]),
Math.floor(255 * colorSRGB[2])
]
if (inRGB(colorSRGB)) {
if (isInRGB(color)) {
pixel[0] = Space.sRGB
} else if (inP3(proxyColor)) {
} else if (isInP3(color)) {
pixel[0] = Space.P3
} else if (inRec2020(proxyColor)) {
} else if (isInRec2020(color)) {
pixel[0] = Space.Rec2020
}
return pixel
Expand All @@ -313,35 +327,35 @@ export function generateGetPixel(
if (p3Support) {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorP3 = p3(proxyColor)
let colorP3 = convert([color.l, color.c, color.h], OKLCH, DisplayP3)
let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorP3.r),
Math.floor(255 * colorP3.g),
Math.floor(255 * colorP3.b)
Math.floor(255 * colorP3[0]),
Math.floor(255 * colorP3[1]),
Math.floor(255 * colorP3[2])
]
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
pixel[0] = Space.sRGB
} else if (inP3(colorP3)) {
} else if (isInP3(color)) {
pixel[0] = Space.P3
}
return pixel
}
} else {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorSRGB = rgb(proxyColor)
let colorSRGB = convert([color.l, color.c, color.h], OKLCH, sRGBTexet)
let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorSRGB.r),
Math.floor(255 * colorSRGB.g),
Math.floor(255 * colorSRGB.b)
Math.floor(255 * colorSRGB[0]),
Math.floor(255 * colorSRGB[1]),
Math.floor(255 * colorSRGB[2])
]
if (inRGB(colorSRGB)) {


if (isInRGB(color)) {
pixel[0] = Space.sRGB
} else if (inP3(proxyColor)) {
} else if (isInP3(color)) {
pixel[0] = Space.P3
}
return pixel
Expand All @@ -351,35 +365,34 @@ export function generateGetPixel(
if (p3Support) {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorP3 = p3(proxyColor)
let colorP3 = convert([color.l, color.c, color.h], OKLCH, DisplayP3)
let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorP3.r),
Math.floor(255 * colorP3.g),
Math.floor(255 * colorP3.b)
Math.floor(255 * colorP3[0]),
Math.floor(255 * colorP3[1]),
Math.floor(255 * colorP3[2])
]
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
pixel[0] = Space.sRGB
} else if (inRec2020(proxyColor)) {
} else if (isInRec2020(color)) {
pixel[0] = Space.Rec2020
}
return pixel
}
} else {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorSRGB = rgb(proxyColor)
let colorSRGB = convert([color.l, color.c, color.h], OKLCH, sRGBTexet)

let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorSRGB.r),
Math.floor(255 * colorSRGB.g),
Math.floor(255 * colorSRGB.b)
Math.floor(255 * colorSRGB[0]),
Math.floor(255 * colorSRGB[1]),
Math.floor(255 * colorSRGB[2])
]
if (inRGB(colorSRGB)) {
pixel[0] = Space.sRGB
} else if (inRec2020(proxyColor)) {
} else if (isInRec2020(color)) {
pixel[0] = Space.Rec2020
}
return pixel
Expand All @@ -388,30 +401,31 @@ export function generateGetPixel(
} else if (p3Support) {
return (x, y) => {
let color = getColor(x, y)
let proxyColor = getProxyColor(color)
let colorP3 = p3(proxyColor)
let colorP3 = convert([color.l, color.c, color.h], OKLCH, DisplayP3)
let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorP3.r),
Math.floor(255 * colorP3.g),
Math.floor(255 * colorP3.b)
Math.floor(255 * colorP3[0]),
Math.floor(255 * colorP3[1]),
Math.floor(255 * colorP3[2])
]
if (inRGB(proxyColor)) {
if (isInRGB(color)) {
pixel[0] = Space.sRGB
}
return pixel
}
} else {
return (x, y) => {
let color = getColor(x, y)
let colorSRGB = rgb(color)
let colorSRGB = convert([color.l, color.c, color.h], OKLCH, sRGBTexet)

let pixel: Pixel = [
Space.Out,
Math.floor(255 * colorSRGB.r),
Math.floor(255 * colorSRGB.g),
Math.floor(255 * colorSRGB.b)
Math.floor(255 * colorSRGB[0]),
Math.floor(255 * colorSRGB[1]),
Math.floor(255 * colorSRGB[2])
]
if (inRGB(colorSRGB)) {

if (isInRGB(colorSRGB)) {
pixel[0] = Space.sRGB
}
return pixel
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"dependencies": {
"@csstools/postcss-oklab-function": "^4.0.0",
"@nanostores/persistent": "^0.10.2",
"@texel/color": "^1.0.5",
"autoprefixer": "^10.4.20",
"culori": "^4.0.1",
"delaunator": "^5.0.1",
Expand Down
Loading
Loading