Dreamodus
60a02cb1db
React + TypeScript knob/fader library with a headless interaction core (rotary, relative-drag and track modes, wheel, keyboard, a11y), SVG primitives, nine prebuilt skins, seven-segment display engine, and a Vite showcase with gallery, live playground and API docs.
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
import { Knob } from '../components/Knob';
|
|
import { Arc } from '../primitives/Arc';
|
|
import { Face } from '../primitives/Face';
|
|
import { Pointer } from '../primitives/Pointer';
|
|
import { KnobLabel, KnobValue } from '../primitives/Text';
|
|
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
|
|
|
|
export interface FlatKnobProps extends SkinProps {
|
|
/** Accent color for the value arc and pointer. */
|
|
color?: string;
|
|
trackColor?: string;
|
|
faceColor?: string;
|
|
pointerColor?: string;
|
|
textColor?: string;
|
|
labelColor?: string;
|
|
/** Draw the value arc from 'min' or from 'center' (pan-style). */
|
|
arcFrom?: 'min' | 'center';
|
|
arcThickness?: number;
|
|
}
|
|
|
|
/** Clean 2D knob — the modern DAW/plugin look. */
|
|
export const FlatKnob: React.FC<FlatKnobProps> = ({
|
|
size = 80,
|
|
color = '#4cc2ff',
|
|
trackColor = 'rgba(255,255,255,0.12)',
|
|
faceColor = 'rgba(255,255,255,0.05)',
|
|
pointerColor,
|
|
textColor = 'rgba(255,255,255,0.92)',
|
|
labelColor = 'rgba(255,255,255,0.45)',
|
|
arcFrom = 'min',
|
|
arcThickness,
|
|
label,
|
|
showValue = true,
|
|
unit,
|
|
format,
|
|
className,
|
|
style,
|
|
...core
|
|
}) => {
|
|
const t = arcThickness ?? Math.max(3, size * 0.055);
|
|
return (
|
|
<Knob size={size} className={className} style={style} {...core}>
|
|
<Arc thickness={t} color={color} trackColor={trackColor} from={arcFrom} />
|
|
<Face radius={size / 2 - t - 5} fill={faceColor} />
|
|
<Pointer
|
|
type="line"
|
|
radius={size / 2 - t - 7}
|
|
length={size * 0.16}
|
|
width={Math.max(2.5, size * 0.04)}
|
|
color={pointerColor ?? color}
|
|
/>
|
|
{showValue && (
|
|
<KnobValue
|
|
color={textColor}
|
|
unit={unit}
|
|
format={format}
|
|
fontSize={size * 0.17}
|
|
fontFamily={MONO_FONT}
|
|
/>
|
|
)}
|
|
{label && (
|
|
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.42} fontSize={size * 0.1}>
|
|
{label}
|
|
</KnobLabel>
|
|
)}
|
|
</Knob>
|
|
);
|
|
};
|