326 lines
12 KiB
TypeScript
326 lines
12 KiB
TypeScript
import { useEffect, useRef, useState, type CSSProperties, type InputHTMLAttributes, type KeyboardEvent, type PointerEvent } from "react";
|
||
import { cn } from "./cn.js";
|
||
import { Dropdown } from "./Dropdown.js";
|
||
|
||
export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
|
||
label: string;
|
||
value: number;
|
||
min: number;
|
||
max: number;
|
||
formatValue?: (value: number) => string;
|
||
onChange: (value: number) => void;
|
||
}
|
||
|
||
const clampRangeValue = (value: number, min: number, max: number) => (
|
||
Math.max(min, Math.min(max, value))
|
||
);
|
||
|
||
const decimalPlaces = (value: number) => {
|
||
const [coefficient, exponentText] = String(value).toLowerCase().split("e");
|
||
const coefficientDecimals = coefficient?.split(".")[1]?.length ?? 0;
|
||
if (exponentText === undefined) return coefficientDecimals;
|
||
const exponent = Number.parseInt(exponentText, 10);
|
||
if (!Number.isFinite(exponent)) return coefficientDecimals;
|
||
return Math.max(0, coefficientDecimals - exponent);
|
||
};
|
||
|
||
const normalizeEditedRangeValue = (
|
||
value: number,
|
||
min: number,
|
||
max: number,
|
||
step: RangeControlProps["step"],
|
||
) => {
|
||
const clamped = clampRangeValue(value, min, max);
|
||
if (step === "any") return clamped;
|
||
const numericStep = step === undefined ? 1 : Number(step);
|
||
if (!Number.isFinite(numericStep) || numericStep <= 0) return clamped;
|
||
const precision = Math.min(12, Math.max(decimalPlaces(min), decimalPlaces(numericStep)));
|
||
const aligned = min + Math.round((clamped - min) / numericStep) * numericStep;
|
||
return clampRangeValue(Number(aligned.toFixed(precision)), min, max);
|
||
};
|
||
|
||
const editableNumber = (value: number) => (
|
||
Number.isInteger(value) ? String(value) : String(Number(value.toFixed(12)))
|
||
);
|
||
|
||
export function RangeControl({
|
||
label,
|
||
value,
|
||
min,
|
||
max,
|
||
step,
|
||
formatValue = String,
|
||
onChange,
|
||
className,
|
||
disabled = false,
|
||
tabIndex,
|
||
...props
|
||
}: RangeControlProps) {
|
||
const rangeRef = useRef<HTMLInputElement>(null);
|
||
const editorRef = useRef<HTMLInputElement>(null);
|
||
const cancelNextBlurRef = useRef(false);
|
||
const [editing, setEditing] = useState(false);
|
||
const [draft, setDraft] = useState(() => editableNumber(value));
|
||
const safeMax = max === min ? min + 1 : max;
|
||
const progress = Math.max(0, Math.min(100, ((value - min) / (safeMax - min)) * 100));
|
||
const displayValue = formatValue(value);
|
||
const editorCharacters = Math.max(
|
||
1,
|
||
Math.min(14, editing ? draft.length || editableNumber(value).length : displayValue.length),
|
||
);
|
||
const style = {
|
||
"--nodedc-range-progress": `${progress}%`,
|
||
"--nodedc-range-editor-characters": editorCharacters,
|
||
} as CSSProperties;
|
||
|
||
useEffect(() => {
|
||
if (!editing) setDraft(editableNumber(value));
|
||
}, [editing, value]);
|
||
|
||
const finishEditing = (commit: boolean, restoreRangeFocus: boolean) => {
|
||
if (commit) {
|
||
const parsed = Number(draft.trim().replace(",", "."));
|
||
if (Number.isFinite(parsed)) onChange(normalizeEditedRangeValue(parsed, min, max, step));
|
||
}
|
||
setEditing(false);
|
||
if (restoreRangeFocus) requestAnimationFrame(() => rangeRef.current?.focus());
|
||
};
|
||
|
||
const handleEditorKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
|
||
event.stopPropagation();
|
||
if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
event.currentTarget.blur();
|
||
}
|
||
if (event.key === "Escape") {
|
||
event.preventDefault();
|
||
cancelNextBlurRef.current = true;
|
||
setDraft(editableNumber(value));
|
||
setEditing(false);
|
||
event.currentTarget.blur();
|
||
requestAnimationFrame(() => rangeRef.current?.focus());
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={cn("nodedc-range", className)} style={style} data-editing={editing || undefined}>
|
||
<input
|
||
ref={rangeRef}
|
||
{...props}
|
||
type="range"
|
||
value={value}
|
||
min={min}
|
||
max={safeMax}
|
||
step={step}
|
||
disabled={disabled}
|
||
tabIndex={editing ? -1 : tabIndex}
|
||
aria-label={label}
|
||
aria-valuetext={displayValue}
|
||
onChange={(event) => onChange(Number(event.target.value))}
|
||
/>
|
||
<span className="nodedc-range__label">{label}</span>
|
||
<span className="nodedc-range__value">{displayValue}</span>
|
||
<span className="nodedc-range__fill-text" aria-hidden="true">
|
||
<span className="nodedc-range__label">{label}</span>
|
||
<span className="nodedc-range__value">{displayValue}</span>
|
||
</span>
|
||
<input
|
||
ref={editorRef}
|
||
className="nodedc-range__editor"
|
||
type="text"
|
||
inputMode="decimal"
|
||
value={editing ? draft : editableNumber(value)}
|
||
aria-label={`${label}: точное значение`}
|
||
disabled={disabled}
|
||
spellCheck={false}
|
||
data-active={editing || undefined}
|
||
onPointerDown={() => {
|
||
if (!editing) {
|
||
setDraft(editableNumber(value));
|
||
setEditing(true);
|
||
}
|
||
}}
|
||
onFocus={() => {
|
||
if (!editing) {
|
||
setDraft(editableNumber(value));
|
||
setEditing(true);
|
||
}
|
||
}}
|
||
onChange={(event) => setDraft(event.target.value)}
|
||
onKeyDown={handleEditorKeyDown}
|
||
onBlur={() => {
|
||
if (cancelNextBlurRef.current) {
|
||
cancelNextBlurRef.current = false;
|
||
return;
|
||
}
|
||
finishEditing(true, false);
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export interface ColorFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
label?: string;
|
||
}
|
||
|
||
type Hsv = { h: number; s: number; v: number };
|
||
|
||
const palettePresets = ["#ff2f92", "#ff6caf", "#d746ff", "#7a3cff", "#4ea4ff", "#35d7c1", "#c3ff66", "#ffffff", "#404040", "#111116"];
|
||
|
||
function clamp(value: number, min: number, max: number) {
|
||
return Math.max(min, Math.min(max, value));
|
||
}
|
||
|
||
function parseHexColor(value: string): [number, number, number] | null {
|
||
const match = /^#?([0-9a-f]{6})$/i.exec(value.trim());
|
||
if (!match) return null;
|
||
const hex = match[1];
|
||
return [
|
||
Number.parseInt(hex.slice(0, 2), 16),
|
||
Number.parseInt(hex.slice(2, 4), 16),
|
||
Number.parseInt(hex.slice(4, 6), 16),
|
||
];
|
||
}
|
||
|
||
function hexToHsv(value: string): Hsv | null {
|
||
const rgb = parseHexColor(value);
|
||
if (!rgb) return null;
|
||
const [red, green, blue] = rgb.map((channel) => channel / 255) as [number, number, number];
|
||
const max = Math.max(red, green, blue);
|
||
const min = Math.min(red, green, blue);
|
||
const delta = max - min;
|
||
let hue = 0;
|
||
if (delta) {
|
||
if (max === red) hue = 60 * (((green - blue) / delta) % 6);
|
||
else if (max === green) hue = 60 * ((blue - red) / delta + 2);
|
||
else hue = 60 * ((red - green) / delta + 4);
|
||
}
|
||
return { h: (hue + 360) % 360, s: max === 0 ? 0 : (delta / max) * 100, v: max * 100 };
|
||
}
|
||
|
||
function hsvToHex({ h, s, v }: Hsv): string {
|
||
const hue = ((h % 360) + 360) % 360;
|
||
const saturation = clamp(s, 0, 100) / 100;
|
||
const value = clamp(v, 0, 100) / 100;
|
||
const chroma = value * saturation;
|
||
const component = (hue / 60) % 2;
|
||
const match = chroma * (1 - Math.abs(component - 1));
|
||
const base = hue < 60 ? [chroma, match, 0]
|
||
: hue < 120 ? [match, chroma, 0]
|
||
: hue < 180 ? [0, chroma, match]
|
||
: hue < 240 ? [0, match, chroma]
|
||
: hue < 300 ? [match, 0, chroma]
|
||
: [chroma, 0, match];
|
||
const offset = value - chroma;
|
||
return `#${base.map((channel) => Math.round((channel + offset) * 255).toString(16).padStart(2, "0")).join("")}`;
|
||
}
|
||
|
||
export function ColorField({ value, onChange, label = "Цвет", className, disabled = false, ...props }: ColorFieldProps) {
|
||
const validColor = hexToHsv(value);
|
||
const [hsv, setHsv] = useState<Hsv>(() => validColor ?? { h: 330, s: 82, v: 100 });
|
||
const style = { "--nodedc-color-value": validColor ? hsvToHex(validColor) : hsvToHex(hsv) } as CSSProperties;
|
||
|
||
useEffect(() => {
|
||
if (validColor) setHsv(validColor);
|
||
}, [value, validColor?.h, validColor?.s, validColor?.v]);
|
||
|
||
const commit = (next: Hsv) => {
|
||
const normalized = { h: clamp(next.h, 0, 360), s: clamp(next.s, 0, 100), v: clamp(next.v, 0, 100) };
|
||
setHsv(normalized);
|
||
onChange(hsvToHex(normalized));
|
||
};
|
||
|
||
const updateSpectrum = (event: PointerEvent<HTMLDivElement>) => {
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
commit({ ...hsv, s: ((event.clientX - rect.left) / rect.width) * 100, v: 100 - ((event.clientY - rect.top) / rect.height) * 100 });
|
||
};
|
||
|
||
return (
|
||
<div className={cn("nodedc-color-field", className)} style={style}>
|
||
<Dropdown
|
||
className="nodedc-color-field__dropdown"
|
||
placement="bottom-start"
|
||
minWidth={296}
|
||
width={296}
|
||
disabled={disabled}
|
||
surfaceRole="dialog"
|
||
surfaceClassName="nodedc-color-palette-surface"
|
||
trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
|
||
<button
|
||
ref={setTriggerRef}
|
||
type="button"
|
||
className="nodedc-color-field__picker"
|
||
aria-label={`Выбрать ${label}`}
|
||
aria-haspopup="dialog"
|
||
aria-controls={surfaceId}
|
||
aria-expanded={open}
|
||
data-open={open ? "true" : undefined}
|
||
disabled={disabled}
|
||
onClick={toggle}
|
||
><span aria-hidden="true" /></button>
|
||
)}
|
||
>
|
||
<div className="nodedc-color-palette" aria-label={`Палитра: ${label}`}>
|
||
<div
|
||
className="nodedc-color-palette__spectrum"
|
||
role="slider"
|
||
tabIndex={disabled ? -1 : 0}
|
||
aria-label={`${label}: насыщенность и яркость`}
|
||
aria-valuetext={hsvToHex(hsv)}
|
||
style={{ "--nodedc-color-hue": hsvToHex({ h: hsv.h, s: 100, v: 100 }), "--nodedc-color-s": `${hsv.s}%`, "--nodedc-color-v": `${100 - hsv.v}%` } as CSSProperties}
|
||
onPointerDown={(event) => {
|
||
if (disabled) return;
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
updateSpectrum(event);
|
||
}}
|
||
onPointerMove={(event) => {
|
||
if (event.currentTarget.hasPointerCapture(event.pointerId)) updateSpectrum(event);
|
||
}}
|
||
onPointerUp={(event) => {
|
||
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
||
}}
|
||
onKeyDown={(event) => {
|
||
const delta = event.shiftKey ? 10 : 2;
|
||
if (event.key === "ArrowLeft") { event.preventDefault(); commit({ ...hsv, s: hsv.s - delta }); }
|
||
if (event.key === "ArrowRight") { event.preventDefault(); commit({ ...hsv, s: hsv.s + delta }); }
|
||
if (event.key === "ArrowDown") { event.preventDefault(); commit({ ...hsv, v: hsv.v - delta }); }
|
||
if (event.key === "ArrowUp") { event.preventDefault(); commit({ ...hsv, v: hsv.v + delta }); }
|
||
}}
|
||
><span className="nodedc-color-palette__marker" aria-hidden="true" /></div>
|
||
<label className="nodedc-color-palette__hue">
|
||
<span>Оттенок</span>
|
||
<input type="range" min={0} max={360} value={Math.round(hsv.h)} aria-label={`${label}: оттенок`} disabled={disabled} onChange={(event) => commit({ ...hsv, h: Number(event.target.value) })} />
|
||
</label>
|
||
<div className="nodedc-color-palette__presets" aria-label="Быстрые цвета">
|
||
{palettePresets.map((preset) => (
|
||
<button
|
||
key={preset}
|
||
type="button"
|
||
aria-label={`Выбрать ${preset}`}
|
||
aria-pressed={hsvToHex(hsv).toLowerCase() === preset}
|
||
style={{ "--nodedc-palette-swatch": preset } as CSSProperties}
|
||
onClick={() => {
|
||
const next = hexToHsv(preset);
|
||
if (next) commit(next);
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Dropdown>
|
||
<input
|
||
className="nodedc-color-field__text"
|
||
value={value}
|
||
aria-label={`${label}: HEX`}
|
||
disabled={disabled}
|
||
spellCheck={false}
|
||
onChange={(event) => onChange(event.target.value)}
|
||
{...props}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|