From 7b4a564e64214bcadcfce06c93ad596795bcaf25 Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Fri, 18 Oct 2024 12:31:39 +0200 Subject: [PATCH] Add support for all colorjs color spaces (#501) * move to using the colorSpaces provided by colorjs * add changeset * format --- .changeset/shaggy-readers-shout.md | 5 +++ .../src/nodes/color/colorToString.ts | 7 ++-- .../graph-engine/src/nodes/color/convert.ts | 6 +-- .../graph-engine/src/nodes/color/create.ts | 4 +- .../graph-engine/src/nodes/color/darken.ts | 2 - .../src/nodes/color/deconstruct.ts | 2 +- .../src/nodes/color/lib/spaces.ts | 4 ++ .../graph-engine/src/nodes/color/lib/types.ts | 38 ------------------- .../graph-engine/src/nodes/color/lighten.ts | 2 - packages/graph-engine/src/nodes/color/mix.ts | 4 +- 10 files changed, 21 insertions(+), 53 deletions(-) create mode 100644 .changeset/shaggy-readers-shout.md create mode 100644 packages/graph-engine/src/nodes/color/lib/spaces.ts delete mode 100644 packages/graph-engine/src/nodes/color/lib/types.ts diff --git a/.changeset/shaggy-readers-shout.md b/.changeset/shaggy-readers-shout.md new file mode 100644 index 00000000..a68571a9 --- /dev/null +++ b/.changeset/shaggy-readers-shout.md @@ -0,0 +1,5 @@ +--- +"@tokens-studio/graph-engine": minor +--- + +Add support for all colorjs color spaces in the color nodes like color to string diff --git a/packages/graph-engine/src/nodes/color/colorToString.ts b/packages/graph-engine/src/nodes/color/colorToString.ts index 6e0371a1..2be87010 100644 --- a/packages/graph-engine/src/nodes/color/colorToString.ts +++ b/packages/graph-engine/src/nodes/color/colorToString.ts @@ -1,6 +1,7 @@ import { Black, toColor } from './lib/utils.js'; -import { Color } from '../../types.js'; import { ColorSchema, StringSchema } from '../../schemas/index.js'; +import { ColorSpaces } from './lib/spaces.js'; +import { Color as ColorType } from '../../types.js'; import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; @@ -10,7 +11,7 @@ export default class NodeDefinition extends Node { static description = 'Converts a color to a string'; declare inputs: ToInput<{ - color: Color; + color: ColorType; }>; declare outputs: ToOutput<{ value: string; @@ -27,7 +28,7 @@ export default class NodeDefinition extends Node { this.addInput('space', { type: { ...StringSchema, - enum: ['srgb', 'hsl', 'hex'], + enum: ColorSpaces, default: 'hex' }, visible: false diff --git a/packages/graph-engine/src/nodes/color/convert.ts b/packages/graph-engine/src/nodes/color/convert.ts index 5f72d697..fb1692df 100644 --- a/packages/graph-engine/src/nodes/color/convert.ts +++ b/packages/graph-engine/src/nodes/color/convert.ts @@ -1,6 +1,6 @@ import { Color } from '../../types.js'; import { ColorSchema, StringSchema } from '../../schemas/index.js'; -import { ColorSpace, colorSpaces } from './lib/types.js'; +import { ColorSpace, ColorSpaces } from './lib/spaces.js'; import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; import { toColor, toColorObject } from './lib/utils.js'; @@ -26,7 +26,7 @@ export default class NodeDefinition extends Node { this.addInput('space', { type: { ...StringSchema, - enum: colorSpaces, + enum: ColorSpaces, default: 'srgb' } }); @@ -38,7 +38,7 @@ export default class NodeDefinition extends Node { execute(): void | Promise { const { color, space } = this.getAllInputs(); - if (!colorSpaces.includes(space)) { + if (!ColorSpaces.includes(space)) { throw new Error('Invalid color space ' + space); } diff --git a/packages/graph-engine/src/nodes/color/create.ts b/packages/graph-engine/src/nodes/color/create.ts index 54eff0f0..36e8a05d 100644 --- a/packages/graph-engine/src/nodes/color/create.ts +++ b/packages/graph-engine/src/nodes/color/create.ts @@ -7,7 +7,7 @@ import { import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; export { ColorModifierTypes } from '@tokens-studio/types'; -import { ColorSpace, colorSpaces } from './lib/types.js'; +import { ColorSpace, ColorSpaces } from './lib/spaces.js'; export default class NodeDefinition extends Node { static title = 'Create Color'; @@ -47,7 +47,7 @@ export default class NodeDefinition extends Node { this.addInput('space', { type: { ...StringSchema, - enum: colorSpaces, + enum: ColorSpaces, default: 'srgb' } }); diff --git a/packages/graph-engine/src/nodes/color/darken.ts b/packages/graph-engine/src/nodes/color/darken.ts index 971212da..45986cfe 100644 --- a/packages/graph-engine/src/nodes/color/darken.ts +++ b/packages/graph-engine/src/nodes/color/darken.ts @@ -1,5 +1,4 @@ import { ColorSchema, NumberSchema } from '../../schemas/index.js'; -import { ColorSpace } from './lib/types.js'; import { Color as ColorType } from '../../types.js'; import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; @@ -13,7 +12,6 @@ export default class NodeDefinition extends Node { declare inputs: ToInput<{ color: ColorType; value: number; - space: ColorSpace; }>; declare outputs: ToOutput<{ diff --git a/packages/graph-engine/src/nodes/color/deconstruct.ts b/packages/graph-engine/src/nodes/color/deconstruct.ts index 0982f1dd..54fed491 100644 --- a/packages/graph-engine/src/nodes/color/deconstruct.ts +++ b/packages/graph-engine/src/nodes/color/deconstruct.ts @@ -4,7 +4,7 @@ import { NumberSchema, StringSchema } from '../../schemas/index.js'; -import { ColorSpace } from './lib/types.js'; +import { ColorSpace } from './lib/spaces.js'; import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; diff --git a/packages/graph-engine/src/nodes/color/lib/spaces.ts b/packages/graph-engine/src/nodes/color/lib/spaces.ts new file mode 100644 index 00000000..291b8eaf --- /dev/null +++ b/packages/graph-engine/src/nodes/color/lib/spaces.ts @@ -0,0 +1,4 @@ +import Color from 'colorjs.io'; + +export const ColorSpaces = Object.keys(Color.spaces); +export type ColorSpace = keyof typeof Color.spaces; diff --git a/packages/graph-engine/src/nodes/color/lib/types.ts b/packages/graph-engine/src/nodes/color/lib/types.ts deleted file mode 100644 index e80b46dd..00000000 --- a/packages/graph-engine/src/nodes/color/lib/types.ts +++ /dev/null @@ -1,38 +0,0 @@ -export const colorSpaces = [ - 'a98rgb', - 'acescc', - 'acescg', - // "cam16", - 'hct', - 'hpluv', - 'hsl', - 'hsluv', - 'hsv', - 'hwb', - 'ictcp', - 'jzazbz', - 'jzczhz', - 'lab-d65', - 'lab', - 'lch', - 'lchuv', - 'luv', - // "okhsl", - // "okhsv", - 'oklab', - 'oklch', - 'p3-linear', - 'p3', - 'prophoto-linear', - 'prophoto', - 'rec2020-linear', - 'rec2020', - // "rec2100-hlg", - // "rec2100-pq", - 'srgb-linear', - 'srgb', - 'xyz-abs-d65', - 'xyz-d50', - 'xyz-d65' -] as const; -export type ColorSpace = (typeof colorSpaces)[number]; diff --git a/packages/graph-engine/src/nodes/color/lighten.ts b/packages/graph-engine/src/nodes/color/lighten.ts index 3f192ab1..c30316fb 100644 --- a/packages/graph-engine/src/nodes/color/lighten.ts +++ b/packages/graph-engine/src/nodes/color/lighten.ts @@ -1,6 +1,5 @@ import { Black, toColor, toColorObject } from './lib/utils.js'; import { ColorSchema, NumberSchema } from '../../schemas/index.js'; -import { ColorSpace } from './lib/types.js'; import { Color as ColorType } from '../../types.js'; import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; @@ -14,7 +13,6 @@ export default class NodeDefinition extends Node { declare inputs: ToInput<{ color: ColorType; value: number; - space: ColorSpace; }>; declare outputs: ToOutput<{ diff --git a/packages/graph-engine/src/nodes/color/mix.ts b/packages/graph-engine/src/nodes/color/mix.ts index 8648bd6c..1fbb310e 100644 --- a/packages/graph-engine/src/nodes/color/mix.ts +++ b/packages/graph-engine/src/nodes/color/mix.ts @@ -4,7 +4,7 @@ import { NumberSchema, StringSchema } from '../../schemas/index.js'; -import { ColorSpace, colorSpaces } from './lib/types.js'; +import { ColorSpace, ColorSpaces } from './lib/spaces.js'; import { Color as ColorType } from '../../types.js'; import { INodeDefinition, ToInput, ToOutput } from '../../index.js'; import { Node } from '../../programmatic/node.js'; @@ -51,7 +51,7 @@ export default class NodeDefinition extends Node { type: { ...StringSchema, default: 'srgb', - enum: Object.keys(colorSpaces), + enum: ColorSpaces, description: 'The color space we are operating in' } });