68 wiersze
2.5 KiB
TypeScript
68 wiersze
2.5 KiB
TypeScript
import React, {useEffect, useState} from "react";
|
|
import {
|
|
RandomPaletteAlgorithm,
|
|
RANDOM_PALETTE_ALGORITHMS, PaletteAlgorithmConfig,
|
|
} from "./random-colors";
|
|
|
|
export type PaletteAlgorithmWidgetProps = {
|
|
value: RandomPaletteAlgorithm;
|
|
onChange: (value: RandomPaletteAlgorithm) => void;
|
|
onPaletteConfigChange: (value: PaletteAlgorithmConfig) => void;
|
|
};
|
|
|
|
export const PaletteAlgorithmWidget: React.FC<PaletteAlgorithmWidgetProps> = ({
|
|
value,
|
|
onChange,
|
|
onPaletteConfigChange = () => {}
|
|
}) => {
|
|
const id = "algorithm";
|
|
const [paletteConfig, setPaletteConfig] = useState<PaletteAlgorithmConfig>({
|
|
hue: 120,
|
|
hueInterval: 15,
|
|
saturation: 50,
|
|
valueMin: 20,
|
|
valueMax: 80,
|
|
});
|
|
useEffect(() => {
|
|
onPaletteConfigChange(paletteConfig);
|
|
}, [paletteConfig])
|
|
|
|
return (
|
|
<div className="flex-widget thingy">
|
|
{value === "threevals" && (
|
|
<div className="flex-widget thingy">
|
|
<label>Hue {paletteConfig.hue}</label>
|
|
<input type="range" min="0" max="360" value={paletteConfig.hue}
|
|
onChange={(e) => setPaletteConfig({...paletteConfig, hue: Number(e.target.value) }) } />
|
|
<label>Hue Interval {paletteConfig.hueInterval}</label>
|
|
<input type="range" min="0" max="120" value={paletteConfig.hueInterval}
|
|
onChange={(e) => setPaletteConfig({...paletteConfig, hueInterval: Number(e.target.value) }) }
|
|
/>
|
|
<label>Value min {paletteConfig.valueMin}</label>
|
|
<input type="range" min="0" max="100" value={paletteConfig.valueMin}
|
|
onChange={(e) => setPaletteConfig({...paletteConfig, valueMin: Number(e.target.value) }) }
|
|
/>
|
|
<label>Value Max {paletteConfig.valueMax}</label>
|
|
<input type="range" min="0" max="100" value={paletteConfig.valueMax}
|
|
onChange={(e) => setPaletteConfig({...paletteConfig, valueMax: Number(e.target.value) }) }
|
|
/>
|
|
<label>Saturation {paletteConfig.saturation}</label>
|
|
<input type="range" min="0" max="100" value={paletteConfig.saturation}
|
|
onChange={(e) => setPaletteConfig({...paletteConfig, saturation: Number(e.target.value) }) }
|
|
/></div>)}
|
|
<label htmlFor={id}>Palette algorithm: </label>
|
|
<select
|
|
id={id}
|
|
onChange={(e) => onChange(e.target.value as RandomPaletteAlgorithm)}
|
|
value={value}
|
|
>
|
|
{RANDOM_PALETTE_ALGORITHMS.map((choice) => (
|
|
<option key={choice} value={choice}>
|
|
{choice}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|