@tokens-studio/graph-engine/dist/nodes/color/range.js

An execution engine to handle Token Studios generators and resolvers

import { Black, White, toColor, toColorObject } from './lib/utils.js';
import { ColorSchema, NumberSchema, StringSchema } from '../../schemas/index.js';
import { ColorSpaces } from './lib/spaces.js';
import { Node } from '../../programmatic/node.js';
import { arrayOf } from '../../schemas/utils.js';
import { setToPrecision } from "../../utils/precision.js";
const HUE_METHODS = [
    'shorter',
    'longer',
    'increasing',
    'decreasing',
    'raw'
];
const PROGRESSION_TYPES = ['linear', 'quadratic', 'cubic'];
const progressionFunctions = {
    linear: (p) => p,
    quadratic: (p) => p * p,
    cubic: (p) => p * p * p
};
const roundColorChannels = (color) => {
    return {
        ...color,
        channels: [
            Math.abs(setToPrecision(color.channels[0], 6)),
            Math.abs(setToPrecision(color.channels[1], 6)),
            Math.abs(setToPrecision(color.channels[2], 6))
        ],
        alpha: color.alpha ? setToPrecision(color.alpha, 6) : undefined
    };
};
export default class NodeDefinition extends Node {
    static title = 'Range';
    static type = 'studio.tokens.color.range';
    static description = 'Creates a range/gradient between two colors with customizable interpolation options';
    constructor(props) {
        super(props);
        this.addInput('colorA', {
            type: {
                ...ColorSchema,
                default: White
            }
        });
        this.addInput('colorB', {
            type: {
                ...ColorSchema,
                default: Black
            }
        });
        this.addInput('space', {
            type: {
                ...StringSchema,
                enum: ColorSpaces,
                default: 'lab'
            }
        });
        this.addInput('hue', {
            type: {
                ...StringSchema,
                enum: HUE_METHODS,
                default: 'shorter'
            }
        });
        this.addInput('steps', {
            type: {
                ...NumberSchema,
                default: 5,
                minimum: 2
            }
        });
        this.addInput('progression', {
            type: {
                ...StringSchema,
                enum: PROGRESSION_TYPES,
                default: 'linear'
            }
        });
        this.addOutput('colors', {
            type: arrayOf(ColorSchema)
        });
    }
    execute() {
        const { colorA, colorB, space, hue, steps, progression } = this.getAllInputs();
        const color1 = toColor(colorA);
        const color2 = toColor(colorB);
        const range = color1.range(color2, {
            space,
            hue,
            outputSpace: colorA.space
        });
        const progressionFn = progressionFunctions[progression];
        const colors = [];
        for (let i = 0; i < steps; i++) {
            const progress = i / (steps - 1);
            const adjustedProgress = progressionFn(progress);
            const color = range(adjustedProgress);
            // Preserve original color spaces for endpoints
            const outputSpace = i === 0 ? colorA.space : i === steps - 1 ? colorB.space : colorA.space;
            colors.push(roundColorChannels({
                ...toColorObject(color),
                space: outputSpace
            }));
        }
        this.outputs.colors.set(colors);
    }
}
//# sourceMappingURL=range.js.map