colorFromColorInputKey

Applies a keyboard step to one channel of color. Arrow Up/Right add options.step, Arrow Down/Left subtract it, Page Up/Down use options.pageStep (default: step), and Home/End jump to the range ends. The stepped value is wrapped or clamped into options.range (wrap defaults to false) and written back with colorFromColorInputChannelValue.

functionimport { colorFromColorInputKey } from '@pbroom/color-kit/driver';color-input.ts:877

function colorFromColorInputKey<Model extends ColorInputModel>(
  color: Color,
  model: Model,
  channel: ColorInputChannelFor<Model>,
  key: string,
  options: { step: number; pageStep?: number; range: [number, number]; wrap?: boolean },
): { color: Color; value: number } | null;

Parameters

colorColor
modelModel
channelColorInputChannelFor<Model>
keystring: A KeyboardEvent.key value; see ColorInputKey.
options{ step: number; pageStep?: number; range: [number, number]; wrap?: boolean }
options.stepnumber
options.pageStep?number
options.range[number, number]
options.wrap?boolean

Returns

{ color: Color; value: number } | nullThe new color and channel value, or null for any other key.

Throws

When channel does not belong to model.

Example

TypeScript

import { parse, toHex } from '@pbroom/color-kit';
import { colorFromColorInputKey } from '@pbroom/color-kit/driver';

const blue = parse('#3b82f6');
const options = { step: 10, range: [0, 255] as [number, number] };
const next = colorFromColorInputKey(blue, 'rgb', 'r', 'ArrowUp', options);
next?.value; // → 69
toHex(next!.color); // → '#4582f6'
colorFromColorInputKey(blue, 'rgb', 'r', 'Enter', options); // → null