增加HSL输入功能。
This commit is contained in:
徐涛
parent
67f220facb
commit
cac57726ff
21
src/components/ColorComponentInput.module.css
Normal file
21
src/components/ColorComponentInput.module.css
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
@layer components {
|
||||||
|
.rgb_input {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--spacing-m);
|
||||||
|
.rgb_input {
|
||||||
|
text-align: right;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.component_row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
.component_input {
|
||||||
|
flex: 1 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
234
src/components/ColorComponentInput.tsx
Normal file
234
src/components/ColorComponentInput.tsx
Normal file
|
|
@ -0,0 +1,234 @@
|
||||||
|
import { Icon } from '@iconify/react/dist/iconify.js';
|
||||||
|
import cx from 'clsx';
|
||||||
|
import { clamp, divide, floor, times, trim } from 'lodash-es';
|
||||||
|
import { ChangeEvent, useEffect, useState } from 'react';
|
||||||
|
import { useColorFunction } from '../ColorFunctionContext';
|
||||||
|
import styles from './ColorComponentInput.module.css';
|
||||||
|
|
||||||
|
type ColorComponentInputProps = {
|
||||||
|
color: string | null;
|
||||||
|
onChange: (color: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ColorComponentInput({ color, onChange }: ColorComponentInputProps) {
|
||||||
|
const { colorFn } = useColorFunction();
|
||||||
|
const [hex, setHex] = useState<string>(color ?? '000000');
|
||||||
|
const [r, setR] = useState<number>(0);
|
||||||
|
const [g, setG] = useState<number>(0);
|
||||||
|
const [b, setB] = useState<number>(0);
|
||||||
|
const [h, setH] = useState<number>(0);
|
||||||
|
const [s, setS] = useState<number>(0);
|
||||||
|
const [l, setL] = useState<number>(0);
|
||||||
|
const updateHex = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
try {
|
||||||
|
const hexValue = trim(evt.target.value, '#');
|
||||||
|
const [r, g, b] = colorFn?.represent_rgb(hexValue) ?? [0, 0, 0];
|
||||||
|
setR(r);
|
||||||
|
setG(g);
|
||||||
|
setB(b);
|
||||||
|
const [h, s, l] = colorFn?.represent_hsl(hexValue) ?? [0, 0, 0];
|
||||||
|
setH(h);
|
||||||
|
setS(s);
|
||||||
|
setL(l);
|
||||||
|
setHex(hexValue);
|
||||||
|
onChange(hexValue);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Convert HEX]', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateRGB = (colorValue: string) => {
|
||||||
|
try {
|
||||||
|
const [r, g, b] = colorFn?.represent_rgb(colorValue) ?? [0, 0, 0];
|
||||||
|
setR(r);
|
||||||
|
setG(g);
|
||||||
|
setB(b);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Convert RGB]', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateHSL = (colorValue: string) => {
|
||||||
|
try {
|
||||||
|
const [h, s, l] = colorFn?.represent_hsl(colorValue) ?? [0, 0, 0];
|
||||||
|
setH(floor(h, 1));
|
||||||
|
setS(floor(times(s, 100), 2));
|
||||||
|
setL(floor(times(l, 100), 2));
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Convert HSL]', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateR = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = clamp(parseInt(evt.target.value, 10), 0, 255);
|
||||||
|
try {
|
||||||
|
const cHex = colorFn?.rgb_to_hex(value, g, b);
|
||||||
|
setR(value);
|
||||||
|
setHex(cHex);
|
||||||
|
updateHSL(cHex);
|
||||||
|
onChange(cHex);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Update R]', e, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateG = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = clamp(parseInt(evt.target.value, 10), 0, 255);
|
||||||
|
try {
|
||||||
|
const cHex = colorFn?.rgb_to_hex(r, value, b);
|
||||||
|
setG(value);
|
||||||
|
setHex(cHex);
|
||||||
|
updateHSL(cHex);
|
||||||
|
onChange(cHex);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Update G]', e, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateB = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = clamp(parseInt(evt.target.value, 10), 0, 255);
|
||||||
|
try {
|
||||||
|
const cHex = colorFn?.rgb_to_hex(r, g, value);
|
||||||
|
setB(value);
|
||||||
|
setHex(cHex);
|
||||||
|
updateHSL(cHex);
|
||||||
|
onChange(cHex);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Update B]', e, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateH = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = parseInt(evt.target.value, 10);
|
||||||
|
if (value > 360) {
|
||||||
|
value -= 360;
|
||||||
|
}
|
||||||
|
if (value < 0) {
|
||||||
|
value += 360;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const cHex = colorFn.hsl_to_hex(value, divide(s, 100), divide(l, 100));
|
||||||
|
setH(value);
|
||||||
|
setHex(cHex);
|
||||||
|
updateRGB(cHex);
|
||||||
|
onChange(cHex);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Update Hue]', e, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateS = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = clamp(parseInt(evt.target.value, 10), 0, 100);
|
||||||
|
try {
|
||||||
|
const cHex = colorFn.hsl_to_hex(h, divide(value, 100), divide(l, 100));
|
||||||
|
setS(value);
|
||||||
|
setHex(cHex);
|
||||||
|
updateRGB(cHex);
|
||||||
|
onChange(cHex);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Update Saturation]', e, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateL = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = clamp(parseInt(evt.target.value, 10), 0, 100);
|
||||||
|
try {
|
||||||
|
const cHex = colorFn.hsl_to_hex(h, divide(s, 100), divide(value, 100));
|
||||||
|
setL(value);
|
||||||
|
setHex(cHex);
|
||||||
|
updateRGB(cHex);
|
||||||
|
onChange(cHex);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Update Lightness]', e, value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
try {
|
||||||
|
const [r, g, b] = colorFn?.represent_rgb(color) ?? [0, 0, 0];
|
||||||
|
setR(r);
|
||||||
|
setG(g);
|
||||||
|
setB(b);
|
||||||
|
const [h, s, l] = colorFn?.represent_hsl(color) ?? [0, 0, 0];
|
||||||
|
setH(floor(h, 1));
|
||||||
|
setS(floor(times(s, 100), 2));
|
||||||
|
setL(floor(times(l, 100), 2));
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Convert RGB]', e);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.rgb_input}>
|
||||||
|
<div className={cx('input_wrapper')}>
|
||||||
|
<Icon icon="tabler:hash" />
|
||||||
|
<input type="text" value={hex} onChange={updateHex} className={styles.rgb_input} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.component_row}>
|
||||||
|
<div className={cx('input_wrapper', styles.component_input)}>
|
||||||
|
<Icon icon="tabler:letter-r" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={255}
|
||||||
|
value={r}
|
||||||
|
onChange={updateR}
|
||||||
|
className={styles.rgb_input}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={cx('input_wrapper', styles.component_input)}>
|
||||||
|
<Icon icon="tabler:letter-g" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={255}
|
||||||
|
value={g}
|
||||||
|
onChange={updateG}
|
||||||
|
className={styles.rgb_input}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={cx('input_wrapper', styles.component_input)}>
|
||||||
|
<Icon icon="tabler:letter-b" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={255}
|
||||||
|
value={b}
|
||||||
|
onChange={updateB}
|
||||||
|
className={styles.rgb_input}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.component_row}>
|
||||||
|
<div className={cx('input_wrapper', styles.component_input)}>
|
||||||
|
<Icon icon="tabler:letter-h" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={360}
|
||||||
|
value={h}
|
||||||
|
onChange={updateH}
|
||||||
|
className={styles.rgb_input}
|
||||||
|
/>
|
||||||
|
<span>°</span>
|
||||||
|
</div>
|
||||||
|
<div className={cx('input_wrapper', styles.component_input)}>
|
||||||
|
<Icon icon="tabler:letter-s" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
value={s}
|
||||||
|
onChange={updateS}
|
||||||
|
className={styles.rgb_input}
|
||||||
|
/>
|
||||||
|
<Icon icon="tabler:percentage" />
|
||||||
|
</div>
|
||||||
|
<div className={cx('input_wrapper', styles.component_input)}>
|
||||||
|
<Icon icon="tabler:letter-l" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
value={l}
|
||||||
|
onChange={updateL}
|
||||||
|
className={styles.rgb_input}
|
||||||
|
/>
|
||||||
|
<Icon icon="tabler:percentage" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user