Skip to content

Commit

Permalink
update color js, less garbage on color instances
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcnuttandrew
mcnuttandrew committed Mar 5, 2024
1 parent 43d76c6 commit f5e2170
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 76 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,8 @@
"dependencies": {
"@google/generative-ai": "^0.1.1",
"chroma-js": "^2.4.2",
"color-blind": "^0.1.3",
"color-namer": "^1.4.0",
"colorjs.io": "^0.4.5",
"colorjs.io": "^0.5.0",
"d3-scale": "^4.0.2",
"d3-shape": "^3.2.0",
"fracturedjsonjs": "^3.1.0",
Expand Down
4 changes: 2 additions & 2 deletions src/controls/AdjustColor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@
{
name: "Saturate",
effect: (color) =>
color.toColorIO().set("lch.c", (c) => clamp(c ? c * 1.2 : 5, 0, 150))
color.toColorIO().set("hsl.s", (c) => clamp(c ? c * 1.2 : 5, 0, 100))
.coords,
},
{
name: "Desaturate",
effect: (color) => color.toColorIO().set("lch.c", (c) => c * 0.8).coords,
effect: (color) => color.toColorIO().set("hsl.s", (c) => c * 0.8).coords,
},
{
name: "Convert To Opposing",
Expand Down
129 changes: 65 additions & 64 deletions src/lib/Color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ type Channels = [number, number, number];
const hexCache = new Map<string, string>();
const stringChannelsCache = new Map<string, Channels>();
export class Color {
name: string = "";
static name: string = "";
channels: Record<string, number> = {};
spaceName: keyof typeof colorDirectory = "rgb";
domains: Domain;
stepSize: Channels = [1, 1, 1];
channelNames: string[] = [];
dimensionToChannel: Record<"x" | "y" | "z", string> = { x: "", y: "", z: "" };
static domains: Domain;
static stepSize: Channels = [1, 1, 1];
static channelNames: string[] = [];
static dimensionToChannel: Record<"x" | "y" | "z", string> = {
x: "",
y: "",
z: "",
};
axisLabel: (num: number) => string = (x) => x.toFixed(1).toString();
isPolar = false;
cachedColorIO: ColorIO | null = null;
cachedInGamut: boolean | null = null;

constructor() {
this.domains = {};
}

toHex(): string {
const str = this.toString();
if (hexCache.has(str)) {
Expand Down Expand Up @@ -218,13 +218,13 @@ function stringToChannels(spaceName: string, str: string) {
}

class CIELAB extends Color {
name = "CIELAB";
channelNames = ["L", "a", "b"];
static name = "CIELAB";
static channelNames = ["L", "a", "b"];
channels = { L: 0, a: 0, b: 0 };
domains = { L: [100, 0], a: [-125, 125], b: [125, -125] } as Domain;
static domains = { L: [100, 0], a: [-125, 125], b: [125, -125] } as Domain;
spaceName = "lab" as const;
stepSize: Channels = [1, 1, 1];
dimensionToChannel = { x: "a", y: "b", z: "L" };
static stepSize: Channels = [1, 1, 1];
static dimensionToChannel = { x: "a", y: "b", z: "L" };
axisLabel = (num: number) => `${Math.round(num)}`;

toString(): string {
Expand All @@ -237,13 +237,13 @@ class CIELAB extends Color {
}
}
class HSV extends Color {
name = "HSV";
channelNames = ["h", "s", "v"];
static name = "HSV";
static channelNames = ["h", "s", "v"];
isPolar = true;
channels = { h: 0, s: 0, v: 0 };
domains = { h: [0, 360], s: [0, 100], v: [100, 0] } as Domain;
static domains = { h: [0, 360], s: [0, 100], v: [100, 0] } as Domain;
spaceName = "hsv" as const;
dimensionToChannel = { x: "s", y: "h", z: "v" };
static dimensionToChannel = { x: "s", y: "h", z: "v" };
toString(): string {
const [h, s, v] = this.stringChannels();
return `color(hsv ${h} ${s} ${v})`;
Expand All @@ -255,13 +255,13 @@ class HSV extends Color {
}

class RGB extends Color {
name = "RGB";
channelNames = ["r", "g", "b"];
static name = "RGB";
static channelNames = ["r", "g", "b"];
channels = { r: 0, g: 0, b: 0 };
spaceName = "srgb" as const;
domains = { r: [0, 255], g: [0, 255], b: [0, 255] } as Domain;
stepSize: Channels = [1, 1, 1];
dimensionToChannel = { x: "g", y: "b", z: "r" };
static domains = { r: [0, 255], g: [0, 255], b: [0, 255] } as Domain;
static stepSize: Channels = [1, 1, 1];
static dimensionToChannel = { x: "g", y: "b", z: "r" };
axisLabel = (num: number) => `${Math.round(num)}`;
toString(): string {
const [r, g, b] = this.stringChannels();
Expand All @@ -274,13 +274,13 @@ class RGB extends Color {
}

class SRGB extends Color {
name = "sRGB";
channelNames = ["r", "g", "b"];
static name = "sRGB";
static channelNames = ["r", "g", "b"];
channels = { r: 0, g: 0, b: 0 };
spaceName = "srgb" as const;
domains = { r: [0, 1], g: [0, 1], b: [0, 1] } as Domain;
stepSize: Channels = [0.01, 0.01, 0.01];
dimensionToChannel = { x: "g", y: "b", z: "r" };
static domains = { r: [0, 1], g: [0, 1], b: [0, 1] } as Domain;
static stepSize: Channels = [0.01, 0.01, 0.01];
static dimensionToChannel = { x: "g", y: "b", z: "r" };
axisLabel = (num: number) => `${Math.round(num)}`;
toString(): string {
const [r, g, b] = this.stringChannels();
Expand All @@ -293,13 +293,13 @@ class SRGB extends Color {
}

class HSL extends Color {
name = "HSL";
channelNames = ["h", "s", "l"];
static name = "HSL";
static channelNames = ["h", "s", "l"];
channels = { h: 0, s: 0, l: 0 };
spaceName = "hsl" as const;
domains = { h: [0, 360], s: [0, 100], l: [100, 0] } as Domain;
stepSize: Channels = [1, 1, 1];
dimensionToChannel = { x: "s", y: "h", z: "l" };
static domains = { h: [0, 360], s: [0, 100], l: [100, 0] } as Domain;
static stepSize: Channels = [1, 1, 1];
static dimensionToChannel = { x: "s", y: "h", z: "l" };
isPolar = true;

toString(): string {
Expand All @@ -312,45 +312,45 @@ class HSL extends Color {
}
}
class LCH extends Color {
name = "LCH";
channelNames = ["l", "c", "h"];
static name = "LCH";
static channelNames = ["l", "c", "h"];
channels = { l: 0, c: 0, h: 0 };
spaceName = "lch" as const;
domains = { l: [100, 0], c: [0, 120], h: [360, 0] } as Domain;
stepSize: Channels = [1, 1, 1];
dimensionToChannel = { x: "c", y: "h", z: "l" };
static domains = { l: [100, 0], c: [0, 120], h: [360, 0] } as Domain;
static stepSize: Channels = [1, 1, 1];
static dimensionToChannel = { x: "c", y: "h", z: "l" };
isPolar = true;
axisLabel = (num: number) => `${Math.round(num)}`;
}

class OKLAB extends Color {
name = "OKLAB";
channelNames = ["l", "a", "b"];
static name = "OKLAB";
static channelNames = ["l", "a", "b"];
channels = { l: 0, a: 0, b: 0 };
spaceName = "oklab" as const;
domains = { l: [1, 0], a: [-0.4, 0.4], b: [0.4, -0.4] } as Domain;
stepSize: Channels = [0.01, 0.01, 0.01];
dimensionToChannel = { x: "a", y: "b", z: "l" };
static domains = { l: [1, 0], a: [-0.4, 0.4], b: [0.4, -0.4] } as Domain;
static stepSize: Channels = [0.01, 0.01, 0.01];
static dimensionToChannel = { x: "a", y: "b", z: "l" };
}

class OKLCH extends Color {
name = "OKLCH";
channelNames = ["l", "c", "h"];
static name = "OKLCH";
static channelNames = ["l", "c", "h"];
channels = { l: 0, c: 0, h: 0 };
spaceName = "oklch" as const;
domains = { l: [1, 0], c: [0, 0.4], h: [360, 0] } as Domain;
stepSize: Channels = [0.01, 0.01, 1];
dimensionToChannel = { x: "c", y: "h", z: "l" };
static domains = { l: [1, 0], c: [0, 0.4], h: [360, 0] } as Domain;
static stepSize: Channels = [0.01, 0.01, 1];
static dimensionToChannel = { x: "c", y: "h", z: "l" };
}

class JZAZBZ extends Color {
name = "JZAZBZ";
channelNames = ["jz", "az", "bz"];
static name = "JZAZBZ";
static channelNames = ["jz", "az", "bz"];
channels = { jz: 0, az: 0, bz: 0 };
spaceName = "jzazbz" as const;
domains = { jz: [1, 0], az: [-0.5, 0.5], bz: [0.5, -0.5] } as Domain;
stepSize: Channels = [0.01, 0.01, 0.01];
dimensionToChannel = { x: "az", y: "bz", z: "jz" };
static domains = { jz: [1, 0], az: [-0.5, 0.5], bz: [0.5, -0.5] } as Domain;
static stepSize: Channels = [0.01, 0.01, 0.01];
static dimensionToChannel = { x: "az", y: "bz", z: "jz" };

toString(): string {
const [jz, az, bz] = Object.values(this.channels);
Expand Down Expand Up @@ -428,26 +428,27 @@ type ColorSpace = keyof typeof colorDirectory | string;

export const colorPickerConfig = Object.fromEntries(
(Object.keys(colorDirectory) as ColorSpace[]).map((name: ColorSpace) => {
const space = (colorDirectory as any)[name] as typeof Color;
const exampleColor = new (colorDirectory as any)[name]() as Color;
const { x, y, z } = exampleColor.dimensionToChannel;
const { x, y, z } = space.dimensionToChannel;
return [
name,
{
axisLabel: exampleColor.axisLabel,
isPolar: exampleColor.isPolar,
title: exampleColor.name,
title: space.name,
xChannel: x,
xChannelIndex: exampleColor.channelNames.indexOf(x),
xDomain: exampleColor.domains[x],
xStep: exampleColor.stepSize[1],
xChannelIndex: space.channelNames.indexOf(x),
xDomain: space.domains[x],
xStep: space.stepSize[1],
yChannel: y,
yChannelIndex: exampleColor.channelNames.indexOf(y),
yDomain: exampleColor.domains[y],
yStep: exampleColor.stepSize[2],
yChannelIndex: space.channelNames.indexOf(y),
yDomain: space.domains[y],
yStep: space.stepSize[2],
zChannel: z,
zChannelIndex: exampleColor.channelNames.indexOf(z),
zDomain: exampleColor.domains[z],
zStep: exampleColor.stepSize[0],
zChannelIndex: space.channelNames.indexOf(z),
zDomain: space.domains[z],
zStep: space.stepSize[0],
},
];
})
Expand Down
7 changes: 5 additions & 2 deletions src/lib/lint-language/lint-language.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,15 @@ class Environment {
get(name: string) {
if (name === "colors") {
const children = this.palette.colors
.map((x) => new LLColor(x))
.map((x) => new LLColor(x, x.toHex()))
.map((x) => new LLValue(x));
return new LLValueArray(children);
}
if (name === "background") {
return new LLColor(this.palette.background);
return new LLColor(
this.palette.background,
this.palette.background.toHex()
);
}
const val = this.variables[name];
const definedVariables = [
Expand Down
4 changes: 2 additions & 2 deletions src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export function deDup(arr: Color[]): Color[] {

export function clipToGamut(color: Color): [number, number, number] {
if (color.inGamut()) {
console.log("branch a");
const channels = Object.entries(color.domains).map(([key, domain]) => {
const space = color.constructor as typeof Color;
const channels = Object.entries(space.domains).map(([key, domain]) => {
const [min, max] = domain.sort();
return clamp(color.channels[key], min, max);
});
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3354,10 +3354,10 @@ colorette@^2.0.20:
resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==

colorjs.io@^0.4.5:
version "0.4.5"
resolved "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz"
integrity sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==
colorjs.io@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.5.0.tgz#b1034184b4812b54e28c5082029fbd8ca53aa532"
integrity sha512-qekjTiBLM3F/sXKks/ih5aWaHIGu+Ftel0yKEvmpbKvmxpNOhojKgha5uiWEUOqEpRjC1Tq3nJRT7WgdBOxIGg==

colors-option@^3.0.0:
version "3.0.0"
Expand Down

0 comments on commit f5e2170

Please sign in to comment.